/*
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;
}

.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;
}

/* ---------------------------------------------------------------
   Ground — a band of pigment at actual scale. The only full-bleed
   image on the page, because it is texture and can take the stretch.
------------------------------------------------------------------ */
.ground {
	height: clamp(9rem, 22vw, 17rem);
	overflow: hidden;
	position: relative;
}
.ground img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ground::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 9rem;
	/* The band is one of her paintings and can be very pale along the bottom
	   edge, so the caption needs a real wash under it, not a hint of one. */
	background: linear-gradient(to top, rgba(10, 12, 14, 0.78), rgba(10, 12, 14, 0.35) 45%, transparent);
	pointer-events: none;
}
.ground figcaption {
	position: absolute;
	left: var(--gutter);
	right: var(--gutter);
	bottom: 1rem;
	z-index: 1;
	color: var(--chalk);
}

/* ---------------------------------------------------------------
   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: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;
}

.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 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);
}
.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;
}

.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; }

/* 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); }

/* ---------------------------------------------------------------
   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;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding-bottom: clamp(1.75rem, 4vw, 3rem);
	color: var(--chalk);
}

.hero__captions {
	position: relative;
	flex: 1 1 auto;
	min-height: 9rem;
	max-width: 40rem;
}

.hero__caption {
	position: absolute;
	inset: auto auto 0 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity 0.7s var(--ease), visibility 0.7s, transform 0.7s var(--ease);
}
.hero__caption.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.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;
	line-height: 1.14;
	letter-spacing: -0.015em;
	margin: 0 0 1.1rem;
	max-width: 20ch;
	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: 3rem 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; }

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

/* ---------------------------------------------------------------
   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); }

@media (max-width: 46rem) {
	.hero { height: min(80svh, 40rem); }
	.hero__foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}
	.hero__captions { min-height: 0; }
	.hero__caption { position: relative; inset: auto; }
	.hero__caption:not(.is-active) { display: none; }
	.hero__note { font-size: 1.5rem; max-width: none; }
	.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; }
}