/**
 * Fredericton Disc Golf — the CSS block supports cannot express.
 *
 * Everything here either (a) reaches a property theme.json has no key for
 * (font-stretch, font-variant-numeric, position, mask), or (b) implements a
 * named block style a volunteer can pick from the sidebar. Tokens always come
 * from theme.json; nothing below invents a value. No !important, logical
 * properties throughout.
 *
 * 1.  Token aliases
 * 2.  Typographic voice (the width axis)
 * 3.  Skip link and focus
 * 4.  Page furniture — masthead, footer, section heads
 * 5.  Tables — the hero component
 * 6.  Named block styles
 * 7.  Season components — rain-out, figures, cards
 * 8.  React islands
 * 9.  Motion
 * 10. Print
 * 11. Late additions in use
 * 12. Icons
 * 13. Page heads
 * 14. The calendar's CSS reset
 * 15. The Events Calendar's palette
 */

/* -------------------------------------------------------------- 1. Tokens */

:root {
	--fdg-paper: var(--wp--preset--color--paper, #f7f3e9);
	--fdg-paper-shade: var(--wp--preset--color--paper-shade, #ede6d5);
	--fdg-ink: var(--wp--preset--color--ink, #15211c);
	--fdg-graphite: var(--wp--preset--color--graphite, #4a5852);
	--fdg-fairway: var(--wp--preset--color--fairway, #1c5b3e);
	--fdg-blaze: var(--wp--preset--color--blaze, #b53a10);
	--fdg-storm: var(--wp--preset--color--storm, #172c3a);
	--fdg-frost: var(--wp--preset--color--frost, #dbe7e9);
	--fdg-blaze-light: var(--wp--custom--color--blaze-light, #f59156);
	--fdg-frost-dim: var(--wp--custom--color--frost-dim, #a9bec4);

	--fdg-rule: var(--wp--custom--rule--hairline, #c9c0ac);
	--fdg-rule-strong: var(--wp--custom--rule--strong, #8c8574);
	--fdg-rule-heavy: var(--wp--custom--rule--heavy, #15211c);

	--fdg-display: var(--wp--preset--font-family--display, sans-serif);
	--fdg-stretch-display: var(--wp--custom--stretch--display, 82%);
	--fdg-stretch-label: var(--wp--custom--stretch--label, 75%);
	--fdg-stretch-figure: var(--wp--custom--stretch--figure, 70%);
	--fdg-tracking-label: var(--wp--custom--tracking--label, 0.1em);
	--fdg-tracking-figure: var(--wp--custom--tracking--figure, -0.03em);

	--fdg-target: var(--wp--custom--control--min-target, 2.75rem);

	/*
	 * The only soft shape in the system. Rules, tables, cards, chips and fields
	 * are all square on purpose; a button is the thing you press, and the pill
	 * is what says so. Buttons written by hand in the islands had drifted to
	 * square and to 2px, so the shape now comes from one token.
	 */
	--fdg-radius: var(--wp--custom--radius--control, 999px);

	/*
	 * What a button is painted with, and what it turns when you press it.
	 * theme.json's button element reads the same two tokens, so the fill
	 * lives in one place — but everything here names the alias, because an
	 * alias carries a fallback and a bare `var()` does not. A custom
	 * property that fails to resolve does not fall back to the rule
	 * underneath it: the declaration is invalid at computed-value time and
	 * the property is thrown back to `unset`, which for a colour means the
	 * label inherits ink and disappears into an ink pill.
	 */
	--fdg-control-fill: var(--wp--custom--control--fill, #15211c);
	--fdg-control-fill-hover: var(--wp--custom--control--fill-hover, #1c5b3e);

	/*
	 * The hard shadow at card scale.
	 *
	 * theme.json's three presets are the right thing for a volunteer picking
	 * one in the editor and the wrong thing here: their value is a literal
	 * hex, so a card keeping its depth under the night palette — where `ink`
	 * is a light cream — has to name the token instead. The offset is the
	 * `hard` preset's, doubled and a half, which is what a card needs and a
	 * chip does not.
	 */
	--fdg-shadow-card: 10px 10px 0 0 var(--fdg-ink);
	--fdg-focus-color: var(--wp--custom--focus--color, #b53a10);
	--fdg-focus-width: var(--wp--custom--focus--width, 3px);
	--fdg-focus-offset: var(--wp--custom--focus--offset, 2px);
	--fdg-quick: var(--wp--custom--motion--quick, 120ms);
	--fdg-ease: var(--wp--custom--motion--ease, cubic-bezier(0.2, 0.7, 0.3, 1));
}

/* ------------------------------------------------- 2. Typographic voice */

/*
 * Archivo is a variable font with a width axis. The whole identity rides on it:
 * headings sit at 82%, structural labels at 75%, scoreboard numerals at 70%.
 * Newsreader carries prose and nothing else.
 */

body {
	-webkit-font-smoothing: antialiased;
	hanging-punctuation: first allow-end;
	text-wrap: pretty;
}

h1,
h2,
h3,
h4,
.wp-block-post-title,
.wp-block-query-title,
.wp-block-site-title {
	font-stretch: var(--fdg-stretch-display);
	text-wrap: balance;
}

h5,
h6,
.fdg-stat__label,
.wp-block-navigation,
.wp-block-post-date,
.wp-block-post-terms,
.wp-block-post-author-name,
figcaption,
cite,
th,
.wp-element-button,
.wp-block-button__link,
.is-style-fdg-eyebrow {
	font-stretch: var(--fdg-stretch-label);
}

/* Every figure in this site is a score, a distance or a date. Line them up. */
table,
.fdg-figure,
.wp-block-post-date,
time {
	font-variant-numeric: tabular-nums lining-nums;
}

/*
 * The structural label above a section heading.
 *
 * It used to carry a small blaze square in front of it, on the argument that a
 * system with no icon set wants one recurring mark. Counted on the rendered
 * home page it appears fourteen times, always at the top-left of something,
 * and at that frequency it stopped being a mark and became a stutter — the eye
 * caught the square before the word every time. The rule, the caps and the
 * tracking already say this is a label.
 *
 * With the square gone the row has one child, so the flex line and its gap go
 * with it.
 */
.is-style-fdg-eyebrow {
	color: var(--fdg-graphite);
	font-family: var(--fdg-display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--fdg-tracking-label);
	line-height: 1.3;
	margin-block-end: var(--wp--preset--spacing--20);
	text-transform: uppercase;
}

/* The small label above a figure — "Entry", "Season points", "Next mini".
   These were <h6> and looked right, which is how they survived: they are
   labels for the number underneath, not headings, and marking them up as
   headings put seven meaningless entries in the outline a screen reader reads
   and made the home page start at h6. Same rules as an h6 so nothing moves. */
.fdg-stat__label {
	color: var(--fdg-graphite);
	font-family: var(--fdg-display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--fdg-tracking-label);
	line-height: 1.3;
	text-transform: uppercase;
}

.is-style-fdg-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
	max-inline-size: var(--wp--custom--measure--prose, 38rem);
}

/*
 * A constrained layout hands every unaligned child
 * `margin-left: auto !important; margin-right: auto !important`. That is
 * harmless while the child fills the container, but the moment the lede takes
 * its 38rem measure inside a 76rem column those margins centre it: it stepped
 * 304px in from the heading it answers while the paragraph below it stayed
 * flush, on every FAQ, every page header and every archive intro on the site.
 * Core wrote the !important, so answering it needs one; scoping to a
 * constrained parent keeps it off the ledes that already sit right.
 */
:where(.is-layout-constrained) > .is-style-fdg-lede {
	margin-inline: 0 !important;
}

/* --------------------------------------------- 3. Skip link and focus */

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

a.skip-link.screen-reader-text:focus {
	background-color: var(--fdg-blaze);
	block-size: auto;
	border-radius: var(--fdg-radius);
	box-shadow: 4px 4px 0 0 var(--fdg-ink);
	clip-path: none;
	color: var(--fdg-paper);
	font-family: var(--fdg-display);
	font-size: 0.875rem;
	font-stretch: var(--fdg-stretch-label);
	font-weight: 700;
	inline-size: auto;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	letter-spacing: var(--fdg-tracking-label);
	line-height: 1;
	padding: 0.9rem 1.25rem;
	text-decoration: none;
	text-transform: uppercase;
	z-index: 100000;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--fdg-focus-width) solid var(--fdg-focus-color);
	outline-offset: var(--fdg-focus-offset);
}

/* Blaze is too dark on the dark surfaces. Step the ring up a stop. */
.fdg-masthead :focus-visible,
.fdg-footer :focus-visible,
.fdg-rainout :focus-visible,
.fdg-invert :focus-visible {
	--fdg-focus-color: var(--fdg-blaze-light);
}

/* Nav links and buttons are hit with a thumb, outdoors, in a hurry. */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-button__link,
.wp-element-button {
	min-block-size: var(--fdg-target);
	display: inline-flex;
	align-items: center;
}

/*
 * Optical centring for the all-caps controls.
 *
 * These labels are uppercase, so the line box reserves descender space that no
 * glyph ever occupies, and `align-items: center` centres that box rather than
 * the letters inside it. Measured against the rendered pixels, the label lands
 * 1.25px high on a button and 1.38px high on a nav link.
 *
 * `text-box-trim` is the property meant for this, and it does nothing here:
 * these are flex containers, so the label is an anonymous flex item that the
 * trim never reaches. Revisit if the markup ever gives the label an element of
 * its own.
 *
 * So the correction is `cap-shift`, 0.1em — roughly half the descender the
 * caps never use. The nav link has no block padding to borrow from, so it
 * takes the whole shift as extra padding above. The button moves the shift
 * from its bottom padding to its top, which keeps the button's height to the
 * pixel but travels twice as far, so it takes half. Both land within a quarter
 * pixel of centred, which is where the measurement itself runs out.
 */
.wp-block-button__link,
.wp-element-button {
	padding-block-start: calc(var(--wp--custom--control--pad-block) + var(--wp--custom--control--cap-shift) / 2);
	padding-block-end: calc(var(--wp--custom--control--pad-block) - var(--wp--custom--control--cap-shift) / 2);
}

.wp-block-navigation .wp-block-navigation-item__content {
	padding-block-start: var(--wp--custom--control--cap-shift);
}

/* ------------------------------------------------- 4. Page furniture */

/*
 * The lockup straddles the status bar and the navigation bar rather than
 * sitting inside one of them, so the masthead is the positioning context and
 * the two bars need to be able to be drawn over.
 */
.fdg-masthead {
	position: relative;
}

/*
 * The main element sits against the masthead.
 *
 * The root block gap puts `margin-block-start` on every child of
 * `.wp-site-blocks`, which is right between two blocks of content and wrong
 * between the three bands the page is made of: it drew a 24px strip of paper
 * between the ink masthead and whatever opens the page — the page head band
 * on every interior template, the hero photograph on the front page. Both are
 * meant to start where the masthead stops.
 *
 * Only `main`. The footer keeps its gap; there the strip is paper above paper
 * and taking it away would only pull the footer 24px up the page.
 */
:where(.wp-site-blocks) > main {
	margin-block-start: 0;
}

/*
 * `z-index` is what puts the lockup over the status bar's background. Without
 * it the bar is a later-painted background and swallows the artwork that rises
 * into it.
 */
.fdg-masthead .wp-block-site-title {
	font-stretch: var(--fdg-stretch-label);
	margin-block: 0;
	position: relative;
	z-index: 1;
}

/*
 * When the row does wrap — roughly 600px to 700px, between the overlay menu
 * taking over and the bar fitting on one line — the navigation sits under the
 * lockup rather than beside it. Close the gap so that reads as the second line
 * of a masthead and not as a stray row.
 */
.fdg-masthead__row {
	row-gap: var(--wp--preset--spacing--20);
}

/* Below the wide measure the labels need the room more than the gaps do. */
@media (width <= 68rem) {

	.fdg-masthead .wp-block-navigation {
		gap: var(--wp--preset--spacing--30);
	}
}

/*
 * The lockup.
 *
 * The club's logo is a full lockup — the wordmark is drawn into it — so it
 * replaces the site title rather than sitting beside it. The text stays in the
 * markup and in the accessibility tree; `text-indent` pushes it out of a box
 * that clips, which is the long-standing image-replacement technique and the
 * only one that keeps a screen reader reading the site's name. Drawing the
 * logo on the title's own anchor also means it is one link home, and a
 * volunteer cannot delete half of it in the editor.
 *
 * It rises out of the navigation bar and over the status bar above it, and
 * that rise is what pays for the extra size: the artwork borrows the height of
 * the bar above rather than pushing the masthead taller, so the lockup ends up
 * bigger and the masthead ends up shorter.
 *
 * The rise is a negative block-start margin rather than a transform, because
 * the row is a flex line and the margin has to come off that line's height for
 * the masthead to close up behind it. A transform would leave the old height
 * standing and open a gap under the logo.
 */
.fdg-masthead .wp-block-site-title a {
	--fdg-logo-block: var(--wp--custom--logo--height, 6rem);
	--fdg-logo-rise: 0;

	block-size: var(--fdg-logo-block);
	display: block;

	/* 338 × 191 is the artwork's own shape. */
	inline-size: calc(var(--fdg-logo-block) * 338 / 191);
	margin-block-start: calc(var(--fdg-logo-rise) * -1);
	overflow: hidden;
	position: relative;
	text-indent: 110%;
	white-space: nowrap;
}

/*
 * Two masks, one per ink, stacked — still two files because that is how the
 * artwork separates, but both are now painted in the masthead's own text
 * colour.
 *
 * The club's red on the fairway green of the status bar sits at about 1.4:1.
 * On a dark ground it reads as a smudge rather than as a colour, and the
 * wordmark — which is the half drawn in red — is the part that has to survive
 * at masthead size. A logotype is exempt from contrast rules, but being
 * allowed to be illegible is not a reason to be. The red stays the club's red
 * everywhere it has a light ground behind it.
 *
 * Painting both masks in `currentcolor` also means the lockup reverses with
 * the palette: cream on ink here, near-black under the night variation where
 * `ink` is a light cream and this bar is light. Restoring the red is one
 * declaration — swap the `::after` background back.
 */
.fdg-masthead .wp-block-site-title a::before,
.fdg-masthead .wp-block-site-title a::after {
	background-color: currentcolor;
	content: "";
	inset: 0;
	position: absolute;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fdg-masthead .wp-block-site-title a::before {
	-webkit-mask-image: url(../img/fdg-logo-ink.png);
	mask-image: url(../img/fdg-logo-ink.png);
}

.fdg-masthead .wp-block-site-title a::after {
	-webkit-mask-image: url(../img/fdg-logo-red.png);
	mask-image: url(../img/fdg-logo-red.png);
}

/*
 * Without mask support there is no logo to show and the box would be empty,
 * so give the title back its text rather than leaving a link with nothing in
 * it. The name then sets over two lines: the anchor is sized to min-content,
 * which for a flex row is the longest word, so it breaks after "Fredericton".
 */
@supports not ((mask-image: url(../img/fdg-logo-ink.png)) or (-webkit-mask-image: url(../img/fdg-logo-ink.png))) {

	.fdg-masthead .wp-block-site-title a {
		block-size: auto;
		display: flex;
		inline-size: min-content;
		overflow: visible;
		text-indent: 0;
		white-space: normal;
	}

	.fdg-masthead .wp-block-site-title a::before,
	.fdg-masthead .wp-block-site-title a::after {
		content: none;
	}
}

/* A season line sits above the masthead: what is on, and when. */
.fdg-status-bar {
	font-family: var(--fdg-display);
	font-size: var(--wp--preset--font-size--x-small);
	font-stretch: var(--fdg-stretch-label);
	font-weight: 600;
	letter-spacing: var(--fdg-tracking-label);
	text-transform: uppercase;
}

.fdg-status-bar p {
	margin-block: 0;
}

/*
 * The lockup rises into this bar, but only once there is room for it. Below
 * 48rem the masthead stacks, and a lockup rising into the bar would land
 * within a couple of pixels of the season line, so it stays down in its own
 * bar instead.
 *
 * The season line itself no longer needs holding off the lockup: it sits with
 * the CTA at the end of the bar, so the left of the bar is the lockup's alone.
 */
@media (width > 48rem) {

	.fdg-masthead .wp-block-site-title a {
		--fdg-logo-rise: var(--wp--custom--logo--rise, 2.5rem);
	}
}

/*
 * The one call to action that is on every page, and it shipped in the global
 * link colour: blaze on the status bar's fairway is 1.17:1, which is not a
 * low-contrast link, it is an invisible one. Same failure the footer had.
 *
 * Paper on fairway is the pairing the bar's own text already uses and is
 * asserted in ThemeContrastTest. The ring turns it into something that reads
 * as a control rather than as more of the sentence beside it, and the padding
 * takes the target past the 24px WCAG 2.2 minimum in a bar this short.
 */
.fdg-status-bar__cta a {
	align-items: center;
	border: var(--wp--custom--rule--width, 1px) solid currentcolor;
	border-radius: var(--fdg-radius);
	color: inherit;
	display: inline-flex;
	gap: 0.4em;

	/* Same all-caps optical shift as the buttons above. */
	padding-block-start: calc(0.25rem + var(--wp--custom--control--cap-shift) / 2);
	padding-block-end: calc(0.25rem - var(--wp--custom--control--cap-shift) / 2);
	padding-inline: 0.7rem;
	text-decoration: none;
	transition:
		background-color var(--fdg-quick) var(--fdg-ease),
		color var(--fdg-quick) var(--fdg-ease);
}

.fdg-status-bar__cta a:hover,
.fdg-status-bar__cta a:focus-visible {
	background-color: var(--fdg-paper);
	color: var(--fdg-fairway);
}

/*
 * The footer is the quiet end of the page, and the hairline between the links
 * under each column title only adds noise down here. Three short columns of
 * small type on a dark ground are already separated by the whitespace between
 * them.
 */
.fdg-footer .wp-block-list.is-style-fdg-checklist > li + li {
	border-block-start: 0;
}

/*
 * Underlines go paper rather than blaze-light. Both clear the 3:1 a non-text
 * indicator needs on fairway, but at footer size the accent reads as a second
 * colour to keep track of; the rule the eye wants here is the one the words
 * are already set in. Carries both of the footer's classes so it outranks the
 * .fdg-invert default further down the file on specificity rather than on
 * source order.
 */
.fdg-invert.fdg-footer a:where(:not(.wp-element-button)) {
	text-decoration-color: var(--fdg-paper);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/*
 * Core hands an alpha-channel separator 0.4, which on fairway is a bar across
 * the footer. This one is parting a copyright line from the columns above it,
 * not dividing two arguments — a tenth of paper is enough to read as an edge.
 */
.fdg-footer .wp-block-separator {
	opacity: 0.1;
}

/*
 * Same argument for the diamond in front of each link: it is fairway on
 * fairway down here, so it has only ever been an indent that nothing appears
 * in. Hiding it drops it out of the flex row and the links line up under the
 * title they belong to.
 */
.fdg-footer .wp-block-list.is-style-fdg-checklist > li::before {
	display: none;
}

/*
 * And the underlines come off the two link columns. An underline earns its
 * place in a sentence, where it is the only thing marking a few words out as
 * a link — these are a stack of five, under a label, in a column of nothing
 * else, which is the same signal a nav gives. Everything that reads as prose
 * keeps its rule: the address block, and Contact in the copyright line.
 */
.fdg-invert.fdg-footer .is-style-fdg-checklist a:where(:not(.wp-element-button)) {
	text-decoration: none;
}

.fdg-invert.fdg-footer .is-style-fdg-checklist a:where(:not(.wp-element-button)):hover,
.fdg-invert.fdg-footer .is-style-fdg-checklist a:where(:not(.wp-element-button)):focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--fdg-paper);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/*
 * Section head: eyebrow, rule, headline. Used by every pattern so the page
 * reads as one document rather than a stack of unrelated boxes.
 */
.fdg-section-head {
	border-block-start: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-rule-heavy);
	padding-block-start: var(--wp--preset--spacing--20);
}

.fdg-section-head > * {
	margin-block: 0;
}

.fdg-section-head > * + * {
	margin-block-start: var(--wp--preset--spacing--10);
}

/*
 * Overlay navigation, opened with a thumb.
 *
 * Two things have to be undone here, and both are the desktop bar's settings
 * following the menu into a full-screen panel.
 *
 * The block's right-justification reaches the overlay as
 * `--navigation-layout-justification-setting`, which the overlay reads as
 * `align-items` on a column: every label pinned to the right edge of a phone.
 * Overriding the variable rather than the rule that consumes it leaves the
 * desktop bar — which has no `is-menu-open` — justified right as intended. It
 * has to be set twice: WordPress copies the navigation's own classes onto the
 * inner list, so `items-justified-right` redefines the variable there and an
 * inherited value never reaches the items.
 *
 * And the padding: the block library sets it from
 * `--wp--style--root--padding-*`, which this theme does not define, so the
 * declaration is invalid at computed-value time and resolves to zero. It still
 * wins the cascade at three classes, so the replacement has to match it rather
 * than sit at two.
 */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-align: flex-start;

	background-color: var(--fdg-ink);
	color: var(--fdg-paper);
	padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	padding-inline: var(--wp--preset--spacing--30);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-large);
	font-stretch: var(--fdg-stretch-display);
}

/*
 * Dropdowns. Eleven flat items was not a navigation, so the menu now has
 * sections — and the navigation block's own submenu styling is a white box
 * with a grey border, which belongs to a different website.
 *
 * The panel is the masthead's own colour with a heavy blaze rule across the
 * top, which is the same mark the section heads use, so a dropdown reads as
 * part of the page rather than as browser furniture. Paper on ink is 14.97:1
 * and the blaze-light hover is 7.16:1.
 */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--fdg-ink);
	border: 0;
	border-block-start: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-blaze);
	color: var(--fdg-paper);
	min-inline-size: 14rem;
	padding-block: 0.25rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--fdg-paper);
	font-size: var(--wp--preset--font-size--x-small);
	padding-block: 0.6rem;
	padding-inline: var(--wp--preset--spacing--30, 1rem);
	inline-size: 100%;
}

/* A hairline between rows, but not above the first — the blaze rule is
   already doing that job. */
.wp-block-navigation
.wp-block-navigation__submenu-container
.wp-block-navigation-item + .wp-block-navigation-item {
	border-block-start: 1px solid rgba(247, 243, 233, 0.16);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	color: var(--fdg-blaze-light);
}

/* Inside the overlay there is no panel to position — the children are simply
   the parent's list, indented, at the overlay's own size. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent;
	border-block-start: 0;
	padding-block: 0;
	padding-inline-start: var(--wp--preset--spacing--30, 1rem);
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container
.wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--medium);
	font-stretch: var(--fdg-stretch-label);
	padding-inline: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container
.wp-block-navigation-item + .wp-block-navigation-item {
	border-block-start: 0;
}

/* ------------------------------------------------------------ 5. Tables */

/*
 * Standings and schedules are the reason this site exists. On a phone the
 * table scrolls sideways, the first column stays put, and the edge shadows
 * appear only when there is actually something to scroll to — the shadows are
 * background layers pinned with background-attachment: local, so no script.
 */

.wp-block-table {
	background-attachment: local, local, scroll, scroll;
	background-image:
		linear-gradient(to right, var(--fdg-paper) 40%, rgba(247, 243, 233, 0)),
		linear-gradient(to left, var(--fdg-paper) 40%, rgba(247, 243, 233, 0)),
		linear-gradient(to right, rgba(21, 33, 28, 0.22), rgba(21, 33, 28, 0)),
		linear-gradient(to left, rgba(21, 33, 28, 0.22), rgba(21, 33, 28, 0));
	background-position: 0 0, 100% 0, 0 0, 100% 0;
	background-repeat: no-repeat;
	background-size: 2.5rem 100%, 2.5rem 100%, 0.9rem 100%, 0.9rem 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.wp-block-table table {
	border-collapse: collapse;
	inline-size: 100%;
	min-inline-size: 30rem;
}

.wp-block-table :where(th, td) {
	border: 0;
	border-block-end: 1px solid var(--fdg-rule);
	padding: 0.7rem 0.9rem;
	vertical-align: baseline;
}

.wp-block-table th {
	background-color: var(--fdg-ink);
	color: var(--fdg-paper);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--fdg-tracking-label);
	line-height: 1.2;
	text-align: start;
	text-transform: uppercase;
}

.wp-block-table tbody tr:nth-child(even) {
	background-color: var(--fdg-paper-shade);
}

.wp-block-table tbody tr:last-child :where(th, td) {
	border-block-end: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-rule-heavy);
}

.wp-block-table figcaption {
	padding-block-start: var(--wp--preset--spacing--20);
}

/* Standings: name on the left and stays there, numbers on the right. */
.wp-block-table.is-style-fdg-standings :where(th, td):not(:first-child) {
	text-align: end;
}

.wp-block-table.is-style-fdg-standings :where(thead th:first-child, tbody td:first-child) {
	inset-inline-start: 0;
	position: sticky;
	z-index: 1;
}

.wp-block-table.is-style-fdg-standings tbody td:first-child {
	background-color: var(--fdg-paper);
	box-shadow: 1px 0 0 0 var(--fdg-rule);
	font-weight: 600;
}

.wp-block-table.is-style-fdg-standings tbody tr:nth-child(even) td:first-child {
	background-color: var(--fdg-paper-shade);
}

.wp-block-table.is-style-fdg-standings tbody td:last-child {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: var(--fdg-tracking-figure);
}

/* Whoever is on top of the sheet gets the flag. */
.wp-block-table.is-style-fdg-standings tbody tr:first-child :where(th, td) {
	box-shadow: inset 0 var(--wp--custom--rule--width-heavy, 2px) 0 0 var(--fdg-blaze);
}

/* Scorecard: hole, par, distance. Every column is a number. */
.wp-block-table.is-style-fdg-scorecard :where(th, td) {
	text-align: end;
}

.wp-block-table.is-style-fdg-scorecard :where(th, td):first-child {
	text-align: start;
	font-weight: 600;
}

.wp-block-table.is-style-fdg-scorecard table {
	min-inline-size: 24rem;
}

/* ------------------------------------------------- 6. Named block styles */

.wp-block-group.is-style-fdg-ruled-box {
	border: 1px solid var(--fdg-rule-strong);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-group.is-style-fdg-pinned {
	background-color: var(--fdg-paper);
	border: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-ink);
	box-shadow: 6px 6px 0 0 var(--fdg-ink);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-columns.is-style-fdg-ruled-columns {
	border-block-start: 1px solid var(--fdg-rule);
	gap: 0;
}

.wp-block-columns.is-style-fdg-ruled-columns > .wp-block-column {
	border-block-end: 1px solid var(--fdg-rule);
	padding: var(--wp--preset--spacing--30) 0;
}

@media (min-width: 782px) {

	.wp-block-columns.is-style-fdg-ruled-columns > .wp-block-column {
		border-block-end: 0;
		border-inline-start: 1px solid var(--fdg-rule);
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}

	.wp-block-columns.is-style-fdg-ruled-columns > .wp-block-column:first-child {
		border-inline-start: 0;
		padding-inline-start: 0;
	}
}

/*
 * Field note: the answer to volunteer photography. A hard frame and a typeset
 * caption make an average snapshot read as evidence rather than as a failed
 * hero image.
 */
.wp-block-image.is-style-fdg-field-note {
	background-color: var(--fdg-paper);
	border: 1px solid var(--fdg-ink);
	padding: 0.5rem;
}

.wp-block-image.is-style-fdg-field-note img {
	display: block;
	inline-size: 100%;
}

.wp-block-image.is-style-fdg-field-note figcaption {
	background-color: var(--fdg-paper-shade);
	border-block-start: 1px solid var(--fdg-rule);
	margin-block: 0.5rem 0;
	padding: 0.55rem 0.7rem;
	text-align: start;
}

.wp-block-list.is-style-fdg-checklist {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-fdg-checklist > li {
	display: flex;
	gap: 0.75rem;
	padding-block: 0.45rem;
}

.wp-block-list.is-style-fdg-checklist > li + li {
	border-block-start: 1px solid var(--fdg-rule);
}

.wp-block-list.is-style-fdg-checklist > li::before {
	background-color: var(--fdg-fairway);
	block-size: 0.5em;
	content: "";
	flex: 0 0 auto;
	inline-size: 0.5em;
	margin-block-start: 0.55em;
	rotate: 45deg;
}

.wp-block-separator.is-style-fdg-heavy {
	background-color: var(--fdg-ink);
	border: 0;
	block-size: var(--wp--custom--rule--width-edge, 5px);
	opacity: 1;
}

/* ------------------------------------------- 7. Season components */

.fdg-rainout {
	background-color: var(--fdg-storm);
	border-block-start: var(--wp--custom--rule--width-edge, 5px) solid var(--fdg-blaze);
	color: var(--fdg-frost);
	position: relative;
}

.fdg-rainout::before {
	background-image: repeating-linear-gradient(135deg, rgba(245, 145, 86, 0.09) 0 10px, rgba(245, 145, 86, 0) 10px 24px);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.fdg-rainout > * {
	position: relative;
}

.fdg-rainout :where(h1, h2, h3, h4, p, li) {
	color: var(--fdg-frost);
}

.fdg-rainout .is-style-fdg-eyebrow {
	color: var(--fdg-blaze-light);
}

.fdg-rainout a:where(:not(.wp-element-button)) {
	color: var(--fdg-blaze-light);
}

/* The scoreboard numeral: a date, a week number, a points total. */
.fdg-figure {
	display: block;
	font-family: var(--fdg-display);
	font-size: var(--wp--preset--font-size--colossal);
	font-stretch: var(--fdg-stretch-figure);
	font-weight: 800;
	letter-spacing: var(--fdg-tracking-figure);
	line-height: 0.86;
	margin-block: 0;
}

.fdg-figure--small {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 0.92;
}

/*
 * A season is a range, not a numeral. "Apr–Nov" at the colossal step is wider
 * than the cell it sits in, so it takes one step down and lands on the same
 * baseline as the numerals beside it.
 */
.fdg-figure--range {
	font-size: var(--wp--preset--font-size--huge);
	line-height: 0.92;
}

/* Stat cell used by the season strip. */
.fdg-stat .fdg-figure {
	color: var(--fdg-ink);
}

/* Card list: an event, a course, a post. Hairline separated, no drop shadow. */
.fdg-card {
	border-block-start: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-rule-heavy);
	padding-block-start: var(--wp--preset--spacing--30);
	transition: translate var(--fdg-quick) var(--fdg-ease);
}

.fdg-card:hover,
.fdg-card:focus-within {
	translate: 0 -2px;
}

.fdg-card img {
	inline-size: 100%;
}

/*
 * The framed card.
 *
 * theme.json has carried three hard-shadow presets since the first commit and
 * nothing outside a focused skip link ever used one. The shadow is the only
 * depth cue in a system with no blur anywhere in it, which makes it worth
 * spending on the one grid where a card is a place somebody is choosing
 * between rather than an article in a list: the course archive is framed, the
 * news grid stays hairline-separated.
 *
 * The shadow is the card-scale token rather than one of theme.json's presets,
 * so the frame and the shadow under it reverse together when a style
 * variation redefines what ink is.
 */
.fdg-card--framed {
	background-color: var(--fdg-paper);

	/*
	 * The grid item is the <li> the post template wraps each card in, not the
	 * card. Without this the frames in a row are as tall as their own copy and
	 * the shadows under them land at three different depths.
	 */
	block-size: 100%;
	border: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-ink);
	box-shadow: var(--fdg-shadow-card);
	padding-block-start: 0;
}

.fdg-card__body {
	padding: var(--wp--preset--spacing--30);
}

.fdg-card__body > * {
	margin-block: 0;
}

.fdg-card__body > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}


/* Inverted surfaces: footer, storm banners, dark style variation. */
.fdg-invert :where(h1, h2, h3, h4, h5, p, li, td, th) {
	color: inherit;
}

/*
 * Links too, and this is the one that was missing. The global link colour is
 * blaze, an accent chosen against paper. On the footer's fairway it is 1.37:1
 * and on a storm banner 2.45:1 — the footer shipped with every link in it
 * effectively unreadable.
 *
 * On an inverted surface the link takes the surface's own text colour, which
 * is the contrast that was already checked, and the underline carries the
 * accent instead. A 1px rule is a graphic rather than text: blaze-light is
 * 3.47:1 on fairway, over the 3:1 a non-text indicator needs, while the words
 * themselves sit at 7.25:1.
 */
.fdg-invert a:where(:not(.wp-element-button)) {
	color: inherit;
	text-decoration-color: var(--fdg-blaze-light);
}

.fdg-invert a:where(:not(.wp-element-button)):hover,
.fdg-invert a:where(:not(.wp-element-button)):focus-visible {
	text-decoration-color: currentcolor;
	text-decoration-thickness: 2px;
}

/*
 * The season band.
 *
 * `colossal` has been in the type scale since the first theme.json and nothing
 * on the site reached it: every figure on the home page was set at
 * `.fdg-figure--small`, two steps down. This is the band it was defined for —
 * four numbers on the page's one dark surface between the hero and the
 * standings, which is also the change of gear the home page did not have.
 *
 * Everything inside takes the band's own paper through `.fdg-invert`, so
 * nothing here names a colour that would not reverse under a style variation.
 * The one thing that has to be said is the rules: the ruled-columns style
 * draws them in the hairline meant for paper, which on ink is brighter than
 * the figures it separates.
 */
.fdg-scoreboard .wp-block-columns.is-style-fdg-ruled-columns,
.fdg-scoreboard .wp-block-columns.is-style-fdg-ruled-columns > .wp-block-column {
	border-color: var(--fdg-graphite);
}

.fdg-scoreboard .fdg-figure {
	margin-block: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
}

.fdg-scoreboard .fdg-figure a {
	text-decoration: none;
}

/*
 * A figure that is also a link keeps the figure's colour. At 48px the accent
 * stops reading as "this is a link" and starts reading as "something is
 * wrong"; the underline is enough at that size.
 */
.fdg-figure a {
	color: inherit;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.12em;
}

.fdg-scoreboard__foot {
	border-block-start: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-graphite);
	gap: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--40);
}

.fdg-scoreboard__foot p {
	margin-block: 0;
	max-inline-size: var(--wp--custom--measure--prose, 38rem);
}

/*
 * The join band.
 *
 * The page used to end on a second ink band, which meant the loudest thing on
 * it and the quietest were painted the same colour. This is the one place
 * blaze is used at the size of a section, so the page has somewhere to arrive.
 *
 * Two inherited rules have to follow it in. The focus ring is blaze, which on
 * blaze is nothing at all; and an inverted surface underlines in blaze-light,
 * which is 2.53:1 here and under the 3:1 a non-text indicator needs. Both take
 * paper, which is 5.24:1 against this ground in the default palette and clears
 * 4.5:1 in all three variations — asserted in ThemeContrastTest.
 */
.fdg-cta :focus-visible {
	--fdg-focus-color: var(--fdg-paper);
}

.fdg-cta a:where(:not(.wp-element-button)) {
	text-decoration-color: var(--fdg-paper);
}

/*
 * The ask: a closing band with copy on one side and the actions on the
 * other. `fdg-cta` above is the blaze colour treatment and this is the
 * shape, which is why they are two classes — the membership page closes on
 * the same shape over ink.
 *
 * The text side takes the reading measure and no more, and the flex row it
 * sits in wraps when what is left will not hold the two pills. That is the
 * whole responsive behaviour of this band: one declaration, no breakpoint,
 * and nothing of core's overridden.
 *
 * `0` for the grow factor, not `1`. Letting it grow put the heading on one
 * 839px line and the paragraph at about 95 characters — wider than anything
 * else on the site is allowed to be, and it pulled the two pills away from
 * the corner they are meant to anchor.
 */
.fdg-ask__text {
	flex: 0 1 var(--wp--custom--measure--prose, 38rem);
}

.fdg-ask__text > * {
	margin-block: 0;
}

.fdg-ask__text > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/*
 * An empty section that still does something. The news band used to spend its
 * whole height in grey saying nothing had been written; the panel says the
 * same thing and hands over the place the club posts first.
 */
.fdg-empty-note {
	max-inline-size: var(--wp--custom--measure--prose, 38rem);
}

/* Homepage: give the introduction and league night a photographic counterpart.
   These are ordinary Image blocks, so volunteers can replace the generated
   photographs with club photos without changing the layout. */

/*
 * The hero.
 *
 * The photograph runs the full width of the viewport and the introduction sits
 * in a card that overlaps its lower edge. The band is a three-column grid —
 * gutter, measure, gutter — so the picture can bleed while the card keeps the
 * same left edge as every other section on the page.
 *
 * The overlap is a negative block-start margin on a grid item rather than a
 * transform or absolute positioning: the margin comes off the band's own
 * height, so the page closes up behind the card instead of leaving the gap the
 * picture used to occupy. No z-index is needed — the card is later in the
 * document than the picture, so it already paints on top.
 */
.fdg-home-hero {
	display: grid;
	grid-template-columns:
		minmax(var(--wp--preset--spacing--30), 1fr)
		minmax(0, var(--wp--style--global--content-size, 76rem))
		minmax(var(--wp--preset--spacing--30), 1fr);
	padding-block-end: var(--wp--preset--spacing--60);
}

.fdg-home-hero > .fdg-photo {
	grid-column: 1 / -1;
	margin: 0;
	position: relative;
}

.fdg-home-hero .fdg-photo--hero img {
	aspect-ratio: 2 / 1;
	max-block-size: 30rem;
}

/*
 * The caption is the one piece of the picture that has to stay readable, and
 * under a bleeding photograph there is no page edge left to hang it on. It
 * goes inside the frame instead, as a chip in the masthead's own pairing,
 * which reverses with the palette the way everything else on ink does.
 */
.fdg-home-hero .fdg-photo figcaption {
	background-color: var(--fdg-ink);
	border: 0;
	color: var(--fdg-paper);
	inset-block-end: 0;
	inset-inline-end: 0;
	padding: 0.5rem 0.9rem;
	position: absolute;
}

/*
 * Below 48rem the card is not a card.
 *
 * The frame exists to hold the copy off the photograph it overlaps, and on a
 * phone there is no overlap to hold anything off — a border round the whole
 * introduction is just a box. Dropping it also takes 65px off the scroll to
 * league night, measured at 390px: 32px of padding and the rest in lines the
 * narrower measure was costing. So the frame, the ground, the shadow and the
 * overlap all arrive together at 48rem, and below it the phone gets a
 * full-width photograph with the club's own words under it.
 */
.fdg-home-hero__card {
	grid-column: 2;
	padding-block-start: var(--wp--preset--spacing--50);
}

.fdg-home-hero__card > .wp-block-post-content {
	margin-block: 0;
	min-inline-size: 0;
}

.fdg-home-hero__card .wp-block-post-content > :first-child {
	margin-block-start: 0;
}

.fdg-home-hero__card .wp-block-post-content > :last-child {
	margin-block-end: 0;
}

/*
 * The overlap only earns its place where there is a photograph left either
 * side of the card. On a phone the card would cover most of the picture, so
 * the two simply stack.
 */
@media (width >= 48rem) {

	.fdg-home-hero__card {
		background-color: var(--fdg-paper);
		border: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-ink);
		box-shadow: var(--fdg-shadow-card);
		margin-block-start: calc(var(--wp--preset--spacing--70) * -1);
		max-inline-size: 44rem;
		padding: var(--wp--preset--spacing--60);
	}
}

.fdg-photo {
	margin-block: 0;
}

.fdg-photo img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: cover;
}

.fdg-photo--hero img {
	aspect-ratio: 6 / 5;
}

.fdg-photo--league img {
	aspect-ratio: 3 / 2;
}

.fdg-photo figcaption {
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--20);
	border-block-end: 1px solid var(--fdg-rule);
	text-align: start;
}

.fdg-league-feature {
	border-block-start: 1px solid var(--fdg-rule);
	padding-block-start: var(--wp--preset--spacing--60);
}

.fdg-league-welcome {
	padding-block-start: var(--wp--preset--spacing--20);
}

.fdg-course-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--60);
	background-color: var(--fdg-paper-shade);
	padding: var(--wp--preset--spacing--50);
	margin-block: var(--wp--preset--spacing--60);
}

.fdg-course-intro > * {
	margin-block: 0;
}

.fdg-course-intro h2 {
	max-inline-size: 14ch;
}

.fdg-home-questions {
	padding-block-start: var(--wp--preset--spacing--50);
}

.fdg-home-questions > .wp-block-group {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60);
}

.fdg-home-questions .fdg-faq {
	margin-block: 0;
}

@media (width < 782px) {

	.fdg-course-intro,
	.fdg-home-questions > .wp-block-group {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}

	.fdg-photo--hero img {
		aspect-ratio: 3 / 2;
	}

	/*
	 * A taller crop would push league night — the one thing somebody looking
	 * at this on a phone came for — another screen down.
	 */
	.fdg-home-hero .fdg-photo--hero img {
		aspect-ratio: 3 / 2;
		max-block-size: 50vh;
	}

	.fdg-scoreboard .wp-block-columns.is-style-fdg-ruled-columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--wp--preset--spacing--40);
	}

	.fdg-league-feature .is-style-fdg-ruled-columns {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--20);
	}

	.fdg-league-feature .fdg-figure--small {
		font-size: var(--wp--preset--font-size--x-large);
	}

	/*
	 * Where, when and what format, in a frame. On a phone this is the card
	 * somebody reads standing up, so it stops being three ruled cells in a
	 * column of prose and becomes one object.
	 */
	.fdg-league-feature .wp-block-columns.fdg-league-facts {
		background-color: var(--fdg-paper-shade);
		border: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-ink);
		padding: var(--wp--preset--spacing--30);
	}

	.fdg-league-feature .wp-block-columns.fdg-league-facts > .wp-block-column {
		border-block-end: 0;
		padding-block: 0;
	}
}

/* --------------------------------------------------- 8. React islands */

/*
 * The plugin mounts React into <div class="fdg-island fdg-island--handle">.
 * Nothing below assumes what is inside it: the point is that whatever the
 * island renders inherits this design system instead of looking bolted on.
 */

.fdg-island {
	border-block-start: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-rule-heavy);
	font-family: var(--fdg-display);
	font-size: var(--wp--preset--font-size--small);
	margin-block: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--30);
}

.fdg-island :where(h2, h3, h4) {
	font-stretch: var(--fdg-stretch-display);
}

.fdg-island table {
	border-collapse: collapse;
	inline-size: 100%;
	font-variant-numeric: tabular-nums lining-nums;
}

.fdg-island :where(th, td) {
	border-block-end: 1px solid var(--fdg-rule);
	padding: 0.7rem 0.9rem;
	text-align: start;
}

.fdg-island th {
	background-color: var(--fdg-ink);
	color: var(--fdg-paper);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--fdg-tracking-label);
	text-transform: uppercase;
}

.fdg-island tbody tr:nth-child(even) {
	background-color: var(--fdg-paper-shade);
}

.fdg-island :where(button, .fdg-button) {
	background-color: var(--fdg-fairway);
	border: 2px solid var(--fdg-ink);
	border-radius: var(--fdg-radius);
	color: var(--fdg-paper);
	cursor: pointer;
	font-family: var(--fdg-display);
	font-size: var(--wp--preset--font-size--small);
	font-stretch: var(--fdg-stretch-label);
	font-weight: 700;
	letter-spacing: var(--fdg-tracking-label);
	min-block-size: var(--fdg-target);
	padding: 0.7rem 1.25rem;
	text-transform: uppercase;
}

.fdg-island :where(button, .fdg-button):hover {
	background-color: var(--fdg-ink);
}

/*
 * The quiet one.
 *
 * Every button in an island is a filled fairway pill. That is right for a
 * check-in, which is the only thing on its screen, and wrong for the third
 * control inside a list item: in the course finder it made "show on the map"
 * heavier than the name of the course above it, so the list read as a column
 * of buttons with captions. This is the same control at the weight of a link.
 *
 * It keeps the 2.75rem target — it is still pressed with a thumb, outdoors —
 * and it keeps the underline, because without the pill the only thing left
 * saying this is a control is the text decoration.
 */
.fdg-island :where(button.fdg-quiet, .fdg-button--quiet) {
	background-color: transparent;
	border-color: transparent;
	color: var(--fdg-blaze);
	font-size: var(--wp--preset--font-size--x-small);
	padding-inline: 0;
	text-align: start;
	text-decoration: underline;
	text-transform: none;
	text-underline-offset: 0.25em;
}

.fdg-island :where(button.fdg-quiet, .fdg-button--quiet):hover {
	background-color: transparent;
	color: var(--fdg-ink);
}

.fdg-island :where(input, select) {
	background-color: var(--fdg-paper);
	border: 2px solid var(--fdg-rule-strong);
	border-radius: 0;
	color: var(--fdg-ink);
	font-family: var(--fdg-display);
	font-size: 1rem;
	min-block-size: var(--fdg-target);
	padding: 0.5rem 0.7rem;
}

/* The check-in island is a form used outdoors. Give it room. */
.fdg-island--checkin :where(button, .fdg-button) {
	font-size: var(--wp--preset--font-size--medium);
	inline-size: 100%;
	justify-content: center;
	min-block-size: 3.5rem;
}

/* Loading: ruled rows waiting to be filled, and a blaze bar that sweeps. */
.fdg-island__loading {
	align-content: start;
	background-image: repeating-linear-gradient(to bottom, rgba(201, 192, 172, 0) 0 2.6rem, var(--fdg-rule) 2.6rem calc(2.6rem + 1px));
	color: var(--fdg-graphite);
	display: grid;
	font-size: var(--wp--preset--font-size--x-small);
	gap: 0.75rem;
	justify-items: start;
	letter-spacing: var(--fdg-tracking-label);
	min-block-size: 10.4rem;
	padding-block-start: 0.9rem;
	text-transform: uppercase;
}

.fdg-island__loading::before {
	animation: fdg-sweep 1s var(--fdg-ease) infinite alternate;
	background-color: var(--fdg-blaze);
	block-size: 3px;
	content: "";
	display: block;
	inline-size: 4rem;
}

@keyframes fdg-sweep {

	from {
		translate: 0 0;
	}

	to {
		translate: 6rem 0;
	}
}

/* ------------------------------------------------------------ 9. Motion */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms;
		animation-iteration-count: 1;
		scroll-behavior: auto;
		transition-duration: 0.001ms;
	}

	.fdg-card:hover,
	.fdg-card:focus-within {
		translate: none;
	}

	.fdg-island__loading::before {
		animation: none;
	}
}

/* ------------------------------------------------------------- 10. Print */

/*
 * A volunteer prints the season schedule and pins it to the board at Odell.
 * Make that come out clean.
 */
@media print {

	.fdg-masthead,
	.fdg-footer,
	.wp-block-navigation,
	.fdg-island__loading {
		display: none;
	}

	.wp-block-table {
		background-image: none;
		overflow-x: visible;
	}

	.wp-block-table table {
		min-inline-size: 0;
	}

	.wp-block-table th {
		background-color: transparent;
		border-block-end: 2px solid #000;
		color: #000;
	}

	.wp-block-group.is-style-fdg-pinned {
		box-shadow: none;
	}
}

/* ------------------------------------------ 11. Late additions in use */

/*
 * Sponsor logos arrive as a mixed bag of PNGs, JPEGs and whatever the sponsor
 * had on file. Each one sits in an identical light chip so the row reads as a
 * row. The chip colour is deliberately fixed rather than palette-driven: a dark
 * style variation must not swallow a dark logo.
 */
.fdg-sponsors .wp-block-image {
	background-color: var(--wp--custom--color--chip, #f7f3e9);
	border: 1px solid var(--fdg-rule);
	margin-block: 0;
	padding: 0.8rem 1rem;
}

.fdg-sponsors .wp-block-image img {
	block-size: auto;
	display: block;
	max-block-size: 3rem;
	inline-size: auto;
}

.fdg-post-meta {
	align-items: baseline;
}

/*
 * A block that renders nothing leaves no element behind, so keying the
 * separator off "has something before it" is what makes the line close up
 * cleanly around a post with no category or an entry with no author.
 */
.fdg-post-meta > * + *::before {
	color: var(--fdg-graphite);
	content: "·";
	margin-inline-end: 0.7rem;
}

/* Featured images sit in the same hard frame as a field note. */
.fdg-card .wp-block-post-featured-image {
	border: 1px solid var(--fdg-ink);
	margin-block-end: var(--wp--preset--spacing--30);
	padding: 0.4rem;
}

.fdg-card .wp-block-post-featured-image img {
	display: block;
}

.fdg-card .wp-block-post-title {
	font-stretch: var(--fdg-stretch-display);
	margin-block: 0.2rem 0.4rem;
}

/*
 * Inside a framed card the field-note frame would be a second border a few
 * millimetres inside the first. The photograph fills the frame it already has
 * and the card's own border becomes the rule under it.
 */
.fdg-card--framed .wp-block-post-featured-image {
	border: 0;
	border-block-end: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-ink);
	margin-block-end: 0;
	padding: 0;
}

/*
 * A card title is a heading that happens to be a link. At this size the
 * accent stops meaning "act on this" — which is the one job it has on the
 * page — so the title takes ink and the hover carries both the colour and
 * the underline.
 */
.fdg-card .wp-block-post-title a {
	color: var(--fdg-ink);
	text-decoration: none;
}

.fdg-card .wp-block-post-title a:hover,
.fdg-card .wp-block-post-title a:focus-visible {
	color: var(--fdg-blaze);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

/*
 * The reading column.
 *
 * Page content is one column of text at the prose measure, flush with the
 * heading above it, and the things that are not text — tables, the islands,
 * anything an author marks wide — break out past it. That is the only grid
 * an interior page has, so both halves of it have to hold.
 *
 * Two things were stopping it. The rule was a child selector, so the measure
 * reached the first paragraph of a page and then stopped at the first group:
 * every section an author had wrapped ran the full 1216px, about 150
 * characters a line. And the elements it did reach were being centred. A
 * constrained layout hands each unaligned child
 * `margin-left: auto !important; margin-right: auto !important`, which does
 * nothing until the child takes a measure narrower than the column — at
 * which point it steps inward by half the difference. Measured across the
 * site that was sixteen headings and paragraphs sitting 304px in from the
 * title they belonged to, on twelve of the twenty pages.
 *
 * Headings are not in the list. A heading is the label on a section, not a
 * thing anybody reads a line at a time, and it carries the section's rule —
 * so it takes the column and the rule runs the full width of it, the way
 * `.fdg-section-head` already works everywhere a template composes one by
 * hand. Body copy takes the measure. That is the whole grid.
 *
 * Aligned blocks are left alone: `alignwide` and `alignfull` are an author
 * asking for the break-out, and core's own rule already excludes them.
 */
.fdg-prose :where(p, ul, ol, blockquote):not(.alignwide, .alignfull) {
	max-inline-size: var(--wp--custom--measure--prose, 38rem);
}

.fdg-prose:where(.is-layout-constrained) > :where(p, ul, ol, blockquote):not(.alignwide, .alignfull),
.fdg-prose :where(.is-layout-constrained) > :where(p, ul, ol, blockquote):not(.alignwide, .alignfull) {
	margin-inline: 0 !important;
}

/* Pagination reads as a scorecard footer, not as a widget. */
.wp-block-query-pagination {
	border-block-start: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-rule-heavy);
	font-family: var(--fdg-display);
	font-size: var(--wp--preset--font-size--x-small);
	font-stretch: var(--fdg-stretch-label);
	font-weight: 700;
	letter-spacing: var(--fdg-tracking-label);
	padding-block-start: var(--wp--preset--spacing--30);
	text-transform: uppercase;
}

/* Search: a thumb-sized field, square and ink-ruled, with a pill beside it. */
.wp-block-search__input {
	background-color: var(--fdg-paper);
	border: 2px solid var(--fdg-ink);
	border-radius: 0;
	color: var(--fdg-ink);
	min-block-size: var(--fdg-target);
	padding: 0.5rem 0.75rem;
}

.wp-block-search__button {
	background-color: var(--fdg-ink);
	border: 2px solid var(--fdg-ink);
	border-radius: var(--fdg-radius);
	color: var(--fdg-paper);
	font-stretch: var(--fdg-stretch-label);
	font-weight: 700;
	letter-spacing: var(--fdg-tracking-label);
	min-block-size: var(--fdg-target);
	padding-inline: 1rem;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- calendar */

/*
 * The Events Calendar owns /events/ and renders outside the block layout, so
 * the landing copy prepended above it (FDG\Core\Events\CalendarIntro) gets no
 * constrained wrapper from theme.json and would otherwise run the full width
 * of the viewport. These are the two rules that make it read as part of the
 * page rather than as something bolted on top of the calendar.
 */
.fdg-calendar-intro {
	margin-inline: auto;
	max-inline-size: var(--wp--style--global--wide-size, 76rem);
	padding-inline: var(--wp--preset--spacing--30, 1rem);
}

.fdg-calendar-intro > :last-child {
	margin-block-end: var(--wp--preset--spacing--60, 3rem);
}

/* ------------------------------------------------------------ 12. Icons */

/*
 * A handful of Untitled UI line icons, drawn the way the lockup is drawn: a
 * mask over a box painted in `currentcolor`.
 *
 * Inlining the SVG would have been the other option and it is the wrong one
 * here. Block markup is what volunteers edit, an <svg> inside a paragraph is
 * content core does not expect there, and the editor marks the block invalid
 * the first time somebody touches it. A mask keeps the markup a paragraph and
 * a class.
 *
 * The mask also gets the colour right for free. The box is `currentcolor`, so
 * an icon on the ink band comes out paper, one on the blaze band comes out
 * paper, and all of it reverses under the three style variations without a
 * second rule anywhere. Nothing in this section names a colour.
 *
 * Sized in `em`: the icon is the size of the word it sits with, so there is no
 * icon scale to keep in step with the type scale. The set's 2px stroke on a 24
 * box lands near 1.2px at label size, which is the hairline everything else
 * here is ruled with.
 *
 * Only the icons the theme actually draws live in assets/icons/. The rest of
 * the set is in the design system; copy one in when a component needs it.
 */

/*
 * Where the box is drawn.
 *
 * On a link or a label the class is on the element itself. On a button it is
 * not: WordPress puts a block's className on the outer `.wp-block-button`
 * wrapper, so a mark drawn there lands outside the pill, at the page's body
 * size rather than the button's. Measured, that is a 19px icon floating
 * beside a 14px control. Hence the second pair of selectors, which reach the
 * link inside the wrapper, and the `:not()` on the first, which keeps the
 * wrapper from drawing one as well.
 *
 * `content` is deliberately not here, and that is the whole of the rule. A
 * pseudo-element with no `content` is never generated, so the geometry below
 * only reaches the side a modifier has asked for. The first version did set
 * `content` here and every mark drew two boxes: the one with the mask, and a
 * bare 14px square of `currentcolor` on the other side of the word. It was
 * shipping in the footer of every page and on the Facebook button in the
 * empty news panel.
 */
.fdg-mark:not(.wp-block-button)::after,
.fdg-mark:not(.wp-block-button)::before,
.fdg-mark.wp-block-button > .wp-block-button__link::after,
.fdg-mark.wp-block-button > .wp-block-button__link::before {
	background-color: currentcolor;
	block-size: 1em;
	display: inline-block;
	flex: 0 0 auto;
	inline-size: 1em;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	vertical-align: -0.125em;
}

/*
 * A link that leaves the site says so. Put the class on the link by hand —
 * there is no reliable attribute to key it off, because nothing here sets
 * target="_blank" consistently and an href match would surprise the next
 * person to add a domain.
 *
 * It is decorative: the link text already says where it goes, so a screen
 * reader is told nothing twice.
 */
.fdg-mark--external:not(.wp-block-button)::after,
.fdg-mark--external.wp-block-button > .wp-block-button__link::after {
	content: "";
	margin-inline-start: 0.5em;
	-webkit-mask-image: url(../icons/external.svg);
	mask-image: url(../icons/external.svg);
}

/* The season line's one call to action, which shipped as a literal arrow
   character and rendered at whatever weight the font felt like. The row it
   sits in is set further up, with the rest of the status bar. */
.fdg-status-bar__cta a::after {
	background-color: currentcolor;
	block-size: 0.9em;
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	inline-size: 0.9em;
	-webkit-mask-image: url(../icons/arrow-right.svg);
	mask-image: url(../icons/arrow-right.svg);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Two places where the icon is the subject of the control rather than a mark
   against it: the calendar the season band sends you to, and the time league
   night starts. */
.fdg-mark--calendar:not(.wp-block-button)::before,
.fdg-mark--calendar.wp-block-button > .wp-block-button__link::before {
	content: "";
	margin-inline-end: 0.5em;
	-webkit-mask-image: url(../icons/calendar.svg);
	mask-image: url(../icons/calendar.svg);
}

.fdg-mark--clock:not(.wp-block-button)::before {
	content: "";
	margin-inline-end: 0.4em;
	-webkit-mask-image: url(../icons/clock.svg);
	mask-image: url(../icons/clock.svg);
}

/*
 * Without mask support the box would be a solid square of text colour sitting
 * next to the word, which is worse than no icon at all.
 *
 * The selectors have to match the modifiers' shape, not just their meaning.
 * `.fdg-mark::after` is one class and loses to
 * `.fdg-mark--external:not(.wp-block-button)::after`, which is two — so the
 * first version of this block set `content: none` and nothing listened.
 */
@supports not ((mask-image: url(../icons/external.svg)) or (-webkit-mask-image: url(../icons/external.svg))) {

	.fdg-mark:not(.wp-block-button)::after,
	.fdg-mark:not(.wp-block-button)::before,
	.fdg-mark.wp-block-button > .wp-block-button__link::after,
	.fdg-mark.wp-block-button > .wp-block-button__link::before,
	.fdg-status-bar__cta a::after {
		content: none;
	}
}

/* -------------------------------------------------------- 13. Page heads */

/*
 * Every template that is not the front page opens the same way now: a band in
 * paper-shade carrying the title, closed off from the reading column by a
 * heavy rule.
 *
 * Before this the twenty pages under /membership/, /events/, /standings/ and
 * the rest all began with an h1 floating on the same cream the body text sits
 * on. There was no arrival, nothing said which of them you were on, and the
 * top-right quadrant of the viewport was empty on every one — a 76rem canvas
 * with "Why Join" sitting 240px into it.
 *
 * Paper-shade is the quietest ground in the palette and that is the point.
 * The masthead above is ink and the season and join bands further down are
 * ink and blaze; a third loud band at the top of every page would leave those
 * two nothing to be louder than.
 */
.fdg-page-head {
	border-block-end: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-rule-heavy);
	margin-block-end: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--60);
}

/*
 * Title on the left, standfirst on the right.
 *
 * The split is 3fr/2fr rather than even. The title is the thing being
 * announced; a standfirst given the same width as a 64px heading stops
 * answering it and starts competing with it.
 *
 * `align-items: end` sits the standfirst on the title's last line instead of
 * the top of its column, which is what keeps the pair reading as one head
 * rather than as two columns of something.
 */
@media (width >= 64rem) {

	.fdg-page-head__row {
		align-items: end;
		column-gap: var(--wp--preset--spacing--60);
		display: grid;
		grid-template-columns: 3fr 2fr;
	}

	/* A page with no standfirst — most of the static pages — lets the title
	   take the whole measure rather than leaving the right column empty. */
	.fdg-page-head__title:only-child {
		grid-column: 1 / -1;
	}
}

.fdg-page-head__title > * {
	margin-block: 0;
}

.fdg-page-head__title > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/*
 * The standfirst is already in its own column, so the 38rem measure it
 * carries everywhere else would only make the column narrower than it is.
 * Below the breakpoint the columns stack and the measure comes back.
 */
@media (width >= 64rem) {

	.fdg-page-head__aside > :where(p, .wp-block-post-excerpt__excerpt) {
		max-inline-size: none;
	}
}

.fdg-page-head__aside > * {
	margin-block: 0;
}

.fdg-page-head__aside > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Stacked, the standfirst needs air under the title it answers. */
@media (width < 64rem) {

	.fdg-page-head__aside {
		margin-block-start: var(--wp--preset--spacing--40);
	}
}

/*
 * The opening paragraph of page content is a standfirst whether or not an
 * author reached for the lede style, and it is the one line on the page that
 * is answering the title in the band above. It gets the wider measure the
 * band's own standfirst has.
 */
.fdg-prose > .is-style-fdg-lede:first-child {
	font-size: var(--wp--preset--font-size--x-large);
	max-inline-size: 46rem;
}

/*
 * Sections in page content.
 *
 * Every page in the database is written the same way: a group, an eyebrow, a
 * heading, then the paragraphs. `.fdg-section-head` gives that shape a heavy
 * rule everywhere a template composes it by hand — the course page's "Course
 * specification", the home page's "What happened this week" — and page
 * content had no way to ask for the same thing, so twelve pages ran as an
 * undifferentiated column with nothing but whitespace between one section and
 * the next.
 *
 * The eyebrow is the marker. An author who writes one has already said "a new
 * section starts here", so the rule keys off that rather than asking anyone
 * to add a class to content that is edited in the admin and never deployed.
 *
 * Direct children only. A group with an eyebrow nested inside another section
 * is a sub-section, and ruling those as well would turn the page back into
 * one flat list of equals.
 *
 * A top-level h2 gets the same rule whether or not an author bothered with
 * the eyebrow. Without that the first section of a page is usually the one
 * left unruled — a heading written straight into the content, with every
 * section after it in a group — and the page opens looking like the rule
 * system starts halfway down.
 *
 * The rule runs the full column while the text under it sits at the prose
 * measure. That is the same relationship the tables have, and it is what
 * makes the page read as a scorecard rather than as a document.
 */
.fdg-prose > h2,
.fdg-prose > .wp-block-group:has(> .is-style-fdg-eyebrow) {
	border-block-start: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-rule-heavy);
	padding-block-start: var(--wp--preset--spacing--30);
}

/*
 * An excerpt in a card list runs as wide as the card, and on the search
 * results — the one place a card is a full-width row rather than a column in
 * a grid — that was a 1216px line of about 150 characters.
 *
 * The margin goes with it. A card is a constrained layout too, so the moment
 * the excerpt takes a measure narrower than its cell, core centres it: on the
 * news index the lead story's excerpt sat 96px in from the headline above it.
 */
.fdg-card .wp-block-post-excerpt {
	margin-inline: 0 !important;
	max-inline-size: var(--wp--custom--measure--prose, 38rem);
}

/*
 * Pagination and post navigation.
 *
 * Both shipped with the arrow typed into the label — "← Newer", "Next →" —
 * which meant the arrow was whatever glyph the fallback stack had for U+2190
 * at that weight, next to Archivo at 75% width. It is the same arrow as the
 * status bar's now, from the same file.
 *
 * The geometry repeats the shared `.fdg-mark` block rather than reusing it,
 * because these are core's own class names and putting `fdg-mark` on them
 * would mean editing four templates to say something the selector already
 * knows.
 */
.wp-block-query-pagination-previous::before,
.wp-block-query-pagination-next::after,
.wp-block-post-navigation-link a::before,
.wp-block-post-navigation-link a::after {
	background-color: currentcolor;
	block-size: 0.9em;
	display: inline-block;
	flex: 0 0 auto;
	inline-size: 0.9em;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	vertical-align: -0.05em;
}

.wp-block-query-pagination-previous::before,
.post-navigation-link-previous a::before {
	content: "";
	margin-inline-end: 0.45em;
	-webkit-mask-image: url(../icons/arrow-left.svg);
	mask-image: url(../icons/arrow-left.svg);
}

.wp-block-query-pagination-next::after,
.post-navigation-link-next a::after {
	content: "";
	margin-inline-start: 0.45em;
	-webkit-mask-image: url(../icons/arrow-right.svg);
	mask-image: url(../icons/arrow-right.svg);
}

@supports not ((mask-image: url(../icons/arrow-left.svg)) or (-webkit-mask-image: url(../icons/arrow-left.svg))) {

	.wp-block-query-pagination-previous::before,
	.wp-block-query-pagination-next::after,
	.post-navigation-link-previous a::before,
	.post-navigation-link-next a::after {
		content: none;
	}
}

/*
 * The lead story.
 *
 * A news index is a list of things that happened, and the most recent one is
 * the reason somebody came. In a plain auto-fill grid it was the same size as
 * a recap from two months ago.
 *
 * Done with `:first-child` rather than a second query. The alternative is a
 * one-post query above an offset grid, which works but hands the pagination
 * an offset to keep straight and needs `inherit: false` — and `inherit: false`
 * is exactly what a category archive cannot have. One rule covers the news
 * index, every archive and the search results, and stays right on page two,
 * where the lead is simply the newest post on that page.
 *
 * Only where there are columns to span. Below the breakpoint the grid is one
 * column and `span 2` would invent a second one.
 */
@media (width >= 64rem) {

	.fdg-news-grid > li:first-child {
		grid-column: span 2;
	}

	.fdg-news-grid > li:first-child .wp-block-post-title {
		font-size: var(--wp--preset--font-size--xx-large);
	}

	.fdg-news-grid > li:first-child .wp-block-post-featured-image img {
		aspect-ratio: 16 / 9;
	}

	.fdg-news-grid > li:first-child .wp-block-post-excerpt {
		font-size: var(--wp--preset--font-size--medium);
	}
}

/*
 * The one page head that is not a band.
 *
 * The events hub belongs to The Events Calendar. The landing copy is grafted
 * in through TEC's own `tribe_events_before_html` seam, which puts it inside
 * a container narrower than the theme's content width, so the head there has
 * nothing to bleed out of. It keeps the ground, the rule and the type and
 * gives up the bleed — the panel version of the same component.
 */
.fdg-page-head--panel {
	background-color: var(--fdg-paper-shade);
	margin-block-end: var(--wp--preset--spacing--60);
	padding-inline: var(--wp--preset--spacing--40);
}

/* ----------------------------------------- 14. The calendar's CSS reset */

/*
 * The Events Calendar ships an Eric Meyer reset scoped to `.tribe-common`,
 * and the landing copy on /events/ is grafted inside that container, so every
 * element of it arrives carrying `margin: 0; padding: 0; border: 0` at one
 * class plus one element. That out-specifies the theme's own rules and
 * everything theme.json emits, which are one class each. The result, before
 * this section: the spec table collapsed to a 2px line, the three section
 * buttons rendered as bold text with no pill, the paragraphs jammed against
 * the headings above them, and the page head with no padding inside its own
 * panel.
 *
 * Nothing below is a new value — every declaration points at the token the
 * component already uses somewhere else in this file or in theme.json. The
 * `.fdg-calendar-intro` prefix is there for one reason, which is to carry two
 * classes where the reset carries one.
 */

.fdg-calendar-intro .fdg-page-head--panel {
	border-block-end: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-rule-heavy);
	margin-block-end: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--50);
	padding-inline: var(--wp--preset--spacing--40);
}

/* The flow the block editor would have given these blocks. */
.fdg-calendar-intro .fdg-prose > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.fdg-calendar-intro .fdg-prose :where(h2, h3, h4) + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/*
 * Cells, from section 5, plus their leading. The reset puts `line-height: 0`
 * on its container and a table cell is the one place in this copy that has
 * nothing of its own to override it with, so three rows of the spec table
 * drew 22px apart with 36px of content in each and overlapped.
 */
.fdg-calendar-intro .wp-block-table :where(th, td) {
	border-block-end: var(--wp--custom--rule--width, 1px) solid var(--fdg-rule);
	line-height: var(--wp--custom--line-height--body, 1.62);
	padding: 0.7rem 0.9rem;
}

.fdg-calendar-intro .wp-block-table tbody tr:last-child :where(th, td) {
	border-block-end: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-rule-heavy);
}

/* The pill, from theme.json's button element. Both of them read
   `--wp--custom--control--fill`, so the colour lives in one place — the
   first version of this rule hard-coded fairway and kept the events page on
   the old fill when the button changed. */
.fdg-calendar-intro .wp-element-button {
	background-color: var(--fdg-control-fill);
	border: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-ink);
	border-radius: var(--fdg-radius);
	color: var(--fdg-paper);
	padding: var(--wp--custom--control--pad-block) var(--wp--custom--control--pad-inline);
}

.fdg-calendar-intro .wp-block-button.is-style-outline .wp-element-button {
	background-color: transparent;
	color: var(--fdg-ink);
}

.fdg-calendar-intro .wp-element-button:hover,
.fdg-calendar-intro .wp-element-button:focus-visible {
	background-color: var(--fdg-control-fill-hover);
	color: var(--fdg-paper);
}

/* ----------------------------------- 15. The Events Calendar's palette */

/*
 * The calendar arrived in its own colours: a #334aff button, #d5d5d5
 * chevrons you could barely see, white grounds, 4px radii and Helvetica
 * Neue, sitting under a masthead in ink and Archivo. None of it was wrong
 * for a plugin that has to look like something on any theme. All of it was
 * wrong here.
 *
 * TEC 6 publishes its whole design layer as custom properties on `:root`,
 * and that is the seam. Remapping them repaints the search bar, the view
 * switcher, the navigation, the notices and the subscribe menu at once,
 * with no per-component overrides and no specificity war — the earlier
 * fight with its CSS reset in section 14 is what a component-by-component
 * version of this would have looked like, thirty times over.
 *
 * They go on `.tribe-common`, the wrapper TEC puts round its own markup,
 * not on `:root`. TEC's stylesheets load after the theme's, so a `:root`
 * block of ours would lose the tie; declaring them further down the tree is
 * not in the contest at all, because it is a different element and simply
 * inherits closer to everything inside it. It also keeps the tokens off the
 * rest of the page, where nothing reads them.
 *
 * Every value is one of the theme's own tokens, so the calendar reverses
 * with the three style variations along with everything else.
 */
.tribe-common {

	/* Type. */
	--tec-color-text-primary: var(--fdg-ink);
	--tec-color-text-primary-light: var(--fdg-graphite);
	--tec-color-text-secondary: var(--fdg-graphite);
	--tec-color-text-disabled: var(--fdg-rule-strong);

	/* Icons — the chevrons either side of the month, the notice glyph. */
	--tec-color-icon-primary: var(--fdg-graphite);
	--tec-color-icon-primary-alt: var(--fdg-graphite);
	--tec-color-icon-secondary: var(--fdg-rule-strong);
	--tec-color-icon-active: var(--fdg-ink);
	--tec-color-icon-disabled: var(--fdg-rule);
	--tec-color-icon-focus: var(--fdg-blaze);
	--tec-color-event-icon: var(--fdg-ink);
	--tec-color-event-icon-hover: var(--fdg-blaze);

	/*
	 * The accent. TEC's is a link colour and a button colour at once; here
	 * those are two different things — links are blaze and controls are
	 * ink — so the accent becomes ink and the link tokens are set apart.
	 */
	--tec-color-accent-primary: var(--fdg-control-fill);
	--tec-color-accent-primary-hover: var(--fdg-control-fill-hover);
	--tec-color-accent-primary-active: var(--fdg-control-fill-hover);
	--tec-color-accent-primary-background: var(--fdg-paper-shade);
	--tec-color-accent-secondary: var(--fdg-ink);
	--tec-color-accent-secondary-hover: var(--fdg-fairway);
	--tec-color-accent-secondary-active: var(--fdg-fairway);
	--tec-color-accent-secondary-background: var(--fdg-paper-shade);
	--tec-color-link-primary: var(--fdg-ink);
	--tec-color-link-accent: var(--fdg-blaze);
	--tec-color-link-accent-hover: var(--fdg-ink);

	/* Rules. TEC has four weights of grey line; this theme has three. */
	--tec-color-border-default: var(--fdg-rule);
	--tec-color-border-secondary: var(--fdg-rule);
	--tec-color-border-tertiary: var(--fdg-rule-strong);
	--tec-color-border-hover: var(--fdg-ink);
	--tec-color-border-active: var(--fdg-ink);

	/* Grounds. */
	--tec-color-background: var(--fdg-paper);
	--tec-color-background-transparent: var(--fdg-paper);
	--tec-color-background-secondary: var(--fdg-paper-shade);
	--tec-color-background-secondary-hover: var(--fdg-paper-shade);
	--tec-color-background-messages: var(--fdg-paper-shade);

	/*
	 * The events bar, and the pieces in it, have hooks of their own that do
	 * not fall back to the tokens above — the bar's white ground and the
	 * blue submit button are set from these, not from `--tec-color-
	 * background` and `--tec-color-button-primary`. Declaring them is what
	 * TEC intends them for.
	 */
	--tec-color-background-events-bar: var(--fdg-paper);
	--tec-color-background-search-container: var(--fdg-paper);
	--tec-color-border-events-bar: var(--fdg-ink);
	--tec-color-icon-events-bar: var(--fdg-graphite);
	--tec-color-icon-events-bar-active: var(--fdg-ink);
	--tec-color-icon-events-bar-hover: var(--fdg-ink);
	--tec-color-text-events-bar-input: var(--fdg-ink);
	--tec-color-text-events-bar-input-placeholder: var(--fdg-graphite);
	--tec-color-background-events-bar-submit-button: var(--fdg-control-fill);
	--tec-color-background-events-bar-submit-button-hover: var(--fdg-control-fill-hover);
	--tec-color-background-events-bar-submit-button-active: var(--fdg-control-fill-hover);
	--tec-color-text-events-bar-submit-button: var(--fdg-paper);
	--tec-color-text-events-bar-submit-button-hover: var(--fdg-paper);
	--tec-color-text-events-bar-submit-button-active: var(--fdg-paper);
	--tec-color-background-view-selector: var(--fdg-paper);
	--tec-color-background-view-selector-tabs: var(--fdg-paper);
	--tec-color-background-view-selector-list-item-hover: var(--fdg-paper-shade);
	--tec-color-text-view-selector-list-item: var(--fdg-ink);
	--tec-color-text-view-selector-list-item-hover: var(--fdg-blaze);
	--tec-color-background-subscribe-list-item-hover: var(--fdg-paper-shade);
	--tec-color-text-primary-hover: var(--fdg-blaze);
	--tec-color-text-primary-active: var(--fdg-ink);
	--tec-color-icon-hover: var(--fdg-blaze);
	--tec-color-button-primary: var(--fdg-control-fill);
	--tec-color-button-primary-hover: var(--fdg-control-fill-hover);
	--tec-color-button-primary-active: var(--fdg-control-fill-hover);

	/*
	 * Square by default, the way every field and table on this site is.
	 * The pill belongs to buttons and buttons ask for it by name below.
	 */
	--tec-border-radius-default: 0;

	--tec-font-family-sans-serif: var(--fdg-display);
}

/*
 * What the tokens cannot say.
 *
 * A control's label here is Archivo at the label width, uppercase and
 * tracked — three properties TEC has no variable for — and the pill is the
 * one soft shape in the system, so it has to be asked for by name after the
 * radius token above was set to nothing.
 *
 * The `body .tribe-common.tribe-events` prefix on each of these is doing
 * one job: out-specifying TEC. Its own rules run to three classes and load
 * after the theme's, so anything shorter than this either ties and loses or
 * is simply beaten. Two classes come off the same element, which is where
 * TEC puts them too.
 */
body .tribe-common.tribe-events .tribe-common-c-btn,
body .tribe-common.tribe-events .tribe-common-c-btn-border,
body .tribe-common.tribe-events .tribe-common-c-btn-border-small {
	border-radius: var(--fdg-radius);
	font-family: var(--fdg-display);
	font-stretch: var(--fdg-stretch-label);
	font-weight: 700;
	letter-spacing: var(--fdg-tracking-label);
	min-block-size: var(--fdg-target);
	text-transform: uppercase;
}

/* The filled one is the theme's pill, down to the 2px edge. */
body .tribe-common.tribe-events .tribe-events-c-search__button,
body .tribe-common.tribe-events .tribe-common-c-btn {
	border: var(--wp--custom--rule--width-heavy, 2px) solid var(--fdg-ink);
}

/* And the outlined ones are the theme's outline button. */
body .tribe-common.tribe-events .tribe-common-c-btn-border,
body .tribe-common.tribe-events .tribe-common-c-btn-border-small {
	border-width: var(--wp--custom--rule--width-heavy, 2px);
}

/*
 * The search field. TEC draws the box on the row that holds the input
 * rather than on the input, so the theme's field edge goes there.
 */
body .tribe-common.tribe-events .tribe-events-header__events-bar {
	border-width: var(--wp--custom--rule--width-heavy, 2px);
}

body .tribe-common.tribe-events .tribe-events-c-search__input {
	font-family: var(--fdg-display);
}

/* The view switcher and the navigation are labels, not prose. */
body .tribe-common.tribe-events .tribe-events-c-subscribe-dropdown__button-text,
body .tribe-common.tribe-events .tribe-events-c-view-selector__list-item-text,
body .tribe-common.tribe-events .tribe-events-c-view-selector__button-text,
body .tribe-common.tribe-events .tribe-events-c-nav__prev-label,
body .tribe-common.tribe-events .tribe-events-c-nav__next-label {
	font-family: var(--fdg-display);
	font-stretch: var(--fdg-stretch-label);
	letter-spacing: var(--fdg-tracking-label);
	text-transform: uppercase;
}

/* The date the calendar is showing is a heading, so it takes the heading
   face and the display width. */
body .tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-button {
	font-family: var(--fdg-display);
	font-stretch: var(--fdg-stretch-display);
}