/*
Theme Name: Frances Hatch
Theme URI: https://franceshatch.co.uk
Author: Aztec Media
Author URI: https://aztec.media
Description: Bespoke theme for Frances Hatch RWS. Work made on the ground — the container stays silent so the work carries the colour.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: frances-hatch
*/

/* ---------------------------------------------------------------
   Fonts — self-hosted variable faces, no third-party requests

   Fraunces   : Frances's own writing, and every heading. An old-style
                serif with an optical-size axis, so the same file is a
                sturdy reading face at 17px and a high-contrast display
                face at 60px. Its WONK axis swings the terminals off
                square — a hand-cut irregularity that suits work made
                on the ground with a stick and some mud.
   Schibsted  : wayfinding, labels, the caption system. Quiet grotesque,
                holds up in wide tracking at small sizes.
------------------------------------------------------------------ */
@font-face {
	font-family: "Fraunces";
	src: url("assets/fonts/fraunces-var.woff2") format("woff2-variations");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("assets/fonts/fraunces-italic-var.woff2") format("woff2-variations");
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Schibsted Grotesk";
	src: url("assets/fonts/schibsted-var.woff2") format("woff2-variations");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------
   Tokens
------------------------------------------------------------------ */
:root {
	--chalk: #edeeec;
	--chalk-deep: #e5e6e3;
	--ink: #16181a;
	--slate: #6b7075;
	--hairline: #d8dad7;

	--sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--serif: "Fraunces", ui-serif, Georgia, serif;

	/* Fraunces character, without pinning the optical size: opsz is left to
	   font-optical-sizing, which follows the rendered font-size. Naming opsz
	   here made a 33px place name draw the 96px cut, which is why it looked
	   spindly. */
	--display-axes: "SOFT" 0, "WONK" 1;

	/* Wayfinding type — small, tracked, uppercase. Used everywhere. */
	--t-label: 0.6875rem;
	--t-nav: 0.75rem;
	--t-body: 1.125rem;
	--t-lead: clamp(1.15rem, 1.6vw, 1.4rem);
	--t-quote: clamp(1.9rem, 5.2vw, 3.6rem);

	--track-wide: 0.18em;
	--track-nav: 0.13em;

	--gutter: clamp(1.25rem, 4.5vw, 4rem);
	--measure: 34rem;
	--max: 96rem;

	--rule: 1px solid var(--hairline);
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------
   Reset & base
------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--chalk);
	color: var(--ink);
	font-family: var(--serif);
	font-size: var(--t-body);
	font-weight: 380;
	line-height: 1.7;
	/* The optical-size axis follows font-size on its own. */
	font-optical-sizing: auto;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--ink);
	color: var(--chalk);
	padding: 0.75rem 1.25rem;
	font-family: var(--sans);
	font-size: var(--t-nav);
	letter-spacing: var(--track-nav);
	text-transform: uppercase;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------------------
   Shared primitives
------------------------------------------------------------------ */
.shell {
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* The label voice: every eyebrow, caption and control on the site. */
.label {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--slate);
	margin: 0;
}

.section {
	padding-block: clamp(3rem, 6vw, 5rem);
}

.section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding-bottom: 1.1rem;
	border-bottom: var(--rule);
	margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.section__head .label { color: var(--ink); }

/* Text link that reveals its rule on hover */
.tlink {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: border-color 0.3s var(--ease);
}
.tlink:hover,
.tlink:focus-visible { border-bottom-color: var(--ink); }

/* ---------------------------------------------------------------
   Header
------------------------------------------------------------------ */
.masthead {
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.wordmark {
	font-family: var(--sans);
	font-size: clamp(0.95rem, 1.5vw, 1.2rem);
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
}

.wordmark span {
	display: block;
	font-size: 0.55em;
	font-weight: 400;
	letter-spacing: 0.22em;
	color: var(--slate);
	margin-top: 0.45em;
}

.nav ul {
	display: flex;
	gap: clamp(1.1rem, 2.4vw, 2.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav a {
	font-family: var(--sans);
	font-size: var(--t-nav);
	font-weight: 500;
	letter-spacing: var(--track-nav);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s var(--ease);
}
.nav a:hover,
.nav a:focus-visible,
.nav .current-menu-item > a { border-bottom-color: var(--ink); }

.nav-toggle { display: none; }

/* ---------------------------------------------------------------
   Current — a dated list, not cards. Dates carry the information.
------------------------------------------------------------------ */
.diary { list-style: none; margin: 0; padding: 0; }

.diary__item { border-bottom: var(--rule); }
.diary__item:first-child { border-top: var(--rule); }

.diary__link {
	display: grid;
	grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) auto;
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: baseline;
	padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
	text-decoration: none;
	transition: padding-inline-start 0.35s var(--ease);
}
.diary__link:hover,
.diary__link:focus-visible { padding-inline-start: 0.75rem; }

.diary__when {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--slate);
	font-variant-numeric: tabular-nums;
}

.diary__what {
	font-family: var(--serif);
	font-size: var(--t-lead);
	line-height: 1.35;
}
.diary__where {
	display: block;
	font-family: var(--sans);
	font-size: var(--t-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--slate);
	margin-top: 0.45rem;
}

/* Time, price, and who takes the bookings. Sentence case rather than the
   venue's small caps — these are read rather than scanned — and each on its
   own line, so a time and an email address do not run into one another. */
.diary__detail {
	display: block;
	font-family: var(--sans);
	font-size: 0.8rem;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--slate);
	margin-top: 0.3rem;
}

.diary__go {
	font-family: var(--sans);
	font-size: 1rem;
	color: var(--slate);
	transition: transform 0.35s var(--ease), color 0.35s var(--ease);
}
.diary__link:hover .diary__go,
.diary__link:focus-visible .diary__go {
	transform: translateX(0.35rem);
	color: var(--ink);
}

.represented {
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	align-items: baseline;
}

/* ---------------------------------------------------------------
   Available — quiet. No buttons, no badges, no "shop" energy.
------------------------------------------------------------------ */
.works {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: clamp(1.5rem, 3.5vw, 2.75rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.work a { text-decoration: none; display: block; }

.work__frame {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	overflow: hidden;
	margin-bottom: 1.1rem;
}
.work__frame img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform 0.9s var(--ease);
}
.work a:hover .work__frame img,
.work a:focus-visible .work__frame img { transform: scale(1.03); }

.work__title {
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.35;
	margin: 0 0 0.4rem;
}

/* The caption system again — materials are the story of this practice */
.work__meta {
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: var(--slate);
	line-height: 1.55;
	margin: 0;
}
.work__spec {
	display: block;
	max-width: 32ch;
}
.work__price {
	color: var(--ink);
	display: block;
	margin-top: 0.55rem;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--track-wide);
	font-variant-numeric: tabular-nums;
}
.work__sold { color: var(--slate); }

/* ---------------------------------------------------------------
   Practice — her words, given room
------------------------------------------------------------------ */
.practice {
	border-top: var(--rule);
}

.practice__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}

.practice__quote {
	font-family: var(--serif);
	font-size: var(--t-quote);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.015em;
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	text-wrap: balance;
}

.practice__body {
	max-width: var(--measure);
	color: var(--ink);
}
.practice__body p { margin: 0 0 1.1em; }
.practice__body p:last-of-type { margin-bottom: 1.75rem; }

.practice__portrait figcaption {
	margin-top: 0.9rem;
}

/* ---------------------------------------------------------------
   Keep in touch
------------------------------------------------------------------ */
.keep {
	border-top: var(--rule);
}

.keep__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}

.keep__intro { max-width: 30rem; }
.keep__intro p:not(.label) {
	font-family: var(--serif);
	font-size: var(--t-lead);
	line-height: 1.5;
	margin: 0.9rem 0 0;
}

.signup {
	display: flex;
	gap: 0.75rem;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 0.6rem;
	margin-top: 1.75rem;
	max-width: 26rem;
}
.signup input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font-family: var(--sans);
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	color: var(--ink);
	padding: 0.25rem 0;
}
.signup input::placeholder { color: var(--slate); }
.signup input[name="FNAME"] { flex: 0 0 34%; border-right: var(--rule); padding-right: 0.75rem; }
@media (max-width: 30rem) {
	.signup { flex-wrap: wrap; }
	.signup input[name="FNAME"] { flex: 1 0 100%; border-right: 0; border-bottom: var(--rule); padding: 0.25rem 0 0.5rem; }
}
.signup input:focus { outline: none; }
.signup button {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	white-space: nowrap;
}

.elsewhere {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}
.elsewhere li { border-bottom: var(--rule); }
.elsewhere li:first-child { border-top: var(--rule); }
.elsewhere a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.9rem;
	text-decoration: none;
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	transition: padding-inline-start 0.35s var(--ease);
}
.elsewhere a:hover,
.elsewhere a:focus-visible { padding-inline-start: 0.6rem; }
.elsewhere .handle { color: var(--slate); text-transform: none; letter-spacing: 0.04em; }

/* ---------------------------------------------------------------
   Footer
------------------------------------------------------------------ */
.colophon {
	border-top: var(--rule);
	padding-block: clamp(2rem, 4vw, 3rem);
}
.colophon__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	justify-content: space-between;
	align-items: baseline;
}
.colophon .label { color: var(--slate); }
.colophon nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------
   Responsive
------------------------------------------------------------------ */
@media (max-width: 60rem) {
	.practice__grid,
	.keep__grid { grid-template-columns: 1fr; }
	.practice__portrait { max-width: 26rem; }
}

@media (max-width: 46rem) {
	.nav-toggle {
		display: block;
		font-family: var(--sans);
		font-size: var(--t-nav);
		font-weight: 500;
		letter-spacing: var(--track-nav);
		text-transform: uppercase;
	}
	.nav {
		display: none;
		flex-basis: 100%;
	}
	.nav.is-open { display: block; }
	.masthead__inner { flex-wrap: wrap; row-gap: 1.25rem; }
	.nav ul {
		flex-direction: column;
		gap: 0;
		border-top: var(--rule);
	}
	.nav li { border-bottom: var(--rule); }
	.nav a {
		display: block;
		padding-block: 0.85rem;
		border-bottom: 0;
	}
	.nav a:hover,
	.nav a:focus-visible,
	.nav .current-menu-item > a { border-bottom: 0; color: var(--slate); }

	.diary__link {
		grid-template-columns: 1fr auto;
		row-gap: 0.5rem;
	}
	.diary__when { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
	.hero__slide img { transform: none; }
}

/* ---------------------------------------------------------------
   Page heads
------------------------------------------------------------------ */
.page-head {
	padding-block: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 3.5vw, 2.5rem);
}

.page-head__title {
	font-family: var(--serif);
	font-size: var(--t-quote);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0;
	text-wrap: balance;
}

.page-head .label a { text-decoration: none; }
.page-head .label a:hover { color: var(--ink); }

.page-head--place .label { margin-bottom: 0.9rem; }

.page-head__intro {
	margin-top: clamp(1.25rem, 3vw, 2rem);
	max-width: var(--measure);
}

/* ---------------------------------------------------------------
   Prose — Frances's own writing and her own images.
   Long-form, generous, and never wider than it is readable.
------------------------------------------------------------------ */
.prose {
	max-width: var(--measure);
	font-size: 1.1875rem;
	line-height: 1.72;
}

.prose > * { margin-block: 0 1.15em; }
.prose > *:last-child { margin-bottom: 0; }

.prose h2,
.prose h3,
.prose h4 {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	line-height: 1.5;
	margin-block: 2.75em 1em;
}

/* A heading inside her writing marks a new section, so it has to read as
   one: a serif heading with a rule and room above it, not an 11px label
   (Frances, 16 Sep 2026 — "put a gap above it and make it larger so there
   is a punctuation which makes sense"; and Antarctica's four sections). The
   CV keeps the small labels: there they are headings over lists. */
.prose:not(.prose--cv) h2 {
	font-family: var(--serif);
	font-size: clamp(1.4rem, 2.3vw, 1.85rem);
	font-weight: 400;
	letter-spacing: -0.005em;
	text-transform: none;
	line-height: 1.2;
	margin-block: 2.2em 0.85em;
	padding-top: 1em;
	border-top: var(--rule);
	font-variation-settings: var(--display-axes);
}
.prose:not(.prose--cv) > h2:first-child {
	padding-top: 0;
	border-top: 0;
}

.prose a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--hairline);
	transition: text-decoration-color 0.3s var(--ease);
}
.prose a:hover { text-decoration-color: var(--ink); }

.prose em { font-style: italic; }
.prose strong { font-weight: 600; }

.prose blockquote {
	margin-inline: 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--hairline);
	font-size: var(--t-lead);
	line-height: 1.5;
}

/* Images break out of the measure — the writing is a column, the work is not. */
.prose figure,
.prose .wp-block-image {
	margin-block: clamp(2rem, 5vw, 3.5rem);
	width: min(var(--breakout, 58rem), calc(100vw - var(--gutter) * 2));
}

.prose figure img,
.prose .wp-block-image img {
	/* Never upscale. Her images are the sizes they are, and forcing a small
	   one to fill the column both softens it and — where the file is a 1x1
	   placeholder — reserves a screenful of blank space. */
	width: auto;
	max-width: 100%;
	height: auto;
}

.prose figcaption {
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: var(--slate);
	line-height: 1.5;
	margin-top: 0.75rem;
	max-width: 46ch;
}

.prose iframe,
.prose video {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	margin-block: clamp(2rem, 5vw, 3.5rem);
}

/* ---------------------------------------------------------------
   Places index
   The same asymmetry as the homepage: a rail of names, a single
   stage that answers them.
------------------------------------------------------------------ */
.places {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
	padding-bottom: clamp(3rem, 8vw, 6rem);
}

.places__items {
	list-style: none;
	margin: 0 0 clamp(2rem, 5vw, 3.5rem);
	padding: 0;
	border-top: var(--rule);
}
.places__items:last-child { margin-bottom: 0; }

.places__group {
	color: var(--ink);
	margin: 0 0 1rem;
}

.places__item { border-bottom: var(--rule); }

.places__link {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding-block: clamp(0.85rem, 2vw, 1.15rem);
	text-decoration: none;
	transition: padding-inline-start 0.4s var(--ease);
}
.places__link:hover,
.places__link:focus-visible { padding-inline-start: 0.85rem; }

.places__name {
	font-family: var(--serif);
	font-size: clamp(1.35rem, 3vw, 2.1rem);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.places__note {
	font-family: var(--sans);
	font-size: var(--t-label);
	letter-spacing: 0.04em;
	line-height: 1.5;
	color: var(--slate);
	margin-left: auto;
	text-align: right;
	max-width: 22ch;
	flex: 0 1 auto;
}

/* The thumbnail only exists for narrow screens, where there is no stage. */
.places__thumb { display: none; }

.places__stage {
	position: sticky;
	top: 2rem;
	aspect-ratio: 4 / 3;
	background: var(--chalk-deep);
	overflow: hidden;
}
.places__stage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.45s var(--ease);
}
.places__stage img.is-swapping { opacity: 0; }

.place-more__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem 2rem;
}

@media (max-width: 60rem) {
	.places { grid-template-columns: 1fr; }
	.places__stage { display: none; }

	.places__link {
		align-items: center;
		gap: 1.25rem;
	}
	.places__thumb {
		display: block;
		order: -1;
		flex: 0 0 5.5rem;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background: var(--chalk-deep);
	}
	.places__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.places__note { font-size: 0.625rem; }
}

/* A 1x1 placeholder (there is one leftover .tif in the Antarctica page) has no
   natural size to fall back on when it fails to load, so the browser reserves
   most of a screen for it. The caption beside it still carries the credit. */
.prose img[width="1"],
.prose img[height="1"] { display: none; }

/* ---------------------------------------------------------------
   What's on — the same dated list as the homepage, with room for
   the ones that have already closed.
------------------------------------------------------------------ */
.diary--past .diary__what,
.diary--past .diary__when { color: var(--slate); }

.whatson__group {
	margin-top: clamp(2.5rem, 6vw, 4rem);
}
.whatson__group:first-of-type { margin-top: 0; }

/* ---------------------------------------------------------------
   Available (WooCommerce)
------------------------------------------------------------------ */
.woo { padding-bottom: clamp(3rem, 8vw, 6rem); }

.woo .woocommerce-notices-wrapper:empty { display: none; }

.woo ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: clamp(1.75rem, 3.5vw, 3rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.woo ul.products li.product { margin: 0; }

.woo ul.products li.product a { text-decoration: none; display: block; }

.woo ul.products li.product img {
	margin: 0 auto 1.1rem;
	transition: transform 0.9s var(--ease);
}
.woo ul.products li.product a:hover img { transform: scale(1.03); }

/* Match the homepage: the work sits on a consistent field, never cropped.
   The height is on the image, not the link — the link also wraps the caption. */
.woo ul.products li.product img {
	height: clamp(11rem, 17vw, 15rem);
	object-fit: contain;
	object-position: center bottom;
	width: 100%;
}

.woo .woocommerce-loop-product__title,
.woo ul.products li.product .price { display: none; }

.woo .work__title { margin-top: 0; }

/* Single work */
.woo div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
	padding-top: clamp(1.5rem, 4vw, 3rem);
}

.woo div.product .woocommerce-product-gallery { margin: 0; }
.woo div.product .woocommerce-product-gallery img { width: 100%; height: auto; }

.woo div.product .summary { margin: 0; }

.woo div.product .product_title {
	font-family: var(--serif);
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	font-weight: 300;
	line-height: 1.15;
	margin: 0 0 1rem;
}

.woo div.product .price {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	color: var(--ink);
	display: block;
	margin: 0 0 1.5rem;
}
.woo div.product .price del { color: var(--slate); }

.woo div.product .woocommerce-product-details__short-description,
.woo div.product .woocommerce-Tabs-panel {
	font-family: var(--serif);
	font-size: 1.125rem;
	line-height: 1.7;
	max-width: 34rem;
}

.woo .stock { font-family: var(--sans); font-size: var(--t-label); letter-spacing: var(--track-wide); text-transform: uppercase; }
.woo .stock.work__sold { color: var(--slate); }

.woo button.button,
.woo a.button,
.woo input.button {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	background: var(--ink);
	color: var(--chalk);
	border: 1px solid var(--ink);
	border-radius: 0;
	padding: 0.9rem 1.6rem;
	cursor: pointer;
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.woo button.button:hover,
.woo a.button:hover,
.woo input.button:hover {
	background: transparent;
	color: var(--ink);
}

.woo .quantity input {
	font-family: var(--sans);
	font-size: 0.875rem;
	padding: 0.85rem 0.6rem;
	border: 1px solid var(--hairline);
	background: transparent;
	width: 4.5rem;
	margin-right: 0.5rem;
}

.woo .product_meta {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: var(--rule);
	font-family: var(--sans);
	font-size: var(--t-label);
	letter-spacing: 0.04em;
	color: var(--slate);
}
.woo .product_meta > span { display: block; margin-bottom: 0.4rem; }

.woo .woocommerce-tabs { grid-column: 1 / -1; margin-top: clamp(2rem, 5vw, 3.5rem); }
.woo .woocommerce-tabs ul.tabs {
	list-style: none;
	display: flex;
	gap: 1.75rem;
	margin: 0 0 1.5rem;
	padding: 0 0 0.9rem;
	border-bottom: var(--rule);
}
.woo .woocommerce-tabs ul.tabs a {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--slate);
}
.woo .woocommerce-tabs ul.tabs li.active a { color: var(--ink); }

.woo .related.products { grid-column: 1 / -1; margin-top: clamp(3rem, 7vw, 5rem); }
.woo .related.products > h2 {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--ink);
	padding-bottom: 1.1rem;
	border-bottom: var(--rule);
	margin: 0 0 clamp(1.75rem, 4vw, 3rem);
}

@media (max-width: 60rem) {
	.woo div.product { grid-template-columns: 1fr; }
}

.woo .woocommerce-products-header__title,
.woo h1.page-title {
	font-family: var(--serif);
	font-size: var(--t-quote);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0 0 clamp(2rem, 5vw, 3.5rem);
	text-wrap: balance;
}

.woo .woocommerce-breadcrumb { display: none; }

/* The section head already draws a rule; the list beneath shouldn't draw a
   second one a few pixels below it. */
.section__head + .diary .diary__item:first-child,
.section__head + .places__items { border-top: 0; }

/* ---------------------------------------------------------------
   Navigation — second level
   Frances asked for Practice under About and Swallow Fund under
   Available, so the header carries one level of drop-down.
------------------------------------------------------------------ */
.nav li { position: relative; }

.nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -1rem;
	z-index: 20;
	display: block;
	flex-direction: column;
	gap: 0;
	min-width: 13rem;
	padding: 0.9rem 1rem 1rem;
	margin: 0;
	background: var(--chalk);
	border: var(--rule);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.35rem);
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}

.nav > ul > li:last-child > .sub-menu,
.nav > .menu > li:last-child > .sub-menu {
	left: auto;
	right: -1rem;
}

.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.nav .sub-menu li + li { margin-top: 0.15rem; }

.nav .sub-menu a {
	display: block;
	padding-block: 0.4rem;
	font-size: var(--t-label);
	color: var(--slate);
	border-bottom: 0;
	white-space: nowrap;
}
.nav .sub-menu a:hover,
.nav .sub-menu a:focus-visible {
	color: var(--ink);
	border-bottom: 0;
}

/* A parent that is only there to open a menu still needs to look clickable. */
.nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.3rem;
	height: 0.3rem;
	margin-left: 0.5em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	opacity: 0.5;
}

/* ---------------------------------------------------------------
   Buttons — a rule that fills, never a box that shouts
------------------------------------------------------------------ */
.button-line {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
	padding: 0.95rem 1.5rem;
	border: 1px solid var(--ink);
	background: transparent;
	cursor: pointer;
	transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.button-line:hover,
.button-line:focus-visible {
	background: var(--ink);
	color: var(--chalk);
}
.button-line span { transition: transform 0.35s var(--ease); }
.button-line:hover span { transform: translateX(0.25rem); }

/* ---------------------------------------------------------------
   Card row — two or three onward routes, set as rules not boxes
------------------------------------------------------------------ */
.cardrow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--rule);
}

.cardrow__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 0.5rem 1rem;
	height: 100%;
	padding: clamp(1.4rem, 3vw, 2rem) 0;
	padding-right: clamp(1rem, 3vw, 2.5rem);
	border-bottom: var(--rule);
	text-decoration: none;
	transition: padding-inline-start 0.35s var(--ease);
}
.cardrow li + li .cardrow__item { border-left: 0; }
.cardrow__item:hover,
.cardrow__item:focus-visible { padding-inline-start: 0.75rem; }

.cardrow__title {
	font-family: var(--serif);
	font-size: var(--t-lead);
	line-height: 1.25;
}

.cardrow__note {
	grid-column: 1 / -1;
	font-family: var(--sans);
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--slate);
	max-width: 34ch;
}

.cardrow__go {
	font-family: var(--sans);
	color: var(--slate);
	transition: transform 0.35s var(--ease), color 0.35s var(--ease);
}
/* A worded link ("About mentoring") takes the note's size and voice, so it
   reads as part of the card rather than shouting over it. */
.cardrow__go--text {
	grid-column: 1 / -1;
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--ink);
}

.cardrow__item:hover .cardrow__go {
	transform: translateX(0.35rem);
	color: var(--ink);
}

@media (min-width: 54rem) {
	.cardrow li + li { border-left: var(--rule); }
	.cardrow li + li .cardrow__item { padding-left: clamp(1.5rem, 3vw, 2.5rem); }
	.cardrow li + li .cardrow__item:hover { padding-inline-start: calc(clamp(1.5rem, 3vw, 2.5rem) + 0.75rem); }
}

/* ---------------------------------------------------------------
   Galleries — the three that represent her
------------------------------------------------------------------ */
.galleries { margin-top: clamp(2.5rem, 6vw, 4rem); }

.galleries__list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	border-top: var(--rule);
}
.galleries__list li { border-bottom: var(--rule); }
.galleries__list a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 1.5rem;
	padding-block: 0.9rem;
	text-decoration: none;
	transition: padding-inline-start 0.35s var(--ease);
}
.galleries__list a:hover,
.galleries__list a:focus-visible { padding-inline-start: 0.6rem; }

.galleries__name {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
}
.galleries__where {
	font-family: var(--sans);
	font-size: 0.6875rem;
	letter-spacing: 0.05em;
	color: var(--slate);
}

/* ---------------------------------------------------------------
   Poems — set as verse, never as a paragraph
------------------------------------------------------------------ */
.verse { border-top: var(--rule); }

.poem { margin: 0; }

.poem blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--serif);
	font-size: clamp(1.3rem, 2.6vw, 1.9rem);
	font-weight: 300;
	line-height: 1.55;
	letter-spacing: -0.005em;
}
.poem blockquote p { margin: 0; }

/* Her own poems are shaped on the page — the indentation is the poem. */
.poem pre {
	font-family: var(--serif);
	font-size: clamp(0.95rem, 1.6vw, 1.2rem);
	font-weight: 300;
	line-height: 1.8;
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.poem figcaption { margin-top: clamp(1.25rem, 3vw, 2rem); }

.poem--aside {
	padding-top: 0.5rem;
	border-top: 2px solid var(--ink);
}

/* ---------------------------------------------------------------
   Films — the old Resources page, folded into Practice
------------------------------------------------------------------ */
.films { border-top: var(--rule); }

.films__intro {
	max-width: var(--measure);
	font-size: var(--t-lead);
	line-height: 1.5;
	margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}

.films__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--rule);
	counter-reset: none;
}
.films__item { border-bottom: var(--rule); }

.films__link {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) auto;
	gap: 0 clamp(1rem, 2.5vw, 2rem);
	align-items: baseline;
	padding-block: clamp(1rem, 2.2vw, 1.4rem);
	text-decoration: none;
	transition: padding-inline-start 0.35s var(--ease);
}
.films__link:hover,
.films__link:focus-visible { padding-inline-start: 0.75rem; }

.films__no {
	font-family: var(--sans);
	font-size: var(--t-label);
	letter-spacing: var(--track-wide);
	color: var(--slate);
	font-variant-numeric: tabular-nums;
}

.films__title {
	display: block;
	font-family: var(--serif);
	font-size: var(--t-lead);
	line-height: 1.3;
}
.films__note {
	display: block;
	font-family: var(--sans);
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--slate);
	margin-top: 0.35rem;
	max-width: 62ch;
}
.films__with {
	display: block;
	font-family: var(--sans);
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--slate);
	margin-top: 0.5rem;
}

.films__go {
	font-family: var(--sans);
	color: var(--slate);
	transition: transform 0.35s var(--ease), color 0.35s var(--ease);
}
.films__link:hover .films__go {
	transform: translateX(0.35rem);
	color: var(--ink);
}

@media (max-width: 40rem) {
	.films__link { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
}

/* ---------------------------------------------------------------
   Tiles — a page shown by its image and its own opening words
------------------------------------------------------------------ */
.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: clamp(2rem, 4.5vw, 3.5rem);
	list-style: none;
	margin: 0;
	padding: 0 0 clamp(1rem, 3vw, 2rem);
}
.tiles--two { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }

.tile a { text-decoration: none; display: block; height: 100%; }

.tile__frame {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--chalk-deep);
	margin-bottom: 1.25rem;
}
.tile__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ease);
}
.tile a:hover .tile__frame img,
.tile a:focus-visible .tile__frame img { transform: scale(1.035); }

.tile__title {
	display: block;
	font-family: var(--serif);
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	font-weight: 300;
	line-height: 1.2;
	margin-bottom: 0.6rem;
}

.tile__note {
	display: block;
	font-family: var(--sans);
	font-size: 0.75rem;
	line-height: 1.65;
	color: var(--slate);
	max-width: 44ch;
	margin-bottom: 1rem;
}

.tile__go { display: inline-block; }
.tile a:hover .tile__go { border-bottom-color: var(--ink); }

/* ---------------------------------------------------------------
   CV
------------------------------------------------------------------ */
.cv__standfirst {
	font-size: var(--t-lead);
	line-height: 1.5;
	margin: 0;
}

.cv__download { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* The CV is a record, not an essay — it wants the full width. */
.prose--cv { max-width: 56rem; }

.prose--cv h2 {
	padding-bottom: 0.9rem;
	border-bottom: var(--rule);
	margin-block: clamp(2.75rem, 6vw, 4rem) 0;
	color: var(--ink);
}
.prose--cv h2:first-child { margin-top: 0; }

ul.cv {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.cv li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.35rem 2rem;
	align-items: baseline;
	padding-block: 0.85rem;
	border-bottom: var(--rule);
}

.cv__what {
	font-family: var(--serif);
	font-size: 1rem;
	line-height: 1.5;
}

.cv__when {
	font-family: var(--sans);
	font-size: var(--t-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--slate);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
}

@media (max-width: 40rem) {
	ul.cv li { grid-template-columns: 1fr; }
	.cv__when { text-align: left; }
}

/* ---------------------------------------------------------------
   Swallow Fund
------------------------------------------------------------------ */
.swallow__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
	padding-bottom: clamp(1rem, 3vw, 2rem);
}

.swallow__charity { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.swallow__charity img { opacity: 0.85; transition: opacity 0.3s var(--ease); }
.swallow__charity a:hover img { opacity: 1; }

@media (max-width: 60rem) {
	.swallow__grid { grid-template-columns: 1fr; }
}

/* Sold work stays in the fund, quietly. */
.work.is-sold .work__frame img { opacity: 0.72; }
.work.is-sold a:hover .work__frame img { opacity: 1; }

/* ---------------------------------------------------------------
   Pair — a lead sentence and the thing it asks you to do
------------------------------------------------------------------ */
.pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
.pair__lead {
	font-size: var(--t-lead);
	line-height: 1.5;
	max-width: 44ch;
	margin: 0;
}
.pair p { margin: 0; }

@media (max-width: 46rem) {
	.pair { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Contact
------------------------------------------------------------------ */
.contact {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 7vw, 6rem);
	align-items: start;
	padding-bottom: clamp(3rem, 8vw, 6rem);
}

.contact__block + .contact__block { margin-top: clamp(2rem, 4vw, 3rem); }

.contact__address {
	font-family: var(--serif);
	font-size: 1.125rem;
	line-height: 1.7;
	margin: 0.9rem 0 0;
}

.contact__aside .elsewhere { margin-top: 1rem; }

@media (max-width: 60rem) {
	.contact { grid-template-columns: 1fr; }
}

/* Form */
.form { max-width: 34rem; }

.field { margin: 0 0 1.6rem; }

.field label {
	display: block;
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--slate);
	margin-bottom: 0.6rem;
}

.field input,
.field textarea {
	width: 100%;
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--hairline);
	padding: 0.5rem 0;
	border-radius: 0;
	transition: border-color 0.3s var(--ease);
}
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus {
	outline: none;
	border-bottom-color: var(--ink);
}

/* The honeypot. Off-screen rather than display:none — a bot reads the CSS. */
.field--trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.notice {
	font-family: var(--sans);
	font-size: 0.8125rem;
	line-height: 1.6;
	padding: 1rem 1.25rem;
	margin: 0 0 2rem;
	border-left: 2px solid var(--ink);
	background: var(--chalk-deep);
	max-width: 34rem;
}
.notice--bad { border-left-color: #8c3a2b; }

/* ---------------------------------------------------------------
   Footer — the site's second index
------------------------------------------------------------------ */
.colophon__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr));
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
	border-bottom: var(--rule);
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.colophon__about {
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--slate);
	max-width: 32ch;
	margin: 1rem 0 0;
}

.colophon__col ul {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}
.colophon__col li + li { margin-top: 0.55rem; }
.colophon__col a {
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--slate);
	text-decoration: none;
	transition: color 0.3s var(--ease);
}
.colophon__col a:hover,
.colophon__col a:focus-visible { color: var(--ink); }

@media (max-width: 46rem) {
	.colophon__grid { grid-template-columns: 1fr 1fr; }
	.colophon__about { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------
   Navigation, narrow — the drop-downs become part of the list
------------------------------------------------------------------ */
@media (max-width: 46rem) {
	.nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		min-width: 0;
		padding: 0 0 0.75rem 1rem;
		background: none;
	}
	.nav .menu-item-has-children > a::after { display: none; }
	.nav .sub-menu li { border-bottom: 0; }
	.nav .sub-menu a { padding-block: 0.5rem; }
}

/* ---------------------------------------------------------------
   Homepage — places, as a run of names
------------------------------------------------------------------ */
.grounds { border-top: var(--rule); }

.grounds__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.75rem, 2vw, 1.5rem) clamp(1.5rem, 4vw, 3.5rem);
}
.grounds__list a {
	font-family: var(--serif);
	font-size: clamp(1.3rem, 3vw, 2.1rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--slate);
	transition: color 0.3s var(--ease);
}
.grounds__list a:hover,
.grounds__list a:focus-visible { color: var(--ink); }

.current__none {
	font-family: var(--serif);
	font-size: var(--t-lead);
	line-height: 1.5;
	color: var(--slate);
	max-width: 48ch;
	margin: 0;
}

/* The case for owning a piece, made once and quietly. */
.available__lede {
	font-family: var(--serif);
	font-size: var(--t-lead);
	line-height: 1.5;
	color: var(--slate);
	max-width: 48ch;
	margin: 0 0 clamp(1.75rem, 4vw, 3rem);
}

.available__note {
	font-family: var(--serif);
	font-size: var(--t-body);
	line-height: 1.6;
	color: var(--slate);
	max-width: 48ch;
	margin: clamp(2rem, 4.5vw, 3.25rem) 0 0;
}
.available__note a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--hairline);
	transition: border-color 0.3s var(--ease);
}
.available__note a:hover,
.available__note a:focus-visible { border-bottom-color: var(--ink); }

.represented .tlink { color: var(--ink); }

.keep__fallback { margin-top: 1.75rem; }

/* ---------------------------------------------------------------
   Long-form layout

   A single hard-left column of prose leaves half a wide screen
   empty. The same asymmetry the hero and the Places index use —
   a rail that holds the title, a body that holds the writing —
   fills the page and gives the heading somewhere to stay while
   you read.
------------------------------------------------------------------ */
.shell--read { max-width: 78rem; }

.longform {
	display: grid;
	grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
	padding-block: clamp(2rem, 6vw, 4rem) clamp(3rem, 8vw, 5.5rem);
}

.longform__head {
	position: sticky;
	top: clamp(1.5rem, 4vw, 2.75rem);
}

.longform__head .page-head__title {
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	line-height: 1.08;
}

.longform__head .label + .page-head__title { margin-top: 0.9rem; }

.longform__standfirst {
	font-family: var(--serif);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--slate);
	margin: 1.5rem 0 0;
}

.longform__actions { margin-top: clamp(1.5rem, 3vw, 2rem); }

.longform__body > .prose { max-width: 39rem; }

/* Inside the body column an image may take the whole column — it is
   already capped at its own natural size, so this only ever helps. */
.longform__body .prose figure,
.longform__body .prose .wp-block-image { width: 100%; }

.longform__body .prose > h2:first-child,
.longform__body .prose > h3:first-child { margin-top: 0; }

/* ---------------------------------------------------------------
   Gallery pages — places and collections

   The work gets the width of the page. Title and introduction sit across
   the top instead of in a rail on the left, the writing keeps its reading
   measure, and each picture is shown as large as its file allows (never
   blown up) and never taller than the window.
------------------------------------------------------------------ */
.fh-gallery-page .longform {
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3rem);
}
.fh-gallery-page .longform__head {
	position: static;
	max-width: 46rem;
}
.fh-gallery-page .longform__body > .prose { max-width: none; }
.fh-gallery-page .longform__body .prose > * { max-width: 42rem; }
.fh-gallery-page .longform__body .prose > figure,
.fh-gallery-page .longform__body .prose > .wp-block-image,
.fh-gallery-page .longform__body .prose > .fh-thumbs,
.fh-gallery-page .longform__body .prose > .fh-concrete-poem {
	max-width: none;
	margin-block: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.fh-gallery-page .prose figure img,
.fh-gallery-page .prose .wp-block-image img { max-height: 85vh; }
/* A row of thumbnails (a paragraph that is only pictures) takes the page
   width too, so they sit three or four across rather than two. */
.fh-gallery-page .longform__body .prose > p:has(> a.is-expandable):not(:has(> :not(a, br))) { max-width: none; }
.fh-gallery-page .prose figcaption {
	max-width: 42rem;
	font-size: 0.8125rem;
	margin-top: 0.9rem;
}
/* The figure keeps no bottom margin here, so the Enquire line simply follows
   its caption rather than being pulled up over it. */
.fh-gallery-page .prose figure + .prose__action,
.fh-gallery-page .prose .wp-block-image + .prose__action { margin-top: 1rem; }

/* Two logos in a row (Sensing Place: UNESCO and the Jurassic Coast at 25). */
.prose .fh-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 1.75rem;
}
.prose .fh-logos img {
	width: auto;
	height: auto;
	max-width: 150px;
}

/* An opening line in her voice, a step up from the text. */
.prose .fh-lede {
	font-size: var(--t-lead);
	line-height: 1.45;
}

/* Process photographs as a set, three or four across, each opening larger. */
.prose .fh-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1rem;
}
.prose .fh-thumbs a { display: block; }
.prose .fh-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Murmuration Moon is a shape as much as a poem: the spacing is held in
   non-breaking spaces, so each line keeps its own and never wraps — "keep
   formatting exactly as it is". Set small, as on her old site, so the shape
   reads; on a narrow phone it can be scrolled sideways rather than broken. */
.prose .fh-concrete-poem {
	overflow-x: auto;
	font-family: var(--sans);
	font-size: 0.9375rem;
	line-height: 1.7;
	letter-spacing: 0;
}
.prose .fh-concrete-poem p {
	margin: 0 0 1.3em;
	max-width: none;
	white-space: nowrap;
}
@media (max-width: 30rem) {
	.prose .fh-concrete-poem { font-size: 0.75rem; }
}

/* ---------------------------------------------------------------
   Collect — Paintings and the Swallow Fund, shown like a gallery

   Each work as a place page shows it: the picture large, its label under
   it, the price, and a quiet way to ask. Framed work has no basket link;
   it goes by enquiry, as the postage rules require.
------------------------------------------------------------------ */
.fh-collect .shopnav { margin-bottom: clamp(2rem, 5vw, 3rem); }

.gworks { margin-top: clamp(2rem, 5vw, 3.5rem); }

.gwork { margin: 0 0 clamp(3.5rem, 8vw, 6rem); }

.gwork__figure { margin: 0; }

.gwork__image {
	display: block;
	width: fit-content;
	max-width: 100%;
}
.gwork__image img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 85vh;
}

.gwork__label {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	max-width: 42rem;
	margin-top: 0.9rem;
	font-family: var(--sans);
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--slate);
}
.gwork__title {
	color: var(--ink);
	font-weight: 500;
	text-decoration: none;
}
.gwork__title:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.gwork__price {
	margin-top: 0.3rem;
	color: var(--ink);
}

.gwork__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	margin: 1rem 0 0;
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
}
.gwork__actions a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--hairline);
	padding-bottom: 2px;
	transition: border-color 0.3s var(--ease);
}
.gwork__actions a:hover { border-bottom-color: var(--ink); }

/* ---------------------------------------------------------------
   Centred work (Frances, 22 Sep 2026: "centralise all the images… so
   square images are in the middle… keep the justified left beginnings")

   Titles, introductions and the writing stay ranged left; the pictures,
   the rows of thumbnails and the Murmuration Moon poem sit in the middle.
   A figure is a table so its caption wraps to the picture's own width and
   starts at the picture's left edge rather than the page's.
------------------------------------------------------------------ */
.fh-gallery-page .longform__body .prose > figure,
.fh-gallery-page .gwork__figure {
	display: table;
	width: auto;
	margin-inline: auto;
}
.fh-gallery-page .longform__body .prose > figure > figcaption,
.fh-gallery-page .longform__body .prose > figure > .prose__action,
.fh-gallery-page .gwork__label,
.fh-gallery-page .gwork__actions {
	display: table-caption;
	caption-side: bottom;
	max-width: none;
}
.fh-gallery-page .longform__body .prose > figure > .prose__action { margin: 0.9rem 0 0; }
.fh-gallery-page .gwork__label { display: table-caption; }
.fh-gallery-page .gwork__label > * { display: block; }
.fh-gallery-page .gwork__label > * + * { margin-top: 0.15rem; }
.fh-gallery-page .gwork__label > .gwork__price { margin-top: 0.3rem; }
.fh-gallery-page .gwork__actions > a { margin-right: 1.75rem; }
.fh-gallery-page .gwork__actions > a:last-child { margin-right: 0; }
.fh-gallery-page .gwork__image { margin-inline: auto; }

/* Rows of thumbnails in the middle too. */
.fh-gallery-page .longform__body .prose > p:has(> a.is-expandable):not(:has(> :not(a, br))) { text-align: center; }
.fh-gallery-page .prose p > a.is-expandable { margin: 0 0.5rem 1rem; }
.fh-gallery-page .prose .fh-thumbs { justify-content: center; }

/* The poem keeps its own shape; the block of it sits in the middle. */
.fh-gallery-page .longform__body .prose > .fh-concrete-poem {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

/* Sensing Place: the two logos and their lines, centred with the work. */
.fh-gallery-page .longform__body .prose > .fh-centred {
	max-width: none;
	text-align: center;
}
.prose .fh-logos.fh-centred { justify-content: center; }

/* Enquire a size down from the titles, throughout (Frances, 22 Sep 2026). */
.prose__action,
.gwork__actions {
	font-size: 0.625rem;
	letter-spacing: 0.16em;
}

/* Films on Practice: the way through to her YouTube channel. */
.films__more { margin: 1.25rem 0 0; }

/* The smaller lines under the Swallow Fund title. */
.swallow__lede {
	font-size: 1.125rem;
	line-height: 1.55;
}
.fh-collect .poem--aside { margin-block: clamp(2rem, 5vw, 3rem); }

/* The CV is a record: it wants the column, not the measure. */
.longform__body > .prose--cv { max-width: 48rem; }

@media (max-width: 62rem) {
	.longform {
		grid-template-columns: 1fr;
		gap: clamp(1.5rem, 4vw, 2.5rem);
	}
	.longform__head { position: static; }
	.longform__head .page-head__title { font-size: var(--t-quote); }
}

.whatson { padding-bottom: clamp(3rem, 8vw, 6rem); }
.whatson .section__head { margin-bottom: 0; }
.whatson .galleries__list { margin-top: 0; border-top: 0; }
.whatson .current__none { padding-top: clamp(1.25rem, 3vw, 2rem); }

/* ---------------------------------------------------------------
   Available — the filter bar
------------------------------------------------------------------ */
.shopnav {
	padding-bottom: 1.1rem;
	border-bottom: var(--rule);
	margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.shopnav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem clamp(1.25rem, 3vw, 2.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.shopnav__link {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--slate);
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.shopnav__link:hover,
.shopnav__link:focus-visible { color: var(--ink); }
.shopnav__link.is-current {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

/* Sold work stays in the listing but recedes, so a page of available work
   still reads as available. */
.woo ul.products li.product.outofstock img { opacity: 0.72; }
.woo ul.products li.product.outofstock a:hover img { opacity: 1; }

/* The one-word action line under a work — "enquire", "available", "sold". */
.prose__action {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--slate);
}
.prose figure + .prose__action,
.prose .wp-block-image + .prose__action {
	margin-top: calc(clamp(2rem, 5vw, 3.5rem) * -1 + 0.75rem);
}
.prose__action a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--hairline);
	padding-bottom: 2px;
	transition: border-color 0.3s var(--ease);
}
.prose__action a:hover { border-bottom-color: var(--ink); }

/* ===============================================================
   Round two
   =============================================================== */

/* ---------------------------------------------------------------
   Header over the hero
------------------------------------------------------------------ */
.masthead--over {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 30;
	color: var(--chalk);
}
.masthead--over .wordmark,
.masthead--over .nav a,
.masthead--over .nav-toggle { color: var(--chalk); }
.masthead--over .nav a:hover,
.masthead--over .nav a:focus-visible,
.masthead--over .nav .current-menu-item > a { border-bottom-color: var(--chalk); }

/* The drop-downs need their own ground once the bar is transparent. */
.masthead--over .nav .sub-menu {
	background: rgba(16, 18, 20, 0.92);
	border-color: rgba(237, 238, 236, 0.22);
	backdrop-filter: blur(6px);
}
.masthead--over .nav .sub-menu a { color: rgba(237, 238, 236, 0.72); }
.masthead--over .nav .sub-menu a:hover,
.masthead--over .nav .sub-menu a:focus-visible { color: var(--chalk); }

.masthead--over :focus-visible { outline-color: var(--chalk); }

/* ---------------------------------------------------------------
   The open menu, narrow, over the hero

   Everywhere else the bar sits on the chalk page, so the stacked menu
   already has a ground. On the homepage it is transparent and absolutely
   positioned, which left the photograph and the page copy showing straight
   through the list. The panel takes its own ink ground while it is open.
------------------------------------------------------------------ */
@media (max-width: 46rem) {
	/* Full height, so a menu shorter than the window does not leave the page
	   copy showing in the gap beneath it. */
	.masthead--over.is-nav-open {
		background: var(--ink);
		min-height: 100svh;
	}

	/* The drop-down ground above is for the desktop fly-out. Stacked inside an
	   already-opaque panel it reads as a run of floating bars. */
	.masthead--over.is-nav-open .nav .sub-menu {
		background: none;
		backdrop-filter: none;
	}

	/* Absolutely positioned, the panel cannot push the page down, so a menu
	   taller than the window would be unreachable below the fold. */
	.masthead--over.is-nav-open .nav {
		max-height: calc(100svh - 7rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* ---------------------------------------------------------------
   Hero — full bleed
------------------------------------------------------------------ */
.hero {
	position: relative;
	height: min(92svh, 56rem);
	min-height: 30rem;
	padding: 0;
	overflow: hidden;
	background: var(--ink);
	isolation: isolate;
}

.hero__stage {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	background: var(--ink);
}

.hero__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 1.2s var(--ease);
}
.hero__slide.is-active { opacity: 1; }

.hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* A held breath on the active slide — barely perceptible, but it keeps a
	   still photograph from feeling dead on the page. */
	transform: scale(1.04);
	transition: transform 9s linear;
}
.hero__slide.is-active img { transform: scale(1); }

/* Type has to stay legible over whatever the photograph happens to be doing:
   one wash at the top for the nav, one at the foot for the caption. */
.hero__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(12, 14, 16, 0.5), rgba(12, 14, 16, 0) 22%),
		linear-gradient(to top, rgba(12, 14, 16, 0.72), rgba(12, 14, 16, 0) 42%);
}

.hero__foot {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 3;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding-bottom: clamp(1.75rem, 4vw, 3rem);
	color: var(--chalk);
}

/* The words sit on their own layer over the whole photograph, so each slide
   can place them where its picture has room (Frances, 16–17 Sep 2026: "the
   text covers the sketchbook"). The blurred box that used to sit behind them
   is gone — she found it smudged the photograph. Legibility now comes from
   choosing the quiet corner, the veil, and a soft shadow on the type. */
.hero__words {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.hero__captions {
	position: relative;
	height: 100%;
}

.hero__caption {
	position: absolute;
	left: 0;
	bottom: clamp(1.75rem, 4vw, 3rem);
	max-width: min(40rem, calc(100% - 17rem));
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity 0.7s var(--ease), visibility 0.7s, transform 0.7s var(--ease);
	text-shadow: 0 1px 2px rgba(12, 14, 16, 0.35), 0 0 1.4rem rgba(12, 14, 16, 0.45);
}
.hero__caption.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

/* Clear of the name and menu at the top of the window. */
.hero__caption--top-left,
.hero__caption--top-right {
	top: clamp(6.5rem, 11vw, 8.5rem);
	bottom: auto;
}
.hero__caption--top-right {
	left: auto;
	right: 0;
	text-align: right;
	max-width: min(30rem, 45%);
}
.hero__caption--top-right .hero__note { margin-left: auto; max-width: 20ch; }

.hero__caption--middle-left {
	top: 50%;
	bottom: auto;
	translate: 0 -50%;
	max-width: min(36rem, 45%);
}

/* Dark words for a pale part of the photograph — the white page of a
   sketchbook — with a faint light halo instead of a shadow. */
.hero__caption--dark { text-shadow: 0 0 1.2rem rgba(237, 238, 236, 0.6); }
.hero__caption--dark .hero__place,
.hero__caption--dark .hero__note { color: var(--ink); }
.hero__caption--dark .hero__credit { color: rgba(22, 24, 26, 0.7); }

.hero__place {
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	margin: 0 0 0.75rem;
	line-height: 1.4;
}

.hero__note {
	font-family: var(--serif);
	font-size: clamp(1.6rem, 3.4vw, 3rem);
	font-weight: 300;
	font-style: italic;
	line-height: 1.14;
	letter-spacing: -0.015em;
	margin: 0 0 1.1rem;
	max-width: 26ch;
	text-wrap: balance;
}

.hero__credit {
	font-family: var(--sans);
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(237, 238, 236, 0.62);
	margin: 0;
}

.hero__controls {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 0 0 auto;
	margin-top: 0;
}

.hero__count {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	color: rgba(237, 238, 236, 0.62);
	margin: 0 0.5rem 0 0;
	font-variant-numeric: tabular-nums;
}
.hero__count b { font-weight: 500; color: var(--chalk); }

/* The two arrows are one object: a capsule with a hairline down the middle.
   Two separate circles floating on a photograph read as debris. */
.hero__nav {
	display: flex;
	border: 1px solid rgba(237, 238, 236, 0.38);
	border-radius: 999px;
	overflow: hidden;
	background: rgba(12, 14, 16, 0.2);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.hero__arrow {
	width: 3.1rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	color: var(--chalk);
	border: 0;
	border-radius: 0;
	transition: background-color 0.3s var(--ease);
}
.hero__arrow + .hero__arrow { box-shadow: inset 1px 0 0 rgba(237, 238, 236, 0.28); }

/* Sized here, or the browser gives the inline SVG its 300x150 default. */
.hero__arrow svg {
	width: 0.7rem;
	height: 0.7rem;
	display: block;
}

.hero__arrow:hover,
.hero__arrow:focus-visible { background: rgba(237, 238, 236, 0.2); }
.hero__arrow:focus-visible { outline-offset: -2px; }

.hero__progress {
	position: absolute;
	inset: auto 0 0 0;
	height: 2px;
	background: rgba(237, 238, 236, 0.22);
	grid-column: auto;
	margin: 0;
}
.hero__progress::after { background: var(--chalk); }

/* ---------------------------------------------------------------
   Where to see the work — the galleries, given proper weight
------------------------------------------------------------------ */
.reps {
	list-style: none;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: 0;
	border-top: var(--rule);
}
.reps__item { border-bottom: var(--rule); }

.reps__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: baseline;
	gap: 0 clamp(1rem, 3vw, 2.5rem);
	padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
	text-decoration: none;
	transition: padding-inline-start 0.35s var(--ease);
}
.reps__link:hover,
.reps__link:focus-visible { padding-inline-start: 0.75rem; }

.reps__no {
	font-family: var(--sans);
	font-size: var(--t-label);
	letter-spacing: var(--track-wide);
	color: var(--slate);
	font-variant-numeric: tabular-nums;
}
.reps__name {
	font-family: var(--serif);
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-weight: 300;
	line-height: 1.2;
}
.reps__where {
	font-family: var(--sans);
	font-size: var(--t-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--slate);
	text-align: right;
}
.reps__go {
	font-family: var(--sans);
	color: var(--slate);
	transition: transform 0.35s var(--ease), color 0.35s var(--ease);
}
.reps__link:hover .reps__go {
	transform: translateX(0.35rem);
	color: var(--ink);
}

.current__none { padding-bottom: 0.5rem; }

/* A few words under a listing — the RWS invitation, say. */
.diary__note {
	display: block;
	max-width: 42rem;
	margin-top: 0.5rem;
	font-family: var(--serif);
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--slate);
}

@media (max-width: 46rem) {
	.reps__link {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 0.3rem;
	}
	.reps__name { grid-area: 1 / 1; }
	/* The arrow belongs beside the name, not stranded under the address. */
	.reps__go { grid-area: 1 / 2; }
	.reps__where {
		grid-area: 2 / 1 / 2 / 3;
		text-align: left;
	}
}

/* The heading above a list already draws a rule; a second one a line lower
   read as an empty first row. */
.section__head + .reps,
.section__head + .galleries__list,
.section__head + .cardrow {
	margin-top: 0;
	border-top: 0;
}

/* ---------------------------------------------------------------
   Places — the stage runs the height of the section
------------------------------------------------------------------ */
.places { align-items: stretch; }

.places__stage {
	position: static;
	aspect-ratio: auto;
	background: none;
	overflow: visible;
	align-self: stretch;
}

/* Full height of the list beside it; once that list is taller than the window
   the frame stops growing and stays put instead. */
.places__frame {
	position: sticky;
	top: 2rem;
	height: min(100%, calc(100svh - 4rem));
	min-height: 26rem;
	overflow: hidden;
	background: var(--chalk-deep);
}
.places__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.45s var(--ease);
}
.places__frame img.is-swapping { opacity: 0; }

@media (max-width: 60rem) {
	.places { align-items: start; }
	.places__stage { display: none; }
}

/* ---------------------------------------------------------------
   Contact — the person you are writing to
------------------------------------------------------------------ */
.contact__portrait {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--chalk-deep);
}
.contact__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* She is up in the top right of this frame — a centred crop takes her head off. */
	object-position: 68% 22%;
}

@media (max-width: 60rem) {
	.contact__portrait { aspect-ratio: 3 / 2; }
	/* Above the form on a phone — it is the warmest thing on the page. */
	.contact { display: flex; flex-direction: column; }
	.contact__aside { order: -1; }
	.contact__aside .contact__block:first-of-type { margin-top: 0; }
}

/* ---------------------------------------------------------------
   Footer — five identical columns of grey links was four too many
------------------------------------------------------------------ */
.colophon {
	border-top: 0;
	background: var(--chalk-deep);
	padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1.75rem, 3vw, 2.5rem);
}

.colophon__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
	border-bottom: 1px solid rgba(22, 24, 26, 0.14);
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.colophon__name {
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
	color: var(--ink);
}
.colophon__name span {
	display: block;
	font-size: 0.55em;
	font-weight: 400;
	letter-spacing: 0.22em;
	color: var(--slate);
	margin-top: 0.6em;
}

.colophon__about {
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ink);
	max-width: 26ch;
	margin: 1.5rem 0 0;
}

.colophon__where {
	font-family: var(--sans);
	font-size: 0.75rem;
	line-height: 1.8;
	color: var(--slate);
	margin: 1.5rem 0 0;
}

.colophon__cta { margin: 1.5rem 0 0; }

.colophon__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.colophon__col ul {
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
}
.colophon__col li + li { margin-top: 0.5rem; }
.colophon__col a {
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--slate);
	text-decoration: none;
	transition: color 0.3s var(--ease);
}
.colophon__col a:hover,
.colophon__col a:focus-visible { color: var(--ink); }

/* Social reads as rows with a handle, not as a fifth column of the same. */
.colophon__social ul {
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
	border-top: 1px solid rgba(22, 24, 26, 0.14);
}
.colophon__social li { border-bottom: 1px solid rgba(22, 24, 26, 0.14); }
.colophon__social a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.7rem;
	text-decoration: none;
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--ink);
	transition: padding-inline-start 0.35s var(--ease);
}
.colophon__social a:hover,
.colophon__social a:focus-visible { padding-inline-start: 0.5rem; }
.colophon__social span {
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--slate);
	white-space: nowrap;
}

.colophon__inner .label a { text-decoration: none; }
.colophon__inner .label a:hover { color: var(--ink); }

@media (max-width: 64rem) {
	.colophon__grid { grid-template-columns: 1fr 1fr; }
	.colophon__social { grid-column: 1 / -1; }
}
@media (max-width: 46rem) {
	.colophon__grid { grid-template-columns: 1fr; }
	.colophon__links { grid-template-columns: 1fr 1fr; }
}

/* Type on the photograph is always chalk — the veil is what makes it hold. */
.hero__place,
.hero__note { color: var(--chalk); }

/* On a phone the photograph is too narrow to have a quiet corner, so the
   words leave it: the picture stands clear, and the line, the credit and the
   arrows sit in a dark band underneath, a size smaller (Frances, 17 Sep 2026:
   "on the phone the words cover the imagery… maybe they should be smaller?"). */
@media (max-width: 46rem) {
	.hero {
		height: auto;
		min-height: 0;
	}
	.hero__stage {
		position: relative;
		inset: auto;
		height: min(64svh, 32rem);
	}
	.hero__veil {
		bottom: auto;
		height: min(64svh, 32rem);
		background: linear-gradient(to bottom, rgba(12, 14, 16, 0.5), rgba(12, 14, 16, 0) 30%);
	}
	.hero__words {
		position: static;
		pointer-events: auto;
	}
	/* All the captions share one cell, so the band is always as tall as the
	   longest line and the page below never jumps as the slides change. */
	.hero__captions {
		display: grid;
		height: auto;
		padding-top: 1.35rem;
	}
	.hero__caption { grid-area: 1 / 1; }
	.hero__caption,
	.hero__caption--top-right,
	.hero__caption--middle-left {
		position: static;
		inset: auto;
		translate: none;
		max-width: none;
		text-align: left;
		text-shadow: none;
		transform: none;
	}
	.hero__caption--dark .hero__place,
	.hero__caption--dark .hero__note { color: var(--chalk); }
	.hero__caption--dark .hero__credit { color: rgba(237, 238, 236, 0.62); }
	.hero__caption--top-right .hero__note { margin-left: 0; max-width: none; }
	.hero__note {
		font-size: 1.3rem;
		max-width: none;
		margin-bottom: 0.6rem;
	}
	.hero__place { margin-bottom: 0.5rem; }
	.hero__foot {
		position: static;
		padding-block: 1.1rem 1.6rem;
	}
	.hero__controls { width: 100%; }
	.hero__count { margin-right: auto; }
}

/* ---------------------------------------------------------------
   Mobile
------------------------------------------------------------------ */
@media (max-width: 46rem) {
	/* Work reads better two-up on a phone than as one tall column of
	   single paintings — you can compare, and the page is a third as long. */
	.works,
	.woo ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 1.1rem;
	}
	.work__title,
	.woo .work__title { font-size: 0.95rem; }
	.work__meta { font-size: 0.6875rem; }
	.woo ul.products li.product img { height: clamp(7rem, 30vw, 11rem); }

	.tiles,
	.tiles--two { grid-template-columns: 1fr; }

	.section__head { gap: 0.75rem 1.25rem; flex-wrap: wrap; }

	.places__note { max-width: 14ch; }

	.shopnav ul { gap: 0.5rem 1.25rem; }

	.contact__portrait { aspect-ratio: 3 / 2; }

	.colophon__social a { font-size: 0.625rem; }
	.colophon__social span { font-size: 0.625rem; }
}

@media (max-width: 30rem) {
	.works,
	.woo ul.products { grid-template-columns: 1fr; }
	.colophon__links { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Fraunces, in its two voices
------------------------------------------------------------------ */

/* Display: page titles, pulled quotes, the big place names. */
.page-head__title,
.practice__quote,
.hero__note,
.grounds__list a,
.poem blockquote,
.places__name,
.reps__name,
.tile__title,
.grounds__list a,
.woo .woocommerce-products-header__title,
.woo h1.page-title,
.woo div.product .product_title {
	font-variation-settings: var(--display-axes);
}

/* Text: everything she has written. A little softening keeps the page
   from looking mechanically ruled. */
.prose,
.practice__body,
.films__intro,
.longform__standfirst,
.colophon__about,
.contact__address,
.pair__lead,
.current__none,
.cv__standfirst,
.cv__what,
.diary__what,
.work__title,
.keep__intro p:not(.label) {
	font-variation-settings: "SOFT" 24, "WONK" 0;
	font-optical-sizing: auto;
}

/* Italic in Fraunces is a true cut, so no synthesising. */
.prose em,
.prose i { font-style: italic; font-synthesis-style: none; }

/* Work captions are headings in the markup, so they inherit the browser's
   bold. Fraunces at 700 is far too loud for a caption line. */
.work__title { font-weight: 400; }

/* ===============================================================
   WooCommerce — basket, checkout, account

   Woo's own stylesheets are off, so everything from here down is
   the theme doing that job: notices, tables, every form control,
   and the responsive collapse of the basket on a phone.
   =============================================================== */

/* ---------------------------------------------------------------
   Notices
------------------------------------------------------------------ */
.woocommerce-notices-wrapper:empty { display: none; }

.woo .woocommerce-message,
.woo .woocommerce-info,
.woo .woocommerce-error,
.woo .woocommerce-noreviews {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	list-style: none;
	font-family: var(--sans);
	font-size: 0.8125rem;
	line-height: 1.5;
	background: var(--chalk-deep);
	border: 0;
	border-left: 2px solid var(--ink);
	padding: 1rem 1.25rem;
	margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
}
.woo .woocommerce-error { border-left-color: #8c3a2b; }
.woo .woocommerce-error li { list-style: none; }

/* The "view basket" link is a link, not a black slab in the middle of a note. */
.woo .woocommerce-message .button,
.woo .woocommerce-info .button {
	order: 2;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--hairline);
	color: var(--ink);
	padding: 0 0 2px;
	font-size: var(--t-label);
	letter-spacing: var(--track-wide);
	transition: border-color 0.3s var(--ease);
}
.woo .woocommerce-message .button:hover,
.woo .woocommerce-info .button:hover {
	background: none;
	border-bottom-color: var(--ink);
	color: var(--ink);
}

/* ---------------------------------------------------------------
   Form controls, everywhere in the shop
------------------------------------------------------------------ */
.woo input[type="text"],
.woo input[type="email"],
.woo input[type="tel"],
.woo input[type="password"],
.woo input[type="number"],
.woo input[type="search"],
.woo textarea,
.woo select,
.woo .select2-container .select2-selection--single {
	width: 100%;
	font-family: var(--serif);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--hairline);
	border-radius: 0;
	padding: 0.55rem 0;
	height: auto;
	box-shadow: none;
	transition: border-color 0.3s var(--ease);
}
.woo textarea { resize: vertical; min-height: 6rem; }

.woo input:focus,
.woo textarea:focus,
.woo select:focus {
	outline: none;
	border-bottom-color: var(--ink);
}

.woo select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%), linear-gradient(135deg, var(--slate) 50%, transparent 50%);
	background-position: calc(100% - 12px) center, calc(100% - 7px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 1.75rem;
}

/* Select2 drives the country and county fields. */
.woo .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	height: 2.6rem;
}
.woo .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: inherit;
	color: var(--ink);
}
.woo .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); }
.select2-dropdown {
	border-color: var(--hairline);
	border-radius: 0;
	font-family: var(--serif);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ink); }

.woo label {
	display: block;
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--slate);
	margin-bottom: 0.45rem;
	line-height: 1.5;
}
.woo label .required { color: var(--slate); text-decoration: none; }
.woo label .optional { text-transform: none; letter-spacing: 0.04em; }

.woo .form-row { margin: 0 0 1.35rem; padding: 0; }

/* Checkboxes keep their label on the same line. */
.woo .woocommerce-form__label-for-checkbox,
.woo label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-family: var(--serif);
	font-size: 0.95rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	margin: 0;
}
.woo input[type="checkbox"],
.woo input[type="radio"] {
	width: auto;
	margin: 0.2rem 0 0;
	accent-color: var(--ink);
	flex: 0 0 auto;
}

.woo .quantity input.qty {
	width: 4.5rem;
	text-align: center;
	border: 1px solid var(--hairline);
	padding: 0.8rem 0.4rem;
	font-family: var(--sans);
	font-size: 0.9rem;
}

/* ---------------------------------------------------------------
   Single work
------------------------------------------------------------------ */
.woo .product__caption {
	font-family: var(--sans);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--slate);
	margin: 0 0 1.25rem;
	max-width: 40ch;
}

.woo .product__sold {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--slate);
	padding-bottom: 1.25rem;
	border-bottom: var(--rule);
	margin: 0 0 1.5rem;
}

.woo .product__delivery {
	font-family: var(--sans);
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--slate);
	max-width: 42ch;
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: var(--rule);
}

/* Quantity and the button read as one control. */
.woo div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
	margin: 1.75rem 0 0;
}
.woo div.product form.cart .quantity { margin: 0; }
.woo div.product form.cart button.button { flex: 0 1 auto; }

.woo div.product .stock { margin: 0 0 1rem; }

/* PayPal's own buttons are as wide as their container and shout in yellow.
   Held to the width of the Add to basket control and given room above. */
.woo #ppc-button-ppcp-gateway,
.woo .ppcp-button-container {
	max-width: 22rem;
	margin-top: 1.25rem;
}

/* ---------------------------------------------------------------
   Tables — basket, order review, account
------------------------------------------------------------------ */
.woo table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	font-family: var(--serif);
}

.woo table.shop_table th {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--slate);
	text-align: left;
	padding: 0 0 0.9rem;
	border-bottom: var(--rule);
}

.woo table.shop_table td {
	padding: 1.35rem 1rem 1.35rem 0;
	border-bottom: var(--rule);
	vertical-align: middle;
}
.woo table.shop_table td:last-child,
.woo table.shop_table th:last-child { padding-right: 0; text-align: right; }

.woo table.shop_table .product-thumbnail { width: 6.5rem; padding-right: 1.5rem; }
.woo table.shop_table .product-thumbnail img {
	width: 100%;
	height: auto;
	background: var(--chalk-deep);
}

.woo table.shop_table .product-remove { width: 2rem; padding-right: 1rem; }
.woo table.shop_table .product-remove a {
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border: 1px solid var(--hairline);
	border-radius: 50%;
	font-size: 0.85rem;
	line-height: 1;
	color: var(--slate);
	text-decoration: none;
	transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.woo table.shop_table .product-remove a:hover { border-color: var(--ink); color: var(--ink); }

.woo table.shop_table .product-name a {
	font-size: 1.05rem;
	line-height: 1.35;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s var(--ease);
}
.woo table.shop_table .product-name a:hover { border-bottom-color: var(--ink); }

.woo table.shop_table .product-price,
.woo table.shop_table .product-subtotal,
.woo table.shop_table .amount {
	font-variant-numeric: tabular-nums;
}
.woo table.shop_table .product-subtotal { font-weight: 500; }
.woo table.shop_table .product-quantity { width: 7rem; }

/* ---------------------------------------------------------------
   Basket
------------------------------------------------------------------ */
.woocommerce-cart .woo,
.woocommerce-checkout .woo,
.woocommerce-account .woo { padding-bottom: clamp(3rem, 8vw, 6rem); }

/* The actions row is a <td colspan="6"> inside the table. Giving a table cell
   display:flex takes it out of the table layout altogether and it shrinks to
   fit its contents — 127px instead of the full width. It stays a table-cell;
   the two controls float inside it. */
.woo .cart td.actions {
	display: table-cell;
	padding: 1.5rem 0 0;
	border-bottom: 0;
	text-align: left;
}
.woo .cart td.actions::after {
	content: "";
	display: table;
	clear: both;
}

.woo .cart .coupon {
	display: flex;
	align-items: flex-end;
	gap: 0.75rem;
	float: left;
	width: min(26rem, 60%);
}
.woo .cart .coupon label { display: none; }
.woo .cart .coupon input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	font-family: var(--sans);
	font-size: 0.875rem;
	padding-bottom: 0.6rem;
}
.woo .cart .coupon button { flex: 0 0 auto; white-space: nowrap; }

.woo .cart td.actions > button[name="update_cart"] {
	float: right;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--hairline);
	color: var(--slate);
	padding: 0 0 2px;
	font-size: var(--t-label);
	letter-spacing: var(--track-wide);
	transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.woo .cart .actions > button[name="update_cart"]:hover:not(:disabled) {
	background: none;
	color: var(--ink);
	border-bottom-color: var(--ink);
}
.woo .cart .actions > button[name="update_cart"]:disabled { opacity: 0.4; cursor: default; }

.woo .cart-collaterals {
	display: flex;
	justify-content: flex-end;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}
.woo .cart_totals { width: min(28rem, 100%); }

.woo .cart_totals h2 {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--ink);
	padding-bottom: 1rem;
	border-bottom: var(--rule);
	margin: 0 0 0.5rem;
}

.woo .cart_totals table.shop_table { margin-bottom: 1.5rem; }
.woo .cart_totals table.shop_table th {
	font-family: var(--sans);
	font-size: var(--t-label);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--slate);
	border-bottom: var(--rule);
	padding: 1.1rem 1.5rem 1.1rem 0;
	width: 40%;
	vertical-align: baseline;
}
.woo .cart_totals table.shop_table td {
	padding: 1.1rem 0;
	text-align: right;
	vertical-align: baseline;
}
.woo .cart_totals table.shop_table .order-total th {
	font-size: var(--t-label);
	color: var(--ink);
	border-bottom: 0;
}
.woo .cart_totals table.shop_table .order-total td {
	font-size: 1.25rem;
	color: var(--ink);
	border-bottom: 0;
}
.woo .cart_totals table.shop_table .order-total td { font-weight: 500; }

.woo ul#shipping_method,
.woo .woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}
.woo ul#shipping_method li {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin-bottom: 0.5rem;
}
.woo ul#shipping_method label {
	font-family: var(--serif);
	font-size: 0.95rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	margin: 0;
}
.woo .woocommerce-shipping-destination,
.woo .shipping .woocommerce-shipping-calculator {
	font-family: var(--sans);
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--slate);
	margin-top: 0.75rem;
}
.woo .shipping-calculator-button { color: var(--ink); }

.woo .wc-proceed-to-checkout { padding: 0; }
.woo .wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	text-decoration: none;
}

/* ---------------------------------------------------------------
   Checkout
------------------------------------------------------------------ */
.woo .woocommerce-form-coupon-toggle .woocommerce-info { justify-content: flex-start; }

/* Two columns, but the heading and the panel are separate siblings that both
   belong in the right-hand one. As grid items they land in consecutive rows,
   which puts the order summary below the whole billing form. Floats keep them
   stacked together in one column, which is what they are. */
.woo form.checkout::after {
	content: "";
	display: table;
	clear: both;
}

@media (min-width: 62rem) {
	.woo #customer_details {
		float: left;
		width: 55%;
	}
	.woo #order_review_heading,
	.woo #order_review {
		float: right;
		clear: right;
		width: 38%;
	}
	.woo #order_review_heading { margin-bottom: 1.25rem; }
}

.woo .col2-set { display: block; }
.woo .col2-set .col-1,
.woo .col2-set .col-2 { width: auto; float: none; }
.woo .col2-set .col-2 { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

.woo .checkout h3,
.woo #order_review_heading {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--ink);
	padding-bottom: 1rem;
	border-bottom: var(--rule);
	margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}
.woo .col-2 h3 { margin-top: 0; }

.woo #ship-to-different-address {
	display: flex;
	align-items: center;
	border: 0;
	padding: 0;
	margin-bottom: 1.5rem;
}
.woo #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	color: var(--ink);
	cursor: pointer;
}

/* Two-up for the short fields, once there is room. */
@media (min-width: 40rem) {
	.woo .woocommerce-billing-fields__field-wrapper,
	.woo .woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.5rem;
	}
	.woo .form-row-wide,
	.woo .woocommerce-billing-fields__field-wrapper > .form-row:last-child { grid-column: 1 / -1; }
}

.woo #order_review {
	background: var(--chalk-deep);
	padding: clamp(1.5rem, 3vw, 2rem);
}
.woo #order_review table.shop_table { margin-bottom: 0; }
.woo #order_review td,
.woo #order_review th { padding-block: 0.9rem; }
.woo #order_review tfoot .order-total th,
.woo #order_review tfoot .order-total td {
	font-size: 1.1rem;
	color: var(--ink);
	border-bottom: 0;
}

.woo #payment { margin-top: 1.75rem; }
.woo #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0 0 1.5rem;
	border-bottom: var(--rule);
}
.woo #payment ul.payment_methods li { margin-bottom: 0.9rem; }
.woo #payment ul.payment_methods label {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--serif);
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	margin: 0;
	cursor: pointer;
}
.woo #payment ul.payment_methods label img { max-height: 1.5rem; width: auto; display: inline; }
.woo #payment .payment_box {
	background: var(--chalk);
	font-family: var(--sans);
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--slate);
	padding: 1rem 1.15rem;
	margin: 0.75rem 0 0 1.6rem;
}
.woo #payment .payment_box p:first-child { margin-top: 0; }
.woo #payment .payment_box p:last-child { margin-bottom: 0; }

.woo #payment .place-order { padding: 0; }
.woo #place_order { width: 100%; }

.woo .woocommerce-privacy-policy-text,
.woo .woocommerce-terms-and-conditions-wrapper {
	font-family: var(--sans);
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--slate);
	margin-bottom: 1.25rem;
}

/* ---------------------------------------------------------------
   Order received, and My account
------------------------------------------------------------------ */
.woo .woocommerce-order-overview {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1.5rem;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	padding: clamp(1.25rem, 3vw, 1.75rem) 0;
	border-block: var(--rule);
}
.woo .woocommerce-order-overview li {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--slate);
}
.woo .woocommerce-order-overview li strong {
	display: block;
	font-family: var(--serif);
	font-size: 1.1rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	margin-top: 0.4rem;
}

.woo .woocommerce-order h2,
.woo .woocommerce-customer-details h2,
.woo .woocommerce-MyAccount-content h2,
.woo .woocommerce-column__title {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--ink);
	padding-bottom: 1rem;
	border-bottom: var(--rule);
	margin: clamp(2rem, 4vw, 3rem) 0 1.5rem;
}

.woo .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	padding: 0 0 1.1rem;
	border-bottom: var(--rule);
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem clamp(1.25rem, 3vw, 2.25rem);
}
.woo .woocommerce-MyAccount-navigation a {
	font-family: var(--sans);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--slate);
	transition: color 0.3s var(--ease);
}
.woo .woocommerce-MyAccount-navigation a:hover,
.woo .woocommerce-MyAccount-navigation .is-active a { color: var(--ink); }

.woo .woocommerce-form-login,
.woo .woocommerce-form-register,
.woo .woocommerce-ResetPassword {
	max-width: 26rem;
	border: 0;
	padding: 0;
	margin: 0;
}
.woo .woocommerce-form-login__rememberme { margin-bottom: 1.25rem; }

.woo .woocommerce-address-fields { max-width: 34rem; }

/* ---------------------------------------------------------------
   Basket and order tables on a phone
   The table becomes one card per line, each cell labelled by the
   heading it lost.
------------------------------------------------------------------ */
@media (max-width: 46rem) {
	.woo #customer_details,
	.woo #order_review_heading,
	.woo #order_review { float: none; width: auto; }

	.woo table.shop_table_responsive thead { display: none; }
	.woo table.shop_table_responsive tbody tr,
	.woo table.shop_table_responsive tfoot tr { display: block; }

	.woo table.shop_table_responsive tbody tr {
		position: relative;
		padding: 1.5rem 0;
		border-bottom: var(--rule);
	}
	.woo table.shop_table_responsive td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.35rem 0;
		border: 0;
		text-align: right;
	}
	.woo table.shop_table_responsive td::before {
		content: attr(data-title);
		font-family: var(--sans);
		font-size: var(--t-label);
		font-weight: 500;
		letter-spacing: var(--track-wide);
		text-transform: uppercase;
		color: var(--slate);
		text-align: left;
	}
	.woo table.shop_table_responsive td.product-thumbnail {
		display: block;
		width: 8rem;
		padding: 0 0 1rem;
	}
	.woo table.shop_table_responsive td.product-thumbnail::before { display: none; }
	.woo table.shop_table_responsive td.product-remove {
		position: absolute;
		top: 1.5rem;
		right: 0;
		width: auto;
		padding: 0;
	}
	.woo table.shop_table_responsive td.product-remove::before { display: none; }
	.woo table.shop_table_responsive td.product-name { justify-content: flex-start; text-align: left; }

	.woo .cart .actions { flex-direction: column; align-items: stretch; }
	.woo .cart .coupon { max-width: none; }
	.woo .cart-collaterals { display: block; }
	.woo .cart_totals { width: 100%; }

	.woo .woocommerce-message,
	.woo .woocommerce-info { flex-direction: column; align-items: flex-start; }
}

/* A tab panel repeats its own title as an <h2>; the tab above it already says so. */
.woo .woocommerce-Tabs-panel > h2:first-child { display: none; }
.woo .woocommerce-Tabs-panel { font-family: var(--serif); }

.woo .cart-item__meta {
	display: block;
	font-family: var(--sans);
	font-size: 0.6875rem;
	line-height: 1.6;
	color: var(--slate);
	margin-top: 0.35rem;
	max-width: 34ch;
}

/* WooCommerce moves focus onto the notice so a screen reader announces it.
   An element with tabindex="-1" can never be reached by keyboard, so a focus
   ring on it is noise — and on a full-width notice it reads as a black box. */
.woo [tabindex="-1"]:focus,
.woo .woocommerce-message:focus,
.woo .woocommerce-info:focus,
.woo .woocommerce-error:focus { outline: none; }

@media (max-width: 46rem) {
	/* The totals table is already a two-column label/value list, and it carries
	   both a <th> and a data-title — so the responsive collapse printed every
	   label twice. It keeps its table layout. */
	.woo .cart_totals table.shop_table_responsive tbody tr { display: table-row; }
	.woo .cart_totals table.shop_table_responsive th,
	.woo .cart_totals table.shop_table_responsive td { display: table-cell; }
	.woo .cart_totals table.shop_table_responsive td::before { content: none; }
	.woo .cart_totals table.shop_table th { width: 38%; padding-right: 1rem; }

	/* Shipping needs the full width for its options and the note under them. */
	.woo .cart_totals table.shop_table .shipping th,
	.woo .cart_totals table.shop_table .shipping td {
		display: block;
		width: auto;
		text-align: left;
		padding-right: 0;
	}
	.woo .cart_totals table.shop_table .shipping th { padding-bottom: 0.5rem; border-bottom: 0; }
	.woo .woocommerce-shipping-destination,
	.woo .shipping .woocommerce-shipping-calculator { margin-top: 0.5rem; }
}


/* ---------------------------------------------------------------
   Odds and ends added with Frances's September revisions
------------------------------------------------------------------ */

/* A section can carry more than one heading now — Current, then Coming soon,
   then the galleries — so the later ones need air above them. */
.section__head--again {
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

/* The poem opens About rather than closing it — it sits at the head of the
   reading column, above the biography, and is capped to the same measure. */
.poem--opening {
	max-width: 39rem;
	margin: 0 0 clamp(2rem, 5vw, 3.5rem);
	padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
	border-bottom: var(--rule);
}

/* The acknowledgement under the biography is a footnote, not a paragraph. */
.prose .prose__note {
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: var(--slate);
	margin-top: clamp(2rem, 5vw, 3rem);
}


/* ---------------------------------------------------------------------------
   Baskets that have to be an enquiry

   Framed work and anything going abroad cannot be priced at the till, so the
   basket offers a letter instead of a checkout. The panel has to read as a
   way forward rather than a refusal, so it is set on the deep chalk ground
   the footer uses, not as a red error.
   --------------------------------------------------------------------------- */

.enquiry-panel {
	background: var(--chalk-deep);
	border: var(--rule);
	padding: clamp(1.25rem, 3vw, 1.9rem);
	margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
	max-width: 44rem;
}

.enquiry-panel__title {
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	margin: 0 0 0.75rem;
}

.enquiry-panel p {
	margin: 0 0 0.9rem;
	max-width: 38rem;
}

.enquiry-panel__note {
	font-size: 0.9rem;
	color: var(--slate);
}

.enquiry-panel form { margin: 0; }

/* The overseas prompt — assets/js/overseas.js. Same voice as the panel: a
   question with a way forward, not a warning. */
.overseas {
	width: min(34rem, calc(100vw - 2rem));
	max-width: none;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	border: var(--rule);
	background: var(--chalk);
	color: var(--ink);
}

.overseas::backdrop {
	background: rgb(22 24 26 / 0.55);
	backdrop-filter: blur(3px);
}

.overseas__where {
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--slate);
	margin: 0 0 0.75rem;
}

.overseas__title {
	font-family: var(--serif);
	font-size: clamp(1.6rem, 4vw, 2.1rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
	text-wrap: balance;
}

.overseas__body {
	margin: 0 0 1.6rem;
}

.overseas__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
}

.overseas__no {
	font-family: var(--sans);
	font-size: var(--t-label);
	color: var(--slate);
	background: none;
	border: 0;
	padding: 0.95rem 0;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

.overseas__no:hover,
.overseas__no:focus-visible {
	color: var(--ink);
}

.overseas .button-line[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* The postage line under a single work, where the buyer is deciding. */
.work__postage {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--slate);
	margin: 0 0 0.4rem;
	max-width: 34rem;
}


/* ---------------------------------------------------------------------------
   Click to expand

   The pictures on the older pages are wrapped in links straight to the file in
   the uploads folder, which took the reader out of the site altogether. The
   link still says where the full-size picture is; it just opens over the page
   now. See assets/js/lightbox.js.
   --------------------------------------------------------------------------- */

.is-expandable {
	cursor: zoom-in;
	display: block;
}

/* Loose thumbnails straight in the text (Antarctica's Anticipation and
   Journey pictures) sit in a row, as they did on the old site, rather than
   one to a line down a very long page. */
.prose > a.is-expandable,
.prose p > a.is-expandable {
	display: inline-block;
	vertical-align: top;
	margin: 0 1rem 1rem 0;
}

html.has-lightbox { overflow: hidden; }

/* The overlay sets its own display, which beats what the hidden attribute
   normally does — without this it stays over the page invisibly once closed
   and swallows every click. Frances hit exactly that: "after one link nothing
   works unless I refresh it". */
.lightbox[hidden] { display: none; }

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1.5rem, 5vw, 4rem);
	background: rgba(12, 14, 16, 0.92);
	opacity: 0;
	transition: opacity 0.22s var(--ease);
}
.lightbox.is-open { opacity: 1; }

.lightbox__figure {
	margin: 0;
	max-width: min(100%, 82rem);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.lightbox__image {
	display: block;
	max-width: 100%;
	/* Leaves room for the caption underneath rather than pushing it off. */
	max-height: calc(100vh - 12rem);
	width: auto;
	height: auto;
	object-fit: contain;
}

.lightbox__caption {
	color: var(--chalk);
	font-family: var(--sans);
	font-size: 0.8rem;
	line-height: 1.55;
	letter-spacing: 0.01em;
	text-align: center;
	max-width: 44rem;
	opacity: 0.85;
}

.lightbox__close {
	position: absolute;
	top: clamp(0.75rem, 2vw, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(237, 238, 236, 0.12);
	color: var(--chalk);
	cursor: pointer;
	transition: background 0.2s var(--ease);
}
.lightbox__close:hover { background: rgba(237, 238, 236, 0.22); }

/* An inline SVG in a button has no sensible default size. */
.lightbox__close svg { width: 1rem; height: 1rem; }

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

/* The postage rates on the Delivery & Returns page, and the Antarctica
   research timeline — both are a term and a value, so both are set the same
   way rather than as bullet points. */
.rates,
.research {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	max-width: 30rem;
}

.rates li,
.research li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	padding: 0.7rem 0;
	border-bottom: var(--rule);
}

.rates li span,
.research li span {
	font-family: var(--sans);
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	color: var(--slate);
	white-space: nowrap;
}

/* Said under any link that leaves for another site — Frances did not want
   people losing the website when they click into Artwork Archive. */
.archive-note {
	font-family: var(--sans);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: var(--slate);
	margin-top: 0.6rem;
}