/* ==================================================================== *
 * Patina — the catalogue spread
 *
 * The whole stylesheet is organised around one decision: this is a printed
 * sale catalogue, not a website with pictures on it. That means
 *
 *   - a MARGIN COLUMN. Lot numbers, plate numbers and section numerals sit
 *     out in the gutter the way they do on a catalogue page. Almost every
 *     block on this site is a two-column grid whose first column is that
 *     margin, which is where the layout gets its asymmetry from — not from
 *     decorative offsets.
 *   - HAIRLINES, not cards. Structure comes from rules and whitespace. There
 *     is no box-shadow anywhere in this file, and nothing is a rounded card.
 *   - LEDGER ALIGNMENT. Estimates are figures, so they are right-aligned and
 *     tabular, the way a price list sets them.
 *
 * Colour is warm rag paper and printer's ink. Verdigris — the oxide that
 * proves a bronze has age, and the theme's namesake — is the single accent.
 * ==================================================================== */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */
:root {
	/* Surface: warm rag paper, not white. */
	--pat-paper:       #f4f0e8;
	--pat-paper-2:     #ece6da;
	--pat-paper-3:     #e2dacb;
	--pat-plate-mat:   #ddd5c4;

	/* Ink: a warm near-black, as printed on cotton stock. */
	--pat-ink:         #16130f;
	--pat-ink-soft:    #4c453b;
	--pat-ink-faint:   #8a8072;

	--pat-rule:        rgb( 22 19 15 / 15% );
	--pat-rule-strong: rgb( 22 19 15 / 34% );

	/* The one accent, plus two ceremonial colours used sparingly. */
	--pat-verdigris:   #41645b;
	--pat-verdigris-2: #5b8479;
	--pat-gold:        #9a7b3f;
	--pat-vermilion:   #a8412a;

	/* Type: one old-style display, one text face, one data face. */
	--pat-ff-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
	--pat-ff-text:    'Newsreader', Georgia, 'Times New Roman', serif;
	--pat-ff-data:    'Archivo', 'Helvetica Neue', Arial, sans-serif;

	/* One base, one ratio (1.3). Cormorant runs small, so display steps are
	   deliberately generous rather than following the ratio blindly. */
	--pat-t-xs:  0.72rem;
	--pat-t-s:   0.85rem;
	--pat-t-m:   1.0rem;
	--pat-t-l:   1.22rem;
	--pat-t-xl:  1.62rem;
	--pat-t-2xl: 2.45rem;
	--pat-t-3xl: 3.9rem;
	--pat-t-4xl: clamp( 3.4rem, 9vw, 7.2rem );

	/* 4px base. */
	--pat-sp-1: 0.25rem;
	--pat-sp-2: 0.5rem;
	--pat-sp-3: 1rem;
	--pat-sp-4: 1.5rem;
	--pat-sp-5: 2.5rem;
	--pat-sp-6: 4rem;
	--pat-sp-7: 6rem;
	--pat-sp-8: 9rem;

	--pat-measure: 68ch;

	/* The margin column the whole catalogue hangs off. */
	--pat-margin-col: 8.5rem;
	--pat-gutter:     2.5rem;
	--pat-page:       min( 1280px, 100% - 2 * var( --pat-sp-4 ) );
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media ( prefers-reduced-motion: reduce ) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var( --pat-paper );
	color: var( --pat-ink );
	font-family: var( --pat-ff-text );
	font-size: var( --pat-t-m );
	line-height: 1.62;
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* A very faint laid-paper tooth. Two hairline gradients, no image request —
   it reads as stock rather than as a texture overlay. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.5;
	background-image:
		repeating-linear-gradient( 90deg, rgb( 22 19 15 / 2.2% ) 0 1px, transparent 1px 3px ),
		repeating-linear-gradient( 0deg, rgb( 22 19 15 / 1.4% ) 0 1px, transparent 1px 7px );
}
.site { position: relative; z-index: 1; }

h1, h2, h3, h4 {
	font-family: var( --pat-ff-display );
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.012em;
	margin: 0;
	text-wrap: balance;
}
h1 { font-size: var( --pat-t-3xl ); }
h2 { font-size: var( --pat-t-2xl ); }
h3 { font-size: var( --pat-t-xl ); }

p { margin: 0 0 1em; }
a { color: inherit; }
/* `height: auto` is not optional here. Every plate carries explicit width and
   height attributes (they prevent layout shift), and without this rule the
   box keeps the attribute height while max-width shrinks the width — so an
   `object-fit: contain` image letterboxes itself inside a far too tall box
   and the mat appears to stretch. */
img, svg, canvas, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }

::selection { background: var( --pat-verdigris ); color: var( --pat-paper ); }

.skip-link {
	position: absolute; left: 1rem; top: -60px;
	background: var( --pat-ink ); color: var( --pat-paper );
	padding: 0.75rem 1.25rem; z-index: 1000; transition: top 160ms ease;
	font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs );
	text-transform: uppercase; letter-spacing: 0.1em;
}
.skip-link:focus { top: 1rem; }

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

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

.muted { color: var( --pat-ink-faint ); }
.prose { max-width: var( --pat-measure ); }
.prose a { color: var( --pat-verdigris ); text-underline-offset: 3px; }

/* ------------------------------------------------------------------ *
 * 3. The page & the margin column
 *
 * `.spread` is the archetype. Column 1 is the catalogue margin (lot number,
 * plate number, section numeral); column 2 is the text block. On narrow
 * screens the margin folds to a run-in label rather than vanishing, so the
 * numbering survives — a catalogue without lot numbers is not a catalogue.
 * ------------------------------------------------------------------ */
.page-wrap { width: var( --pat-page ); margin-inline: auto; }

.spread {
	display: grid;
	grid-template-columns: var( --pat-margin-col ) minmax( 0, 1fr );
	gap: 0 var( --pat-gutter );
}
.spread > .margin-col {
	font-family: var( --pat-ff-data );
	font-size: var( --pat-t-xs );
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var( --pat-ink-faint );
	padding-top: 0.55em;
}
@media ( max-width: 860px ) {
	.spread { grid-template-columns: 1fr; gap: var( --pat-sp-2 ); }
	.spread > .margin-col { padding-top: 0; }
}

/* A section numeral, set large and pale in the margin — the catalogue's
   running head. Distinct from every "• EYEBROW" kicker in the catalogue. */
.section-numeral {
	font-family: var( --pat-ff-display );
	font-size: var( --pat-t-2xl );
	line-height: 1;
	color: var( --pat-rule-strong );
	font-variant-numeric: lining-nums;
	display: block;
	margin-bottom: var( --pat-sp-2 );
}

.section {
	padding-block: var( --pat-sp-7 );
	border-top: 1px solid var( --pat-rule );
}
.section--tight { padding-block: var( --pat-sp-6 ); }
.section--open  { border-top: 0; }
.section--sunk  { background: var( --pat-paper-2 ); }

.section-head { margin-bottom: var( --pat-sp-5 ); }
.section-head h2 { max-width: 22ch; }
.section-head .lede {
	font-size: var( --pat-t-l );
	color: var( --pat-ink-soft );
	max-width: 52ch;
	margin-top: var( --pat-sp-3 );
}

/* ------------------------------------------------------------------ *
 * 4. Data type — the specification voice
 * ------------------------------------------------------------------ */
.label {
	font-family: var( --pat-ff-data );
	font-size: var( --pat-t-xs );
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var( --pat-ink-faint );
}
.figure {
	font-family: var( --pat-ff-data );
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------ *
 * 5. Header — a running head, not a nav bar
 * ------------------------------------------------------------------ */
.site-header {
	position: sticky; top: 0; z-index: 90;
	background: color-mix( in srgb, var( --pat-paper ) 92%, transparent );
	backdrop-filter: blur( 10px );
	border-bottom: 1px solid var( --pat-rule );
}
.site-header .bar {
	width: var( --pat-page ); margin-inline: auto;
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var( --pat-sp-4 );
	padding-block: var( --pat-sp-3 );
}
.brand {
	font-family: var( --pat-ff-display );
	font-size: var( --pat-t-xl );
	letter-spacing: 0.02em;
	text-decoration: none;
	display: inline-flex; align-items: baseline; gap: 0.6rem;
	white-space: nowrap;
}
.brand .brand-mark { align-self: center; }
.brand .brand-sub {
	font-family: var( --pat-ff-data );
	font-size: var( --pat-t-xs );
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var( --pat-ink-faint );
}
@media ( max-width: 1080px ) { .brand .brand-sub { display: none; } }

.nav ul, .nav .nav-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: var( --pat-sp-4 ); align-items: baseline;
}
.nav a {
	font-family: var( --pat-ff-data );
	font-size: var( --pat-t-xs );
	text-transform: uppercase;
	letter-spacing: 0.13em;
	text-decoration: none;
	color: var( --pat-ink-soft );
	padding-block: 0.35em;
	border-bottom: 1px solid transparent;
	transition: color 180ms ease, border-color 180ms ease;
}
.nav a:hover, .nav .current-menu-item > a {
	color: var( --pat-ink );
	border-bottom-color: var( --pat-verdigris );
}

.menu-toggle {
	display: none; background: none; border: 1px solid var( --pat-rule-strong );
	padding: 0.5em 0.85em; cursor: pointer;
	font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs );
	text-transform: uppercase; letter-spacing: 0.12em;
}

@media ( max-width: 960px ) {
	.menu-toggle { display: block; }
	/* Height, not `bottom: 0` — backdrop-filter on the header establishes a
	   containing block for fixed descendants exactly like `filter` does, so a
	   bottom-anchored panel resolves against the header's own box and
	   collapses to a sliver. This bug has shipped before in this catalogue. */
	.nav {
		position: fixed; inset-inline: 0; top: 61px;
		height: calc( 100vh - 61px ); height: calc( 100dvh - 61px );
		background: var( --pat-paper );
		border-top: 1px solid var( --pat-rule );
		padding: var( --pat-sp-5 ) var( --pat-sp-4 );
		transform: translateX( -100% );
		transition: transform 280ms cubic-bezier( .2,.8,.2,1 );
		overflow-y: auto;
	}
	.nav.is-open { transform: translateX( 0 ); }
	.nav ul, .nav .nav-list { flex-direction: column; align-items: flex-start; gap: var( --pat-sp-3 ); }
	.nav a { font-family: var( --pat-ff-display ); font-size: var( --pat-t-xl ); text-transform: none; letter-spacing: 0; }
	html, body { overflow-x: hidden; }
}

/* ------------------------------------------------------------------ *
 * 6. Buttons — set as catalogue rules, never as pills
 * ------------------------------------------------------------------ */
.btn {
	display: inline-block;
	font-family: var( --pat-ff-data );
	font-size: var( --pat-t-xs );
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-decoration: none;
	padding: 0.95em 1.6em;
	border: 1px solid var( --pat-ink );
	background: transparent;
	color: var( --pat-ink );
	cursor: pointer;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn:hover { background: var( --pat-ink ); color: var( --pat-paper ); }
.btn--solid { background: var( --pat-ink ); color: var( --pat-paper ); }
.btn--solid:hover { background: var( --pat-verdigris ); border-color: var( --pat-verdigris ); }
.btn--quiet { border-color: var( --pat-rule-strong ); color: var( --pat-ink-soft ); }
.btn--quiet:hover { border-color: var( --pat-ink ); background: transparent; color: var( --pat-ink ); }
.btn[disabled] { opacity: 0.45; cursor: default; }

/* ------------------------------------------------------------------ *
 * 7. HERO — the frontispiece
 *
 * A catalogue opens on a frontispiece: one plate, the sale it belongs to,
 * and the dates. Not a slogan over a background image.
 * ------------------------------------------------------------------ */
.frontis {
	display: grid;
	grid-template-columns: minmax( 0, 1.05fr ) minmax( 0, 0.95fr );
	gap: var( --pat-sp-6 );
	align-items: center;
	padding-block: var( --pat-sp-7 ) var( --pat-sp-6 );
}
@media ( max-width: 1020px ) {
	.frontis { grid-template-columns: 1fr; gap: var( --pat-sp-5 ); padding-block: var( --pat-sp-5 ); }
}

.frontis-title {
	font-size: var( --pat-t-4xl );
	line-height: 0.94;
	letter-spacing: -0.022em;
	font-weight: 300;
}
.frontis-title em {
	font-style: italic;
	color: var( --pat-verdigris );
}
.frontis-meta {
	margin-top: var( --pat-sp-5 );
	border-top: 1px solid var( --pat-rule );
	padding-top: var( --pat-sp-3 );
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --pat-sp-3 );
}
.frontis-meta > div { display: flex; flex-direction: column; gap: 0.25em; }
.frontis-meta .v {
	font-family: var( --pat-ff-display );
	font-size: var( --pat-t-l );
}
.frontis-cta { display: flex; gap: var( --pat-sp-3 ); flex-wrap: wrap; margin-top: var( --pat-sp-5 ); }

/* ------------------------------------------------------------------ *
 * 8. The plate — how a work is presented
 *
 * A plate is matted and hinged like a real one: a mat board, a hairline, and
 * a caption set below in the catalogue's data voice.
 * ------------------------------------------------------------------ */
.plate {
	background: var( --pat-plate-mat );
	padding: clamp( 1.2rem, 3.5vw, 3rem );
	display: flex; align-items: center; justify-content: center;
	position: relative;
	border: 1px solid var( --pat-rule );
}
.plate img { max-height: 68vh; width: auto; }
.plate--tall img { max-height: 74vh; }
/* The anchor around a plate must be a block: left inline it establishes a
   line box, which adds the descender gap under the mat. */
.plate-link { display: block; text-decoration: none; }

.plate-caption {
	margin-top: var( --pat-sp-3 );
	font-size: var( --pat-t-s );
	color: var( --pat-ink-soft );
	display: flex; justify-content: space-between; gap: var( --pat-sp-3 );
	border-top: 1px solid var( --pat-rule );
	padding-top: var( --pat-sp-2 );
}
.plate-caption cite { font-style: italic; }

/* ------------------------------------------------------------------ *
 * 9. LOT ENTRY — the catalogue's basic unit
 *
 * Lot number in the margin; plate; then the entry: artist, title, medium,
 * dimensions, estimate, and the scholarly apparatus (provenance, exhibited,
 * literature). This is the block the whole theme exists to set well.
 * ------------------------------------------------------------------ */
.lot-list { display: flex; flex-direction: column; }

.lot-entry {
	display: grid;
	grid-template-columns: var( --pat-margin-col ) minmax( 0, 22rem ) minmax( 0, 1fr );
	gap: var( --pat-gutter );
	padding-block: var( --pat-sp-5 );
	border-top: 1px solid var( --pat-rule );
	align-items: start;
}
.lot-entry:last-child { border-bottom: 1px solid var( --pat-rule ); }

.lot-no {
	font-family: var( --pat-ff-display );
	font-size: var( --pat-t-2xl );
	line-height: 1;
	font-variant-numeric: lining-nums;
	color: var( --pat-ink );
}
.lot-no small {
	display: block;
	font-family: var( --pat-ff-data );
	font-size: var( --pat-t-xs );
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var( --pat-ink-faint );
	margin-top: 0.4em;
}

.lot-plate {
	background: var( --pat-plate-mat );
	border: 1px solid var( --pat-rule );
	padding: 0.9rem;
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.lot-plate img {
	max-width: 100%; max-height: 100%; width: auto; height: auto;
	object-fit: contain;
	transition: transform 600ms cubic-bezier( .2,.8,.2,1 );
}
.lot-entry a:hover .lot-plate img { transform: scale( 1.035 ); }

.lot-body > a { text-decoration: none; display: block; }
.lot-artist {
	font-family: var( --pat-ff-data );
	font-size: var( --pat-t-xs );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var( --pat-ink );
}
.lot-life { color: var( --pat-ink-faint ); font-weight: 400; }
.lot-title {
	font-family: var( --pat-ff-display );
	font-size: var( --pat-t-xl );
	font-style: italic;
	margin: 0.3em 0 0.15em;
	line-height: 1.16;
}
.lot-medium { font-size: var( --pat-t-s ); color: var( --pat-ink-soft ); margin: 0; }
.lot-dims   { font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs ); color: var( --pat-ink-faint ); margin: 0.35em 0 0; }

/* The estimate, set as a ledger line: label left, figures right, a leader
   rule between. This is why `.figure` is tabular. */
.estimate {
	margin-top: var( --pat-sp-3 );
	padding-top: var( --pat-sp-2 );
	border-top: 1px solid var( --pat-rule );
	display: flex; align-items: baseline; gap: 0.75rem;
}
.estimate .label { flex: none; }
.estimate .leader { flex: 1 1 auto; border-bottom: 1px dotted var( --pat-rule-strong ); transform: translateY( -0.25em ); }
.estimate .v { font-family: var( --pat-ff-data ); font-size: var( --pat-t-m ); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

.lot-status {
	display: inline-block;
	font-family: var( --pat-ff-data );
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	padding: 0.3em 0.6em;
	border: 1px solid currentColor;
	margin-bottom: 0.7em;
}
.lot-status--open   { color: var( --pat-verdigris ); }
.lot-status--sold   { color: var( --pat-vermilion ); }
.lot-status--closed { color: var( --pat-ink-faint ); }

@media ( max-width: 980px ) {
	.lot-entry { grid-template-columns: 6rem minmax( 0, 1fr ); }
	.lot-plate { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}
@media ( max-width: 560px ) {
	.lot-entry { grid-template-columns: 1fr; gap: var( --pat-sp-3 ); }
	.lot-no { font-size: var( --pat-t-xl ); display: flex; align-items: baseline; gap: 0.6em; }
	.lot-no small { margin-top: 0; }
}

/* ------------------------------------------------------------------ *
 * 10. Scholarly apparatus — provenance / exhibited / literature
 *
 * A provenance is a chain of custody, so it is set as one: each owner on its
 * own line, indented under the heading, in smaller type. Nothing else in
 * this catalogue of themes sets structured historical data this way.
 * ------------------------------------------------------------------ */
.apparatus { margin-top: var( --pat-sp-5 ); }
.apparatus-block + .apparatus-block { margin-top: var( --pat-sp-4 ); }
.apparatus h4 {
	font-family: var( --pat-ff-data );
	font-size: var( --pat-t-xs );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var( --pat-ink-faint );
	margin-bottom: var( --pat-sp-2 );
	padding-bottom: var( --pat-sp-1 );
	border-bottom: 1px solid var( --pat-rule );
}
.chain { list-style: none; margin: 0; padding: 0; font-size: var( --pat-t-s ); }
.chain li {
	padding: 0.45em 0 0.45em 1.6em;
	position: relative;
	color: var( --pat-ink-soft );
	line-height: 1.5;
}
/* A descent mark: the chain reads downward through owners. */
.chain li::before {
	content: "";
	position: absolute;
	left: 0.35em; top: 1.1em;
	width: 0.7em; height: 1px;
	background: var( --pat-rule-strong );
}
.chain li::after {
	content: "";
	position: absolute;
	left: 0.35em; top: 1.1em;
	width: 1px; height: 100%;
	background: var( --pat-rule );
}
.chain li:last-child::after { display: none; }
.chain--plain li::before, .chain--plain li::after { display: none; }
.chain--plain li { padding-left: 0; }
.chain cite { font-style: italic; }

/* ------------------------------------------------------------------ *
 * 11. Sale card / calendar — the season, set as a schedule
 * ------------------------------------------------------------------ */
.sale-row {
	display: grid;
	grid-template-columns: var( --pat-margin-col ) minmax( 0, 1fr ) auto;
	gap: var( --pat-gutter );
	align-items: baseline;
	padding-block: var( --pat-sp-4 );
	border-top: 1px solid var( --pat-rule );
	text-decoration: none;
	transition: background 220ms ease;
}
.sale-row:last-child { border-bottom: 1px solid var( --pat-rule ); }
.sale-row:hover { background: var( --pat-paper-2 ); }

/* A concluded sale is still worth reading — results are evidence — but it is
   not the thing to bid on, so it recedes rather than disappears. Held back
   with weight and colour only; the row stays fully legible and clickable. */
.sale-row--past .sale-title { color: var( --pat-ink-soft ); font-style: italic; }
.sale-row--past .sale-date { color: var( --pat-ink-faint ); }
.sale-date {
	font-family: var( --pat-ff-data );
	font-size: var( --pat-t-xs );
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var( --pat-verdigris );
	font-variant-numeric: tabular-nums;
}
.sale-title { font-family: var( --pat-ff-display ); font-size: var( --pat-t-xl ); line-height: 1.14; }
.sale-place { font-size: var( --pat-t-s ); color: var( --pat-ink-faint ); margin-top: 0.25em; }
.sale-tail { font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs ); text-transform: uppercase; letter-spacing: 0.12em; color: var( --pat-ink-faint ); white-space: nowrap; }
@media ( max-width: 760px ) {
	.sale-row { grid-template-columns: 1fr; gap: var( --pat-sp-2 ); }
	.sale-tail { text-align: left; }
}

/* ------------------------------------------------------------------ *
 * 12. Departments — a specimen list, set in two columns of rules
 * ------------------------------------------------------------------ */
.dept-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 0 var( --pat-sp-5 );
}
.dept {
	padding-block: var( --pat-sp-4 );
	border-top: 1px solid var( --pat-rule );
	text-decoration: none;
	display: block;
}
.dept:hover .dept-name { color: var( --pat-verdigris ); }
.dept-name {
	font-family: var( --pat-ff-display );
	font-size: var( --pat-t-l );
	transition: color 200ms ease;
}
.dept-count { font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs ); color: var( --pat-ink-faint ); letter-spacing: 0.1em; }
.dept-note { font-size: var( --pat-t-s ); color: var( --pat-ink-soft ); margin-top: 0.4em; max-width: 40ch; }

/* ------------------------------------------------------------------ *
 * 13. Specialists
 * ------------------------------------------------------------------ */
.specialist-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) ); gap: var( --pat-sp-5 ); }
.specialist img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale( 1 ) contrast( 1.04 ); background: var( --pat-paper-3 ); }
.specialist-name { font-family: var( --pat-ff-display ); font-size: var( --pat-t-l ); margin-top: var( --pat-sp-2 ); }
.specialist-role { font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs ); text-transform: uppercase; letter-spacing: 0.12em; color: var( --pat-ink-faint ); }

/* ------------------------------------------------------------------ *
 * 14. SIGNATURE 1 — the raking-light examiner
 *
 * A conservator examines a surface by dropping the light almost flat to it,
 * so relief throws shadows. The widget reproduces that: the canvas is the
 * relit painting, the rail under it is the lamp's grazing angle.
 * ------------------------------------------------------------------ */
.examiner { position: relative; }
.examiner-stage {
	position: relative;
	background: var( --pat-plate-mat );
	border: 1px solid var( --pat-rule );
	padding: clamp( 1rem, 3vw, 2.25rem );
	overflow: hidden;
	touch-action: none;
}
.examiner-stage canvas { width: 100%; height: auto; display: block; cursor: grab; }
.examiner-stage canvas:active { cursor: grabbing; }
/* Until WebGL is up (or if it never comes up) the plain plate is what shows,
   so the section is never an empty rectangle. */
.examiner-stage img.examiner-fallback { width: 100%; height: auto; }
.examiner-stage.is-live img.examiner-fallback { display: none; }

.examiner-hint {
	position: absolute; left: 50%; bottom: 1rem; transform: translateX( -50% );
	font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs );
	text-transform: uppercase; letter-spacing: 0.14em;
	background: color-mix( in srgb, var( --pat-ink ) 78%, transparent );
	color: var( --pat-paper );
	padding: 0.45em 0.9em;
	pointer-events: none;
	transition: opacity 400ms ease;
}
.examiner-stage.is-touched .examiner-hint { opacity: 0; }

.examiner-controls {
	display: flex; align-items: center; gap: var( --pat-sp-4 );
	margin-top: var( --pat-sp-3 ); flex-wrap: wrap;
}
.examiner-controls .ctl { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 220px; }
.examiner-controls input[type="range"] {
	flex: 1 1 auto; appearance: none; height: 1px; background: var( --pat-rule-strong ); cursor: pointer;
}
.examiner-controls input[type="range"]::-webkit-slider-thumb {
	appearance: none; width: 3px; height: 18px; background: var( --pat-verdigris ); cursor: grab; border-radius: 0;
}
.examiner-controls input[type="range"]::-moz-range-thumb {
	width: 3px; height: 18px; background: var( --pat-verdigris ); border: 0; border-radius: 0; cursor: grab;
}
.examiner-readout { font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs ); color: var( --pat-ink-faint ); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------------ *
 * 15. SIGNATURE 2 — the viewing room
 * ------------------------------------------------------------------ */
.viewing-room {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #1b1a17;
	border: 1px solid var( --pat-rule );
	overflow: hidden;
}
.viewing-room canvas { width: 100%; height: 100%; display: block; }
.viewing-room-fallback {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	padding: var( --pat-sp-5 );
	text-align: center;
	color: var( --pat-paper );
	background: #1b1a17;
}
.viewing-room.is-live .viewing-room-fallback { display: none; }
.viewing-room-caption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: var( --pat-sp-3 ) var( --pat-sp-4 );
	background: linear-gradient( 0deg, rgb( 0 0 0 / 72% ), transparent );
	color: #efe9dd;
	font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs );
	text-transform: uppercase; letter-spacing: 0.12em;
	display: flex; justify-content: space-between; gap: var( --pat-sp-3 );
	pointer-events: none;
}
@media ( max-width: 700px ) { .viewing-room { aspect-ratio: 4 / 3; } }

/* ------------------------------------------------------------------ *
 * 16. SIGNATURE 3 — deep-zoom loupe
 * ------------------------------------------------------------------ */
.loupe-stage {
	position: relative; overflow: hidden;
	background: var( --pat-plate-mat );
	border: 1px solid var( --pat-rule );
	cursor: zoom-in; touch-action: none;
}
.loupe-stage.is-zoomed { cursor: move; }
.loupe-stage canvas { width: 100%; height: auto; display: block; }
.loupe-scale {
	position: absolute; right: 0.75rem; top: 0.75rem;
	font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs );
	background: color-mix( in srgb, var( --pat-ink ) 78%, transparent );
	color: var( --pat-paper ); padding: 0.35em 0.7em;
	font-variant-numeric: tabular-nums; pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * 17. Forms
 * ------------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 0.4em; margin-bottom: var( --pat-sp-3 ); }
.field label { font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs ); text-transform: uppercase; letter-spacing: 0.13em; color: var( --pat-ink-soft ); }
.field input, .field select, .field textarea {
	font: inherit; font-size: var( --pat-t-m );
	background: transparent;
	color: var( --pat-ink );
	border: 0; border-bottom: 1px solid var( --pat-rule-strong );
	padding: 0.6em 0.1em;
	border-radius: 0;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var( --pat-verdigris ); }
.field textarea { resize: vertical; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var( --pat-sp-3 ); }
@media ( max-width: 620px ) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: var( --pat-t-s ); margin-top: var( --pat-sp-3 ); }
.form-note.is-ok { color: var( --pat-verdigris ); }
.form-note.is-error { color: var( --pat-vermilion ); }

/* ------------------------------------------------------------------ *
 * 18. Journal / posts
 * ------------------------------------------------------------------ */
.post-list { display: flex; flex-direction: column; }
.post-row {
	display: grid; grid-template-columns: var( --pat-margin-col ) minmax( 0, 1fr );
	gap: var( --pat-gutter );
	padding-block: var( --pat-sp-4 );
	border-top: 1px solid var( --pat-rule );
	text-decoration: none;
}
.post-row:last-child { border-bottom: 1px solid var( --pat-rule ); }
.post-row:hover .post-row-title { color: var( --pat-verdigris ); }
.post-row-title { font-family: var( --pat-ff-display ); font-size: var( --pat-t-xl ); transition: color 200ms ease; }
.post-row-date { font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs ); color: var( --pat-ink-faint ); letter-spacing: 0.1em; }
@media ( max-width: 760px ) { .post-row { grid-template-columns: 1fr; gap: var( --pat-sp-1 ); } }

/* ------------------------------------------------------------------ *
 * 19. Breadcrumbs, pagination, comments, 404, search
 * ------------------------------------------------------------------ */
.crumbs { font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs ); color: var( --pat-ink-faint ); margin-bottom: var( --pat-sp-4 ); letter-spacing: 0.1em; text-transform: uppercase; }
.crumbs ol, .crumbs__list { list-style: none; display: flex; gap: 0.6em; margin: 0; padding: 0; flex-wrap: wrap; }
.crumbs li + li::before { content: "/"; margin-right: 0.6em; color: var( --pat-rule-strong ); }
.crumbs a { color: var( --pat-ink-soft ); text-decoration: none; }
.crumbs a:hover { color: var( --pat-verdigris ); }

.pagination { display: flex; gap: 0.4em; margin-top: var( --pat-sp-6 ); }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-inline-size: 2.6em; min-block-size: 2.6em;
	border: 1px solid var( --pat-rule ); text-decoration: none;
	font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs );
}
.pagination .page-numbers.current { background: var( --pat-ink ); color: var( --pat-paper ); border-color: var( --pat-ink ); }
.pagination a.page-numbers:hover { border-color: var( --pat-ink ); }

.comments { margin-top: var( --pat-sp-6 ); border-top: 1px solid var( --pat-rule ); padding-top: var( --pat-sp-5 ); }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-body { padding-block: var( --pat-sp-3 ); border-bottom: 1px solid var( --pat-rule ); }
.comment-meta { font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs ); color: var( --pat-ink-faint ); }
.comment-respond { margin-top: var( --pat-sp-4 ); }

.error-404 { text-align: center; padding-block: var( --pat-sp-8 ); }
.search-form { display: flex; gap: 0.5em; max-inline-size: 460px; }
.search-form input[type="search"] {
	font: inherit; flex: 1 1 auto; background: transparent; color: var( --pat-ink );
	border: 0; border-bottom: 1px solid var( --pat-rule-strong ); padding: 0.7em 0.1em; border-radius: 0;
}
.search-form input[type="search"]:focus { outline: none; border-bottom-color: var( --pat-verdigris ); }

/* ------------------------------------------------------------------ *
 * 20. Footer
 * ------------------------------------------------------------------ */
.site-footer { border-top: 1px solid var( --pat-rule-strong ); margin-top: var( --pat-sp-7 ); background: var( --pat-paper-2 ); }
.footer-grid {
	display: grid; grid-template-columns: 1.4fr repeat( 3, 1fr ); gap: var( --pat-sp-5 );
	padding-block: var( --pat-sp-6 );
}
@media ( max-width: 900px ) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media ( max-width: 560px ) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs ); text-transform: uppercase; letter-spacing: 0.14em; color: var( --pat-ink-faint ); margin-bottom: var( --pat-sp-3 ); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55em; }
.footer-grid a { text-decoration: none; color: var( --pat-ink-soft ); }
.footer-grid a:hover { color: var( --pat-verdigris ); }
.footer-base {
	border-top: 1px solid var( --pat-rule );
	padding-block: var( --pat-sp-3 );
	display: flex; justify-content: space-between; gap: var( --pat-sp-3 ); flex-wrap: wrap;
	font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs ); color: var( --pat-ink-faint );
}

/* ------------------------------------------------------------------ *
 * 21. Reveal — a catalogue leaf settling, not a slide-in
 * ------------------------------------------------------------------ */
[data-reveal] { opacity: 0; transition: opacity 700ms ease, transform 700ms cubic-bezier( .2,.8,.2,1 ); }
[data-reveal="up"]    { transform: translate3d( 0, 1.1rem, 0 ); }
[data-reveal="left"]  { transform: translate3d( -1rem, 0, 0 ); }
[data-reveal="right"] { transform: translate3d( 1rem, 0, 0 ); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media ( prefers-reduced-motion: reduce ) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------------------ *
 * 22. Two-column editorial block
 * ------------------------------------------------------------------ */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var( --pat-sp-6 ); align-items: start; }
@media ( max-width: 900px ) { .two-col { grid-template-columns: 1fr; gap: var( --pat-sp-5 ); } }

.stat-row { display: grid; grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) ); gap: var( --pat-sp-4 ); }
.stat .n { font-family: var( --pat-ff-display ); font-size: var( --pat-t-2xl ); line-height: 1; font-variant-numeric: lining-nums; }
.stat .label { display: block; margin-top: 0.5em; }

/* Pull quote — set as a catalogue epigraph. */
.epigraph {
	font-family: var( --pat-ff-display );
	font-size: var( --pat-t-2xl );
	font-style: italic;
	line-height: 1.24;
	max-width: 26ch;
	color: var( --pat-ink );
}
.epigraph-attr { font-family: var( --pat-ff-data ); font-size: var( --pat-t-xs ); text-transform: uppercase; letter-spacing: 0.14em; color: var( --pat-ink-faint ); margin-top: var( --pat-sp-3 ); }