/* ==========================================================================
   Dossier — wife pages, the Global Registry, jurisdiction archives.
   Loaded only on those three views (see inc/enqueue.php). Tokens and type
   come from atelier.css; nothing here defines a new colour or face.
   ========================================================================== */

/* Header -------------------------------------------------------------------- */

.dossier__header { margin-bottom: clamp(40px, 5vw, 72px); }
.dossier__header .lot { margin-bottom: 28px; }
.dossier__eyebrow { margin-bottom: 12px; }

/* Opening spread: her portrait as large as the screen allows ---------------- */

.dossier-spread {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(36px, 5vw, 80px);
	align-items: start;
	padding-block: clamp(24px, 3vw, 40px) clamp(48px, 6vw, 96px);
}

/* About half the page wide at 4:5, but never taller than the screen under
   the slim header bar (120px = bar + admin bar + breathing room), so the
   whole look fits once the masthead has scrolled away. 600px stops it
   outgrowing the capped content width on big screens, which crushed the
   copy column. The vh line is for browsers without svh. */
.dossier__plate {
	width: min(46vw, 600px, calc((100vh - 120px) * .8));
	width: min(46vw, 600px, calc((100svh - 120px) * .8));
	margin: 0;
}
.dossier__plate .plate__frame { aspect-ratio: 4 / 5; }
.dossier__plate .plate__img { object-position: top; }

.dossier-spread__copy {
	display: grid;
	gap: 20px;
	align-content: start;
	justify-items: start;
	padding-top: clamp(0px, 3vw, 40px);
}
.dossier-spread__copy .folio { width: 100%; margin: 0; }
.dossier-spread__copy .lot { margin: 0; }
.dossier-spread__copy .page-title { margin: 0; overflow-wrap: break-word; }
.dossier__tagline { max-width: 40ch; margin: 8px 0 0; font-style: italic; }
.dossier__facts { width: 100%; margin-top: 16px; }
.dossier__facts > div { grid-template-columns: 8em 1fr; }
.dossier__facts dd { font-size: 18px; }

/* The essay: one reading column ---------------------------------------------- */

/* The article carries the section vignette; the spread sets its own top. */
.section.dossier { padding-top: 0; }
.dossier__body { max-width: 68ch; margin-inline: auto; font-size: 21px; line-height: 1.6; }

.dossier__body h2 {
	margin-bottom: .5em;
	font-size: clamp(30px, 3vw, 42px);
}
.dossier__body > h2:first-child,
.dossier__quote + h2 { margin-top: 0; }

/* Drop cap on the opening paragraph of each section. */
.dossier__body h2 + p::first-letter {
	float: left;
	margin: .08em .1em 0 0;
	font: 600 3.4em/.8 var(--font-display);
	color: var(--wine);
}

.prose blockquote.dossier__quote { margin-top: 0; margin-bottom: 2em; }


/* Closing ------------------------------------------------------------------- */
.dossier-closing { text-align: center; }
.dossier-closing .lede { max-width: 36ch; margin-inline: auto; margin-bottom: 36px; }

/* Registry ------------------------------------------------------------------ */

/* Filters are the shared .tabs component (atelier.css). */




/* Small screens: one column, portrait before name before prose -------------- */

@media (max-width: 900px) {
	.dossier-spread { grid-template-columns: minmax(0, 1fr); }
	.dossier__plate { width: 100%; max-width: 560px; }
	.dossier-spread__copy { padding-top: 0; }
	.dossier__body { font-size: 19px; }
}