/* =============================================================================
   templates.css: the inner-page templates
   -----------------------------------------------------------------------------
   One hero pattern per template (design-language.md, "One hero pattern per template"):
   Page       About, Companies, Contact         eyebrow + display title across, photo 5 / lede 7
   Long read  Lineage hub and its chapters      years as eyebrow, display title, a mat, chapters
   Archive    Press, Film                       display title, one line, one clipping in the right half
   Single     a press item                      label + title across, standfirst / clipping 7 / 5
   ============================================================================= */

/* ---- Page ------------------------------------------------------------------- */
.page-hero { padding-top: var(--s-5); }
.page-hero .sec-head { margin-bottom: var(--s-5); }
.page-hero .display { text-wrap: balance; }
.page-hero .split-5-7 { align-items: start; }
.page-hero figure { margin: 0; }
.page-hero figure img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 30%; }
.page-hero .lede { margin-top: 0; }
/* Companies: one entry per company, separated by space */
.entries > * + * { margin-top: var(--s-6); }

/* ---- Long read: hero ------------------------------------------------------ */
.read-hero { padding-top: var(--s-6); }
.read-hero .display { text-wrap: balance; }
.read-hero .split-7-5 { margin-top: var(--s-6); align-items: end; }
.read-hero .mat { justify-self: end; width: 100%; max-width: 300px; }
.read-hero .mat img { width: 100%; height: 100%; max-height: none; object-fit: cover; }

/* ---- Long read: body (component 15) ---------------------------------------- */
/* One reading column of about 66 characters a line. Instrument Sans has a wide "0", so
   66ch measured 87 characters; 32em measured 68. From 1024 px the column sits on the right
   of the frame for the whole page and never moves; the left margin holds the year line
   and the portraits. */
.read { display: grid; }
.read-col { max-width: 32em; }
.read-col p { max-width: none; }
.read-col > * + * { margin-top: var(--s-4); }
.read-col > .title { margin-top: 0; }
.read-col > .title + * { margin-top: var(--s-5); }
.read-col h3 {
	margin-top: var(--s-6);
	font: 600 var(--step-lede)/1.2 var(--display);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
}
.read-col ul.bullets { display: grid; gap: var(--s-3); padding-left: 1.2em; list-style: disc; }
/* A section head across the frame for long names (Famous Members), then the column */
.read > .sec-head { grid-column: 1/-1; justify-self: start; margin-bottom: var(--s-5); }
.read > .sec-head .label { margin-top: var(--s-3); }
/* Pictures in a long read: a mat at column width, a pair for a couple, caption under */
.read-col figure { margin-block: var(--s-6); }
.read-col figure .mat { aspect-ratio: 4/5; }
.read-col figure .mat img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.read-col figcaption { margin-top: var(--s-3); }
.read-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
/* The way on: next chapter, back to the hub */
.read-next { display: grid; gap: var(--s-2); }
.read-next a {
	font: italic 500 var(--step-lede)/1.2 var(--display);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
}
@media (max-width: 1023px) {
	.read-col { max-width: none; }
}
@media (min-width: 1024px) {
	.read { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.read > * { grid-column: 5/13; justify-self: end; width: 100%; }
	/* Portraits hang in the left margin beside the paragraph that names the person */
	.read-col figure { float: left; clear: left; width: min(340px, 26vw); margin: var(--s-2) 0 var(--s-4) calc(-1 * min(340px, 26vw) - var(--s-6)); }
	.read-col::after { content: ""; display: block; clear: both; }
}

/* ---- Archive ---------------------------------------------------------------- */
.archive-hero { padding-top: var(--s-6); }
.archive-hero .lede { margin-top: var(--s-5); }
.archive-grid { display: grid; gap: var(--s-5); }
/* One clipping or poster hangs in the right half and links to its item; first on phones */
.archive-cover { display: grid; gap: var(--s-2); max-width: 240px; text-decoration: none; }
.archive-cover img { width: 100%; }
.archive-cover:hover .label { text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 699px) {
	.archive-cover { order: -1; }
}
@media (min-width: 700px) {
	.archive-grid { grid-template-columns: minmax(0, 1fr) min(400px, 30vw); gap: var(--s-6); align-items: end; }
	.archive-cover { max-width: none; }
}
/* Press: groups of rows, one under the other (their long titles need the full width) */
.groups { display: grid; gap: var(--s-section); }
.groups .title { margin-bottom: var(--s-5); }

/* ---- Single ------------------------------------------------------------------ */
.single-hero { padding-top: var(--s-6); }
.single-hero .split-7-5 { align-items: start; }
.single-hero .lede { margin-top: var(--s-5); }
.single-hero figure { max-width: 440px; margin: 0; }
.single-hero figure img { width: 100%; }
.single-hero figcaption { margin-top: var(--s-2); }
@media (min-width: 700px) {
	.single-hero figure { justify-self: end; }
}
@media (max-width: 699px) {
	.single-hero figure { order: -1; max-width: 280px; }   /* phones: the clipping first, smaller */
}