/* =============================================================================
   components.css: the reusable pieces of the design language
   -----------------------------------------------------------------------------
   Numbers match "Components" in lychee/copy/design-language.md. A component is
   used as is on any page; new ones are added to the design language first.
   ============================================================================= */

/* ---- Mat: historical portraits and paintings sit on seamless ------------- */
.mat {
	display: grid;
	place-items: center;
	aspect-ratio: 4/5;
	padding: var(--s-4);
	overflow: hidden;
	background: var(--seamless);
}
.mat img { width: auto; max-height: 100%; object-fit: contain; }
.mat.mat-square { aspect-ratio: 1; }

/* ---- 5 Unit: title + one image + one label, the whole unit is the link ---- */
.unit { display: flex; flex-direction: column; gap: var(--s-3); text-decoration: none; }
.unit .frame-img { overflow: hidden; }
.unit img { width: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.unit-title {
	font: 700 var(--step-title)/1 var(--display);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
	letter-spacing: -.02em;
}
.unit:hover .unit-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.unit:hover img { transform: scale(1.03); }

/* Units sit in asymmetric grids: 7 + 5, never equal columns */
.units { display: grid; gap: var(--s-6) var(--s-5); margin-top: var(--s-6); }
.units > .span-5 { margin-top: var(--s-6); }
@media (min-width: 700px) {
	.units { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.span-7 { grid-column: span 7; }
	.span-5 { grid-column: span 5; }
}
.span-7 .frame-img img { aspect-ratio: 3/2; }
.span-5 .frame-img img { aspect-ratio: 4/5; }

/* ---- 6 Members rail: the lineage pan --------------------------------------- */
/* Desktop: a pinned horizontal pan (data-sc-act="pan"). Phones: phone.js turns it into a
   native swipe rail with snap and moves the lead text above it. */
.line-act [data-sc-stage] { display: flex; flex-direction: column; justify-content: center; background: var(--paper); }
.rail-window { overflow: hidden; }
/* The rail fades where it meets the year line instead of cutting text into fragments */
.rail-window { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px); mask-image: linear-gradient(to right, transparent 0, #000 48px); } /* taste-skill-ignore: a mask, not a fill */
.members { display: flex; gap: var(--s-5); align-items: flex-end; padding-inline: calc(var(--gutter) + var(--line-gutter)); }
.members > li { flex: 0 0 clamp(220px, 21vw, 300px); }
.members > .members-lead { flex-basis: clamp(300px, 34vw, 520px); align-self: center; }
.members > .members-end { flex-basis: clamp(240px, 24vw, 340px); align-self: center; }
.members .unit-title { font-size: var(--step-lede); font-weight: 600; line-height: 1.15; }
.members .mat img { width: 100%; height: 100%; max-height: none; object-fit: cover; }   /* one mat for every portrait: the picture fills it */
.members .mat.mat-square img { object-fit: contain; }                                    /* the crest closes the rail, whole */
.rail-intro { margin-top: var(--s-4); }

@media (min-width: 700px) and (max-width: 1023px) {
	.members { padding-left: calc(48px + var(--s-4)); }
}
@media (min-width: 1024px) {
	/* The rail is clipped right of the year line, its first item clear of it */
	.rail-window {
		margin-left: calc(var(--gutter) * .6 + 72px);
		-webkit-mask-image: linear-gradient(to right, transparent 0, transparent 24px, #000 120px); /* taste-skill-ignore: a mask, not a fill */
		mask-image: linear-gradient(to right, transparent 0, transparent 24px, #000 120px);
	}
	.members { padding-left: calc(120px + var(--s-5)); padding-right: calc(var(--gutter) + var(--line-gutter) + var(--gutter) * .6 + 72px); }
}
@media (max-width: 699px) {
	.members { align-items: center; }
	.line-act [data-sc-stage] { justify-content: flex-start; padding-top: calc(var(--header-h) + var(--s-5)); }
	.line-act.is-native-rail > div { padding-top: 0; }
	.rail-head { margin-bottom: var(--s-5); }
	.is-native-rail .rail-window {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: thin;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.is-native-rail .members { display: flex; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
	.is-native-rail .members > li { flex-basis: 72vw; scroll-snap-align: start; }
	.is-native-rail .members > .members-lead { flex-basis: 84vw; }
}
@media (prefers-reduced-motion: reduce) {
	.members { padding-block: var(--s-5); }
}

/* ---- 9 Count figures: Bodoni numerals at display size, label under --------- */
/* Only the site's real figures. data-sc-count makes them count up once. */
.fig {
	display: block;
	font: 700 var(--step-display)/.95 var(--display);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
	font-variant-numeric: lining-nums;
	letter-spacing: -.035em;
}
.figure-list, .figures-col { display: grid; gap: var(--s-5); }   /* a column of figures */
.figures-col { align-content: start; }
.fig-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }   /* figures two by two */
.figure-list li, .figures-col li, .fig-grid li { display: grid; gap: var(--s-1); }

/* ---- Full-bleed picture: 16:9, 4:5 on phones -------------------------------- */
.full-bleed { margin-top: var(--s-6); }
.full-bleed img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.wrap > .full-bleed { margin-inline: calc(-1 * (var(--gutter) + var(--line-gutter))); }   /* inside a framed section, still edge to edge */
@media (max-width: 699px) {
	.full-bleed img { aspect-ratio: 4/5; }
}

/* ---- Studio print: one 4:5 portrait ------------------------------------------ */
.print { margin: 0; }
.print img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 20%; }

/* ---- 12 Film embed: poster and a red Play tag; Vimeo loads only on click (film.js) */
.film { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--seamless); }
.film img, .film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.film .play {
	position: absolute;
	bottom: var(--s-4);
	left: var(--s-4);
	min-height: 48px;
	padding: 14px 20px;
	border: 0;
	background: var(--red);
	color: var(--ink);
	font: 600 1rem/1 var(--text);
	cursor: pointer;
	transition: background-color var(--dur-quick) var(--ease-out);
}
.film .play:hover { background: var(--red-press); }
.film-head { display: grid; gap: 2px; margin-top: var(--s-4); }
.film-head h3 { font: 600 var(--step-lede)/1.15 var(--display); font-optical-sizing: none; font-variation-settings: "opsz" 6; letter-spacing: 0; }
/* The two smaller films sit on 7 + 5 */
.films { display: grid; gap: var(--s-6) var(--s-5); margin-top: var(--s-6); }
@media (min-width: 700px) {
	.films { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.films > :nth-child(1) { grid-column: span 7; }
	.films > :nth-child(2) { grid-column: span 5; margin-top: var(--s-6); }
}

/* ---- 13 Titled list: things without pictures (home: companies, films, causes) */
.lists { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.lists h3 { margin-bottom: var(--s-3); color: var(--grey); font: 500 var(--step-label)/1.35 var(--text); }
.lists .press-list li { display: grid; gap: 2px; padding: 0 0 var(--s-3); }
.lists .press-title {
	font: italic 500 var(--step-lede)/1.2 var(--display);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
	text-decoration: none;
}
.lists .press-title:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* On the 4 + 8 split: the first group left, the others stacked right */
@media (min-width: 700px) {
	.lists { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.lists > :nth-child(1) { grid-column: 1/5; grid-row: 1/3; }
	.lists > :nth-child(2) { grid-column: 5/13; grid-row: 1; }
	.lists > :nth-child(3) { grid-column: 5/13; grid-row: 2; }
}

/* ---- 14 Press rows: label, title, a small clipping; alternating tone ------- */
.press-rows li { display: grid; gap: var(--s-5); align-items: center; padding: var(--s-4); }
.press-rows li:nth-child(odd) { background: var(--seamless); }
.band .press-rows li:nth-child(odd) { background: var(--paper); }   /* inside a seamless band, rows alternate to paper */
.press-rows .row-text { display: grid; gap: var(--s-2); }
.press-rows .row-title {
	justify-self: start;
	font: 600 clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem)/1.1 var(--display);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
	text-decoration: none;
}
.press-rows h2.row-title { margin: 0; }
.press-rows h2.row-title a { text-decoration: none; }
.press-rows .row-title:hover, .press-rows h2.row-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.press-rows .thumb { display: none; }   /* clippings only where there is room */
@media (min-width: 700px) {
	.press-rows li.has-thumb { grid-template-columns: minmax(0, 1fr) clamp(96px, 9vw, 140px); }
	.press-rows .thumb { display: block; }
	.press-rows .thumb img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top; }
}

/* ---- Chapters list: titles in the lede italic with a label under ---------- */
.chapters li { display: grid; gap: 2px; padding-bottom: var(--s-4); }
.chapters a {
	font: italic 500 var(--step-lede)/1.2 var(--display);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
	text-decoration: none;
}
.chapters a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ---- Contact card: the press contact as an address ------------------------- */
.contact-card { display: grid; gap: var(--s-1); font-style: normal; }
.contact-name { font: 600 var(--step-lede)/1.2 var(--display); font-optical-sizing: none; font-variation-settings: "opsz" 6; }