/* ==========================================================================
   Dial Estate — layout behaviours
   Everything here attaches to a custom class you add in the block editor
   (Block > Advanced > Additional CSS class(es)). No plugin does any of this.
   Colors are NOT set here — they come from theme.json so one file swaps the
   whole palette. Do not hard-code hex values in this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE ART — swipe gallery
   Add class: dial-swipe   to a core Gallery block.
   Turns a normal gallery into a horizontal rail that swipes on touch and
   snaps cleanly. Keyboard and screen readers still walk it in order.
   -------------------------------------------------------------------------- */
.dial-swipe.wp-block-gallery.has-nested-images {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	gap: clamp(14px, 2vw, 22px);
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-block: 1.6rem 1rem;
	margin-inline: 0;
	/* momentum scrolling on iOS */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--hairline) transparent;
}

.dial-swipe.wp-block-gallery.has-nested-images > figure.wp-block-image {
	flex: 0 0 clamp(230px, 27vw, 320px);
	scroll-snap-align: start;
	margin: 0;
	width: auto;
}

/* Staggered heights — a tidy row of equal squares is what eyes scroll past. */
.dial-swipe.wp-block-gallery.has-nested-images > figure.wp-block-image:nth-child(even) {
	margin-block-start: 2rem;
}

.dial-swipe.wp-block-gallery.has-nested-images > figure.wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Caption = title / year / medium. Keep it quiet under the work. */
.dial-swipe.wp-block-gallery.has-nested-images > figure.wp-block-image figcaption {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted-on-light);
	text-align: left;
	margin-block-start: 0.7rem;
	background: none;
	position: static;
	padding: 0;
}

.dial-swipe::-webkit-scrollbar { height: 6px; }
.dial-swipe::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--hairline);
	border-radius: 99px;
}

/* Arrow buttons injected by assets/gallery.js */
.dial-swipe-controls {
	display: flex;
	gap: 0.6rem;
	justify-content: flex-end;
	margin-block-end: -3.2rem;
	position: relative;
	z-index: 2;
}
.dial-swipe-controls button {
	inline-size: 46px;
	block-size: 46px;
	border-radius: 999px;
	border: 1.5px solid var(--wp--preset--color--hairline);
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-size: 1.05rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .18s, color .18s;
}
.dial-swipe-controls button:hover,
.dial-swipe-controls button:focus-visible {
	border-color: currentColor;
}
.dial-swipe-controls button[disabled] { opacity: .35; cursor: default; }

@media (max-width: 781px) {
	.dial-swipe-controls { display: none; } /* thumbs work fine; arrows are clutter */
	.dial-swipe.wp-block-gallery.has-nested-images > figure.wp-block-image:nth-child(even) {
		margin-block-start: 0;
	}
}

/* --------------------------------------------------------------------------
   2. FEATURED WORK — panel overlapping the image
   Add class: dial-featured   to a core Columns block (2 columns:
   image column first, then a Group holding the text panel).
   -------------------------------------------------------------------------- */
.dial-featured.wp-block-columns {
	align-items: center;
	gap: 0;
}
.dial-featured > .wp-block-column:last-child {
	margin-inline-start: clamp(-90px, -5vw, -40px);
	z-index: 3;
	box-shadow: 0 24px 60px rgb(0 0 0 / 22%);
}
@media (max-width: 781px) {
	.dial-featured > .wp-block-column:last-child {
		margin-inline-start: 0;
		margin-block-start: -2.5rem;
		margin-inline: 1.25rem;
	}
}

/* Oversized year numeral. Add class: dial-year  to a Heading block placed
   immediately before the image inside the first column. */
.dial-year {
	font-size: clamp(70px, 10vw, 150px) !important;
	line-height: 0.8 !important;
	margin: 0 0 -0.35em 0 !important;
	position: relative;
	z-index: 2;
	pointer-events: none;
	color: var(--wp--preset--color--accent);
	text-shadow: 0 4px 30px rgb(0 0 0 / 35%);
}

/* --------------------------------------------------------------------------
   3. THE QUOTE BAND
   Add class: dial-quote   to a Group block set to full width,
   background Pop / text Pop Text.
   -------------------------------------------------------------------------- */
.dial-quote {
	text-align: center;
}
.dial-quote .wp-block-quote {
	border: 0;
	padding: 0;
	margin-inline: auto;
	max-width: 19ch;
	font-style: normal;
}
.dial-quote .wp-block-quote p {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(27px, 4.4vw, 54px);
	line-height: 1.13;
	margin: 0 0 1.1rem;
}
.dial-quote .wp-block-quote cite {
	font-style: normal;
	font-size: 0.72rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 700;
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   4. HIS-STORY — long-form reading column
   Add class: dial-longform   to the Group wrapping the biography.
   Narrower measure + larger type. This is the page people actually read.
   -------------------------------------------------------------------------- */
.dial-longform p {
	max-width: 68ch;
	font-size: 1.125rem;
	line-height: 1.75;
	margin-block-end: 1.4em;
}
.dial-longform > p:first-of-type {
	font-size: 1.3rem;
	line-height: 1.55;
	font-weight: 600;
}
.dial-longform h2 { margin-block-start: 2.4em; }
.dial-longform img { margin-block: 2.4rem; }

/* --------------------------------------------------------------------------
   5. SECTION RHYTHM
   Add class: dial-band  to any full-width Group that is a section.
   Gives consistent vertical breathing without setting padding per block.
   -------------------------------------------------------------------------- */
.dial-band {
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
	padding-inline: clamp(1.25rem, 4vw, 2.25rem);
}

/* --------------------------------------------------------------------------
   6. ARCHIVES cards — add class: dial-card to each Group inside the columns
   -------------------------------------------------------------------------- */
.dial-card {
	border: 1px solid var(--wp--preset--color--hairline);
	padding: clamp(1.5rem, 3vw, 2rem);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.dial-card p { flex: 1; color: var(--wp--preset--color--muted-on-light); }

/* --------------------------------------------------------------------------
   7. Accessibility & motion
   -------------------------------------------------------------------------- */
:where(a, button, input, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.dial-swipe.wp-block-gallery.has-nested-images { scroll-behavior: auto; }
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   8. BUILD-TIME PLACEHOLDERS
   These two classes are scaffolding, not design. Every one of them should be
   gone before launch — if you can still see a dashed box on the live site,
   something was missed.
   -------------------------------------------------------------------------- */
.dial-slot {
	border: 1px dashed var(--wp--preset--color--hairline);
	min-height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: repeating-linear-gradient(
		135deg,
		transparent 0 13px,
		var(--wp--preset--color--hairline) 13px 14px
	);
	background-blend-mode: normal;
}
.dial-slot__label {
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	opacity: 0.65;
	margin: 0;
	padding: 1.5rem;
}
.dial-editor-note {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--accent-on-light);
	border-left: 3px solid var(--wp--preset--color--accent-on-light);
	padding: 0.6rem 0 0.6rem 0.9rem;
	margin-block: 1rem;
}

/* --------------------------------------------------------------------------
   9. MOBILE NAVIGATION
   You do NOT need a plugin or custom JavaScript for the hamburger. The core
   Navigation block has one built in.

   In Appearance > Editor > Navigation, select the Navigation block and set
   Overlay Menu to "Mobile" (this is the default). WordPress then renders a
   hamburger below 600px, opens a full-screen overlay, traps focus, closes on
   Escape, and handles all the accessibility attributes for you.

   Everything below only styles that overlay to match the rest of the site.
   -------------------------------------------------------------------------- */

/* Open the hamburger earlier than WordPress's 600px default — the estate menu
   has seven items and starts wrapping to two rows well before that. */
@media (max-width: 900px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* The hamburger button itself */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: currentColor;
	padding: 0.55rem;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 2px;
}
.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* The overlay panel */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	padding: clamp(1.5rem, 6vw, 3rem);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	padding-block: 0.75rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

/* Archives sub-pages: show them inline in the overlay rather than behind a
   second tap. On a seven-page site, a nested accordion is friction for nothing. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	display: block !important;
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	border: 0;
	background: transparent;
	padding-inline-start: 1.1rem;
	min-width: 0;
	width: auto;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-body);
	font-size: 0.9rem;
	text-transform: none;
	letter-spacing: 0.01em;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	content: "";
	display: inline-block;
	inline-size: 12px;
	block-size: 1px;
	background: var(--wp--preset--color--hairline);
	margin-inline-end: 10px;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   10. THE MEMORY BOARD
   Add class: dial-board   to the Group wrapping the memory cards.
   Add class: dial-memory  to each memory Group inside it.

   Curated, not interactive — Brandon collects the memories himself and you
   place them. There is no form, no login and nothing for anyone to submit,
   which is why this costs almost nothing to build and nothing to maintain.

   To add one: duplicate an existing dial-memory group and edit it.
   -------------------------------------------------------------------------- */
.dial-board {
	columns: 3;
	column-gap: 24px;
	margin-block-start: 0.5rem;
}
@media (max-width: 1000px) { .dial-board { columns: 2; } }
@media (max-width: 640px)  { .dial-board { columns: 1; } }

.dial-memory {
	break-inside: avoid;
	margin: 0 0 24px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-block-start: 3px solid var(--wp--preset--color--accent-on-light);
	padding: 24px 26px 22px;
	box-shadow: 0 6px 22px rgb(0 0 0 / 6%);
	transition: transform .22s ease, box-shadow .22s ease;
}
/* A slight tilt so it reads as a board of pinned cards, not a spreadsheet. */
.dial-memory:nth-child(3n+1) { transform: rotate(-0.5deg); }
.dial-memory:nth-child(3n+2) { transform: rotate(0.4deg); }
.dial-memory:nth-child(3n)   { transform: rotate(-0.2deg); }
.dial-memory:hover {
	transform: rotate(0deg);
	box-shadow: 0 14px 34px rgb(0 0 0 / 11%);
}
@media (max-width: 640px) { .dial-memory { transform: none !important; } }

.dial-memory-text {
	font-size: 1.03rem;
	line-height: 1.6;
	font-style: italic;
	margin-block-end: 1rem;
}
.dial-memory-cite {
	border-block-start: 1px solid var(--wp--preset--color--hairline);
	padding-block-start: 0.75rem;
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted-on-light);
}
.dial-memory-cite strong {
	display: block;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.72rem;
	color: var(--wp--preset--color--accent-on-light);
	margin-block-end: 3px;
}
.dial-memory .dial-slot { min-height: 150px; margin-block-end: 1rem; }

@media (prefers-reduced-motion: reduce) {
	.dial-memory, .dial-memory:hover { transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   11. THE STAT STRIP
   Add class: dial-stats  to the Columns block directly under the hero.

   Brandon asked for the original version to be removed, for two reasons:
   it repeated information already on the page, and the tiles weren't
   clickable. Both were fair. This version answers them — the numbers appear
   nowhere else on the Home page, and every tile is a link to the section it
   counts. Keep it that way if you edit it.
   -------------------------------------------------------------------------- */
.dial-stats.wp-block-columns {
	gap: 1px;
	background: var(--wp--preset--color--hairline);
	border-block: 1px solid var(--wp--preset--color--hairline);
	margin-block: 0;
}
.dial-stats .wp-block-column {
	background: var(--wp--preset--color--base);
	padding: 2.1rem 1.25rem 1.9rem;
	text-align: center;
	transition: background .18s ease;
}
.dial-stats .wp-block-column:hover { background: var(--wp--preset--color--surface); }
.dial-stats .wp-block-heading {
	font-size: clamp(2.4rem, 4.4vw, 3.25rem);
	color: var(--wp--preset--color--red);
	line-height: 1;
	margin: 0 0 0.35rem;
}
.dial-stats p {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--muted-on-light);
	margin: 0;
}
.dial-stats .wp-block-buttons { justify-content: center; margin-block-start: 0.6rem; }
.dial-stats .wp-block-button__link {
	background: none;
	color: var(--wp--preset--color--red);
	border: 0;
	padding: 0;
	font-size: 0.69rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   12. THE DARK STAT STRIP + THE ARCHIVES SPLIT

   The stat strip sits on the Deep tone. Note the red: the deep red used
   everywhere else (#A4161A) measures 2.3:1 against this background — legally
   and practically unreadable. The lighter red below is the same family at
   4.66:1. Do not swap it back to the deep red here.
   -------------------------------------------------------------------------- */
:root { --dial-red-on-dark: #EF4136; }

.dial-stats .wp-block-heading { color: var(--dial-red-on-dark); }
.dial-stats p { color: #B3A99C; }
.dial-stats .wp-block-button__link { color: var(--dial-red-on-dark); }
.dial-stats .wp-block-column { background: transparent; }
.dial-stats .wp-block-column + .wp-block-column {
	border-inline-start: 1px solid #3A332B;
}
.dial-stats.wp-block-columns { background: transparent; border: 0; }

/* Archives split — the documentary on the left, the three sections stacked right */
.dial-arch-split.wp-block-columns { gap: clamp(30px, 4vw, 52px); align-items: flex-start; }
.dial-arch-split .dial-card { margin-block-end: 16px; }
.dial-arch-split .dial-card:last-child { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   13. FAMILY PULL QUOTE
   Add class: dial-pull  to a Quote block inside dial-longform.
   Used for the line lifted out of the family's own paragraphs.
   -------------------------------------------------------------------------- */
.dial-pull.wp-block-quote {
	border: 0;
	border-inline-start: 3px solid var(--wp--preset--color--red);
	padding: 0.35rem 0 0.35rem 1.5rem;
	margin-block: 2.4rem;
	font-style: normal;
}
.dial-pull.wp-block-quote p {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.4rem, 3vw, 2.1rem);
	line-height: 1.12;
	margin: 0;
}
.dial-pull.wp-block-quote cite {
	display: block;
	margin-block-start: 0.75rem;
	font-style: normal;
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--muted-on-light);
}

/* --------------------------------------------------------------------------
   14. PHOTO STRIP  (class: dial-strip on a core Gallery block)
   A full-bleed contact sheet that scrolls sideways. Use it between sections
   to carry photographs that do not need captions or their own gallery.

   Why a Gallery block and not a custom layout: adding a photograph is then
   "select the strip, click Add" in the normal editor. No code, no shortcode,
   and no wrong number of images -- four scrolls, forty scrolls. That matters
   while the family is still sending files in.
   -------------------------------------------------------------------------- */
.dial-strip-band.dial-band { padding-block: 0; overflow: hidden; }
.dial-strip-band .dial-editor-note { margin-block-end: 1rem; }

.dial-strip.wp-block-gallery.has-nested-images {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-block-end: clamp(34px, 5vw, 60px);
}
.dial-strip.wp-block-gallery::-webkit-scrollbar { display: none; }

.dial-strip.wp-block-gallery.has-nested-images figure.wp-block-image {
	flex: 0 0 clamp(180px, 20vw, 268px);
	width: auto;
	margin: 0;
	scroll-snap-align: center;
	height: clamp(200px, 26vw, 330px);
	overflow: hidden;
}
/* every third frame runs wide -- the rhythm is what makes it read as a
   contact sheet rather than a row of thumbnails */
.dial-strip.wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(3n) {
	flex-basis: clamp(250px, 30vw, 410px);
}
.dial-strip.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.dial-strip.wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
	transform: scale(1.04);
}
/* captions are noise in a strip; they belong in the main gallery */
.dial-strip.wp-block-gallery figcaption { display: none; }

@media (max-width: 781px) {
	.dial-strip.wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(3n) {
		flex-basis: clamp(180px, 20vw, 268px);
	}
}

/* --------------------------------------------------------------------------
   15. SCROLL REVEAL  (class: dial-reveal)
   One photograph, full width, that opens out as the visitor scrolls to it.
   Motion is applied only when assets/reveal.js has run and set html.dial-js,
   so with JavaScript blocked the picture is simply there, fully visible.
   Never hide content behind a script that might not load.
   -------------------------------------------------------------------------- */
.dial-reveal.dial-band { padding-block: 0; overflow: hidden; }
.dial-reveal__media { overflow: hidden; margin-block: 0; }
.dial-reveal__media img { width: 100%; height: auto; display: block; }
.dial-reveal__media .dial-slot { min-height: clamp(220px, 32vw, 520px); border-inline: 0; }
.dial-reveal__cap {
	padding-block: clamp(24px, 3.4vw, 38px) clamp(44px, 6.5vw, 78px);
}
.dial-reveal__cap > * { max-width: 58ch; }

html.dial-js .dial-reveal__media {
	clip-path: inset(0 20% 0 20%);
	opacity: 0;
	transform: scale(1.05);
	transition:
		clip-path 1.15s cubic-bezier(0.22, 1, 0.36, 1),
		transform 1.5s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.85s ease;
}
html.dial-js .dial-reveal.is-revealed .dial-reveal__media {
	clip-path: inset(0 0 0 0);
	opacity: 1;
	transform: none;
}
html.dial-js .dial-reveal__cap {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 0.8s 0.28s ease,
		transform 0.8s 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
html.dial-js .dial-reveal.is-revealed .dial-reveal__cap { opacity: 1; transform: none; }

/* Inside the block editor nothing should be hidden -- she has to be able to
   see and select what she is editing. */
.editor-styles-wrapper .dial-reveal__media,
.editor-styles-wrapper .dial-reveal__cap {
	clip-path: none !important;
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	html.dial-js .dial-reveal__media,
	html.dial-js .dial-reveal__cap {
		clip-path: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   16. OPENING PHOTOGRAPH  (class: dial-hero)
   The site opens on him, edge to edge, before a word of copy.
   Use hero-thornton-dial-2000.jpg -- the whole uncropped frame.

   Contain, not cover, and this is not a preference. The crown of his cap sits
   flush against row 0 of the original photograph; there is no headroom at all.
   So a cover-crop takes the top of his head off, and a cover-crop with a
   max-height takes his chin off instead -- and the wider the screen, the more
   it eats. Matting the whole frame on the photograph's own black is the only
   arrangement where every screen size shows all of him. Do not reintroduce
   aspect-ratio + object-fit:cover here.
   -------------------------------------------------------------------------- */
.dial-hero.dial-band { padding-block: 0; background: #060606; }
.dial-hero__media {
	line-height: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: min(74vh, 720px);
}
.dial-hero__media img {
	height: 100%;
	width: 100%;
	object-fit: contain;
	display: block;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
}
/* his shirt is the one bright thing touching the frame edge; without this the
   bottom of the photograph cuts off hard while the sides fade away */
.dial-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, #060606 0, rgba(6, 6, 6, 0) 13%);
}
.dial-hero__media .dial-slot { min-height: clamp(240px, 42vw, 620px); border-inline: 0; }
.dial-hero__credit { padding-block: 11px 14px; }
.dial-hero__credit .dial-credit { text-align: end; color: #8D857A; margin: 0; }

@media (max-width: 760px) {
	/* narrow enough that the frame nearly fills the width anyway: fill it and
	   crop the sides. Nothing vertical is lost. */
	.dial-hero__media { height: auto; display: block; }
	.dial-hero__media::after { background: none; }
	.dial-hero__media img {
		aspect-ratio: 4 / 5;
		object-fit: cover;
		object-position: 46% 50%;
		height: auto;
		-webkit-mask-image: none;
		        mask-image: none;
	}
	.dial-hero__credit .dial-credit { text-align: start; }
}

/* --------------------------------------------------------------------------
   17. PHOTOGRAPHER CREDIT  (class: dial-credit)
   Museum practice, and the thing that keeps the Estate's permissions clean:
   the credit travels with the image rather than living in a footer nobody
   reads. dial-credit--todo is the working flag for "we have this file and do
   not know who shot it" -- delete the paragraph once the name is in.
   -------------------------------------------------------------------------- */
.dial-credit {
	font-size: 0.66rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--muted-on-light);
	margin-block: 0.5rem 0;
}
.has-deep-background-color .dial-credit,
.has-pop-background-color .dial-credit { color: #9C968C; }
.dial-credit--todo { color: var(--wp--preset--color--red); font-weight: 700; }
.has-deep-background-color .dial-credit--todo { color: var(--dial-red-on-dark); }

/* --------------------------------------------------------------------------
   18. FILE LIST  (class: dial-filelist)
   Sits under a gallery and names the exact files that fill it, in order. This
   is the difference between "add some photos" and a task with an end.
   -------------------------------------------------------------------------- */
.dial-filelist.wp-block-list {
	list-style: none;
	margin: 0.5rem 0 1.4rem;
	padding: 0.9rem 1.1rem;
	background: rgba(0, 0, 0, 0.025);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 2px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.74rem;
	line-height: 1.75;
}
.dial-filelist li { margin: 0; word-break: break-word; }
.dial-filelist li::before {
	content: "";
	display: inline-block;
	width: 0.62em;
	height: 0.62em;
	margin-inline-end: 0.6em;
	border: 1.5px solid var(--wp--preset--color--accent-on-light);
	border-radius: 2px;
	vertical-align: 0;
}

/* --------------------------------------------------------------------------
   19. THE FAMILY'S WORDS  (class: dial-family)
   Brandon's paragraphs are the family's contribution to the site, so they
   close the Mr. Dial page and get the room that implies. The memory board
   that used to sit under them was removed: it advertised six empty cards
   waiting on material nobody had collected. An empty section reads as
   neglect; no section reads as finished. Put it back when the memories exist.
   -------------------------------------------------------------------------- */
.dial-family.wp-block-columns {
	gap: clamp(28px, 5vw, 64px);
	align-items: flex-start;
	padding-block: clamp(16px, 3vw, 40px);
}
.dial-family .wp-block-heading { font-size: clamp(1.9rem, 3.9vw, 3.1rem); margin-block-start: 0.6rem; }
.dial-family p { font-size: 1.06rem; line-height: 1.72; }
.dial-family .has-large-font-size {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.45rem, 2.7vw, 2.1rem);
	line-height: 1.24;
	color: var(--wp--preset--color--band-text);
	margin-block-end: 1.6rem;
}
.dial-fw-sign {
	margin-block-start: 2.1rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--muted-on-light);
}
.dial-fw-sign strong {
	display: block;
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
	margin-block-end: 0.3rem;
}

/* --------------------------------------------------------------------------
   20. PHOTOGRAPHS WITH OTHER PEOPLE  (class: dial-people)
   Dial with Coretta Scott King, John Lewis, Andrew Young. Two rules:

   The caption is the content. A photograph of Dial and Coretta Scott King is
   worth nothing to a reader who is not told that is who it is, so these are
   never set as an uncaptioned strip.

   And they are fitted whole, never cropped. A crop on a group photograph can
   remove a person from the historical record, which is not something to do to
   a picture of Coretta Scott King to make a layout tidier.
   -------------------------------------------------------------------------- */
.dial-people.wp-block-columns { gap: clamp(16px, 2.2vw, 28px); align-items: flex-start; }
.dial-people .wp-block-column { min-width: 0; }
.dial-people img {
	width: 100%;
	height: clamp(180px, 17vw, 230px);
	object-fit: contain;
	background: rgba(0, 0, 0, 0.03);
	border-radius: 2px;
}
.dial-people figcaption {
	margin-block-start: 0.7rem;
	font-size: 0.86rem;
	line-height: 1.4;
	font-weight: 600;
}
.dial-people .dial-slot { min-height: clamp(180px, 17vw, 230px); }
@media (max-width: 781px) {
	.dial-people img, .dial-people .dial-slot { height: auto; aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   21. THE MONOGRAPHS  (class: dial-books)
   A publications page that is only a list of titles is the dullest page on
   any artist site. The covers are the reason to look.

   Contained, never cropped -- a cover is a designed object and trimming it to
   fit a grid is vandalism. Bottom-aligned so the four sit on a shelf line
   rather than floating at different heights.
   -------------------------------------------------------------------------- */
.dial-books.wp-block-columns { gap: clamp(18px, 2.4vw, 32px); align-items: flex-start; }
.dial-books .wp-block-column { min-width: 0; }
.dial-books img {
	width: 100%;
	height: clamp(210px, 20vw, 280px);
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.22));
}
.dial-books .dial-slot { min-height: clamp(210px, 20vw, 280px); }
.dial-books p { font-size: 0.78rem; line-height: 1.5; margin-block: 0 0.3rem; }
.dial-books p:first-of-type { margin-block-start: 1rem; }
.dial-books p strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.12rem;
	line-height: 1.18;
}
@media (max-width: 781px) {
	.dial-books img, .dial-books .dial-slot { height: auto; aspect-ratio: 3 / 4; }
}
/* --------------------------------------------------------------------------
   22. CLICK TO ENLARGE
   Brandon asked that a visitor be able to open a work and see the whole of it.
   The overlay is deliberately plain: near-black ground, the picture fitted
   whole (never cropped -- a crop in a lightbox defeats the point of one), and
   the tombstone and photographer credit carried along underneath.
   -------------------------------------------------------------------------- */

img.dial-zoomable { cursor: zoom-in; }
img.dial-zoomable:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

html.dial-lb-open { overflow: hidden; }

.dial-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3vw, 40px);
	background: rgba(6, 6, 6, .94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	cursor: zoom-out;
}
.dial-lightbox.on { display: flex; }

.dial-lightbox .lb-fig {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 100%;
	max-height: 100%;
}

.dial-lightbox img {
	display: block;
	max-width: 100%;
	/* room for the caption underneath, and for the close button above */
	max-height: calc(100vh - 160px);
	width: auto;
	height: auto;
	object-fit: contain;
	cursor: default;
	box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
	animation: dial-lb-in .22s ease-out both;
}
@keyframes dial-lb-in {
	from { opacity: 0; transform: scale(.97); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.dial-lightbox img { animation: none; }
}

.dial-lightbox.loading img { opacity: 0; }

.dial-lightbox figcaption {
	color: #cfc9c1;
	font-size: 13px;
	line-height: 1.55;
	text-align: center;
	max-width: 62ch;
	display: flex;
	flex-direction: column;
	gap: 3px;
	cursor: default;
}
.dial-lightbox .lb-words {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.dial-lightbox .lb-t { color: #f2ede6; font-size: 15px; }
.dial-lightbox .lb-m { color: #b8b1a8; }
.dial-lightbox .lb-c { color: #a09890; font-style: italic; }
.dial-lightbox .lb-count {
	color: #7d766e;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-top: 4px;
}

/* controls ---------------------------------------------------------------- */

.dial-lightbox button {
	position: absolute;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	color: #f2ede6;
	border-radius: 999px;
	cursor: pointer;
	line-height: 1;
	transition: background .15s ease, border-color .15s ease;
}
.dial-lightbox button:hover,
.dial-lightbox button:focus-visible {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .4);
}

.dial-lightbox .lb-x {
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	font-size: 26px;
}
.dial-lightbox .lb-p,
.dial-lightbox .lb-n {
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	font-size: 28px;
	padding-bottom: 4px;
}
.dial-lightbox .lb-p { left: 16px; }
.dial-lightbox .lb-n { right: 16px; }
.dial-lightbox.solo .lb-p,
.dial-lightbox.solo .lb-n { display: none; }

/* On a phone the arrows would sit on top of the picture, so they move to the
   bottom corners and the picture gets the middle of the screen to itself. */
@media (max-width: 700px) {
	.dial-lightbox { padding: 10px; }
	.dial-lightbox img { max-height: calc(100vh - 190px); }
	.dial-lightbox .lb-p,
	.dial-lightbox .lb-n {
		top: auto;
		bottom: 14px;
		transform: none;
		width: 52px;
		height: 52px;
	}
	.dial-lightbox .lb-x { top: 10px; right: 10px; }
	.dial-lightbox figcaption { padding-bottom: 58px; font-size: 12px; }
}

/* --------------------------------------------------------------------------
   23. SIZING THE REAL PHOTOGRAPHS
   Everything above was written while every image position was still a dashed
   box, so the rules describe boxes. Now that the photographs are actually in
   the pages they need rules of their own, and they need to beat two things
   core WordPress does to gallery images by default:

     - it sets  figure.wp-block-image:not(#individual-image) { width: calc(...) }
       which carries ID-level specificity, so nothing short of !important
       overrides it;
     - it sets  object-fit: cover  on gallery images, to make a tidy grid.

   The second one is the serious one. Cover means crop, and cropping a
   photograph of an artwork cuts the artwork. The frame of a Dial assemblage
   is part of the work -- things hang off its edges on purpose. Nothing here
   crops artwork, ever.
   -------------------------------------------------------------------------- */

/* --- the Art rail --------------------------------------------------------- */
/* Bigger than a thumbnail row. These are the works; give them the room. */
.dial-swipe.wp-block-gallery.has-nested-images > figure.wp-block-image {
	flex: 0 0 clamp(260px, 34vw, 470px) !important;
	width: auto !important;
	max-width: none !important;
	align-self: flex-start;
}
.dial-swipe.wp-block-gallery.has-nested-images > figure.wp-block-image img {
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: contain !important;
	aspect-ratio: auto !important;
}
/* Let the rail run off the right edge of the screen rather than stopping at
   the text column. A rail that ends flush with the paragraph above it reads
   as a finished row of three; one that runs off the edge reads as "there is
   more, keep going", which is true. */
.dial-swipe.wp-block-gallery.has-nested-images {
	padding-inline-end: max(24px, calc((100vw - var(--wp--style--global--content-size, 800px)) / 2));
	margin-inline-end: calc(-1 * max(24px, (100vw - var(--wp--style--global--content-size, 800px)) / 2));
	scroll-padding-inline-start: 0;
}
@media (max-width: 781px) {
	.dial-swipe.wp-block-gallery.has-nested-images > figure.wp-block-image {
		flex: 0 0 min(78vw, 420px) !important;
	}
}

/* The tombstone under each work. Core puts gallery captions in a dark
   gradient over the bottom of the picture; on an artwork that covers the work
   and makes the caption unreadable. Put it back underneath, where a museum
   would have it. */
.dial-swipe.wp-block-gallery.has-nested-images > figure.wp-block-image figcaption {
	position: static !important;
	background: none !important;
	padding: 0 !important;
	max-height: none !important;
	overflow: visible !important;
	color: var(--wp--preset--color--muted-on-light) !important;
	text-align: start;
	font-size: 0.8125rem;
	line-height: 1.5;
	margin-block-start: 0.75rem;
}
.has-deep-background-color .dial-swipe figcaption,
.has-band-background-color .dial-swipe figcaption {
	color: var(--wp--preset--color--muted) !important;
}
.dial-swipe figcaption strong {
	display: block;
	font-size: 0.9375rem;
	color: inherit;
	margin-block-end: 0.15rem;
}

/* --- the filmstrips ------------------------------------------------------- */
.dial-strip.wp-block-gallery.has-nested-images figure.wp-block-image {
	flex: 0 0 clamp(240px, 30vw, 420px) !important;
	width: auto !important;
	max-width: none !important;
}
.dial-strip.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
	aspect-ratio: auto !important;
}

/* --- the opening photograph and the scroll-reveal bands ------------------- */
/* These are full-bleed by design; make sure a core image block inside them
   actually fills the band rather than sitting at content width. */
.dial-hero__media .wp-block-image,
.dial-reveal__media .wp-block-image {
	margin: 0;
	width: 100%;
	max-width: none;
}
.dial-hero__media .wp-block-image img,
.dial-reveal__media .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* --- photographs of Dial with other people -------------------------------- */
.dial-people .wp-block-image { margin: 0; }
.dial-people img {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

/* --- the monographs ------------------------------------------------------- */
/* A book cover is an object with edges. Fit it whole and let the column decide
   the width; never crop a cover to a uniform rectangle. */
.dial-books .wp-block-image { margin: 0 0 0.9rem; }
.dial-books img {
	width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: contain;
	object-position: center bottom;
	display: block;
}

/* --- everything else in a band -------------------------------------------- */
/* A stray image inside a band should fill its column and keep its proportions,
   whatever block it happens to be in. */
.dial-band .wp-block-image img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   24. MEASURE, AND WHY EVERYTHING LOOKED SHIFTED
   Two rules were fighting.

   WordPress's constrained layout centres every direct child of a band:
   max-width: <content size>, margin-left: auto, margin-right: auto. That is
   right when the child is as wide as the column. The moment a heading or a
   paragraph is given a reading measure -- and prose needs one, because a line
   1180px long loses the eye on the way back -- those auto margins centre the
   short line inside the wide column. Every heading and paragraph drifts a
   different distance from the left edge, depending on its own width. Nothing
   lines up with anything, which is exactly what "shifted" looks like.

   So the band does the centring, once, with padding, and its children start at
   the left edge of that column and stay there however narrow they are.
   -------------------------------------------------------------------------- */
.dial-band {
	padding-inline: max(clamp(1.25rem, 4vw, 2.25rem), (100% - 1180px) / 2);
}
.dial-band > * {
	margin-inline: 0 !important;
	max-width: 100% !important;
}

/* Reading measure, left-aligned inside the band. The !important is not
   decoration: the rule above deliberately overrides WordPress's per-child
   max-width, and these have to override that in turn for text specifically. */
.dial-band > :is(p, ul, ol, dl, blockquote),
.dial-band :is(p, ul, ol, dl, blockquote) { max-width: 72ch !important; }
.dial-band > :is(h1, h2, h3),
.dial-band :is(h1, h2, h3) { max-width: 24ch !important; }
.dial-band .wp-block-columns :is(p, ul, ol, dl, h1, h2, h3) { max-width: none !important; }
.dial-longform :is(p, h2, h3) { max-width: 68ch !important; }

/* Centred intros stay centred, and centred means centred in the band. */
.dial-band .has-text-align-center,
.dial-band > .has-text-align-center { max-width: none !important; }

/* --------------------------------------------------------------------------
   25. THE OPENING PHOTOGRAPH AND THE REVEAL BANDS, CAPPED
   Without a ceiling a portrait-shaped photograph at full width is taller than
   the screen, so the visitor meets a wall of picture and has to scroll to find
   out there is a site behind it. The preview caps both; so does this.
   -------------------------------------------------------------------------- */
.dial-hero__media {
	height: min(74vh, 720px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.dial-hero__media .wp-block-image,
.dial-hero__media .wp-block-image img,
.dial-hero__media img {
	height: 100%;
	width: 100%;
	object-fit: contain;   /* never crop him */
}
.dial-reveal__media .wp-block-image img,
.dial-reveal__media img {
	max-height: min(78vh, 760px);
	width: 100%;
	object-fit: contain;
	object-position: center;
}
@media (max-width: 760px) {
	.dial-hero__media { height: auto; display: block; }
	.dial-hero__media .wp-block-image,
	.dial-hero__media .wp-block-image img,
	.dial-hero__media img { height: auto; }
	.dial-reveal__media .wp-block-image img,
	.dial-reveal__media img { max-height: none; }
}

/* --------------------------------------------------------------------------
   26. THE ART RAIL, ALIGNED
   It begins where the text begins and runs off the right edge. Starting it at
   the screen edge -- which a negative margin does -- makes the whole page look
   shifted, because nothing else on the page starts there.
   -------------------------------------------------------------------------- */
.dial-swipe.wp-block-gallery.has-nested-images {
	margin-inline: 0 !important;
	padding-inline: 0 !important;
	width: 100%;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   27. THE MONOGRAPHS, BIGGER
   Four covers across a 760px column gives each one 166px, which is a thumbnail
   of a book rather than a book. In a 1180px band they have room to be looked at.
   -------------------------------------------------------------------------- */
.dial-books img {
	max-height: clamp(240px, 26vw, 380px);
}

/* --------------------------------------------------------------------------
   28. THE BANDS THAT ARE MEANT TO REACH THE EDGES
   Section 24 gives every band a centred column, which is right for reading and
   wrong for the three things that are supposed to run edge to edge: the
   opening photograph, the scroll-reveal bands, and the filmstrips. Those get
   their padding back to zero, and the words inside a filmstrip keep the
   column so the kicker still lines up with the rest of the page.
   -------------------------------------------------------------------------- */
.dial-hero.dial-band,
.dial-reveal.dial-band,
.dial-strip-band.dial-band {
	padding-inline: 0;
}
.dial-hero.dial-band > *,
.dial-reveal.dial-band > *,
.dial-strip-band.dial-band > * {
	max-width: none !important;
}

/* the credit under the opening photograph, and the kicker over a filmstrip,
   still belong in the column */
.dial-hero__credit,
.dial-strip-band > :not(.wp-block-gallery):not(.dial-reveal__media) {
	padding-inline: max(clamp(1.25rem, 4vw, 2.25rem), (100% - 1180px) / 2);
}
.dial-reveal__cap {
	padding-inline: max(clamp(1.25rem, 4vw, 2.25rem), (100% - 1180px) / 2);
}

/* --------------------------------------------------------------------------
   29. THE HEADER WORDMARK
   The preview opens with a wordmark, not a site title: "Thornton Dial" set in
   the display face, "OFFICIAL ESTATE SITE" underneath it in small letterspaced
   caps, and the initials TD in the accent colour alongside. WordPress was
   printing the plain site title instead, which is most of why the header
   looked wrong.
   -------------------------------------------------------------------------- */
.dial-header {
	border-block-end: 1px solid var(--wp--preset--color--hairline);
	background: var(--wp--preset--color--base);
	position: sticky;
	top: 0;
	z-index: 50;
}
.dial-header__inner {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.25rem);
	padding-block: 0.9rem;
	gap: 1.5rem;
}
.dial-brand { gap: 0.6rem; align-items: baseline; }
.dial-brand__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.3125rem;
	line-height: 1.05;
	letter-spacing: -0.005em;
}
.dial-brand__name a { color: inherit; text-decoration: none; }
.dial-brand__sub {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.594rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-block-start: 2px;
}
.dial-brand__mark {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--accent);
}
.dial-nav .wp-block-navigation-item__content {
	font-size: 0.9375rem;
	text-decoration: none;
	color: inherit;
}
.dial-nav .wp-block-navigation-item__content:hover,
.dial-nav .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-on-light);
}
@media (max-width: 600px) {
	.dial-header__inner { padding-block: 0.7rem; }
	.dial-brand__name { font-size: 1.125rem; }
	.dial-brand__mark { display: none; }
}

/* --------------------------------------------------------------------------
   30. THE ENQUIRY PANEL
   Styled so that whatever a form plugin eventually outputs already looks like
   the site: the selectors cover the estate's own markup and the input, select
   and textarea elements any plugin will produce inside the panel.
   -------------------------------------------------------------------------- */
.dial-contact-panel {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}
.dial-form { display: grid; gap: 1rem; margin-block-start: 1rem; }
.dial-form label {
	display: grid;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-on-light);
}
/* the honeypot: present for bots, gone for people and for screen readers */
.dial-form__hp {
	position: absolute !important;
	inline-size: 1px; block-size: 1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}
.dial-form__ok,
.dial-form__err {
	margin: 0;
	padding: 0.75rem 0.9rem;
	font-size: 0.875rem;
	border-inline-start: 3px solid;
}
.dial-form__ok  { border-color: #3D6B45; background: rgba(61, 107, 69, .08); }
.dial-form__err { border-color: var(--wp--preset--color--red);
                  background: rgba(164, 22, 26, .07); }
.dial-form__fine {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted-on-light);
}
.dial-form__note {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted-on-light);
	margin: 0;
}
.dial-contact-panel :is(input[type="text"], input[type="email"], input[type="tel"],
	input[type="url"], select, textarea),
.dial-form :is(input, select, textarea) {
	inline-size: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	transition: border-color .16s ease;
}
.dial-contact-panel :is(input, select, textarea):focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--accent-on-light);
	box-shadow: 0 0 0 3px rgba(166, 61, 23, .12);
}
.dial-contact-panel :is(input, textarea):disabled {
	opacity: .55;
	cursor: not-allowed;
}
.dial-form textarea { resize: vertical; min-block-size: 8rem; }

.dial-form__send,
.dial-contact-panel :is(button, input[type="submit"]) {
	justify-self: start;
	display: inline-block;
	padding: 0.8rem 1.6rem;
	background: var(--wp--preset--color--accent-on-light);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .16s ease;
}
.dial-form__send:hover,
.dial-contact-panel :is(button, input[type="submit"]):hover { opacity: .88; }

/* --------------------------------------------------------------------------
   31. PUBLIC COLLECTIONS
   Twenty-two institutions in one column is a wall. Two or three columns, each
   name a link out, reads as a list somebody can actually scan.
   -------------------------------------------------------------------------- */
.dial-collections {
	columns: 2;
	column-gap: clamp(1.5rem, 4vw, 3rem);
	max-width: none !important;
	padding-inline-start: 1.1rem;
}
.dial-collections li { break-inside: avoid; margin-block-end: 0.5rem; }
.dial-collections a {
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid var(--wp--preset--color--hairline);
	transition: border-color .16s ease, color .16s ease;
}
.dial-collections a:hover,
.dial-collections a:focus-visible {
	color: var(--wp--preset--color--accent-on-light);
	border-block-end-color: currentColor;
}
@media (max-width: 700px) { .dial-collections { columns: 1; } }

/* --------------------------------------------------------------------------
   32. INSTALLATION VIEWS, CENTRED
   -------------------------------------------------------------------------- */
.dial-reveal .dial-reveal__cap { text-align: start; }
.dial-reveal--center .dial-reveal__cap { text-align: center; }
.dial-reveal--center .dial-reveal__cap > * { margin-inline: auto; }

/* --------------------------------------------------------------------------
   33. THE BIG WORKS, BIGGER
   Crossing Waters is ninety-seven by a hundred and sixty-eight inches. At a
   760px cap it read as a postcard. Reveal bands get the height to carry a work
   of that scale, and the picture opens outward as it comes into view.
   -------------------------------------------------------------------------- */
.dial-reveal__media .wp-block-image img,
.dial-reveal__media img {
	max-height: min(86vh, 880px);
}
html.dial-js .dial-reveal__media { transform: scale(1.07); }
html.dial-js .dial-reveal.is-revealed .dial-reveal__media { transform: none; }

/* --------------------------------------------------------------------------
   34. THE FILM
   -------------------------------------------------------------------------- */
.dial-film { margin-block: 1.25rem 0.75rem; }
.dial-film .wp-block-embed__wrapper { position: relative; }
.dial-film iframe { inline-size: 100%; aspect-ratio: 16 / 9; block-size: auto; border: 0; }

/* --------------------------------------------------------------------------
   35. THE CATALOGUES BESIDE THE SOLO SHOWS
   Nested columns inside a column collapse to nothing without a floor; two
   covers across a 44% column should be about 230px each, not 104px.
   -------------------------------------------------------------------------- */
.dial-books--tight.wp-block-columns {
	flex-wrap: wrap !important;
	gap: clamp(1rem, 2vw, 1.75rem);
}
.dial-books--tight > .wp-block-column {
	flex: 1 1 clamp(180px, 45%, 260px) !important;
	min-width: 0;
}
.dial-books--tight img { max-height: clamp(200px, 22vw, 280px); }
.dial-books--tight p { font-size: 0.75rem !important; line-height: 1.45; }
@media (max-width: 900px) {
	.dial-books--tight > .wp-block-column { flex: 1 1 45% !important; }
}

/* --------------------------------------------------------------------------
   36. PRESS LINKS
   -------------------------------------------------------------------------- */
.dial-readlink {
	display: inline-block;
	margin-block-start: 0.15rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--accent-on-light);
}
.dial-readlink:hover, .dial-readlink:focus-visible { text-decoration: underline; }

/* --------------------------------------------------------------------------
   37. THE OPENING PHOTOGRAPH -- THE TIGER-EYE CROP
   Brandon's instruction, from the meeting: full width, cut close, the page
   beginning just under his eyes.

   This deliberately overrides the rule kept everywhere else on the site, which
   is that a photograph is fitted whole and never cropped. That rule exists to
   protect the artwork -- a Dial assemblage has things hanging off its edges on
   purpose. A portrait is a different thing, and a crop chosen by the family is
   an editorial decision, not an accident. It is the only cropped image on the
   site.

   Measured off the file rather than judged by eye: the lit part of the frame
   begins 32% down and his eyes sit at about 38%. The band shows 30% to 44%,
   which is brow-line to just under the eyes -- the cap is mostly out of frame
   and the page begins immediately beneath his gaze. The first attempt cut
   through the middle of the cap and showed the whole face, which is a
   portrait, not the view Brandon asked for.

   The band is sized by RATIO, not by viewport height, and that distinction
   matters. A height in vh means the slice of the photograph on show changes
   with the shape of the window -- the wider the screen, the taller the square
   image scales, so a fixed height shows a smaller percentage of it and the
   crop drifts. A constant ratio shows the same 14% of the frame at every
   width, so it lands on his eyes on a laptop, an ultrawide and a half-height
   window alike.
   -------------------------------------------------------------------------- */
.dial-hero__media {
	/* inline-size must be pinned. With aspect-ratio and only a min-height set,
	   the browser is free to solve the ratio by widening instead of shortening
	   -- it made the band 1429px wide inside a 768px page and pushed the whole
	   document sideways. Fixing the width means only the height is derived. */
	inline-size: 100%;
	aspect-ratio: 50 / 7;
	block-size: auto;
	min-block-size: 200px;
	max-block-size: 420px;
	display: block;
	overflow: hidden;
	position: relative;
}
.dial-hero__media .wp-block-image,
.dial-hero__media .wp-block-image img,
.dial-hero__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	/* 35% of the overflow puts the top edge at 30% of the frame */
	object-position: 50% 35%;
}
/* the page rises into the photograph rather than meeting a hard edge */
.dial-hero__media::after {
	background: linear-gradient(to top,
		var(--wp--preset--color--deep) 0,
		rgba(26, 23, 20, 0) 22%);
}

@media (max-width: 760px) {
	/* On a narrow screen the square frame fills the width, so shortening the
	   band alone does not crop tighter -- it just shows a shorter slice of a
	   picture that is already zoomed out, and you get his whole head and
	   shoulders instead of the eyes. The picture is scaled past the width of
	   the screen and re-centred, which is what actually crops in. */
	.dial-hero__media {
		inline-size: 100%;
		aspect-ratio: 5 / 2;
		block-size: auto;
		min-block-size: 150px;
		max-block-size: none;
	}
	.dial-hero__media .wp-block-image img,
	.dial-hero__media img {
		/* His face is not in the middle of the frame -- it sits between 18%
		   and 51% across, centred on 34%. Centring the picture therefore does
		   not centre him; the offset below is measured from the file so the
		   crop lands on his face rather than on the dark side of the frame. */
		inline-size: 170%;
		margin-inline-start: -8%;
		object-position: 50% 30%;
	}
}

/* --------------------------------------------------------------------------
   38. TWO VOICES IN THE FAMILY'S WORDS
   Brandon's piece and Chanessa's sit in consecutive bands. Two things needed
   fixing once there was more than one: the heading in the left column was
   centring itself against a tall column of prose instead of starting level
   with the first line, and two full band paddings back to back left a gap
   that read as a missing section rather than a change of speaker.
   -------------------------------------------------------------------------- */
.dial-family > .wp-block-column { align-self: flex-start; }

.dial-band:has(> .dial-family) + .dial-band:has(> .dial-family) {
	padding-block-start: 0;
}
.dial-band:has(> .dial-family) + .dial-band:has(> .dial-family) .dial-family {
	border-block-start: 1px solid var(--wp--preset--color--hairline);
	padding-block-start: clamp(2.5rem, 5vw, 4rem);
}


/* --------------------------------------------------------------------------
   39. WORK OF THE MONTH
   The title is the one piece of type in that panel that should carry the
   accent, so the eye lands on the work rather than on the label above it.
   -------------------------------------------------------------------------- */
.dial-wotm-title {
	color: var(--wp--preset--color--accent) !important;
}
.has-band-background-color .dial-wotm-title,
.dial-band:not(.has-deep-background-color) .dial-wotm-title {
	color: var(--wp--preset--color--accent-on-light) !important;
}
.has-deep-background-color .dial-wotm-title {
	color: var(--wp--preset--color--accent) !important;
}


/* --------------------------------------------------------------------------
   40. THE FOOTER
   The parent theme's footer was Twenty Twenty-Five's: a row of placeholder
   links (Blog, About, FAQs, Authors, Events, Shop, Patterns, Themes, all
   pointing at #) and a "Designed with WordPress" credit. A child
   parts/footer.html replaces it outright -- WordPress resolves template parts
   from the child first, so nothing of the parent's footer survives on any
   template, not just the page template.

   What stands in its place is the same wordmark the header opens with, the
   site's own menu, how to reach the Estate, and the credit line. Three
   columns on a wide screen, stacked on a phone, over the deep ground so the
   page has a floor rather than trailing off into the background colour.
   -------------------------------------------------------------------------- */
.dial-footer {
	background: var(--wp--preset--color--deep);
	color: var(--wp--preset--color--base);
	margin-block-start: clamp(3rem, 7vw, 6rem);
	padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.25rem);
	padding-inline: max(clamp(1.25rem, 4vw, 2.25rem), (100% - 1180px) / 2);
}

/* the three columns.
   flex-wrap is set here rather than left to the block's own layout: whether
   a flex group wraps depends on what the parent theme and the core layout
   stylesheet agree on, and on a phone these three have to stack. Declaring it
   means the footer stacks because the footer says so. */
.dial-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: flex-start;
}
.dial-footer__brand { flex: 1 1 280px; min-width: 0; }
.dial-footer__menu  { flex: 0 1 200px; min-width: 0; }
.dial-footer__reach { flex: 0 1 320px; min-width: 0; }

/* the wordmark, reversed out of the dark ground */
.dial-footer .dial-brand { gap: 0.6rem; align-items: baseline; }
.dial-footer .dial-brand__name { font-size: 1.5rem; color: var(--wp--preset--color--base); }
.dial-footer .dial-brand__name a { color: inherit; text-decoration: none; }
.dial-footer .dial-brand__sub { color: rgba(247, 244, 239, 0.62); }
.dial-footer .dial-brand__mark { color: var(--wp--preset--color--accent); }

.dial-footer__dates {
	margin-block: 1rem 0;
	font-size: 0.875rem;
	color: rgba(247, 244, 239, 0.62);
}
.dial-footer__about {
	margin-block: 0.75rem 0;
	font-size: 0.875rem;
	line-height: 1.65;
	color: rgba(247, 244, 239, 0.72);
	max-width: 38ch;
}

/* the small caps label over each column */
.dial-footer__label {
	margin: 0 0 0.9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* the menu, set as a list rather than the header's horizontal row */
.dial-footer__nav.wp-block-navigation {
	--navigation-layout-justification-setting: flex-start;
	font-size: 0.9375rem;
}
.dial-footer__nav .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	gap: 0.55rem 0;
	align-items: flex-start;
	list-style: none;
	margin: 0;
	padding-inline-start: 0;
}
.dial-footer__nav .wp-block-navigation-item__content {
	color: rgba(247, 244, 239, 0.82);
	text-decoration: none;
	border-block-end: 1px solid transparent;
	padding-block-end: 1px;
}
.dial-footer__nav .wp-block-navigation-item__content:hover,
.dial-footer__nav .wp-block-navigation-item__content:focus-visible,
.dial-footer__nav .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
	border-block-end-color: var(--wp--preset--color--accent);
}

.dial-footer__reach p {
	margin-block: 0 0.5rem;
	font-size: 0.9375rem;
	color: rgba(247, 244, 239, 0.82);
	max-width: 34ch;
}
/* the address is one long unbreakable token; on a 320px phone it has to be
   allowed to break or it runs off the side of the page */
.dial-footer__reach a { overflow-wrap: anywhere; }
.dial-footer a:not(.dial-brand__name a):not(.wp-block-navigation-item__content) {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-underline-offset: 3px;
}
.dial-footer a:hover { text-decoration-color: var(--wp--preset--color--base); }

/* the rule and the two fine-print lines under it */
.dial-footer__base {
	margin-block-start: clamp(2.25rem, 5vw, 3.5rem);
	padding-block-start: clamp(1.1rem, 2.5vw, 1.6rem);
	border-block-start: 1px solid rgba(247, 244, 239, 0.16);
	gap: 1rem clamp(1.5rem, 4vw, 3rem);
	align-items: baseline;
}
.dial-footer__legal {
	flex: 1 1 460px;
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.6;
	color: rgba(247, 244, 239, 0.52);
	max-width: 78ch;
}
.dial-footer__credit {
	flex: 0 1 auto;
	margin: 0;
	margin-inline-start: auto;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: rgba(247, 244, 239, 0.62);
	white-space: nowrap;
}
.dial-footer__credit a { color: inherit; }

@media (max-width: 760px) {
	.dial-footer__inner { gap: 2.25rem; }
	.dial-footer__brand,
	.dial-footer__menu,
	.dial-footer__reach { flex: 1 1 100%; }
	.dial-footer__legal { flex: 1 1 100%; }
	.dial-footer__credit { white-space: normal; margin-inline-start: 0; }
}

/* Nothing of the parent footer should be able to come back in behind this:
   Twenty Twenty-Five styles its credit line by class, and if the part is ever
   re-inserted by hand it would otherwise print "Designed with WordPress". */
.dial-footer .wp-block-site-title,
.dial-footer .wp-block-site-tagline { display: none; }


/* --------------------------------------------------------------------------
   41. THE BOOKS WHOSE COVERS HAVEN'T ARRIVED
   The bibliography now runs to eight titles and four of them have no cover
   photograph yet. A missing image is the one thing on a page like this that
   reads as an unfinished website, so those four get a spine instead: the
   title set on the cloth colour at the same 3:4 a real cover occupies, so the
   two rows stay level. Drop the matching .jpg into the media library and the
   photograph replaces it without any other change.
   -------------------------------------------------------------------------- */
.dial-book-spine {
	aspect-ratio: 3 / 4;
	max-height: clamp(240px, 26vw, 380px);
	display: flex;
	align-items: flex-end;
	margin: 0 auto 0.9rem;
	padding: 1rem 0.9rem;
	background: var(--wp--preset--color--deep);
	border: 1px solid var(--wp--preset--color--hairline);
	box-shadow: inset 4px 0 0 0 var(--wp--preset--color--accent);
}
.dial-book-spine span {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(0.8rem, 1.1vw, 0.95rem);
	line-height: 1.25;
	color: var(--wp--preset--color--base);
	text-wrap: balance;
}
.dial-books--tight .dial-book-spine { max-height: clamp(200px, 22vw, 280px); }

/* two rows of four now, so the second row needs the same air above it that
   sits between the covers within a row */
.dial-books.wp-block-columns + .dial-books.wp-block-columns {
	margin-block-start: clamp(1.75rem, 3vw, 2.75rem);
}
.dial-books--tight.wp-block-columns + .dial-books--tight.wp-block-columns {
	margin-block-start: clamp(1.25rem, 2.2vw, 1.75rem);
}


/* --------------------------------------------------------------------------
   42. ONE WORK, GIVEN ROOM  (class: dial-work)
   "In Detail" on the Art page was a filmstrip of three works, and two of the
   three photographs were never uploaded -- so it rendered as a single picture
   under a heading that explained nothing, with no caption and nothing to read.
   It is now a split: the photograph on the left with its tombstone under it,
   the writing on the right. Museum order -- look, find out what it is, then
   read across.
   -------------------------------------------------------------------------- */
.dial-work.wp-block-columns {
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: flex-start;
}
.dial-work > .wp-block-column { min-width: 0; align-self: flex-start; }

/* the photograph. Never cropped: contain, and a ceiling rather than a fixed
   height, so a wide work and a tall work each sit inside the same envelope. */
.dial-work .wp-block-image.dial-work__art {
	margin: 0;
	padding: clamp(0.75rem, 1.6vw, 1.5rem);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline);
}
.dial-work .wp-block-image.dial-work__art img {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(70vh, 620px);
	object-fit: contain;
}

/* the tombstone, under the work where a label belongs */
.dial-work .wp-block-image.dial-work__art figcaption {
	margin-block: clamp(0.9rem, 1.8vw, 1.25rem) 0;
	padding-block-start: 0.9rem;
	border-block-start: 1px solid var(--wp--preset--color--hairline);
	font-size: 0.8125rem;
	line-height: 1.6;
	text-align: left;
	color: var(--wp--preset--color--muted-on-light);
}
.dial-work .wp-block-image.dial-work__art figcaption strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	margin-block-end: 0.3rem;
	color: var(--wp--preset--color--band-text);
}
.dial-work .dial-credit { margin-block-start: 0.7rem; }

/* the writing. The kicker carries the dimensions, so the reader has the scale
   before the first sentence rather than after the last. */
.dial-work .wp-block-column:last-child > :first-child {
	margin-block-start: 0;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.6875rem;
	font-weight: 600;
}
.dial-work h2 { margin-block: 0.5rem 1rem; }
.dial-work .wp-block-column:last-child p { max-width: 58ch; }

@media (max-width: 900px) {
	.dial-work.wp-block-columns { gap: 1.75rem; }
	.dial-work > .wp-block-column { flex-basis: 100% !important; }
	.dial-work .wp-block-image.dial-work__art img { max-height: 60vh; }
}


/* --------------------------------------------------------------------------
   43. TOP-ALIGNED COLUMNS ACTUALLY ALIGNING TO THE TOP
   The Columns block writes its vertical alignment twice: once on the row
   (are-vertically-aligned-top) and once on each column
   (is-vertically-aligned-center, the per-column default). align-self on the
   child beats align-items on the parent, so a row asking for top alignment
   was still centring its columns -- invisible while two columns were roughly
   the same height, and glaring on Exhibitions once the catalogue column grew
   to eight books: "Solo Exhibitions" sank almost 700px down the page to find
   the middle of the column beside it.

   Where the row says top, the row wins.
   -------------------------------------------------------------------------- */
.wp-block-columns.are-vertically-aligned-top > .wp-block-column {
	align-self: flex-start;
}