/* Site styles on top of the verbatim tokens.css (R03: tokens are the single
 * token source; page styles accrete here through P06–P09 as screens land).
 * The mockups' inline style="" conveniences become classes (ADR-0004). */

/* §2 wordmark registers: 16px header / 14px footer colophon */
.wordmark--header {
	font-size: 16px;
}
.wordmark--colophon {
	font-size: 14px;
}

/* 404 arrival (from the approved mockup's page styles) */
.arrival {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 30px 0 38px 0;
}
.arrival h1 {
	font-size: clamp(32px, 4.2vw, 48px);
	font-weight: 400;
	line-height: 1.16;
	margin: 0;
}
.arrival h1 b {
	font-weight: 600;
}
.arrival-note {
	margin: 0;
	max-width: calc(52 * var(--ch));
}
.paths {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
}
.paths a {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
}

/* prose measure cap (§3: ≤62ch regardless of pane width) */
.prose--measure {
	max-width: calc(62 * var(--ch));
}
.prose--measure p {
	margin: 0 0 14px 0;
}
.prose--measure p:last-child {
	margin-bottom: 0;
}

/* main mirrors the pane's vertical rhythm: the mockups set page blocks as
 * direct pane children at the pane's 22px gap */
main {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* static pages (About, Contact, Legal — approved mockups §10.5–§10.7) */
.head-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}
.section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.section--measure {
	max-width: calc(62 * var(--ch));
}
.page-body {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.about-grid {
	display: grid;
	grid-template-columns: minmax(400px, calc(62 * var(--ch))) minmax(220px, 1fr);
	gap: 44px;
	align-items: start;
}
.rail {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1px solid var(--hair);
	padding-top: 14px;
}
.rail a {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
}
.rail .note {
	font-size: 14px;
	line-height: 1.6;
	max-width: calc(36 * var(--ch));
	color: var(--sec);
	margin: 0;
}
.contact-column {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: calc(62 * var(--ch));
}
.mailbox {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	border: 1px solid var(--hair);
	padding: 12px 16px;
	align-self: flex-start;
}
.mailbox > * {
	white-space: nowrap;
}
.mailbox .addr {
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}
@media (max-width: 700px) {
	.about-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* item record (approved mockup §10.4) */
.titleblock {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.titleblock .meta {
	text-transform: uppercase;
}
.meta-sep,
.crumb-sep {
	color: var(--sec);
}
/* the mockup's "  ·  " in the 12px mono register */
.meta-sep {
	margin: 0 1.3em;
}
.main-grid {
	display: grid;
	grid-template-columns: minmax(400px, 700px) 1fr;
	gap: 40px;
	align-items: start;
}
.stage-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* S8: the image fills the fixed 5:4 box and letterboxes by object-fit, so a
 * swap between orientations moves nothing (an image keeping its own box
 * inside the stage shifted 0.0335 per swap). */
.stage {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 5 / 4;
}
.stage img,
.lb-stage img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.cross {
	position: absolute;
	width: 9px;
	height: 9px;
	color: var(--sec);
	stroke-width: 1;
}
.cross.tl {
	top: -5px;
	left: -5px;
}
.cross.tr {
	top: -5px;
	right: -5px;
}
.cross.bl {
	bottom: -5px;
	left: -5px;
}
.cross.br {
	bottom: -5px;
	right: -5px;
}
.thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.thumbs a {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--well);
	border: 1px solid var(--hair);
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--well-fg);
}
.thumbs a:hover {
	text-decoration: none;
	border-color: var(--accent);
}
.thumbs a[aria-current="true"] {
	border-color: var(--accent);
}
.specs {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.spec-list {
	margin: 0;
}
.spec-row {
	display: grid;
	grid-template-columns: 150px 1fr;
	padding: 9px 0;
	border-bottom: 1px solid var(--hair);
}
.spec-row:last-child {
	border-bottom: none;
}
.spec-row dd {
	margin: 0;
}
.tagrow {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.tag-sep {
	color: var(--hair);
}
.section--related {
	gap: 12px;
}
.card .photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.pager {
	align-items: baseline;
}
@media (max-width: 760px) {
	.main-grid {
		grid-template-columns: 1fr;
	}
	.cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* lightbox (mockup §10.4; the gallery island opens it) */
dialog.lightbox {
	border: 1px solid var(--hair);
	background: var(--bg);
	color: var(--ink);
	padding: 20px;
	width: min(860px, 90vw, calc((100vh - 150px) * 1.25));
	max-width: none;
}
dialog.lightbox::backdrop {
	background: var(--backdrop);
}
.lb-stage {
	position: relative;
	aspect-ratio: 5 / 4;
}
.lb-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 12px;
	gap: 12px;
}
.lb-caption {
	text-transform: uppercase;
}
.lb-actions {
	display: flex;
	gap: 8px;
}
.lb-bar button {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	background: none;
	border: 1px solid var(--hair);
	color: var(--ink);
	padding: 6px 12px;
	cursor: pointer;
}
.lb-bar button:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.stage[aria-haspopup] {
	cursor: zoom-in;
}

/* covers and tour thumbs: the image fills its reserved well and
 * letterboxes by object-fit, as on the item stage (S8), so a cover of any
 * orientation keeps the box and moves nothing */
.cover,
.thumb {
	position: relative;
	display: block;
}
.cover {
	aspect-ratio: 5 / 4;
}
.thumb {
	aspect-ratio: 4 / 5;
}
/* scoped to the well so these rank with `.card .photo img`, not below it */
.cover.well img,
.thumb.well img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.enter {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	color: var(--accent);
}

/* home — guided exhibit (approved mockup §10.1) */
.wordmark--arrival {
	font-size: 0.92em;
}
.section--tour {
	gap: 4px;
}
.tour {
	display: flex;
	flex-direction: column;
}
.flagship,
.tour-band {
	display: grid;
	border-bottom: 1px solid var(--hair);
	color: var(--ink);
}
.flagship {
	grid-template-columns: minmax(300px, 1.3fr) minmax(260px, 1fr);
	gap: 44px;
	padding: 30px 0;
	align-items: start;
}
.tour-band {
	grid-template-columns: minmax(220px, 0.8fr) 1fr;
	gap: 32px;
	padding: 22px 0;
	align-items: center;
}
.tour-band:last-child {
	border-bottom: none;
}
.flagship:hover,
.tour-band:hover,
.stop:hover {
	text-decoration: none;
}
.flagship:hover .enter,
.tour-band:hover .enter,
.stop:hover .enter {
	color: var(--accent-hover);
	text-decoration: underline;
}
.flagship:hover .cover,
.tour-band:hover .cover,
.stop:hover .thumb {
	border-color: var(--accent);
}
.tour-info {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.flagship .tour-info {
	padding-top: 6px;
}
/* 22px on the flagship too: the approved §10.1 capture shows it so (the
 * mockup's 34px flagship rule lost the cascade to this one) */
.tour-info h3 {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}
.hook {
	font-size: 15px;
	line-height: 1.6;
	max-width: calc(48 * var(--ch));
}
.flagship .hook {
	font-size: 16.5px;
	line-height: 1.65;
	max-width: calc(44 * var(--ch));
}
.cat-entry {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.cat-line {
	display: flex;
	align-items: baseline;
	gap: 18px;
	flex-wrap: wrap;
}

/* collection detail — the guided tour (approved mockup §10.3) */
.crumb-here {
	color: var(--ink);
}
.intro {
	display: grid;
	grid-template-columns: minmax(300px, 1.1fr) minmax(280px, 1fr);
	gap: 44px;
	align-items: start;
}
.intro-info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 6px;
}
.intro-info h1 {
	font-size: 33px;
	font-weight: 600;
	line-height: 1.15;
	margin: 0;
}
.standfirst {
	font-size: 16.5px;
	line-height: 1.65;
	max-width: calc(44 * var(--ch));
}
.standfirst p,
.standfirst ul {
	margin: 0 0 12px 0;
}
.standfirst > :last-child {
	margin-bottom: 0;
}
.narr-grid {
	display: grid;
	grid-template-columns: minmax(400px, calc(62 * var(--ch))) minmax(220px, 1fr);
	gap: 44px;
	align-items: start;
}
.reading {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1px solid var(--hair);
	padding-top: 14px;
}
.reading p {
	font-size: 15px;
	line-height: 1.65;
	margin: 0;
	max-width: calc(40 * var(--ch));
}
.tour-list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}
.stop {
	display: grid;
	grid-template-columns: 56px 128px 1fr;
	gap: 24px;
	padding: 22px 0;
	border-bottom: 1px solid var(--hair);
	align-items: start;
	color: var(--ink);
}
.tour-list li:last-child .stop {
	border-bottom: none;
}
.stop-num {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 20px;
	color: var(--accent);
	padding-top: 2px;
}
.stop-info {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
/* The plate line leads with the maker (ADR-0010, amended 2026-10-17). */
.stop-info .meta {
	text-transform: uppercase;
}
.stop .stop-info h3 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}
.context {
	font-size: 15.5px;
	line-height: 1.6;
	max-width: calc(56 * var(--ch));
}
/* the designed empty state, the catalogue's zero-result pattern */
.empty {
	border: 1px solid var(--hair);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}
.empty-note {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	max-width: calc(62 * var(--ch));
}
@media (max-width: 700px) {
	.flagship,
	.tour-band,
	.intro {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.narr-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.stop {
		grid-template-columns: 40px 96px 1fr;
		gap: 14px;
	}
}

/* the hidden attribute wins over any display rule (the catalogue island
 * hides cards, options and panels with it) */
[hidden] {
	/* biome-ignore lint/complexity/noImportantStyles: hidden must beat every display rule, e.g. an unfolded facet option */
	display: none !important;
}

/* catalogue (mockup §10.2): search and order above, the facet rail beside
 * a three-column grid; the rail folds behind FILTERS at ≤980px (§3) */
.controls {
	display: flex;
	gap: 12px;
	align-items: center;
}
.cat-tools .controls input {
	width: 260px;
}
.cat-grid {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 40px;
	align-items: start;
}
.facets {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.facet-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.options {
	display: flex;
	flex-direction: column;
}
.facet {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.05em;
	color: var(--sec);
	background: none;
	border: none;
	border-bottom: 1px solid var(--hair);
	padding: 7px 2px;
	text-align: left;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	gap: 8px;
}
.facet:hover {
	color: var(--accent-hover);
}
.facet[aria-pressed="true"] {
	color: var(--accent);
	border-bottom-color: var(--accent);
}
/* past the fifth, an option waits for SHOW ALL unless it is selected */
.facet[data-extra]:not([aria-pressed="true"]) {
	display: none;
}
.facet-group.expanded .facet[data-extra] {
	display: flex;
}
.facet-group.expanded .options {
	max-height: 236px;
	overflow-y: auto;
}
.facet-more {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	color: var(--accent);
	background: none;
	border: none;
	padding: 8px 2px;
	text-align: left;
	cursor: pointer;
}
.facet-more:hover {
	color: var(--accent-hover);
}
.facet-mini {
	display: none;
	width: 100%;
}
.facet-group.expanded .facet-mini {
	display: block;
}
.cat-cards {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
#filters-toggle {
	display: none;
	justify-content: space-between;
	width: 100%;
	cursor: pointer;
}
.active-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
button.chip {
	background: none;
	cursor: pointer;
}
button.chip:hover {
	color: var(--accent-hover);
	border-color: var(--accent);
}
.cat-notice {
	margin: 0;
	border: 1px solid var(--hair);
	padding: 10px 14px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--sec);
}
@media (max-width: 980px) {
	.cat-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
	.cat-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	#filters-toggle {
		display: flex;
	}
	.facets {
		display: none;
	}
	.facets.open {
		display: flex;
	}
}
/* without JS the controls could do nothing: they go, the notice says why,
 * and the grid takes the rail's place (the island does the same when the
 * search index cannot load) */
@media (scripting: none) {
	.cat-tools,
	.facets,
	#filters-toggle {
		display: none;
	}
	.cat-grid {
		grid-template-columns: 1fr;
	}
}
.cat-grid--plain {
	grid-template-columns: 1fr;
}