/* Catalogue families (Printworks_Families): the plate a family without art wears, the family archive's hero, its sections and questions. */

/*
 * The plate: a print's own furniture, typeset — series line, the prints being
 * drawn as its index, a rule, the family's name — at the 3:4 of every sample,
 * so a holding family sits in a row of framed prints at their shape. It takes
 * a sample's width (1200px, held to the frame) so the frame sizes round it as
 * round an image, and its type is in container units so the one markup reads
 * at card and at hero size.
 */
.contour-plate { container-type: inline-size; box-sizing: border-box; display: flex; flex-direction: column; width: 1200px; max-width: 100%; aspect-ratio: 3 / 4; padding: 7% 7.5% 6.5%; background: #f4f1e9; color: #25231c; text-align: left; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); overflow: hidden; }
.contour-plate-series { display: flex; justify-content: space-between; gap: 0.5em; font-family: var(--wp--preset--font-family--mono); font-size: max(6px, 2.6cqi); letter-spacing: 0.14em; text-transform: uppercase; color: #8a8576; }
.contour-plate-index { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.55em; margin: 0; padding: 8% 0; list-style: none; font-family: var(--wp--preset--font-family--display); font-size: max(8px, 5.4cqi); font-weight: 500; line-height: 1.15; letter-spacing: -0.005em; }
.contour-plate-index li { display: flex; align-items: baseline; gap: 0.8em; }
.contour-plate-no { flex: none; font-family: var(--wp--preset--font-family--mono); font-size: 0.62em; letter-spacing: 0.08em; color: #a19b8b; }
.contour-plate-title { display: block; padding-top: 5%; border-top: max(1px, 0.5cqi) solid #25231c; font-family: var(--wp--preset--font-family--display); font-size: max(11px, 8.6cqi); font-weight: 700; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; }
.contour-plate-sub { display: block; margin-top: 3%; font-family: var(--wp--preset--font-family--mono); font-size: max(6px, 2.6cqi); letter-spacing: 0.14em; text-transform: uppercase; color: #8a8576; }

/* The hero: the words and actions beside the family framed, as a style page's. */
.contour-family-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--wp--preset--spacing--50); align-items: center; }
.contour-family-hero .contour-kicker { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 0.75rem; }
.contour-family-hero .contour-kicker a { color: inherit; text-decoration: none; }
.contour-family-hero .contour-hero-title { margin: 0 0 0.75rem; }
.contour-family-hero .contour-mockup { margin: 0; }
.contour-family-actions { margin-top: var(--wp--preset--spacing--30); gap: var(--wp--preset--spacing--20); }

/* A family whose prints are Studio styles and not products leaves the empty product grid out. */
.contour-family-products:not(:has(li)) { display: none; }

/* The sections below the grid. */
.contour-family-prints, .contour-family-coming, .contour-family-meanwhile { padding: var(--wp--preset--spacing--50) 0; }
.contour-family-prints h2, .contour-family-coming h2, .contour-family-meanwhile h2 { margin: 0 0 0.5rem; }
.contour-family-prints > .contour-lede, .contour-family-meanwhile > .contour-lede { margin: 0 0 var(--wp--preset--spacing--40); }
.contour-family-prints-group { margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--30); font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.contour-family-coming > p { margin: 0 0 var(--wp--preset--spacing--30); }
.contour-coming-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--wp--preset--spacing--30); margin: 0; padding: 0; list-style: none; }
.contour-coming-list li { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.7rem 0; border-top: 1px solid var(--wp--preset--color--line); font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.contour-coming-no { flex: none; font-family: var(--wp--preset--font-family--mono); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.08em; color: var(--wp--preset--color--faint); }
.contour-family-faq { max-width: 44rem; margin: 0 auto; padding: var(--wp--preset--spacing--50) 0; }
.contour-family-faq h2 { margin: 0 0 1rem; }

@media (max-width: 1023px) {
	.contour-coming-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	.contour-family-hero { grid-template-columns: minmax(0, 1fr); }
	.contour-family-hero .contour-mockup { order: -1; }
	.contour-family-hero .contour-mockup--hero .contour-frame { width: min(100%, 300px); border-width: 9px; }
}
@media (max-width: 599px) {
	.contour-coming-list { grid-template-columns: 1fr; }
}