/*
 * assets/css/chrome.css · Out & Down theme
 *
 * Header, footer and newsletter-slab styles (Phase 11 — blueprint v2.1,
 * Sections 06, 30, 31). Loaded after base.css. Reuses base.css's
 * `.oad-tram` / `.oad-span-*` / `.oad-grid` utilities rather than
 * redefining the 6-column tram here.
 *
 * Breakpoint: 1024px only, per .stylelintrc.json's allow-list. "Desktop"
 * below means >= 1024px, "mobile" means <= 1023px.
 */

:root {
	--oad-header-h: 54px;
}

@media (min-width: 1024px) {
	:root {
		--oad-header-h: 70px;
	}
}

/* ------------------------------------------------------------------ */
/* Shared cell primitive                                               */
/* Every header/footer cell is a full-height hover target: Ground at   */
/* rest, Ink + White on hover (header only) — except the Newsletter    */
/* cell, which is Ink at rest and inverts (Ground, Ink text, Ink frame) */
/* on hover.                                                            */
/* Footer links and the logo are not buttons: no fill on hover.        */
/* ------------------------------------------------------------------ */

.oad-hdr-cell,
.oad-ftr-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--8);
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 13px;
	text-decoration: none;
	border: 0;
	border-right: 2px solid var(--wp--preset--color--ink);
	cursor: pointer;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-hdr-row > *:last-child,
.oad-hdr-m-row > *:last-child,
.oad-ftr-row--nav > *:last-child {
	border-right: 0;
}

.oad-hdr-cell:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-ftr-cell:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Frameless footer links (legal words, mobile columns) and the logo do
   nothing on hover. */

.oad-hdr-cell.oad-brand:hover {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
}

.oad-hdr-empty,
.oad-ftr-empty {
	cursor: default;
}

.oad-hdr-empty:hover,
.oad-ftr-empty:hover {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
}

.oad-icon {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

/* Text cells are core paragraph/group blocks (editable in the Site Editor):
   the <p> is the cell box, its one <a> fills it so the whole cell stays the
   click target. Cells that carry an icon or button stay raw HTML. */
p.oad-hdr-cell,
p.oad-ftr-cell {
	margin: 0;
	padding: 0;
}

.oad-hdr-cell > a,
.oad-ftr-cell > a {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	flex: 1;
	gap: inherit;
	padding: 0 var(--wp--preset--spacing--16);
	color: inherit;
	text-decoration: none;
}

.oad-sheet-nav > p {
	margin: 0;
}

p.oad-sheet-foot__submit,
p.oad-sheet-foot__newsletter {
	margin: 0;
}

.oad-sheet-foot__submit > a,
.oad-sheet-foot__newsletter > a {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	flex: 1;
	color: inherit;
	text-decoration: none;
}

.oad-ftr-stack > p {
	margin: 0;
}

.oad-ftr-brand > p {
	margin: 0;
}

.oad-ftr-brand__legal a + a::before {
	content: "|";
	margin-right: var(--wp--preset--spacing--8);
	color: var(--wp--preset--color--muted);
}

p.oad-nl-slab {
	margin: 0;
}

.oad-nl-slab > a {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	flex: 1;
	color: inherit;
	text-decoration: none;
}

.oad-nl-slab > a::after {
	content: "\2192";
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	margin-left: var(--wp--preset--spacing--16);
}

/* ------------------------------------------------------------------ */
/* Site header · Section 30                                            */
/* ------------------------------------------------------------------ */

/* Sticky lives on the <header> template-part wrapper: an element that
   sticks inside a same-height parent never moves. */
header.wp-block-template-part:has(> .oad-site-header) {
	position: sticky;
	/* header.js writes the admin bar's height here only while it is fixed. */
	top: var(--oad-adminbar-h, 0px);
	z-index: 500;
}

/* Scrolling down collapses the header to the theme strip alone; scrolling
   to the top, or hovering the strip, brings it back. header.js sets
   --oad-collapse to the height of everything above the strip and toggles
   .oad-hdr-collapsed. The slow ease is rize.cool's, a deliberate
   exception to the 80-120ms motion rule. The open
   mobile sheet is position: fixed, and a transform would re-anchor it to
   the header, so the collapse is switched off while the sheet is open. */
header.wp-block-template-part:has(> .oad-site-header) {
	transition-property: transform;
	/* stylelint-disable-next-line declaration-property-value-allowed-list -- rize.cool's slow collapse */
	transition-duration: 400ms;
	/* stylelint-disable-next-line declaration-property-value-allowed-list -- rize.cool's slow collapse */
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

/* Hovering the collapsed strip expands the header instead of dropping the
   theme keys; they open from their own strip once the header is out. */
html.oad-hdr-collapsed .oad-hdr-d-keys:hover .oad-cat-pills,
html.oad-hdr-collapsed .oad-hdr-d-keys:focus-within .oad-cat-pills {
	transform: translateY(-34px);
}

html.oad-hdr-collapsed:not(.oad-sheet-open) header.wp-block-template-part:has(> .oad-site-header) {
	transform: translateY(calc(-1 * var(--oad-collapse, 0px)));
}

.oad-site-header {
	background: var(--wp--preset--color--ground);
}

/* Lines in the header are the 2px gaps of a shared-hairline grid (Ink
   behind, Ground cells on top), never per-cell borders, so a cell that
   spans two rows cannot double a line or drop one. */
.oad-site-header .oad-hdr-cell {
	border-right: 0;
}

.oad-hdr-desktop {
	display: none;
}

.oad-hdr-mobile {
	display: block;
}

@media (min-width: 1024px) {
	.oad-hdr-desktop {
		display: block;
	}

	.oad-hdr-mobile {
		display: none;
	}
}

/* The logo is not a button: it keeps its Ink artwork on hover. The White
   file is only used on the black mobile strip. Two real images, never a
   filter. */
.oad-brand {
	padding: 0;
}

.oad-brand__img {
	display: block;
	width: auto;
	height: 64px;
}

.oad-brand--small .oad-brand__img {
	height: 24px;
}

.oad-brand__img--white {
	display: none;
}

.oad-brand--small {
	grid-column: span 1;
}

.oad-newsletter-cell {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-newsletter-cell:hover {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: -2px;
}

.oad-loc-cell,
.oad-account-cell,
.oad-search-cell {
	gap: var(--wp--preset--spacing--8);
}

.oad-search-cell {
	justify-content: flex-start;
	padding: 0 var(--wp--preset--spacing--24);
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.oad-search-cell__input {
	flex: 1;
	align-self: stretch;
	min-height: 44px;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: 16px;
}

.oad-search-cell__input::placeholder {
	color: var(--wp--preset--color--muted);
}

.oad-search-cell:hover .oad-search-cell__input {
	color: var(--wp--preset--color--white);
}

.oad-search-cell:hover .oad-search-cell__input::placeholder {
	color: var(--wp--preset--color--white);
}

/* The plus lives on the link, so it centres with the label. */
.oad-sheet-foot__submit > a::before {
	content: "+";
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 18px;
	margin-right: var(--wp--preset--spacing--8);
}

/* ------------------------------------------------------------------ */
/* Theme strip · peek-a-boo. Six colours, 16px showing and no words,   */
/* until hovered / focused / tapped. The pills sit tucked behind the  */
/* rows and slide down over the page; nothing is pushed.              */
/* ------------------------------------------------------------------ */

/* The wrapper is exactly the 16px that shows, so the header's measured
   height is its true in-flow height; the pills hang out of it. */
.oad-hdr-d-keys,
.oad-hdr-m-keys {
	position: relative;
	z-index: 1;
	/* stylelint-disable-next-line oad/spacing-ladder -- the 10px peek */
	height: 10px;
	overflow: visible;
}

/* Mobile keeps the thinner 8px peek; desktop shows 10px. */
.oad-hdr-m-keys {
	height: 8px;
}

.oad-cat-pills {
	border-bottom: 0;
	transition-property: transform;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-hdr-d-keys .oad-cat-pills {
	height: 44px;
	/* stylelint-disable-next-line oad/spacing-ladder -- the peek tuck: 44px pill less the 10px that shows */
	transform: translateY(-34px);
}

.oad-hdr-m-keys .oad-cat-pills {
	height: 44px;
	/* stylelint-disable-next-line oad/spacing-ladder -- the peek tuck: 44px pill less the 8px that shows */
	transform: translateY(-36px);
}

.oad-hdr-d-keys:hover .oad-cat-pills,
.oad-hdr-d-keys:focus-within .oad-cat-pills,
.oad-hdr-d-keys.oad-is-open .oad-cat-pills,
.oad-hdr-m-keys.oad-is-open .oad-cat-pills {
	transform: translateY(0);
}

.oad-hdr-m-keys:not(.oad-is-open) .oad-cat-pills a {
	pointer-events: none;
}

.oad-cat-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 0;
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 13px;
	text-decoration: none;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

/* Desktop shows the word, mobile shows the icon; the other is hidden. */
.oad-pill-icon {
	display: none;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.oad-cat-pills a[data-cat="culture"] {
	background: var(--wp--preset--color--culture);
}

.oad-cat-pills a[data-cat="social"] {
	background: var(--wp--preset--color--social);
}

.oad-cat-pills a[data-cat="wellbeing"] {
	background: var(--wp--preset--color--wellbeing);
}

.oad-cat-pills a[data-cat="learning"] {
	background: var(--wp--preset--color--learning);
}

.oad-cat-pills a[data-cat="progress"] {
	background: var(--wp--preset--color--progress);
}

/* The Active category sits at rest in Action yellow — the one place
   yellow is not a hover-only signal (Rule 03's own carve-out). */
.oad-cat-pills a[data-cat="active"] {
	background: var(--wp--preset--color--active);
	color: var(--wp--preset--color--ink);
}

/* One hover for every key, desktop and mobile: Ink with a White label or
   icon. :active so a tap flashes it on touch. */
.oad-cat-pills a[data-cat]:hover,
.oad-cat-pills a[data-cat]:focus-visible,
.oad-cat-pills a[data-cat]:active {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* The closed strip's real toggle (header.js adds it): the 16px peek, with
   the ::after carrying the tap target down over the tucked pills. Once
   open (or hover-open on desktop) the pills are the targets. */
.oad-keys-toggle {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 3;
	/* stylelint-disable-next-line oad/spacing-ladder -- the 10px peek */
	height: 10px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

/* Mobile: 8px peek, 36px of tap target below it. */
.oad-hdr-m-keys .oad-keys-toggle {
	height: 8px;
}

.oad-hdr-m-keys .oad-keys-toggle::after {
	/* stylelint-disable-next-line oad/spacing-ladder -- 44px hit area less the 8px peek */
	height: 36px;
}

.oad-keys-toggle::after {
	content: "";
	position: absolute;
	inset: 100% 0 auto 0;
	/* stylelint-disable-next-line oad/spacing-ladder -- 44px hit area less the 10px peek */
	height: 34px;
}

.oad-hdr-m-keys.oad-is-open .oad-keys-toggle,
.oad-hdr-d-keys.oad-is-open .oad-keys-toggle,
.oad-hdr-d-keys:hover .oad-keys-toggle,
.oad-hdr-d-keys:focus-within .oad-keys-toggle {
	pointer-events: none;
}

/* Desktop: the wrapper itself owns the hover zone below the peek, so it is
   the same 44px whether the pills are tucked or out. Swapping it with the
   toggle's hit area made hover flicker near the bottom edge. */
.oad-hdr-d-keys::after {
	content: "";
	position: absolute;
	inset: 100% 0 auto 0;
	/* stylelint-disable-next-line oad/spacing-ladder -- 44px pill less the 10px peek */
	height: 34px;
}

/* The pills stay above that zone so they take the clicks once out. */
.oad-hdr-d-keys .oad-cat-pills {
	position: relative;
	z-index: 2;
}

.oad-hdr-m-keys.oad-is-open .oad-keys-toggle::after,
.oad-hdr-d-keys.oad-is-open .oad-keys-toggle::after {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Mobile bar · logo | Set location (3) | account | menu               */
/* ------------------------------------------------------------------ */

.oad-hdr-m-row,
.oad-sheet-head {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 2px;
	background: var(--wp--preset--color--ink);
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

.oad-hdr-m-row > *,
.oad-sheet-head > * {
	min-width: 0;
	min-height: 44px;
}

.oad-m-loc {
	justify-content: center;
}

.oad-m-loc__val {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.oad-m-loc:hover .oad-m-loc__val {
	color: inherit;
}

/* Menu and close: 2px strokes, square ends, nothing thinner or fatter. */
.oad-icon-bold {
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
	stroke-linecap: butt;
	flex-shrink: 0;
}

@media (max-width: 1023px) {
	.oad-pill-icon {
		display: block;
	}

	.oad-pill-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.oad-cat-pill {
		min-height: 44px;
	}
}

/* ------------------------------------------------------------------ */
/* Menu sheet · Section 30 · framed like a printed page                */
/* ------------------------------------------------------------------ */

.oad-sheet {
	position: fixed;
	/* header.js measures where the admin bar actually ends when the sheet
	   opens: at 600px and below the bar is absolute, so it covers the top of
	   a fixed sheet only until the page scrolls. */
	inset: var(--oad-sheet-top, var(--oad-adminbar-h, 0px)) 0 0 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	padding: 0 var(--wp--preset--spacing--16) var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--ground);
}

/* The 16px margin and the Ink frame lines down each side. */
.oad-sheet > * {
	border-left: 2px solid var(--wp--preset--color--ink);
	border-right: 2px solid var(--wp--preset--color--ink);
}

html.oad-sheet-open {
	overflow: hidden;
}

/* The chat widget floats over the sheet's foot and over any open modal. */
html.oad-sheet-open #bit-assist-widget-container,
body.modal-open #bit-assist-widget-container {
	display: none;
}

.oad-sheet:not(.is-open) {
	display: none;
}

.oad-sheet-close {
	padding: 0;
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
}

.oad-sheet-close:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-sheet-search {
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

.oad-sheet-search .oad-search-cell {
	grid-column: auto;
	width: 100%;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--16);
	border-right: 0;
}

.oad-sheet-nav {
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.oad-sheet-nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--24);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 13px;
	text-decoration: none;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-sheet-nav a:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-sheet-foot {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
}

.oad-sheet-foot__login,
.oad-sheet-foot__submit,
.oad-sheet-foot__newsletter {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	border-right: 2px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 13px;
	text-decoration: none;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-sheet-foot__login:hover,
.oad-sheet-foot__submit:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-sheet-foot__newsletter {
	border-right: 0;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-sheet-foot__newsletter:hover {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	/* Submit's border-right and the foot's border-bottom already draw the
	   left and bottom lines, so no outline here: it would double them. */
}

/* ------------------------------------------------------------------ */
/* Newsletter slab · Section 06                                        */
/* ------------------------------------------------------------------ */

.oad-nl-row {
	width: 100%;
}

.oad-nl-slab {
	grid-column: 3 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 20px;
	text-decoration: none;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-nl-slab:hover {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: -2px;
}

.oad-nl-slab__caret {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	margin-left: var(--wp--preset--spacing--16);
}

@media (max-width: 1023px) {
	.oad-nl-slab {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------ */
/* Site footer · Section 31                                            */
/* Desktop and mobile are two arrangements of the same links: the      */
/* 6-col tram of framed cells from 1024px, one framed box below it.    */
/* Every line is a 2px cell border; cells overlap the next by 2px so   */
/* two neighbours share one line, and nothing frames empty space.      */
/* ------------------------------------------------------------------ */

.oad-site-footer {
	background: var(--wp--preset--color--ground);
	/* The last column's shared line runs 2px past the viewport edge. */
	overflow-x: clip;
}

.oad-site-footer p {
	margin: 0;
}

.oad-site-footer .oad-ftr-m {
	display: none;
}

/* No top border-top: 2px solid var(--wp--preset--color--ink);
	padding: the nav cells hang from the footer's top line. */
.oad-site-footer .oad-ftr-d {
	border-top: 2px solid var(--wp--preset--color--ink);
	padding: 0 0 var(--wp--preset--spacing--48);
}

/* The primitive's line, restated: top and left come from the neighbour. */
.oad-ftr-d .oad-ftr-cell {
	padding: 0;
	border: 2px solid var(--wp--preset--color--ink);
	border-top: 0;
	/* stylelint-disable-next-line oad/spacing-ladder -- shared line, cells overlap by the 2px hairline */
	margin: 0 -2px -2px 0;
}

.oad-ftr-d .oad-ftr-cell a {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	flex: 1;
	padding: 0 var(--wp--preset--spacing--16);
	color: inherit;
	text-decoration: none;
}

.oad-ftr-d .oad-ftr-cell--profile {
	grid-column: 1;
	gap: var(--wp--preset--spacing--8);
	/* stylelint-disable-next-line oad/spacing-ladder -- the frame's left line sits off the viewport edge */
	margin-left: -2px;
}

.oad-ftr-d .oad-ftr-cell--about {
	grid-column: 3;
}

.oad-ftr-d .oad-ftr-cell--faqs {
	grid-column: 4;
}

.oad-ftr-d .oad-ftr-cell--tickets {
	grid-column: 5;
}

.oad-ftr-d .oad-ftr-cell--submit {
	grid-column: 6;
}

/* The plus lives on the link, so it centres with the label. */
.oad-ftr-cell--submit a::before,
.oad-fm-submit a::before {
	content: "+";
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 18px;
	margin-right: var(--wp--preset--spacing--8);
}

/* Instagram | email: two squares under the newsletter slab. The first
   ends where About | FAQs ends, so the two dividers are one line. */
.oad-ftr-d .oad-social-group {
	display: contents;
}

.oad-social-group a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	/* stylelint-disable-next-line oad/spacing-ladder -- a 44px target plus its 2px line */
	height: 46px;
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-social-group a:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-ftr-d .oad-social-group a {
	border-top: 0;
}

/* Runs to the same outer line as FAQs, whose cell overhangs by 2px. */
.oad-ftr-d .oad-nl-slab {
	/* stylelint-disable-next-line oad/spacing-ladder -- shared line */
	margin-right: -2px;
}

.oad-ftr-d .oad-social-group a:first-child {
	position: relative;
	z-index: 1;
	grid-column: 3;
	justify-self: end;
	/* stylelint-disable-next-line oad/spacing-ladder -- shared line */
	margin-right: -2px;
}

.oad-ftr-d .oad-social-group a:last-child:not(:first-child) {
	grid-column: 4;
	justify-self: start;
}

.oad-ftr-d .oad-ftr-row--stack {
	align-items: start;
	margin-top: var(--wp--preset--spacing--48);
}

.oad-ftr-d .oad-ftr-row--stack > .oad-ftr-stack {
	grid-column: 1;
	/* Two 48px rows under Profile: pulled up past the social row (46px)
	   and this row's own 48px top margin. The logo stays put. */
	/* stylelint-disable-next-line oad/spacing-ladder -- social row height plus the row margin */
	margin-top: -94px;
}

.oad-ftr-stack a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border: 2px solid var(--wp--preset--color--ink);
	border-bottom: 0;
	/* stylelint-disable-next-line oad/spacing-ladder -- same shared line as the nav cells */
	margin: 0 -2px 0 -2px;
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 13px;
	text-decoration: none;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-ftr-stack p:last-child a {
	border-bottom: 2px solid var(--wp--preset--color--ink);
}


.oad-ftr-stack a:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-ftr-brand {
	grid-column: 3 / span 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
}

/* The real logo, Ink artwork, no hover fill. */
.oad-brand--footer {
	border: 0;
	padding: 0 var(--wp--preset--spacing--16);
}

.oad-brand--footer .oad-brand__img {
	height: 96px;
}

.oad-ftr-brand__legal {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Only the words highlight; the dots between them never do. */
.oad-ftr-brand__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--8);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}


@media (max-width: 1023px) {
	.oad-site-footer .oad-ftr-d {
		display: none;
	}

	/* Framed like the menu sheet: a 16px Ground margin and one Ink line
	   round the cells. The newsletter cell is the frame's last row, so the
	   frame draws no bottom line of its own. */
	.oad-site-footer .oad-ftr-m {
		display: block;
		padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--16) var(--wp--preset--spacing--16);
	}

	.wp-block-group.oad-ftr-frame {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		border: 2px solid var(--wp--preset--color--ink);
		border-bottom: 0;
	}

	/* Each cell draws its own right and bottom line. */
	.oad-fm-cell {
		display: flex;
		border-right: 2px solid var(--wp--preset--color--ink);
		border-bottom: 2px solid var(--wp--preset--color--ink);
	}

	.oad-fm-c2 {
		grid-column: span 2;
	}

	.oad-fm-c3 {
		grid-column: span 3;
	}

	.oad-fm-c6 {
		grid-column: span 6;
	}

	.oad-fm-cell:nth-child(3),
	.oad-fm-cell:nth-child(5),
	.oad-fm-cell:nth-child(7),
	.oad-fm-c6 {
		border-right: 0;
	}

	.oad-fm-cell a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--wp--preset--spacing--8);
		flex: 1;
		min-height: 44px;
		padding: 0 var(--wp--preset--spacing--8);
		background: var(--wp--preset--color--ground);
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--shout);
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		font-size: 13px;
		text-decoration: none;
		transition-property: background-color, color;
		transition-duration: 100ms;
		transition-timing-function: ease-out;
	}

	.oad-fm-cell a:hover {
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--white);
	}

	/* Ink cells invert on hover. Profile sits on the frame's top and left
	   lines and the newsletter cell has no line above it, so neither adds
	   an outline of its own; the newsletter cell alone reaches over the
	   frame's side lines. */
	.oad-fm-ink a {
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--white);
	}

	.oad-fm-ink a:hover {
		background: var(--wp--preset--color--ground);
		color: var(--wp--preset--color--ink);
	}

	.oad-fm-submit {
		/* The newsletter cell's Ink edge is the line. */
		border-bottom: 0;
	}

	.oad-site-footer .oad-fm-nl {
		border-bottom: 0;
		/* stylelint-disable-next-line oad/spacing-ladder -- flush with the frame's outer edge */
		margin: 0 -2px;
	}

	.oad-fm-nl a:hover {
		outline: 2px solid var(--wp--preset--color--ink);
		outline-offset: -2px;
	}

	.oad-fm-profile a::before {
		content: "";
		width: 16px;
		height: 16px;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/* Two squares attached to the newsletter cell's foot, as on desktop. */
	.oad-ftr-msocial .oad-social-group {
		display: flex;
		justify-content: center;
	}

	/* The squares have no top line (the slab is it), so a 44px height
	   leaves the same 42px inside as the width does. */
	.oad-ftr-msocial .oad-social-group a {
		height: 44px;
		border-top: 0;
	}

	.oad-ftr-msocial .oad-social-group a + a {
		/* stylelint-disable-next-line oad/spacing-ladder -- shared line */
		margin-left: -2px;
	}

	.oad-ftr-m .oad-brand--footer {
		display: flex;
		justify-content: center;
		min-height: 0;
		margin-top: var(--wp--preset--spacing--24);
		padding: 0;
	}

	.oad-ftr-m .oad-brand--footer .oad-brand__img {
		height: 56px;
	}

	.oad-ftr-m .oad-ftr-brand__legal {
		justify-content: center;
		margin: var(--wp--preset--spacing--8) 0 0;
	}

	/* The fixed ticket bar (46px: 44 plus its top line) covers the page's
	   last 46px, so on an event page with one the legal row stops above it. */
	body:has(.oad-event-aside .oad-ev-ticket-link *) .oad-site-footer .oad-ftr-m,
	body:has(.oad-event-aside .oad-ev-tickets *) .oad-site-footer .oad-ftr-m {
		/* stylelint-disable-next-line oad/spacing-ladder -- the ticket bar's measured height plus the 16px gap */
		padding-bottom: 62px;
	}
}

/* Editor canvas: keep the closed sheet visible so it can be edited. */
.editor-styles-wrapper .oad-sheet:not(.is-open) {
	display: flex;
	position: static;
}

/* ------------------------------------------------------------------ */
/* Desktop bar · one black 60px row. No grid lines: every control is    */
/* Ground on Ink at hover, Ground text on Ink at rest.                   */
/* ------------------------------------------------------------------ */

.oad-hdr-desktop {
	position: relative;
}

.oad-dbar-wrap {
	position: static;
}

.oad-dbar {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	/* stylelint-disable-next-line oad/spacing-ladder -- 4px between borderless controls */
	gap: 4px;
	/* stylelint-disable-next-line oad/spacing-ladder -- 44px control plus 8px either side */
	height: 60px;
	padding: 0 var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--ink);
}

.oad-dbar__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding-right: var(--wp--preset--spacing--8);
}

.oad-dbar__logo img {
	display: block;
	width: auto;
	height: 40px;
}

.oad-dbar__b {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	gap: var(--wp--preset--spacing--8);
	height: 44px;
	min-width: 44px;
	padding: 0 var(--wp--preset--spacing--16);
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ground);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-dbar__nl:hover {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
}

.oad-dbar__sq {
	width: 44px;
	padding: 0;
}

.oad-dbar__b .oad-icon-bold,
.oad-dbar__find .oad-icon-bold {
	flex: 0 0 auto;
	width: 18px;
	/* stylelint-disable-next-line oad/spacing-ladder -- 18px icon in a 44px square */
	height: 18px;
}

/* Newsletter: Ink with a 2px Ground frame, Ground when hovered. */
.oad-dbar__nl {
	margin-left: var(--wp--preset--spacing--8);
	border: 2px solid var(--wp--preset--color--ground);
}

.oad-dbar__close {
	display: none;
}

.oad-dbar__b[aria-expanded="true"] .oad-dbar__open {
	display: none;
}

.oad-dbar__b[aria-expanded="true"] .oad-dbar__close {
	display: block;
}

/* The middle cell: Set location at rest, the search line when open. */
.oad-dbar__mid {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: 44px;
}

.oad-dbar__loc {
	position: absolute;
	inset: 0 auto 0 0;
	width: max-content;
	max-width: 100%;
	justify-content: flex-start;
	padding: 0 var(--wp--preset--spacing--16);
	transition-property: background-color, color, opacity;
}

.oad-dbar__find {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--16);
	margin: 0;
	border-bottom: 2px solid var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ground);
	opacity: 0;
	visibility: hidden;
	transition-property: opacity;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-dbar__find input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ground);
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: 16px;
	outline: none;
}

.oad-dbar__find input[type="search"]::placeholder {
	color: var(--wp--preset--color--ground);
	opacity: 0.7;
}

.oad-dbar-wrap.oad-is-search .oad-dbar__loc {
	opacity: 0;
	visibility: hidden;
}

.oad-dbar-wrap.oad-is-search .oad-dbar__find {
	opacity: 1;
	visibility: visible;
}

/* The drop-down: white cells, Ink 2px lines, under the menu square. */
.oad-dmenu {
	position: absolute;
	/* stylelint-disable-next-line oad/spacing-ladder -- directly under the 60px bar */
	top: 60px;
	left: 0;
	z-index: 4;
	width: 264px;
	background: var(--wp--preset--color--ground);
	border: 2px solid var(--wp--preset--color--ink);
	border-top: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
	transition-property: opacity;
	transition-duration: 120ms;
	transition-timing-function: ease-out;
}

.oad-dbar-wrap.oad-is-menu .oad-dmenu {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.oad-dmenu a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border-top: 2px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-dmenu > a:first-child {
	border-top: 0;
}

.oad-dmenu a:hover,
.oad-dmenu a:focus-visible {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ground);
}

.oad-dmenu__two {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.oad-dmenu__two a + a {
	border-left: 2px solid var(--wp--preset--color--ink);
}

.oad-dmenu__submit::before {
	content: "+";
	margin-right: var(--wp--preset--spacing--8);
}

/* ------------------------------------------------------------------ */
/* Mobile top strip · black, like the desktop bar. The bar and the     */
/* open sheet's head row are black; the rest of the sheet stays Ground.*/
/* Nothing in the strip changes on hover or tap.                       */
/* ------------------------------------------------------------------ */

.oad-hdr-m-row,
.oad-sheet-head {
	background: var(--wp--preset--color--ink);
}

.oad-hdr-m-row .oad-hdr-cell,
.oad-hdr-m-row .oad-hdr-cell:hover,
.oad-sheet-head .oad-hdr-cell,
.oad-sheet-head .oad-hdr-cell:hover {
	background: transparent;
	color: var(--wp--preset--color--ground);
}

.oad-hdr-m-row .oad-m-loc__val,
.oad-hdr-m-row .oad-m-loc:hover .oad-m-loc__val,
.oad-sheet-head .oad-m-loc__val,
.oad-sheet-head .oad-m-loc:hover .oad-m-loc__val {
	color: var(--wp--preset--color--ground);
}

.oad-hdr-m-row .oad-brand__img--ink,
.oad-sheet-head .oad-brand__img--ink,
.oad-hdr-m-row .oad-brand:hover .oad-brand__img--ink,
.oad-sheet-head .oad-brand:hover .oad-brand__img--ink {
	display: none;
}

.oad-hdr-m-row .oad-brand__img--white,
.oad-sheet-head .oad-brand__img--white,
.oad-hdr-m-row .oad-brand:hover .oad-brand__img--white,
.oad-sheet-head .oad-brand:hover .oad-brand__img--white {
	display: block;
}

/* Mobile bar: logo, Set location centred across the middle four columns,
   menu. The profile link lives in the sheet's nav. */
.oad-hdr-m-row .oad-m-loc,
.oad-sheet-head .oad-m-loc {
	grid-column: span 4;
}

/* The open sheet's black strip runs the full width of the page; the white
   grid below keeps its 16px margins and framed sides. */
.oad-sheet > .oad-sheet-head {
	margin: 0 calc(-1 * var(--wp--preset--spacing--16));
	border-left: 0;
	border-right: 0;
}

/* Profile, Saved and Log in sit in one row of three cells. */
.oad-sheet-trio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
}

.oad-sheet-trio > p {
	margin: 0;
}

.oad-sheet-trio > p > a,
.oad-sheet-trio > .oad-sheet-foot__login {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 44px;
	border-right: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-sheet-trio > p > a:hover,
.oad-sheet-trio > .oad-sheet-foot__login:hover,
.oad-sheet-trio > .oad-sheet-foot__login:focus-visible {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-sheet-trio > * + * {
	border-left: 2px solid var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------------ */
/* Pull-down area: the strip a browser reveals above the page when the */
/* top is dragged down (refresh gesture) is Ink, matching the header.  */
/* The canvas behind the footer stays Ground. The block sits wholly    */
/* above the document, so it never adds to the scroll height.          */
/* ------------------------------------------------------------------ */

/* Chrome (and Firefox) paint one flat root colour in that area, so the */
/* root colour follows scroll position: Ink in the top half of the page, */
/* Ground in the bottom half (header.js sets --oad-canvas). The body's   */
/* own Ground covers the page, so the switch is only ever seen when a    */
/* pull goes past an end. */
/* Phones paint the body's colour there, so html and body both carry it   */
/* and the page wrapper holds the Ground the visitor actually sees.       */
html,
html body {
	background-color: var(--oad-canvas, var(--wp--preset--color--ground));
}

.wp-site-blocks {
	background-color: var(--wp--preset--color--ground);
}

body {
	position: relative;
}

body::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 100vh;
	background: var(--wp--preset--color--ink);
	pointer-events: none;
}