/*
Theme Name: FolkCalendar
Theme URI: https://folkcalendar.org
Description: A simple, mobile-first theme for the FolkCalendar listings platform. Session and venue pages, upcoming-dates feeds, and widget areas for ads. Requires the FolkCalendar and FolkCalendar: Sessions plugins.
Version: 0.1.196
Requires at least: 6.4
Requires PHP: 8.1
Author: FolkCalendar
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: folkcalendar
*/

/* ==========================================================================
   1. Design tokens
   Change these and the whole theme follows. Colours are the main lever; the
   dark palette below only needs to override the colour tokens.
   ========================================================================== */

:root {
	/* Surfaces and text */
	--fc-bg: #f7f1e3;          /* page: warm cream */
	--fc-surface: #fffdf8;     /* cards */
	--fc-ink: #2a221b;         /* body text */
	--fc-muted: #6b5f52;       /* secondary text */
	--fc-line: #e3d8c2;        /* hairlines between things: decorative */

	/* The edge of something you can operate - a field, a button, a pill.
	   WCAG 1.4.11 wants 3:1 against what is behind it, because that edge is
	   how you tell where the control is and how big it is. --fc-line is 1.25:1
	   and was doing this job as well as its own; it is fine for a card's
	   hairline, which nobody has to find. */
	--fc-control-line: #8f7f66;

	/* Focus. Amber reads beautifully on the dark palette and almost vanishes
	   on the cream one (1.84:1), so this follows the mode rather than the
	   brand. Overridden on the green header below, where neither works. */
	--fc-focus: #24513a;

	/* Brand */
	--fc-primary: #24513a;     /* bottle green: header, hero, date chips */
	--fc-on-primary: #f7f1e3;
	--fc-link: #24513a;
	--fc-tint: #e2eee4;        /* pale green: time blocks */
	--fc-on-tint: #1b3d2b;

	/* Accent: buttons, "next up" highlight */
	--fc-accent: #e8a936;      /* harvest amber */
	--fc-on-accent: #2a221b;
	--fc-accent-tint: #fbefd2;
	--fc-parchment: #f3ead3;   /* the old calendars' lore */
	--fc-parchment-edge: #b8955a;
	/* Morris on the calendar: heather, apart from a session's green and a custom's amber */
	--fc-morris: #7a3e6a;
	--fc-morris-tint: #f3e3ee;
	--fc-club: #2f5d8a;
	--fc-club-tint: #e2ecf6;
	--fc-dance: #1d6b70;
	--fc-dance-tint: #ddefee;

	/* Status */
	--fc-danger: #a23b3b;      /* cancelled */
	--fc-danger-tint: #f8e3e0;
	--fc-you: #2c6fb7;         /* the reader's own dot on a map: not a pin colour */

	--fc-chip: #f0e8d4;

	/* Copies of tokens the find-sessions plugin CSS redeclares on .fc-find
	   (--fc-surface, --fc-muted, --fc-accent, --fc-radius), under names it
	   does not touch, so section 10 can hand the theme's values back to it.
	   Follow the tokens above automatically, dark mode included. */
	--fc-card: var(--fc-surface);
	--fc-quiet: var(--fc-muted);
	--fc-amber: var(--fc-accent);
	--fc-round: var(--fc-radius);

	/* Shape and type */
	--fc-radius: 14px;
	--fc-gap: 16px;
	--fc-wrap: 44rem;
	--fc-shadow: 0 1px 2px rgba(42, 34, 27, 0.06);
	--fc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--fc-font-display: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fc-bg: #16130f;
		--fc-surface: #211d17;
		--fc-ink: #f0e8d8;
		--fc-muted: #b8ac96;
		--fc-line: #3a3226;
		--fc-control-line: #7f7463;
		--fc-focus: #e8a936;
		--fc-primary: #1c3f2c;
		--fc-on-primary: #f0e8d8;
		--fc-link: #93c9a4;
		--fc-tint: #24392b;
		--fc-on-tint: #d5ecdb;
		--fc-accent-tint: #3a2f17;
		--fc-parchment: #2a2419;
		--fc-parchment-edge: #8a6d3b;
		--fc-morris: #d9a3c9;
		--fc-morris-tint: #3a2433;
		--fc-club: #9cc0e4;
		--fc-club-tint: #22313f;
		--fc-dance: #8fd3d1;
		--fc-dance-tint: #1b3333;
		--fc-danger: #ee8c85;
		--fc-danger-tint: #3b2321;
		--fc-you: #7fb2ea;
		--fc-chip: #2c261d;
		--fc-shadow: none;
	}
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--fc-bg);
	color: var(--fc-ink);
	font: 1rem/1.55 var(--fc-font);
}

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

a {
	color: var(--fc-link);
}

/*
 * One focus ring for everything you can reach with a keyboard. Form controls
 * were missing from this list and fell back to whatever the browser draws,
 * which on these custom field backgrounds is not reliably visible.
 */
a:focus-visible,
summary:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--fc-focus);
	outline-offset: 2px;
}

/*
 * A link to somewhere else on the same page travels there rather than
 * teleporting. "Is it yours? Claim it" sits above the dates and the map and
 * lands most of a screen further down; jumping that distance with no motion
 * reads as the page having reloaded into something else, and the reader has
 * to work out where they are before they can read what they arrived at.
 *
 * no-preference rather than a reduce override, so the instant jump stays the
 * default for anyone who has asked for less motion and smooth is the opt-in.
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Room above whatever was jumped to, so it does not land against the edge. */
:target {
	scroll-margin-top: 24px;
}

h1,
h2,
h3 {
	margin: 0 0 0.5em;
	font-family: var(--fc-font-display);
	line-height: 1.2;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1em; }

address { font-style: normal; }

.wrap {
	width: 100%;
	max-width: var(--fc-wrap);
	margin-inline: auto;
	padding-inline: var(--fc-gap);
}

.site-main {
	padding-block: var(--fc-gap) 32px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 16px;
	clip-path: none;
	background: var(--fc-accent);
	color: var(--fc-on-accent);
	font-weight: 700;
}

/* ==========================================================================
   3. Header and footer
   ========================================================================== */

.site-header {
	background: var(--fc-primary);
	color: var(--fc-on-primary);

	/* The green ring is invisible against the green bar it would sit on. */
	--fc-focus: var(--fc-on-primary);
}

/*
 * Brand, main menu, account link. Wider than the content column, as a
 * header usually is, so the menu has room beside the brand.
 *
 * On a narrow screen the brand, the account link and the Menu button share
 * the top row - the brand gives up width rather than anything wrapping - and
 * the menu drops into a panel beneath. See "Main menu" below.
 */
.site-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 12px;
	width: 100%;
	max-width: 72rem;
	margin-inline: auto;
	padding: 8px var(--fc-gap);
}

.site-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	/* Shrinkable, and allowed to go below its content width, which a flex
	   item will not do on its own. */
	min-width: 0;
	color: inherit;
	font-family: var(--fc-font-display);
	font-size: 1.4rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.site-brand__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The accordion-calendar mark. The PNG is only a stencil: it is painted in
   the brand's text colour (currentcolor), so it follows the theme, dark mode
   included. Change its colour by setting `color` on .site-brand__mark. */
.site-brand__mark {
	display: none;
}

@supports (mask-image: url("x.png")) or (-webkit-mask-image: url("x.png")) {
	.site-brand__mark {
		display: block;
		flex: none;
		width: 38px;
		height: 38px;
		background: currentcolor;
		-webkit-mask: url("assets/img/logo-mark.png") center / contain no-repeat;
		mask: url("assets/img/logo-mark.png") center / contain no-repeat;
	}
}

/*
 * Brand and account link step down together on a narrow screen so the two
 * always fit on one line. After the @supports block above on purpose: that
 * one sets the mark's size at the same specificity, and the later rule wins.
 *
 * 26rem rather than a phone breakpoint, because this is about how much room
 * these two need side by side, not about what kind of device it is.
 */
@media (max-width: 26rem) {
	.site-header__bar {
		gap: 0 8px;
	}

	/* Down with the screen's width below about 375px, as a first guess;
	   assets/nav.js then sizes the name to fit whole in the room left. */
	.site-brand {
		font-size: min(1.15rem, 4.9vw);
		gap: 8px;
	}

	.site-nav__toggle {
		padding: 0 10px;
	}

	.site-brand__mark {
		width: 30px;
		height: 30px;
	}

	/* Set by assets/nav.js when the name would not fit whole even at its
	   smallest: the mark gives up its room first. */
	.site-brand.is-tight .site-brand__mark {
		display: none;
	}

	.site-account {
		padding: 0 12px;
		font-size: 0.9375rem;
	}

	/* The three bars say "menu" on their own; the word would push the
	   brand off a small phone. Still read out. */
	.site-nav__toggle-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.custom-logo {
	max-height: 40px;
	width: auto;
}

/* The one thing in the header that is about the reader: "Your sessions", or
   "Sign in". It stays on the brand's row at every width - there is only ever
   one of it, so it never needs a row of its own the way the browse links
   did. */
.site-account {
	display: inline-flex;
	align-items: center;
	/* Never the thing that shrinks: it is already the shorter of the two and
	   a squeezed button stops reading as a button. */
	flex: none;
	min-height: 44px;
	padding: 0 14px;
	border: 2px solid currentcolor;
	border-radius: 999px;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.site-account:hover {
	background: rgba(255, 255, 255, 0.16);
}

/* --------------------------------------------------------------------------
   Main menu
   The site owner's primary menu, in the header. Two levels: a second level
   is a drop-down on a wide screen and opens in place in the narrow-screen
   panel. assets/nav.js adds the Menu button's behaviour and a button beside
   each item with a second level; without it the menu shows, open, and a
   second level opens on hover and keyboard focus.
   -------------------------------------------------------------------------- */

.site-brand,
.custom-logo-link {
	order: 1;
	margin-right: auto;
}

.site-account {
	order: 2;
}

.site-nav__toggle {
	display: none;
	order: 3;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.site-nav__toggle:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* Three bars that turn into a cross while the menu is open. */
.site-nav__bars,
.site-nav__bars::before,
.site-nav__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentcolor;
}

.site-nav__bars {
	position: relative;
}

.site-nav__bars::before,
.site-nav__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.site-nav__bars::before {
	top: -6px;
}

.site-nav__bars::after {
	top: 6px;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__bars {
	background: transparent;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

.site-nav {
	order: 4;
	flex-basis: 100%;
}

.site-nav__menu,
.site-nav .sub-menu,
.site-nav .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2px;
}

.site-nav li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.site-nav a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 8px;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.site-nav a:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* Where you are: the page, or the section a page belongs to. */
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a,
.site-nav .current_page_item > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* The button beside an item with a second level, holding a chevron. */
.site-nav__sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.site-nav__sub-toggle:hover {
	background: rgba(255, 255, 255, 0.12);
}

.site-nav__chevron {
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transform: rotate(45deg);
}

.site-nav__sub-toggle[aria-expanded="true"] .site-nav__chevron {
	margin-top: 4px;
	transform: rotate(-135deg);
}

/*
 * Narrow screens: the header stays at the top while the page scrolls, and
 * the menu is a panel under the bar, one item per row.
 *
 * --fc-header-h is the bar's height (8px padding either side of 44px
 * items), for anything else that sticks to the top or is scrolled to, so it
 * lands below the header rather than under it.
 */
@media (max-width: 55.99rem) {
	:root {
		--fc-header-h: 60px;
	}

	html {
		scroll-padding-top: var(--fc-header-h);
	}

	.site-header {
		position: sticky;
		top: 0;
		/* Above the sticky day headings; below a full-screen map. */
		z-index: 30;
	}

	/* The brand takes what is left of the top row after the account link
	   and the Menu button, from a basis of nothing, so the row never wraps:
	   a long site name shrinks to fit and ends in an ellipsis. */
	.site-brand,
	.custom-logo-link {
		flex: 1 1 0;
		min-width: 0;
	}

	.custom-logo {
		max-width: 100%;
		object-fit: contain;
		object-position: left center;
	}

	/* An open menu taller than the screen scrolls inside the header, which
	   would otherwise hold its foot out of reach. */
	.js .site-nav.is-open {
		max-height: calc(100vh - var(--fc-header-h));
		max-height: calc(100dvh - var(--fc-header-h));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.js .site-nav__toggle {
		display: inline-flex;
	}

	.js .site-nav {
		display: none;
	}

	.js .site-nav.is-open {
		display: block;
	}

	.site-nav__menu {
		flex-direction: column;
		margin-top: 8px;
		padding-block: 8px;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}

	.site-nav li {
		width: 100%;
	}

	.site-nav a {
		flex: 1;
	}

	.site-nav .sub-menu,
	.site-nav .children {
		width: 100%;
		padding-left: 16px;
	}

	.js .site-nav .sub-menu,
	.js .site-nav .children {
		display: none;
	}

	.js .site-nav .is-open > .sub-menu,
	.js .site-nav .is-open > .children {
		display: block;
	}
}

/* WordPress's toolbar is fixed from 601px wide (below that it scrolls away),
   so there the sticky header sits under it. */
@media (min-width: 601px) and (max-width: 55.99rem) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (min-width: 783px) and (max-width: 55.99rem) {
	.admin-bar .site-header {
		top: 32px;
	}
}

/* Wide screens: brand, menu, account in a row; a second level drops down. */
@media (min-width: 56rem) {
	.site-header__bar {
		flex-wrap: nowrap;
	}

	.site-brand,
	.custom-logo-link {
		margin-right: 12px;
	}

	.site-nav {
		order: 2;
		flex: 1 1 auto;
	}

	.site-account {
		order: 3;
	}

	.site-nav__sub-toggle {
		width: 28px;
		margin-left: -8px;
	}

	.site-nav .sub-menu,
	.site-nav .children {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 20;
		min-width: 14rem;
		padding: 6px;
		border: 1px solid var(--fc-line);
		border-radius: 10px;
		background: var(--fc-surface);
		box-shadow: 0 8px 24px rgba(42, 34, 27, 0.16);
		color: var(--fc-ink);

		/* The header's pale ring would vanish on the pale panel. */
		--fc-focus: var(--fc-link);
	}

	.site-nav li:hover > .sub-menu,
	.site-nav li:focus-within > .sub-menu,
	.site-nav li.is-open > .sub-menu,
	.site-nav li:hover > .children,
	.site-nav li:focus-within > .children,
	.site-nav li.is-open > .children {
		display: block;
	}

	.site-nav .sub-menu li,
	.site-nav .children li {
		width: 100%;
	}

	.site-nav .sub-menu a,
	.site-nav .children a {
		flex: 1;
		font-weight: 500;
		white-space: nowrap;
	}

	.site-nav .sub-menu a:hover,
	.site-nav .children a:hover {
		background: var(--fc-tint);
		color: var(--fc-on-tint);
	}
}

/* --------------------------------------------------------------------------
   Search box (inc/search.php)
   In the header: at the foot of the Menu panel on a narrow screen, at the
   end of the menu on a wide one. On the results page: full width, on the
   page's own colours.
   -------------------------------------------------------------------------- */

.site-search {
	display: flex;
	align-items: stretch;
	min-width: 0;
}

.site-search__field {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 0 14px;
	border: 2px solid var(--fc-control-line);
	border-right: 0;
	border-radius: 999px 0 0 999px;
	background: var(--fc-surface);
	color: var(--fc-ink);
	font: inherit;
	/* 16px or more, or iOS zooms the page on focus. */
	font-size: 1rem;
}

.site-search__field::-webkit-search-cancel-button {
	cursor: pointer;
}

.site-search__button {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	border: 2px solid var(--fc-accent);
	border-radius: 0 999px 999px 0;
	background: var(--fc-accent);
	color: var(--fc-on-accent);
	cursor: pointer;
}

.site-search--header {
	margin: 4px 0 12px;
}

.site-search--header .site-search__field {
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.12);
	color: var(--fc-on-primary);
}

.site-search--header .site-search__field::placeholder {
	color: var(--fc-on-primary);
	opacity: 0.75;
}

.site-search--header .site-search__field:focus {
	background: var(--fc-surface);
	color: var(--fc-ink);
}

.site-search--header .site-search__field:focus::placeholder {
	color: var(--fc-muted);
}

.site-search--page {
	margin: 0 0 var(--fc-gap);
}

@media (min-width: 56rem) {
	.site-nav {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	/* Only the magnifier, a circle like the account button beside it, so
	   the menu keeps its one line. Opened (nav.js adds .is-open, or focus
	   inside it without script), the field lies over the end of the menu
	   with the magnifier at its right-hand end. */
	.site-search--header {
		position: relative;
		flex: none;
		margin: 0 0 0 auto;
	}

	.site-search--header .site-search__button {
		position: relative;
		z-index: 2;
		width: 44px;
		height: 44px;
		border: 2px solid currentcolor;
		border-radius: 50%;
		background: transparent;
		color: var(--fc-on-primary);
	}

	.site-search--header .site-search__button:hover {
		background: rgba(255, 255, 255, 0.16);
	}

	.site-search--header .site-search__field {
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		width: min(24rem, 45vw);
		height: 44px;
		min-height: 0;
		padding-right: 56px;
		border: 2px solid var(--fc-accent);
		border-radius: 999px;
		background: var(--fc-surface);
		color: var(--fc-ink);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
		visibility: hidden;
		opacity: 0;
	}

	.site-search--header .site-search__field::placeholder {
		color: var(--fc-muted);
	}

	.site-search--header.is-open .site-search__field,
	html:not(.js) .site-search--header:focus-within .site-search__field {
		visibility: visible;
		opacity: 1;
	}

	.site-search--header.is-open .site-search__button,
	html:not(.js) .site-search--header:focus-within .site-search__button {
		border-color: var(--fc-accent);
		background: var(--fc-accent);
		color: var(--fc-on-accent);
	}
}

/* The results page: a heading per kind with its count, "See all" under. */
.fc-search-group {
	margin: 0 0 calc(var(--fc-gap) * 2);
}

.fc-search-group__title {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 10px;
}

.fc-search-group__count {
	padding: 1px 9px;
	border-radius: 999px;
	background: var(--fc-chip);
	color: var(--fc-muted);
	font: 600 0.85rem/1.5 var(--fc-font);
}

.fc-search-group__more {
	margin: 10px 0 0;
	font-weight: 600;
}

.fc-search-head__back {
	margin: 0 0 var(--fc-gap);
}

.fc-search-result__line {
	margin: 6px 0 0;
	font-size: 0.95rem;
}

@media (prefers-reduced-motion: no-preference) {
	.site-nav__bars::before,
	.site-nav__bars::after,
	.site-nav__chevron {
		transition: transform 0.15s ease, top 0.15s ease, margin 0.15s ease;
	}
}

.site-footer {
	padding-block: 24px 40px;
	border-top: 1px solid var(--fc-line);
	color: var(--fc-muted);
	font-size: 0.9rem;
}

.site-footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.site-footer a {
	color: inherit;
}

.site-footer p {
	margin: 0;
}

/* The links, map key and stats, with the social icons: on a phone one
   column, the icons beneath the rest; from 40rem two, the icons in a row
   at the top of a column of their own on the right. */
.site-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.site-footer__main {
	flex: 1;
	min-width: 0;
}

/* Facebook, X and Instagram, then the contact address beneath them. */
.site-footer__aside {
	flex: none;
}

/* The icons only, each a 44px tap target. */
.site-footer .site-footer__social {
	gap: 4px;
	margin: 0 0 4px -12px;
}

@media (min-width: 40rem) {
	.site-footer__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
	}

	.site-footer__aside {
		text-align: right;
	}

	.site-footer .site-footer__social {
		justify-content: flex-end;
		margin: -10px -12px 4px 0;
	}
}

.site-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
	color: var(--fc-ink);
	background: var(--fc-chip);
}

/* Map key: the map's pins at a smaller size, each beside what it marks. */
.site-footer__key {
	margin-bottom: 12px;
}

.site-footer__key-title {
	margin: 0 0 6px;
	font: 600 0.9rem/1.3 var(--fc-font);
	color: var(--fc-ink);
}

.site-footer .site-footer__key ul {
	gap: 8px 20px;
	margin: 0;
}

.site-footer__key li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.site-footer__key .fc-pin {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

.site-footer__key .fc-pin span {
	transform: rotate(-45deg) scale(0.7);
}

.site-footer__key .fc-pin--lore span {
	transform: scale(0.75);
}

/* The last row, under both columns: the privacy policy and "Cookie
   settings" (footer.php leaves those out when there is neither), then the
   copyright, all on one line where there is room. */
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--fc-line);
}

.site-footer .site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}

.fc-stats a {
	text-decoration: none;
}

.fc-stats a:hover,
.fc-stats a:focus-visible {
	text-decoration: underline;
}

.fc-stats strong {
	color: var(--fc-ink);
}

/* ==========================================================================
   4. Shared components
   ========================================================================== */

.eyebrow {
	margin: 0 0 4px;
	color: var(--fc-muted);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * The breadcrumb above a title: the eyebrow's small capitals, each step a
 * link back up, divided by a chevron that is drawn rather than read out.
 */
.fc-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fc-crumbs li + li::before {
	content: "\203A";
	/* Empty alternative text, where supported, so it is not read out. */
	content: "\203A" / "";
	margin: 0 0.5em;
}

.fc-crumbs a {
	color: var(--fc-link);
	text-decoration: none;
}

.fc-crumbs a:hover {
	text-decoration: underline;
}

.lede {
	color: var(--fc-muted);
	font-size: 1.05rem;
}

.fc-panel {
	margin: 0 0 var(--fc-gap);
	padding: var(--fc-gap);
	background: var(--fc-surface);
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-radius);
	box-shadow: var(--fc-shadow);
}

/* A custom's featured image, under its heading (single-fc_folklore.php). */
.fc-photo {
	margin: 0 0 var(--fc-gap);
}

/*
 * Full width, always: a Commons photo a little narrower than the column is
 * stretched to fill it rather than sitting short of the edge. The Image
 * Attribution plugin's wrapper is inline-block and shrinks to the picture,
 * so it is made full width too, or the stretch has nothing to fill.
 */
.fc-photo .iab-wrap {
	display: block;
	width: 100%;
}

.fc-photo img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	max-height: 480px;
	object-fit: cover;
	border-radius: var(--fc-radius);
}

.fc-photo figcaption {
	margin-top: 6px;
	color: var(--fc-muted);
	font-size: 0.85rem;
}

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

.fc-panel h2 {
	font-size: 1.15rem;
}

.fc-section-title {
	margin: 28px 0 12px;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border: 2px solid var(--fc-accent);
	border-radius: 999px;
	background: var(--fc-accent);
	color: var(--fc-on-accent);
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.button--ghost {
	background: transparent;
	color: var(--fc-link);
	border-color: currentcolor;
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: var(--fc-gap) 0;
}

.button-row .button {
	flex: 1 1 9rem;
}

.fc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fc-chip {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid var(--fc-line);
	border-radius: 999px;
	background: var(--fc-chip);
	color: var(--fc-ink);
	font-size: 0.85rem;
	text-decoration: none;
}

/* A session's type is its one prominent chip; styles and tags stay quiet. */
.fc-chip--type {
	border-color: var(--fc-primary);
	background: var(--fc-primary);
	color: var(--fc-on-primary);
	font-weight: 700;
}

/* "More styles": a chip that is a button, set apart by a dashed edge. */
.fc-chip--more {
	border-style: dashed;
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
}

.fc-notice {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-left: 4px solid var(--fc-danger);
	border-radius: 8px;
	background: var(--fc-danger-tint);
	font-size: 0.95rem;
}

.fc-empty {
	padding: 24px 0;
	color: var(--fc-muted);
	text-align: center;
}

/* ==========================================================================
   5. Occurrence lists
   ========================================================================== */

.fc-list {
	display: grid;
	gap: 10px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.fc-row {
	position: relative;
	display: grid;
	grid-template-columns: 4.25rem 1fr;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-radius);
	background: var(--fc-surface);
	box-shadow: var(--fc-shadow);
}

.fc-row__when {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 6px 0;
	border-radius: 10px;
	background: var(--fc-tint);
	color: var(--fc-on-tint);
	line-height: 1.15;
}

.fc-row__start {
	font-size: 1.15rem;
	font-weight: 700;
}

.fc-row__end {
	font-size: 0.8rem;
	opacity: 0.8;
}

/* "Sat 26 Sep" above the time: quiet, for when the day's heading has
   scrolled out of sight. */
.fc-row__date {
	margin-bottom: 3px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	opacity: 0.75;
	white-space: nowrap;
}

.fc-datechip {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 6px 0;
	border-radius: 10px;
	background: var(--fc-primary);
	color: var(--fc-on-primary);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	line-height: 1.1;
	text-transform: uppercase;
}

.fc-datechip strong {
	font-family: var(--fc-font-display);
	font-size: 1.5rem;
	letter-spacing: 0;
}

.fc-row__main {
	min-width: 0;
}

.fc-row__title {
	margin: 0;
	font-size: 1.1rem;
}

/* Whole card is tappable; inner links sit above the stretched link. */
.fc-row__title a {
	color: inherit;
	text-decoration: none;
}

.fc-row__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.fc-row__where,
.fc-row__time,
.fc-row__note {
	margin: 2px 0 0;
	color: var(--fc-muted);
	font-size: 0.95rem;
}

.fc-row__time {
	color: var(--fc-ink);
	font-weight: 600;
}

.fc-row__where a,
.fc-row__time a,
.fc-row__manage,
.fc-row .fc-chips {
	position: relative;
	z-index: 1;
}

.fc-row .fc-chips {
	margin-top: 8px;
}

/*
 * The save button on a session's own page: under the name and the tags,
 * where the eye arrives after reading what the session is, rather than
 * tucked beside the title where it was competing with it and losing.
 */
.fc-session__save {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
	margin: 16px 0 4px;
}

/*
 * Share, beside Save and drawn the same way, so the two read as a pair
 * (fc_theme_share_button(), assets/share.js).
 */
.fc-share-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.fc-share-link__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 1rem 0 0.75rem;
	border: 2px solid currentcolor;
	border-radius: 999px;
	background: none;
	color: var(--fc-link);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.fc-share-link__button[hidden] {
	display: none;
}

.fc-share-link__icon {
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fc-share-link__button:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

.fc-share-link__done {
	color: var(--fc-muted);
	font-size: 0.875rem;
}

/*
 * "Embed on your website" (core's fc_embed_link()): a quiet link after
 * Save and Share, for the few who run a website, so it does not compete
 * with the two everybody uses.
 */
.fc-embed-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--fc-link);
	font-size: 0.9375rem;
}

.fc-session__save .fc-bookmark__button {
	color: var(--fc-link);
}

.fc-session__save .fc-bookmark__button[aria-pressed="true"] {
	border-color: var(--fc-accent);
	background: var(--fc-accent-tint);
	color: var(--fc-ink);
}

/*
 * The star gets a third column, and only a row that has one gets the column:
 * an empty track still costs its gap, which would pad the right of every
 * date row on a session's page for nothing.
 */
.fc-row--saveable {
	grid-template-columns: 4.25rem 1fr auto;
}

/*
 * Above the stretched link covering the card, like the chips are, or
 * pressing it would follow the row to the session instead. Aligned to the
 * top so it stays level with the session's name however many lines the venue
 * and the tags take underneath.
 */
.fc-row__save {
	position: relative;
	z-index: 1;
	align-self: start;
	margin: -6px -6px 0 0;
}

/*
 * A custom's photo, when it has one: a small square between the words and
 * the star. Rows without one keep their three columns, so a list with a few
 * photos in it reads as a list, not a grid with holes.
 */
.fc-row--photo {
	grid-template-columns: 4.25rem 1fr 72px;
}

.fc-row--photo.fc-row--saveable {
	grid-template-columns: 4.25rem 1fr 72px auto;
}

.fc-row__photo {
	align-self: start;
}

.fc-row__img {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 10px;
	object-fit: cover;
}

/* A custom with no photo yet: the site's mark, faint, on the custom's amber
   tint, the size a photo would be. */
.fc-row__photo--mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 10px;
	background: var(--fc-accent-tint);
}

@supports (mask-image: url("x.png")) or (-webkit-mask-image: url("x.png")) {
	.fc-row__mark {
		display: block;
		width: 60%;
		height: 60%;
		background: var(--fc-accent);
		opacity: 0.55;
		-webkit-mask: url("assets/img/logo-mark.png") center / contain no-repeat;
		mask: url("assets/img/logo-mark.png") center / contain no-repeat;
	}
}

/*
 * On a phone a third column squeezes the name into a strip, so the photo
 * moves under the time block instead, where the left column has room to
 * spare beside the venue and the tags.
 */
@media (max-width: 540px) {
	.fc-row--photo {
		grid-template-columns: 4.25rem 1fr;
	}

	.fc-row--photo.fc-row--saveable {
		grid-template-columns: 4.25rem 1fr auto;
	}

	.fc-row--photo .fc-row__main {
		grid-row: span 2;
	}

	.fc-row--photo .fc-row__photo {
		grid-column: 1;
		grid-row: 2;
	}

	.fc-row--photo .fc-row__img,
	.fc-row--photo .fc-row__photo--mark {
		width: 4.25rem;
		height: 4.25rem;
	}
}

/*
 * A later day of a custom that runs on: one slim line, its day, its name
 * linking back to the card, and which day of how many. The amber edge ties
 * it to the custom's card above.
 */
.fc-row--repeat {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	padding: 8px 12px;
	border-left: 4px solid var(--fc-accent);
	font-size: 0.95rem;
}

.fc-row--repeat .fc-row__date {
	margin: 0;
	min-width: 4.25rem;
	opacity: 0.8;
}

/* A listing rather than a date of it (an organiser's page): no time block. */
.fc-row--listing {
	grid-template-columns: 1fr;
}

.fc-owned {
	margin-bottom: 28px;
}

/* Row titles there are h4s, under each kind's h3: drawn as the h3s are elsewhere. */
.fc-owned .fc-row__title {
	font-family: var(--fc-font-display);
	line-height: 1.2;
}

/* An organiser's events, a group per kind (author.php). */
.fc-owned__group + .fc-owned__group {
	margin-top: 20px;
}

.fc-owned__kind {
	margin: 0 0 10px;
	color: var(--fc-muted);
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.fc-row__again {
	font-weight: 600;
}

.fc-row__again-meta {
	color: var(--fc-muted);
	font-size: 0.85rem;
}

.fc-row--cancelled {
	opacity: 0.85;
}

.fc-row--cancelled .fc-row__title a,
.fc-row--cancelled .fc-row__time {
	text-decoration: line-through;
	color: var(--fc-muted);
}

.fc-badge {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--fc-danger);
	color: var(--fc-surface);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Feed: one heading per day. */

.fc-feed__meta {
	margin: 0 0 4px;
	color: var(--fc-muted);
	font-size: 0.9rem;
}

/* Range switcher: Today / Next 7 days on home and sessions, This week / This month on customs. */

.fc-range {
	margin: 0 0 20px;
}

/* On customs and sessions the pills follow a row of chips, which needs a gap. */
.post-type-archive-fc_folklore .fc-range,
.post-type-archive-fc_session .fc-range {
	margin-top: 24px;
}

/* Said under the switcher when Today is empty and the next busy day is shown. */
.fc-feed__note {
	margin: -8px 0 16px;
	color: var(--fc-muted);
	font-size: 0.95rem;
}

/* Today's (or before 4am tonight's) finished sessions: a count, and the rows behind it, faded. */
.fc-finished {
	margin: 0 0 16px;
}

.fc-finished__summary {
	color: var(--fc-muted);
	font-size: 0.95rem;
	cursor: pointer;
}

.fc-finished .fc-list {
	margin-top: 12px;
	opacity: 0.7;
}

.fc-range ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fc-range li {
	flex: 1 1 auto;
}

.fc-range a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 14px;
	border: 2px solid var(--fc-control-line);
	border-radius: 999px;
	background: var(--fc-surface);
	color: var(--fc-link);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.fc-range a[aria-current="true"] {
	border-color: var(--fc-primary);
	background: var(--fc-primary);
	color: var(--fc-on-primary);
}

/* A town's "Within: Exeter · 5 miles ...": named, and close above the months it goes with. */
.fc-range--within {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 10px;
}

.fc-range--within ul {
	flex: 1 1 auto;
}

/* Their own width, so a pill wrapped onto a row alone is not a bar across the page. */
.fc-range--within li {
	flex: 0 1 auto;
}

.fc-range__label {
	color: var(--fc-muted);
	font-size: 0.9rem;
	font-weight: 700;
}

/*
 * What to show: Everything, Sessions, Customs. One segmented control rather
 * than a second row of pills, so it reads as a different question from the
 * dates above it: which kind, not when.
 */
.fc-filter {
	margin: -8px 0 16px;
}

.fc-filter ul {
	display: inline-flex;
	margin: 0;
	padding: 3px;
	border: 1px solid var(--fc-control-line);
	border-radius: 10px;
	background: var(--fc-surface);
	list-style: none;
}

.fc-filter a {
	display: flex;
	align-items: center;
	min-height: 38px;
	padding: 0 14px;
	border-radius: 7px;
	color: var(--fc-link);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.fc-filter a:hover {
	background: var(--fc-tint);
}

.fc-filter a[aria-current="true"] {
	background: var(--fc-tint);
	color: var(--fc-on-tint);
	box-shadow: inset 0 0 0 2px var(--fc-primary);
}

/* "Showing 3 of 12 sessions in this map view", only while the map is hiding
   part of the list. */

.fc-feed__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 12px;
	color: var(--fc-muted);
	font-size: 0.95rem;
}

.fc-feed__reset {
	min-height: 40px;
	padding: 0 16px;
	border: 2px solid currentcolor;
	border-radius: 999px;
	background: transparent;
	color: var(--fc-link);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* The display rules on these outrank the browser's own [hidden] rule, so
   the map filter's hiding needs saying again. */
.fc-feed__status[hidden],
.fc-day[hidden],
.fc-row[hidden],
.fc-card[hidden] {
	display: none;
}

.fc-day__title {
	position: sticky;
	/* Under the header, which sticks too on a narrow screen. */
	top: var(--fc-header-h, 0px);
	z-index: 2;
	margin: 0;
	padding: 12px 0 8px;
	background: var(--fc-bg);
	color: var(--fc-muted);
	font: 700 0.8rem/1.2 var(--fc-font);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * A new or full moon, at the far end of the day's heading: much of the old
 * calendar goes by the moon. Quiet, like the date, so it reads as a note on
 * the day rather than something on.
 */
.fc-day__moon {
	float: right;
	margin-left: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* The same beside one date of a session's list, under its time. */
.fc-row__moon {
	margin: 2px 0 0;
	color: var(--fc-muted);
	font-size: 0.85rem;
}

.fc-row__moon .fc-day__moon {
	float: none;
	margin-left: 0;
}

.fc-day__moon-icon {
	font-size: 1.1em;
	letter-spacing: 0;
	vertical-align: -0.05em;
}

/*
 * The day itself, when it is an occasion: "Bonfire Night" under 5 November.
 * A band across the day rather than a row in its list, because it is not a
 * listing and has no time or place; amber like the customs it belongs with.
 */
.fc-day__occasion {
	margin: 0 0 10px;
	padding: 8px 12px;
	border-left: 4px solid var(--fc-accent);
	border-radius: var(--fc-radius);
	background: var(--fc-accent-tint);
	font-weight: 700;
}

.fc-day__occasion a {
	color: var(--fc-ink);
}

/* A folk birthday under the day's heading (the artists plugin): quieter than
   an occasion, since it is a person rather than the day itself. */
.fc-day__birthday {
	margin: 0 0 10px;
	padding: 6px 12px;
	border-left: 4px solid var(--fc-accent);
	color: var(--fc-muted);
	font-size: 0.95rem;
}

.fc-day__birthday a {
	color: var(--fc-ink);
	font-weight: 700;
}

/*
 * The old calendar's lore at the top of a day: a page from an old book
 * rather than a card - a parchment tint, a brown rule down its edge like a
 * margin, a serif heading - so a belief from 1826 is never taken for
 * something happening tonight. No dashed border: that read as an advert.
 */
.fc-day__lore {
	margin: 6px 0 10px;
	padding: 8px 14px 8px 12px;
	border-left: 3px solid var(--fc-parchment-edge);
	border-radius: 0 var(--fc-radius) var(--fc-radius) 0;
	background: var(--fc-parchment);
}

/* An occasion's lore folded into one line on its day. */
.fc-day__lore-count {
	color: var(--fc-muted);
	font-size: 0.8rem;
}

.fc-day__lore-group .fc-day__lore-line a {
	font-family: inherit;
	font-weight: 400;
}

.fc-day__lore-title {
	margin: 0 0 6px;
	color: var(--fc-muted);
	font-family: var(--fc-font-display);
	font-size: 0.8rem;
	font-style: italic;
	letter-spacing: 0.02em;
}

.fc-day__lore ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fc-day__lore li {
	padding: 4px 0;
}

.fc-day__lore li + li {
	border-top: 1px solid var(--fc-line);
}

.fc-day__lore a {
	font-family: var(--fc-font-display);
	font-weight: 700;
}

.fc-day__lore-line {
	display: block;
	color: var(--fc-muted);
	font-size: 0.9rem;
}

/* Still kept, no longer kept, a belief: small and plain. */
.fc-lore-status {
	display: inline-block;
	margin-left: 6px;
	padding: 0 6px;
	border: 1px solid currentColor;
	border-radius: 4px;
	color: var(--fc-muted);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.5;
	text-transform: uppercase;
	vertical-align: 0.15em;
}

.fc-lore-status--survives {
	color: var(--fc-link);
}

.fc-lore .fc-lore-status {
	margin-left: 0;
}

.fc-lore__quote {
	margin: var(--fc-gap) 0;
	padding: 4px 0 4px 16px;
	border-left: 3px solid var(--fc-accent);
	font-family: var(--fc-font-display);
	font-style: italic;
}

.fc-lore__quote p {
	margin: 0;
}

.fc-lore__source {
	margin: 0;
	color: var(--fc-muted);
	font-size: 0.9rem;
}

/* A pill for each month on the old calendar's pages: twelve, so they wrap
   at their own width rather than stretching to fill the row. */
.fc-lore-months li {
	flex: 0 0 auto;
}

.fc-lore-months a {
	min-width: 3.5rem;
}

.fc-day--today .fc-day__title {
	color: var(--fc-link);
}

/* Dates list: month headings, collapsible tail. */

.fc-dates__month {
	margin: 16px 0 8px;
	color: var(--fc-muted);
	font: 700 0.8rem/1.2 var(--fc-font);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fc-dates > .fc-dates__month:first-child {
	margin-top: 0;
}

.fc-more > summary {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-bottom: 12px;
	border: 2px solid var(--fc-control-line);
	border-radius: 999px;
	color: var(--fc-link);
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.fc-more > summary::-webkit-details-marker {
	display: none;
}

.fc-more[open] > summary {
	display: none;
}

.fc-more-link {
	text-align: center;
}


/* ==========================================================================
   6. Session and venue pages
   ========================================================================== */

.fc-session > header,
.fc-venue > header,
.fc-lore > header {
	margin-bottom: var(--fc-gap);
}

/*
 * The top of a listing's page: crumbs, kind pill, title, facts, each with
 * a clear step between, so the pill never sits on the crumbs or the title.
 */
.fc-session > header .fc-crumbs,
.fc-venue > header .fc-crumbs,
.fc-lore > header .fc-crumbs {
	margin-bottom: 10px;
}

.fc-session > header .fc-row__kind {
	margin-bottom: 10px;
}

.fc-session > header .fc-chips,
.fc-venue > header .fc-chips,
.fc-lore > header .fc-chips {
	margin: 12px 0;
}

.fc-facts {
	margin: 0 0 12px;
	color: var(--fc-muted);
	font-size: 1.05rem;
}

.fc-next {
	border-color: var(--fc-accent);
	background: var(--fc-accent-tint);
}

.fc-next__label {
	margin: 0 0 2px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fc-next__when {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: 1.35rem;
	line-height: 1.25;
}

/* What it costs, under when it is: the other half of "shall I go?". */
.fc-next__cost {
	margin: 6px 0 0;
	color: var(--fc-ink);
	font-size: 0.95rem;
}

.fc-where__name {
	margin: 0 0 4px;
	font-size: 1.15rem;
}

.fc-where__name a {
	color: inherit;
}

.fc-prose > * + * {
	margin-top: 1em;
}

.fc-prose img {
	border-radius: 8px;
}

.fc-definition {
	margin: 0;
}

.fc-definition dt {
	margin-top: 12px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fc-muted);
}

.fc-definition dd {
	margin: 2px 0 0;
}

/* Venue and generic cards */

.fc-card {
	position: relative;
	padding: 14px var(--fc-gap);
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-radius);
	background: var(--fc-surface);
	box-shadow: var(--fc-shadow);
}

.fc-card__title {
	margin: 0;
	font-size: 1.15rem;
}

.fc-card__title a {
	color: inherit;
	text-decoration: none;
}

.fc-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.fc-card__meta {
	margin: 2px 0 0;
	color: var(--fc-muted);
	font-size: 0.95rem;
}

/* Post content and pagination */

.entry-content > * + * {
	margin-top: 1em;
}

.entry-image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 1em;
	border-radius: var(--fc-radius);
}

.alignleft { float: left; margin: 0 1em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1em; }
.aligncenter { display: block; margin-inline: auto; }

.navigation.pagination {
	margin-top: 24px;
}

.navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--fc-line);
	border-radius: 999px;
	background: var(--fc-surface);
	color: var(--fc-link);
	font-weight: 600;
	text-decoration: none;
}

.page-numbers.current {
	background: var(--fc-primary);
	border-color: var(--fc-primary);
	color: var(--fc-on-primary);
}

/* ==========================================================================
   7. Comments
   On a session page only (comments.php); the plugin keeps venue comments
   closed. WordPress's own markup, so the class names are its: .comment-body,
   .comment-meta, .children and so on.
   ========================================================================== */

.fc-comments {
	margin-top: 28px;
}

.fc-comments__title {
	margin: 0 0 var(--fc-gap);
}

.fc-comments__list,
.fc-comments .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fc-comments__list > li + li {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--fc-line);
}

/* A reply sits in from its parent, with a rule to follow back up the thread. */
.fc-comments .children {
	margin: 12px 0 0 12px;
	padding-left: 12px;
	border-left: 2px solid var(--fc-line);
}

.fc-comments .children > li + li {
	margin-top: 12px;
}

.comment-body {
	margin: 0;
}

.comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
}

.comment-author .avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

/* "says:" earns nothing on a listings page and reads oddly aloud. */
.comment-author .says {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.comment-metadata {
	color: var(--fc-muted);
	font-size: 0.85rem;
}

.comment-metadata a {
	color: inherit;
}

.comment-content {
	margin: 0;
}

.comment-content p {
	margin: 0 0 8px;
}

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

/* Only its author sees this, and only until a moderator gets to it. */
.comment-awaiting-moderation {
	flex-basis: 100%;
	margin: 0;
	padding: 6px 12px;
	border-radius: 8px;
	background: var(--fc-accent-tint);
	color: var(--fc-ink);
	font-size: 0.85rem;
}

.comment-reply-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

.bypostauthor > .comment-body .fn {
	color: var(--fc-primary);
}

.fc-comments__closed,
.fc-comments__note {
	margin: var(--fc-gap) 0 0;
	color: var(--fc-muted);
	font-size: 0.9rem;
}

/* ---- The form ---- */

.comment-respond {
	margin-top: var(--fc-gap);
	padding-top: var(--fc-gap);
	border-top: 1px solid var(--fc-line);
}

.fc-comments__list + .comment-respond {
	margin-top: 20px;
}

.comment-reply-title {
	margin: 0;
	font-size: 1.15rem;
}

.comment-reply-title small {
	margin-left: 8px;
	font-size: 0.85rem;
	font-weight: 400;
}

.comment-form p {
	margin: 12px 0 0;
}

.comment-form label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--fc-control-line);
	border-radius: 10px;
	background: var(--fc-bg);
	color: var(--fc-ink);
	font: inherit;
}

.comment-form textarea {
	min-height: 7rem;
	resize: vertical;
}

/*
 * Deliberately not a bespoke ring any more. This one was 2px of --fc-primary,
 * which is bottle green: 8:1 on the cream field and 1.58:1 on the dark one,
 * so in dark mode the comment form was the one place on the site where you
 * could not see where you were typing.
 */
.comment-form input:focus-visible,
.comment-form select:focus-visible,
.comment-form textarea:focus-visible {
	outline: 3px solid var(--fc-focus);
	outline-offset: 2px;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.comment-form-cookies-consent input {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 2px;
	flex: 0 0 auto;
}

.comment-form-cookies-consent label {
	font-weight: 400;
}

.form-submit {
	margin-top: var(--fc-gap);
}

/* ==========================================================================
   8. Ad slots
   Widget areas (Appearance > Widgets). A slot holding an ad tag reserves its
   height so the ad loading late does not shove the page around; adjust the
   min-heights to the ad sizes you sell. A slot holding ordinary HTML - a
   house panel like folkquiz.com - is exactly as tall as that HTML and as
   wide as the column, because it is on the page from the start and a
   reserved box would only leave it floating in empty space.
   ========================================================================== */

.fc-ad {
	max-width: var(--fc-wrap);
	margin: var(--fc-gap) auto;
	padding-inline: var(--fc-gap);
	text-align: center;
}

.site-main .fc-ad {
	padding-inline: 0;
}

.fc-ad__unit {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.fc-ad__widget {
	width: 100%;
}

/* An ad network's tag: <ins> for AdSense and most others, or an iframe or
   script. Present in the HTML before the ad itself arrives, so the space is
   held from the first paint. */
.fc-ad__unit:has(ins, iframe, script) {
	min-height: 100px;    /* 320x100 mobile banner */
}

.fc-ad--inline .fc-ad__unit:has(ins, iframe, script) {
	min-height: 250px;    /* 300x250 medium rectangle */
}

/* Only logged-in admins see the placeholder, so they can find the slots. */
.fc-ad--placeholder .fc-ad__unit {
	padding: 12px;
	border: 2px dashed var(--fc-line);
	border-radius: 10px;
	color: var(--fc-muted);
	font-size: 0.85rem;
}

/* ==========================================================================
   9. Maps (Leaflet; see inc/maps.php and assets/map.js)
   Hidden until JavaScript is available, so no empty box appears without it.
   ========================================================================== */

.fc-map {
	display: none;
	position: relative;
	z-index: 0;            /* contain Leaflet's own z-indexes below the sticky day headings */
	height: 220px;
	/* On a phone a map fills the width and one finger on it pans the map, not
	   the page. Generous space above, below and to each side leaves somewhere
	   to put a thumb and keep scrolling. Desktop resets this (section 10). */
	margin: 28px 20px;
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-radius);
	background: var(--fc-tint);
	overflow: hidden;
}

.js .fc-map {
	display: block;
}

.fc-map--large {
	height: 280px;
}

/* Inside a panel the panel's own padding already gives the sides room. */
.fc-where .fc-map {
	margin: 24px 0 20px;
}

/*
 * Filling the screen.
 *
 * Two routes lead here and both set this class: the Fullscreen API where the
 * browser has it, and a pinned position where it does not - Safari on an
 * iPhone allows fullscreen on video and nothing else. The rules below have to
 * do the whole job unaided on the second route, and do no harm on the first,
 * where the browser has already made the element the size of the screen.
 */
.fc-map.is-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 1000;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
}

/* The button, matching Leaflet's own zoom controls rather than the theme's. */
.fc-map__full a,
.fc-map__locate a {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Asking the browser where they are, which can take a few seconds. */
.fc-map__locate.is-busy a {
	opacity: 0.5;
	cursor: progress;
}

/*
 * The reader's own dot: where they are, or where their search is measured
 * from. A circle rather than a pin, in a colour no pin uses, so it is never
 * taken for somewhere to go. Leaflet sets stroke and fill as attributes,
 * which these override.
 */
.fc-map .fc-you {
	stroke: var(--fc-surface);
	fill: var(--fc-you);
	fill-opacity: 1;
}

.fc-popup--you p {
	margin: 0;
	font-weight: 700;
}

.fc-popup__forget {
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fc-link);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* "Showing about 25 miles around you. Drag or zoom the map..." */
.fc-feed__hint {
	margin: -12px 20px 16px;
	color: var(--fc-muted);
	font-size: 0.95rem;
}

/*
 * The count, carried onto the map while it fills the screen.
 *
 * It is the same element as the one under the list - moved, not copied - so
 * what it says on the map is what the list will show on the way out. Along
 * the bottom rather than the top, where Leaflet keeps its own controls, and
 * above the map's panes so a drag on it does not also drag the map.
 */
.fc-feed__status--on-map {
	position: absolute;
	right: 12px;
	bottom: 12px;
	left: 12px;
	z-index: 1000;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-radius);
	background: var(--fc-surface);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	text-align: center;
}

@media (min-width: 40rem) {
	/* Off to one side on a wider screen, where the middle is the map. */
	.fc-feed__status--on-map {
		right: auto;
		left: 12px;
		max-width: 22rem;
		text-align: left;
	}
}

/*
 * The popup is a card floating on the map, and on the dark palette it has to
 * say so itself: Leaflet's own shadow is tuned for a white popup on a pale
 * map and disappears entirely against a dark one, which left the popup
 * reading as a hole cut in the map rather than a thing on top of it. The
 * border does the work the shadow cannot.
 */
.fc-map .leaflet-popup-content-wrapper,
.fc-map .leaflet-popup-tip {
	background: var(--fc-surface);
	color: var(--fc-ink);
	border: 1px solid var(--fc-control-line);
}

/* The tip is a rotated square: only the two sides that show get a border. */
.fc-map .leaflet-popup-tip {
	border-top: 0;
	border-left: 0;
}

.fc-map .leaflet-popup-content-wrapper {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.fc-popup {
	font: 0.95rem/1.4 var(--fc-font);
}

/*
 * Leaflet's close button is a light grey glyph sized for a mouse: near
 * invisible on the dark surface, and too small to hit with a thumb. It keeps
 * its corner but becomes readable and thumb-sized, and the content is given
 * room so a venue name never runs under it.
 */
/* .fc-map is itself the Leaflet container, and Leaflet styles this button as
   `.leaflet-container a.leaflet-popup-close-button`. Two classes and an
   element beats one class, so this has to name both of ours to win. */
.fc-map.leaflet-container a.leaflet-popup-close-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	color: var(--fc-muted);
	font-size: 22px;
}

.fc-map.leaflet-container a.leaflet-popup-close-button:hover,
.fc-map.leaflet-container a.leaflet-popup-close-button:focus-visible {
	color: var(--fc-ink);
	background: none;
}

/* Room for the close button's corner, and the same again opposite so the
   text is not lopsided. map.js takes this out of the width it allows. */
.fc-map .leaflet-popup-content {
	margin: 12px 30px 12px 14px;
}

.fc-popup a {
	color: var(--fc-link);
}

.fc-popup ul {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.fc-popup li {
	padding: 3px 0;
}

/* The place's name, with what is listed there in the top right. */
.fc-popup__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.fc-popup__kinds {
	display: inline-flex;
	flex-shrink: 0;
	gap: 4px;
}

/* "Session" or "Custom": small and quiet, a hairline tag in the pin's
   colour. On a pin with both it also leads each date. */
.fc-popup__kind {
	display: inline-block;
	padding: 0 5px;
	border: 1px solid currentColor;
	border-radius: 4px;
	color: var(--fc-muted);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
}

li > .fc-popup__kind {
	margin-right: 6px;
	vertical-align: 0.1em;
}

.fc-popup__kind--custom {
	color: #9a6a12;
}

@media (prefers-color-scheme: dark) {
	.fc-popup__kind--custom {
		color: var(--fc-accent);
	}
}

/* Marker: a green teardrop with an amber dot. */
.fc-pin span {
	display: block;
	width: 28px;
	height: 28px;
	border: 3px solid var(--fc-surface);
	border-radius: 50% 50% 50% 0;
	background: var(--fc-primary);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	transform: rotate(-45deg);
}

.fc-pin span::after {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin: 6px;
	border-radius: 50%;
	background: var(--fc-accent);
}

/* A custom's pin: the same shape in amber with a green dot, the reverse of
   a session's, matching the amber customs rows in the lists. */
.fc-pin--custom span {
	background: var(--fc-accent);
}

.fc-pin--custom span::after {
	background: var(--fc-primary);
}

/* Cluster: a green disc ringed in amber, its count inside. Where several
   venues sit too close to show as separate pins; click to zoom in. The size
   is set inline by map.js from the count, and the span fills it. */
.fc-cluster span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border: 3px solid var(--fc-accent);
	border-radius: 50%;
	background: var(--fc-primary);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	color: var(--fc-on-primary);
	font: 700 0.95rem/1 var(--fc-font);
	cursor: pointer;
}

/* Folklore's cluster: its ring's parchment and brown, so a group of regions
   never reads as a group of venues. */
.fc-cluster--lore span {
	border-color: #d9c49a;
	background: #fffaee;
	box-shadow: 0 0 0 1px #7a5a2b, 0 1px 3px rgba(0, 0, 0, 0.35);
	color: #7a5a2b;
}

/* Customs cluster only with customs (map.js): the reverse of a session's,
   amber ringed in green, as their pins are. */
.fc-cluster--custom span {
	border-color: var(--fc-primary);
	background: var(--fc-accent);
	color: var(--fc-on-accent);
}

/* Morris practices cluster only with each other: the session's green disc,
   with the amber bell of their pins sitting on its rim. */
.fc-cluster--morris span {
	position: relative;
}

.fc-cluster--morris span::after {
	content: "";
	position: absolute;
	top: -7px;
	right: -7px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--fc-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='3.6' r='2.2' fill='none' stroke='%23e8a936' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='14' r='8.4' fill='%23e8a936'/%3E%3Cpath d='M3.6 12.4h16.8' stroke='%2324513a' stroke-width='1.4'/%3E%3Cpath d='M8.6 17.4h6.8' stroke='%2324513a' stroke-width='1.6'/%3E%3Ccircle cx='8.4' cy='17.4' r='1.7' fill='%2324513a'/%3E%3Ccircle cx='15.6' cy='17.4' r='1.7' fill='%2324513a'/%3E%3C/svg%3E") center / 12px no-repeat;
	box-shadow: 0 0 0 2px var(--fc-surface);
}

/* The list shown when a cluster cannot be pulled apart by zooming. */
.fc-popup--cluster > .fc-popup + .fc-popup {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--fc-line);
}

/* Folklore's pin (SPEC 13.9): a hollow parchment ring with a small open
   book in it, at a region's centre rather than a door, so it never reads as
   somewhere to go. Round, not a teardrop, because it points at nothing in
   particular. */
.fc-pin--lore span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 3px solid #d9c49a;
	border-radius: 50%;
	background: rgba(255, 250, 238, 0.55);
	box-shadow: 0 0 0 1px #7a5a2b, 0 1px 3px rgba(0, 0, 0, 0.35);
	transform: none;
}

.fc-pin--lore span::after {
	width: 12px;
	height: 8px;
	margin: 0;
	border: 2px solid #7a5a2b;
	border-radius: 1px 1px 3px 3px;
	background: linear-gradient(#7a5a2b, #7a5a2b) center / 2px 100% no-repeat;
}

/* The area a region covers: faint, dashed, taking no clicks. */
.fc-lore-area {
	fill: #c9a86a;
	fill-opacity: 0.1;
	stroke: #7a5a2b;
	stroke-dasharray: 4 5;
	stroke-opacity: 0.6;
	stroke-width: 1.5;
}

.fc-popup__kind--lore {
	color: #7a5a2b;
}

/* Where a folk artist was born or died (the artists plugin): round rather
   than a teardrop, since nothing is on there. Born: a baby on amber. Died: a
   cross on a dark disc. */
.fc-pin--artist span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 2px solid var(--fc-surface);
	border-radius: 50%;
	background: var(--fc-accent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	transform: none;
}

.fc-pin--artist span::after {
	content: "\1F476";
	width: auto;
	height: auto;
	margin: 0;
	border-radius: 0;
	background: none;
	color: var(--fc-on-accent);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.fc-pin--died span {
	background: #3a302a;
}

.fc-pin--died span::after {
	content: "\271D";
	color: #f7f1e3;
	font-size: 14px;
}

/* Artists' places cluster only with each other: an amber disc, like their
   pins, ringed in cream. */
.fc-cluster--artist span {
	border-color: var(--fc-surface);
	background: var(--fc-accent);
	color: var(--fc-on-accent);
}

.fc-popup__kind--artist {
	color: #9a6a12;
}

@media (prefers-color-scheme: dark) {
	.fc-popup__kind--lore {
		color: #d9c49a;
	}
}

/* Where a piece of lore belongs, after its status: quiet, linked. */
.fc-day__lore-where {
	margin-left: 6px;
	color: var(--fc-muted);
	font-size: 0.8rem;
}

.fc-day__lore .fc-day__lore-where a {
	font-family: inherit;
	font-weight: 400;
	color: inherit;
}

/* ==========================================================================
   10. Plugin markup: [fc_find_sessions]
   The core plugin renders the find-sessions page with its own stylesheet and
   its own --fc-* variables scoped to .fc-find, which shadow the theme's
   same-named tokens. Everything here is prefixed .site-main so it outranks the
   plugin's single-class rules whatever order the stylesheets load in, and it
   reads the theme tokens through the aliases at the top of the file. The
   results become the same cards as the feed in section 5.
   ========================================================================== */

.site-main .fc-find {
	--fc-radius: var(--fc-round);
	--fc-border: var(--fc-line);
	--fc-muted: var(--fc-quiet);
	--fc-surface: var(--fc-card);
	--fc-accent: var(--fc-amber);
	--fc-accent-contrast: var(--fc-on-accent);
	--fc-cancelled: var(--fc-danger);
}

/* Form */

.site-main .fc-find__form {
	box-shadow: var(--fc-shadow);
}

.site-main .fc-find__field input,
.site-main .fc-find__field select {
	min-height: 44px;
	border-color: var(--fc-control-line);
	background: var(--fc-bg);
	color: var(--fc-ink);
}

.site-main .fc-find input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--fc-link);
}

.site-main .fc-find__checklist label {
	min-height: 40px;
}

/* One accordion per filter now, each its own row in a bordered stack. */
.site-main .fc-find__filters {
	border-color: var(--fc-control-line);
	background: var(--fc-card);
}

.site-main .fc-find__filter + .fc-find__filter {
	border-top-color: var(--fc-line);
}

.site-main .fc-find__filter-summary {
	color: var(--fc-link);
}

.site-main .fc-find__filter-count {
	color: var(--fc-ink);
	font-weight: 400;
}

.site-main .fc-find__submit,
.site-main .fc-find__near-me {
	min-height: 48px;
	border-radius: 999px;
	font-weight: 700;
}

.site-main .fc-find__near-me {
	border: 2px solid currentcolor;
	background: transparent;
	color: var(--fc-link);
}

.site-main .fc-find__summary,
.site-main .fc-find__empty {
	color: var(--fc-quiet);
}

/* Results: a day heading, then one card per session. */

.site-main .fc-find__map {
	position: relative;
	z-index: 0;            /* contain Leaflet's z-indexes below the sticky day headings */
	margin: 12px 20px;     /* room to scroll past on a phone, as .fc-map */
	overflow: hidden;
	border-radius: var(--fc-round);
}

/* The find page's layout names its grid areas, and the map it expects to put
   in "map" is .fc-find__map. We give it our own .fc-map instead (inc/find.php),
   so say where that goes: auto-placement happens to drop it in the right cell
   today, and would stop doing so the moment another child appeared. */
.site-main .fc-find__layout .fc-map {
	grid-area: map;
}

.site-main .fc-find__day {
	margin-bottom: 0;
}

.site-main .fc-find__day-heading {
	z-index: 2;
	margin: 0;
	padding: 12px 0 8px;
	border: 0;
	background: var(--fc-bg);
	color: var(--fc-quiet);
	font: 700 0.8rem/1.2 var(--fc-font);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.site-main .fc-find__list {
	display: grid;
	gap: 10px;
	margin: 0 0 20px;
}

/* Time on the left in the same tinted block as the feed, everything else to
   its right. The plugin prints "start – end" as one string, which wraps onto
   two lines in the block. */
.site-main .fc-find__result {
	position: relative;
	display: grid;
	grid-template-columns: 5.25rem 1fr;
	column-gap: 12px;
	align-items: start;
	padding: 12px;
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-round);
	background: var(--fc-card);
	box-shadow: var(--fc-shadow);
}

.site-main .fc-find__result > * {
	grid-column: 2;
	min-width: 0;
}

.site-main .fc-find__result p {
	margin: 2px 0 0;
}

.site-main .fc-find__result-time {
	grid-column: 1;
	grid-row: 1 / span 5;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 8px 6px;
	border-radius: 10px;
	background: var(--fc-tint);
	color: var(--fc-on-tint);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

.site-main .fc-find__result-name {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: 1.1rem;
	line-height: 1.2;
}

/* Whole card is tappable; the venue link sits above the stretched link. */
.site-main .fc-find__result-name a {
	color: inherit;
	text-decoration: none;
}

.site-main .fc-find__result-name a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.site-main .fc-find__result-where a {
	position: relative;
	z-index: 1;
}

.site-main .fc-find__result--cancelled {
	opacity: 0.85;
}

.site-main .fc-find__result--cancelled .fc-find__result-name a,
.site-main .fc-find__result--cancelled .fc-find__result-time {
	color: var(--fc-quiet);
	text-decoration: line-through;
}

.site-main .fc-find__cancelled {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--fc-danger);
	color: var(--fc-card);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.site-main .fc-find__tags {
	gap: 6px;
	margin-top: 8px;
}

.site-main .fc-find__tags li {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border-color: var(--fc-line);
	background: var(--fc-chip);
	color: var(--fc-ink);
	font-size: 0.85rem;
}

/* Pagination and feed link */

.site-main .fc-find__page-link {
	justify-content: center;
	min-width: 44px;
	border: 2px solid var(--fc-control-line);
	border-radius: 999px;
	background: var(--fc-card);
	color: var(--fc-link);
	font-weight: 700;
	text-decoration: none;
}

/* ==========================================================================
   11. Larger screens
   ========================================================================== */

@media (min-width: 40rem) {
	h1 { font-size: 2.3rem; }

	.fc-map {
		height: 260px;
		margin: 0 0 var(--fc-gap);
	}

	/* In line with the map above it, which loses its phone margins here. */
	.fc-feed__hint {
		margin: -8px 0 var(--fc-gap);
	}

	.fc-map--large { height: 360px; }

	.fc-where .fc-map {
		margin: 12px 0 0;
	}

	.site-main .fc-find__map {
		margin: 0;
	}

	.button-row .button {
		flex: 0 1 auto;
	}
}

/*
 * A session on "your sessions" that the reader looks after, rather than
 * merely follows. A thicker left edge in the brand green, which reads as a
 * mark on the row rather than as another state of it - cancelled already
 * owns the row's colour and must stay the louder of the two.
 */
.fc-row--mine {
	border-left: 4px solid var(--fc-primary);
}

.fc-row__mine {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 4px 0 0;
	color: var(--fc-primary);
	font-size: 0.85rem;
	font-weight: 600;
}

.fc-row__mine-icon {
	flex: none;
}

.fc-row__manage {
	margin-left: 6px;
	font-weight: 400;
}

/*
 * A folklore event in a list of sessions: amber where a session is green,
 * and a label above the name so the difference is not carried by colour
 * alone. Dark ink on amber in both colour schemes, which keeps the label
 * readable where amber text on cream would not be. The row's own outline
 * is left alone: a thick left edge already means "you look after this".
 */
.fc-row--folklore .fc-row__when {
	background: var(--fc-accent-tint);
	color: var(--fc-ink);
}

.fc-row__kind {
	width: fit-content;
	margin: 0 0 6px;
	padding: 2px 10px;
	line-height: 1.5;
	border: 1px solid var(--fc-control-line);
	border-radius: 999px;
	background: var(--fc-chip);
	color: var(--fc-ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/*
 * Each kind's pill in its calendar colour, so a session, a custom and a
 * morris practice side by side in a list tell apart at a glance: solid
 * green, solid amber, and plum on its pale tint.
 */
.fc-row__kind--session {
	border-color: var(--fc-primary);
	background: var(--fc-primary);
	color: var(--fc-on-primary);
}

.fc-row__kind--folklore {
	border-color: var(--fc-accent);
	background: var(--fc-accent);
	color: var(--fc-on-accent);
}

.fc-row__kind--morris {
	border-color: var(--fc-morris);
	background: var(--fc-morris-tint);
	color: var(--fc-morris);
}

/*
 * How fresh the listing is. The badge itself is drawn by the plugin's
 * review.css, which owns its colours; this only gives it a line of its own in
 * the row, above the terms. It sits above the stretched link covering the
 * card, so the tooltip is reachable rather than swallowed by the anchor.
 */
.fc-row__standing {
	position: relative;
	z-index: 1;
	margin: 4px 0 0;
}

@media (prefers-color-scheme: dark) {
	.fc-row--mine {
		border-left-color: var(--fc-link);
	}

	.fc-row__mine {
		color: var(--fc-link);
	}
}

/* The management list, under the feed rather than instead of it. */
.fc-dashboard__feed {
	margin-bottom: 28px;
}

/* The way from the footer's counts to the page that explains them. */
.fc-stats__more {
	font-weight: 600;
}

/* The [fc_stats] page, in the site's own colours. The plugin's stylesheet
   scopes its tokens to .fc-stats-page, so these only have to be handed back. */
.site-main .fc-stats-page {
	--fc-border: var(--fc-line);
	--fc-muted: var(--fc-quiet);
	--fc-accent: var(--fc-amber);
	--fc-radius: var(--fc-round);
	--fc-bar: var(--fc-chip);
}

.site-main .fc-stats-panel__lead {
	font-family: var(--fc-font-display);
	color: var(--fc-primary);
}

@media (prefers-color-scheme: dark) {
	.site-main .fc-stats-panel__lead {
		color: var(--fc-link);
	}
}

/* A labelled row of chips: "By source", "By region" on /lore/, each set
   apart from the next rather than running on as one block. */
.fc-chip-group {
	margin: 12px 0 20px;
}

.fc-chip-group .eyebrow {
	margin-bottom: 6px;
	font-size: 0.7rem;
}

/* Ways into a page, each an accordion shut behind its name (/lore/'s tags,
   regions and sources): the find page's stacked filters, holding chips. */
.fc-ways {
	margin: 16px 0 20px;
	border: 1px solid var(--fc-control-line);
	border-radius: var(--fc-radius);
	background: var(--fc-card);
}

.fc-way + .fc-way {
	border-top: 1px solid var(--fc-line);
}

.fc-way__summary {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0 0.75rem;
	color: var(--fc-link);
	font-size: 0.9375rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.fc-way__summary::-webkit-details-marker {
	display: none;
}

.fc-way__caret {
	flex: none;
	margin-left: auto;
	transition: transform 120ms ease-out;
}

.fc-way[open] .fc-way__caret {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.fc-way__caret {
		transition: none;
	}
}

.fc-way .fc-chips {
	margin: 0;
	padding: 0 0.75rem 0.75rem;
}

/* The month pills stand clear of the chips above them. */
.fc-range.fc-lore-months {
	margin-top: 20px;
}

/* Where to get a copy of the book: a quiet line under the source, and a
   panel on the book's own page. Always with the word that these are
   affiliate links. */
.fc-lore__buy {
	margin: 8px 0 0;
	font-size: 0.9rem;
}

.fc-lore__disclosure {
	margin: 4px 0 0;
	color: var(--fc-muted);
	font-size: 0.75rem;
}

.fc-books__shops {
	font-weight: 600;
}

/* The sources page (sources.php): each book a panel, oldest first, its
   year above its name. */
.fc-sources {
	margin: 0 0 var(--fc-gap);
	padding: 0;
	list-style: none;
}

.fc-source h2 {
	margin: 0 0 6px;
}

.fc-source__year {
	margin: 0 0 2px;
}

.fc-source__cite {
	margin: 0 0 8px;
}

.fc-source__count {
	margin: 0 0 8px;
	font-weight: 600;
}

.fc-source__links {
	margin: 0 0 4px;
	font-size: 0.9rem;
}

.fc-source__editions {
	margin: 6px 0 0;
	color: var(--fc-muted);
	font-size: 0.85rem;
}

/* The kind of listing and the day to start from, side by side, wrapping
   onto two lines on a narrow screen. */
.fc-feed__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin: 0 0 12px;
}

.fc-feed__controls .fc-filter {
	margin: 0;
}

/* The date selector: a day back, the calendar, a day on. */
.fc-date {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
}

.fc-date__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--fc-control-line);
	border-radius: 999px;
	background: var(--fc-surface);
	color: var(--fc-ink);
	font-size: 1.3rem;
	line-height: 1;
	text-decoration: none;
}

a.fc-date__step:hover {
	border-color: var(--fc-primary);
	color: var(--fc-primary);
}

/* Today: nothing before it to go back to. */
span.fc-date__step {
	opacity: 0.35;
}

.fc-date__pick input {
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--fc-control-line);
	border-radius: 999px;
	background: var(--fc-surface);
	color: var(--fc-ink);
	font: inherit;
	font-size: 0.9rem;
}

/*
 * On a phone the four kinds (Everything, Sessions, Customs, Folklore) fill
 * the width and share it evenly, smaller, rather than running off the side
 * of a 360px screen (a Galaxy S21). On the very narrowest they wrap.
 */
@media (max-width: 480px) {
	.fc-feed__controls .fc-filter,
	.fc-filter {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.fc-filter ul {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		box-sizing: border-box;
	}

	.fc-filter li {
		flex: 1 1 0;
		min-width: max-content;
	}

	.fc-filter a {
		justify-content: center;
		min-height: 36px;
		padding: 0 8px;
		font-size: 0.85rem;
	}
}

/* ==========================================================================
   12. Morris (single-fc_side.php, single-fc_practice.php, archive-fc_side.php)
   ========================================================================== */

/* A practice's map pin: a session's green teardrop with an amber sleigh bell
   where the dot would be (the loop it hangs from, its band, and the slot with
   a hole at each end), upright inside the turned pin. The bell reads as morris
   to anybody, whatever the side dances. */
.fc-pin--morris span::after {
	width: 16px;
	height: 16px;
	margin: 3px;
	border-radius: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='3.6' r='2.2' fill='none' stroke='%23e8a936' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='14' r='8.4' fill='%23e8a936'/%3E%3Cpath d='M3.6 12.4h16.8' stroke='%2324513a' stroke-width='1.4'/%3E%3Cpath d='M8.6 17.4h6.8' stroke='%2324513a' stroke-width='1.6'/%3E%3Ccircle cx='8.4' cy='17.4' r='1.7' fill='%2324513a'/%3E%3Ccircle cx='15.6' cy='17.4' r='1.7' fill='%2324513a'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: rotate(45deg);
}

/* The venue under a side's name in a practice pin's popup. */
.fc-popup__place {
	margin: 2px 0 4px;
	font-size: 0.85em;
}

.fc-morris__welcome {
	margin: 0.25rem 0 0.5rem;
	font-weight: 600;
}

.fc-morris__practice + .fc-morris__practice {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--fc-line);
}

.fc-morris__practice p {
	margin: 0.25rem 0;
}

.fc-sides-list {
	margin-top: 2rem;
}

/* Each county folds (the chip groups' accordion, .fc-way), its count beside
   its name. */
.fc-sides__group .fc-sides {
	padding: 0 0.75rem 0.5rem;
}

.fc-sides__count {
	margin-left: 0.35rem;
	color: var(--fc-muted);
	font-weight: 400;
}

.fc-morris__diary {
	margin: 0.75rem 0;
}

.fc-sides {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fc-sides li {
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--fc-line);
}

.fc-sides__meta {
	color: var(--fc-muted);
	font-size: 0.9rem;
}

/* Town and county pages (area.php, inc/areas.php): every listing there by
   kind, the county's towns as chips, and the way to add what is missing. */
.fc-area__all,
.fc-area__places,
.fc-area__add {
	margin-top: 2rem;
}

.fc-area__kind h3 {
	margin: 1.25rem 0 0.25rem;
	font-size: 1.1rem;
}

/* A town too small for a page of its own: named, not linked. */
.fc-chip--plain {
	background: transparent;
	color: var(--fc-muted);
}

.fc-area__towns {
	display: block;
	font-size: 0.9rem;
}

.fc-area__more {
	margin: 0.5rem 0 0;
	color: var(--fc-muted);
}

/* ==========================================================================
   13. Calendar (page-calendar.php, inc/calendar.php, assets/calendar.js)
   A month on a grid, each square summing its day up by kind, and the day
   chosen listed in full in a panel: beside the grid on a wide screen, under
   it on a narrow one, where the squares shrink to a number and a dot a kind.
   ========================================================================== */

/* Seven columns do not fit the reading column: as wide as the header bar. */
.fc-calendar-page .site-main {
	max-width: 72rem;
}

.fc-cal__header .lede > :last-child {
	margin-bottom: 0;
}

.fc-cal__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin: 0 0 16px;
}

.fc-cal__controls .fc-filter {
	margin: 0;
}

.fc-cal__pick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.fc-cal__select select {
	height: 38px;
	max-width: 14rem;
	padding: 0 10px;
	border: 1px solid var(--fc-control-line);
	border-radius: 999px;
	background: var(--fc-surface);
	color: var(--fc-ink);
	font: inherit;
	font-size: 0.9rem;
}

.fc-cal {
	display: grid;
	gap: 20px;
	align-items: start;
}

.fc-cal__month {
	min-width: 0;
}

.fc-cal__nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}

.fc-cal__title {
	min-width: 9.5em;
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: 1.4rem;
	text-align: center;
}

.fc-cal__today {
	margin-left: auto;
	white-space: nowrap;
	font-size: 0.9rem;
	font-weight: 600;
}

.fc-cal__grid {
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 4px;
	margin: 0 -4px;
	width: calc(100% + 8px);
}

.fc-cal__grid th {
	padding: 4px 0;
	color: var(--fc-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fc-cal__grid abbr {
	text-decoration: none;
}

.fc-cal__cell {
	height: 7rem;
	padding: 0;
	border: 1px solid var(--fc-line);
	border-radius: 8px;
	background: var(--fc-surface);
	vertical-align: top;
}

.fc-cal__day {
	display: flex;
	flex-direction: column;
	gap: 3px;
	height: 7rem;
	padding: 6px;
	overflow: hidden;
	border-radius: 7px;
	color: var(--fc-ink);
	text-decoration: none;
}

a.fc-cal__day:hover {
	background: var(--fc-tint);
}

.fc-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
}

.fc-cal__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75em;
	height: 1.75em;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 700;
}

.fc-cal__moon {
	font-size: 0.85rem;
	line-height: 1;
}

.fc-cal__cell--today .fc-cal__num {
	background: var(--fc-primary);
	color: var(--fc-on-primary);
}

.fc-cal__cell--selected {
	border-color: var(--fc-primary);
	box-shadow: inset 0 0 0 1px var(--fc-primary);
}

.fc-cal__cell--selected .fc-cal__day {
	background: var(--fc-tint);
}

.fc-cal__cell--quiet .fc-cal__num {
	color: var(--fc-muted);
	font-weight: 400;
}

.fc-cal__cell--past,
.fc-cal__cell--outside {
	border-color: transparent;
	background: transparent;
}

.fc-cal__cell--past .fc-cal__num,
.fc-cal__cell--outside .fc-cal__num {
	color: var(--fc-muted);
	font-weight: 400;
	opacity: 0.6;
}

/* A week gone by: a strip of faded dates, not a row of empty squares. */
.fc-cal__week--gone .fc-cal__cell,
.fc-cal__week--gone .fc-cal__day {
	height: auto;
}

.fc-cal__week--gone .fc-cal__day {
	padding: 0 6px;
}

.fc-cal__week--gone .fc-cal__num {
	height: 1.4em;
	font-size: 0.8rem;
}

.fc-cal__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fc-cal__occasion,
.fc-cal__item {
	overflow: hidden;
	font-size: 0.75rem;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fc-cal__occasion {
	color: var(--fc-muted);
	font-family: var(--fc-font-display);
	font-style: italic;
}

/* A folk birthday in a day's square: quiet, like the occasion, with the
   amber edge the diary's birthday line has. */
.fc-cal__birthday {
	overflow: hidden;
	padding-left: 5px;
	border-left: 3px solid var(--fc-accent);
	color: var(--fc-muted);
	font-size: 0.72rem;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fc-cal__item {
	padding: 1px 5px;
	border-left: 3px solid var(--fc-primary);
	border-radius: 3px;
	background: var(--fc-tint);
	color: var(--fc-on-tint);
}

/* A custom is the one thing named on a busy day: up to two lines of it. */
.fc-cal__item--folklore {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	white-space: normal;
}

.fc-cal__item--cancelled {
	text-decoration: line-through;
	opacity: 0.7;
}

.fc-cal__time {
	font-weight: 700;
}

.fc-cal__count {
	width: fit-content;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--fc-tint);
	color: var(--fc-on-tint);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.fc-cal__item--folklore,
.fc-cal__count--folklore {
	border-color: var(--fc-accent);
	background: var(--fc-accent-tint);
	color: var(--fc-ink);
}

.fc-cal__item--morris,
.fc-cal__count--morris {
	border-color: var(--fc-morris);
	background: var(--fc-morris-tint);
	color: var(--fc-morris);
}

/* A dot a kind, in place of the words, on a phone's small squares. */
.fc-cal__dots {
	display: none;
	gap: 3px;
	margin-top: auto;
}

.fc-cal__dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--fc-link);
}

.fc-cal__dot--folklore { background: var(--fc-accent); }
.fc-cal__dot--morris { background: var(--fc-morris); }

.fc-cal__key {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 8px 0 0;
	padding: 0;
	color: var(--fc-muted);
	font-size: 0.85rem;
	list-style: none;
}

.fc-cal__key li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* The chosen day. */
.fc-cal__panel {
	min-width: 0;
	padding: var(--fc-gap);
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-radius);
	background: var(--fc-surface);
	box-shadow: var(--fc-shadow);
	scroll-margin-top: 12px;
}

.fc-cal__panel[aria-busy="true"] {
	opacity: 0.55;
}

.fc-cal__panel-title {
	margin: 0 0 8px;
	font-family: var(--fc-font-display);
	font-size: 1.3rem;
}

.fc-cal__panel-title:focus {
	outline: none;
}

.fc-cal__panel-date {
	display: block;
	color: var(--fc-muted);
	font-family: var(--fc-font);
	font-size: 0.9rem;
	font-weight: 400;
}

.fc-cal__panel-moon {
	margin: 0 0 8px;
	color: var(--fc-muted);
	font-size: 0.9rem;
}

.fc-cal__panel .fc-empty {
	padding: 16px 0;
}

.fc-cal__group {
	margin: 12px 0 0;
}

.fc-cal__group-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 2px solid var(--fc-primary);
	font-weight: 700;
	cursor: pointer;
}

.fc-cal__group--folklore .fc-cal__group-title { border-color: var(--fc-accent); }
.fc-cal__group--morris .fc-cal__group-title { border-color: var(--fc-morris); }
.fc-cal__group--lore .fc-cal__group-title { border-color: var(--fc-parchment-edge); }

.fc-cal__group--lore .fc-day__lore {
	margin-top: 10px;
}

.fc-cal__group-count {
	margin-left: auto;
	color: var(--fc-muted);
	font-size: 0.9rem;
}

.fc-cal__group .fc-list {
	margin-top: 10px;
}

/* On a phone: a number and a dot a kind, the words left to the panel. */
@media (max-width: 39.99rem) {
	.fc-cal__grid {
		border-spacing: 2px;
		margin: 0 -2px;
		width: calc(100% + 4px);
	}

	.fc-cal__cell,
	.fc-cal__day {
		height: 3.4rem;
	}

	.fc-cal__day {
		align-items: center;
		gap: 2px;
		padding: 3px 1px;
	}

	.fc-cal__head {
		flex-direction: column;
		gap: 0;
	}

	.fc-cal__moon {
		display: none;
	}

	.fc-cal__body {
		display: none;
	}

	.fc-cal__dots {
		display: flex;
	}

	.fc-cal__grid th {
		font-size: 0.7rem;
		letter-spacing: 0;
	}

	/* Month and county side by side, sharing the width. */
	.fc-cal__pick {
		flex: 1 1 100%;
		flex-wrap: nowrap;
	}

	.fc-cal__select {
		flex: 1 1 0;
		min-width: 0;
	}

	.fc-cal__select select {
		width: 100%;
		max-width: none;
	}

	.fc-cal__title {
		min-width: 0;
		font-size: 1.2rem;
	}
}

/* Wide: the panel beside the grid, as long as its day, scrolling with the
   page; the grid stays in view while it does, so another day is always a
   click away however far down the list the reader has gone. */
@media (min-width: 64rem) {
	.fc-cal {
		grid-template-columns: minmax(0, 1fr) 25rem;
		gap: 24px;
	}

	.fc-cal__month {
		position: sticky;
		top: 12px;
	}

	.admin-bar .fc-cal__month {
		top: 44px;
	}
}

/* ==========================================================================
   Folk clubs (single-fc_club.php, single-fc_club_night.php, archive-fc_club.php)
   ========================================================================== */

/* A guest night in a list or on the calendar: a deep blue, apart from a
   session's green, a custom's amber and morris heather. */
.fc-row__kind--club,
.fc-cal__item--club,
.fc-cal__count--club {
	border-color: var(--fc-club);
	background: var(--fc-club-tint);
	color: var(--fc-club);
}

.fc-cal__dot--club { background: var(--fc-club); }
.fc-cal__group--club .fc-cal__group-title { border-color: var(--fc-club); }

/* A club night's map pin: a session's green teardrop with an amber note
   where the dot would be, upright inside the turned pin. */
.fc-pin--club span::after {
	width: 16px;
	height: 16px;
	margin: 3px;
	border-radius: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 3v12.2' stroke='%23e8a936' stroke-width='2.4' fill='none'/%3E%3Cpath d='M15 3c2.6 1.6 4.6 3 4.6 6.2' stroke='%23e8a936' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='10.6' cy='16.6' rx='4.8' ry='3.8' fill='%23e8a936'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: rotate(45deg);
}

/* Club nights cluster only with each other: the green disc with the note on
   its rim, as morris has its bell. */
.fc-cluster--club span {
	position: relative;
}

.fc-cluster--club span::after {
	content: "";
	position: absolute;
	top: -7px;
	right: -7px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--fc-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 3v12.2' stroke='%23e8a936' stroke-width='2.4' fill='none'/%3E%3Cpath d='M15 3c2.6 1.6 4.6 3 4.6 6.2' stroke='%23e8a936' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='10.6' cy='16.6' rx='4.8' ry='3.8' fill='%23e8a936'/%3E%3C/svg%3E") center / 12px no-repeat;
	box-shadow: 0 0 0 2px var(--fc-surface);
}

/* A club's programme: a date chip and who is on, a night a line. */
.fc-club__nights {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.fc-club__night {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 0;
	border-top: 1px solid var(--fc-border);
}

.fc-club__night:first-child {
	border-top: 0;
}

.fc-club__night p {
	margin: 0;
}

.fc-club__who {
	font-weight: 600;
}

.fc-club__past summary {
	cursor: pointer;
	font-weight: 600;
}

.fc-club-night h1 {
	margin-top: 4px;
}

/* A club's programme mixes its guest nights with its singers' and open
   nights: the guest nights lead, the rest read lighter. */
.fc-club__who--session {
	font-weight: 400;
}

.fc-club__night.is-cancelled .fc-club__who {
	text-decoration: line-through;
}

/* The date chip in a club's programme and an artist's "See live": the same
   width as in a list row (4.25rem), not shrunk to its text by the flex row. */
.fc-club__night .fc-datechip {
	flex: 0 0 4.25rem;
	width: 4.25rem;
	box-sizing: border-box;
}

/* A singers' night a guest night replaced: news, not a warning. */
.fc-notice--guest {
	border-left-color: var(--fc-club);
	background: var(--fc-club-tint);
}

/* How to book a club night: the website for every club, a premium club's
   ticket link and email too. */
.fc-booking {
	margin: 12px 0;
	padding: 10px 14px;
	border-left: 4px solid var(--fc-club);
	border-radius: 8px;
	background: var(--fc-club-tint);
}

.fc-booking .eyebrow {
	margin: 0 0 4px;
}

.fc-booking ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fc-booking li + li {
	margin-top: 4px;
}

/* ==========================================================================
   Dances (single-fc_dance.php, single-fc_dance_club.php, archive-fc_dance.php,
   taxonomy-fc_dance_style.php)
   ========================================================================== */

/* A dance in a list or on the calendar: teal, apart from a session's green,
   a custom's amber, morris heather and a club night's blue. */
.fc-row__kind--dance,
.fc-cal__item--dance,
.fc-cal__count--dance {
	border-color: var(--fc-dance);
	background: var(--fc-dance-tint);
	color: var(--fc-dance);
}

.fc-cal__dot--dance { background: var(--fc-dance); }
.fc-cal__group--dance .fc-cal__group-title { border-color: var(--fc-dance); }

/* A dance's map pin: a session's green teardrop with an amber dancer where
   the dot would be, upright inside the turned pin. */
.fc-pin--dance span::after {
	width: 16px;
	height: 16px;
	margin: 3px;
	border-radius: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='4.2' r='2.6' fill='%23e8a936'/%3E%3Cpath d='M12 8.2 6.5 4.6M12 8.2l5.5-3.6M10.6 18.5 9 22.5M13.4 18.5l1.6 4' stroke='%23e8a936' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M12 7.4 6.8 18.6h10.4Z' fill='%23e8a936'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: rotate(45deg);
}

/* Dances cluster only with each other: the green disc with the dancer on
   its rim, as clubs have their note. */
.fc-cluster--dance span {
	position: relative;
}

.fc-cluster--dance span::after {
	content: "";
	position: absolute;
	top: -7px;
	right: -7px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--fc-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='4.2' r='2.6' fill='%23e8a936'/%3E%3Cpath d='M12 8.2 6.5 4.6M12 8.2l5.5-3.6M10.6 18.5 9 22.5M13.4 18.5l1.6 4' stroke='%23e8a936' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M12 7.4 6.8 18.6h10.4Z' fill='%23e8a936'/%3E%3C/svg%3E") center / 12px no-repeat;
	box-shadow: 0 0 0 2px var(--fc-surface);
}

/* The style chips at the top of /dances/ and a style's page. */
.fc-dance-styles {
	margin: 0 0 16px;
}

.fc-dance-styles .fc-chip.is-current {
	border-color: var(--fc-dance);
	background: var(--fc-dance);
	color: var(--fc-surface);
	font-weight: 600;
}

/* Who is welcome, under a dance's facts: the first thing most readers ask. */
.fc-dance__welcome {
	margin: 4px 0 0;
	color: var(--fc-dance);
	font-weight: 600;
}

/* "Band: ..." and "Caller: ..." under the title. */
.fc-dance__people {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 8px;
	margin: 4px 0 0;
}

.fc-dance__people dt {
	color: var(--fc-muted);
}

.fc-dance__people dd {
	margin: 0;
}

/*
 * Under When on a listing's page: who plays, who runs it, who it is for,
 * and its tags, each line with room of its own.
 */
.fc-listing__details {
	margin: 0 0 var(--fc-gap);
}

.fc-listing__details.fc-listing__details > * {
	margin: 0;
}

.fc-listing__details.fc-listing__details > * + * {
	margin-top: 10px;
}

/* "Organiser: name" (fc_theme_organiser_line()). */
.fc-organiser {
	margin: 0 0 12px;
}

/*
 * A title with a small Save star and Share at its right
 * (fc_theme_title_row()): two quiet circles, not a second heading. "Link
 * copied" drops below them so it never pushes the title.
 */
.fc-title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 8px;
}

.fc-title-row h1 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.fc-title-row__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
}

.fc-title-row__actions .fc-bookmark__button,
.fc-share-link--icon .fc-share-link__button {
	justify-content: center;
	width: 40px;
	min-width: 40px;
	min-height: 40px;
	padding: 0;
	border: 1px solid var(--fc-muted);
	border-radius: 999px;
	color: var(--fc-link);
}

.fc-title-row__actions .fc-bookmark__button:hover,
.fc-share-link--icon .fc-share-link__button:hover {
	border-color: currentcolor;
}

.fc-title-row__actions .fc-bookmark__button[aria-pressed="true"] {
	border-color: var(--fc-accent);
	background: var(--fc-accent-tint);
	color: var(--fc-accent);
}

.fc-share-link--icon {
	position: relative;
}

.fc-share-link--icon .fc-share-link__done {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 4px;
	white-space: nowrap;
}

/* Who runs a session: a folk club's singers' night names its club. */
.fc-run-by {
	margin: -4px 0 12px;
	font-weight: 600;
}

/* A singers' night a guest night replaced, in the dates list. */
.fc-badge--guest {
	background: var(--fc-club);
}

/* The definitions page (page-definitions.php): a question, its answers. */
.fc-definitions__section {
	scroll-margin-top: 16px;
}

.fc-definitions__question {
	margin: 0 0 12px;
	font-size: 1.15rem;
	font-weight: 700;
}

.fc-definitions__choices dt {
	font-weight: 700;
}

.fc-definitions__choices dd {
	margin: 0 0 12px;
}

.fc-definitions__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 12px 0 0;
	font-weight: 600;
}