/*
 * CILI: the first page as code follows the reference image and the app (roadmap F10, Q77, Q78, ADR-0023 D2, D5):
 * front-page.php's sections on a white ground in the page's row, the hero's display type and pill buttons (and, since
 * the owner's request of 2026-10-09, its artists' avatars, its tagline and its showcase of artworks, WEB-650; since
 * 2026-10-13 its years before the title, WEB-676), the
 * artworks in the cards of layout-cards.css (no "Artist Wanted!" and no press logos since Q112, no newsletter panel
 * since the owner's request of 2026-10-11); and the article card (templates/article.php), which the first page and the
 * blog's archives print. Since the owner's request of 2026-10-15 the first page is presented as the artists' page
 * (layout-promote.css), on white: the hero in its type (the hero size on a desktop) with its lead and its stage of
 * artworks in shapes (layout-motion.css), each section's title centred in the display type with its accent word and a
 * short line under it, more room between the sections, a way on under each list, and every part coming in as it is
 * scrolled to (the shared motion). Grayscale only, colour only from content; every value a token; `html body` first.
 */

/* ------------------------------------------------------------------------------------------- the page */

/* No space of its own under the last section: the footer holds the one space between the page and it (layout-frame.css). */
html body .lcr-home {
	padding-bottom: 0;
}

/* The page's one edge (the header's and the footer's too): the content token (`web.container.content`, 1320, Heilz's `--row`) inside the gutter, 60px at 1440. */
html body .lcr-home .lcr-home-row {
	max-width: calc(var(--lcr-web-container-content) + 2 * var(--lcr-web-gutter-phone));
	margin: 0 auto;
	padding: 0 var(--lcr-web-gutter-phone);
	box-sizing: border-box;
}

html body .lcr-home .lcr-home-section {
	margin: calc(2 * var(--lcr-web-section-gap-phone)) 0 0;
}

/* The stage leaves its own room under its shapes: the first list follows it at the plain section gap. */
html body .lcr-home .lcr-home-hero + .lcr-home-section {
	margin-top: var(--lcr-web-section-gap-phone);
}

/* A section's title and its short line, as the artists' page's: centred, the display type, one word the accent
   (lcr_accent()). The title is a block as wide as the row, its text centred, so its box keeps the page's edge (WEB-640). */
html body .lcr-home .lcr-home-heading {
	margin: 0 0 var(--lcr-space-32);
	text-align: center;
}

html body .lcr-home .lcr-home-title {
	display: block;
	margin: 0;
	text-wrap: balance;
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-display-font-size);
	font-weight: var(--lcr-type-display-font-weight);
	letter-spacing: var(--lcr-type-display-letter-spacing);
	line-height: var(--lcr-type-display-line-height);
}

html body .lcr-home .lcr-home-sub {
	max-width: var(--lcr-web-container-text);
	margin: var(--lcr-space-12) auto 0;
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-body-large-font-size);
	line-height: var(--lcr-type-body-large-line-height);
}

/* Under a list, the way on: the outlined pill, in the middle. */
html body .lcr-home .lcr-home-more {
	display: flex;
	justify-content: center;
	margin: var(--lcr-space-32) 0 0;
}

/* The pills: the near-black primary, the outlined secondary (the reference image's buttons), at the buttons' one
   height, `size.control`, as the header's (the owner's request of 2026-10-09, WEB-652); the hero's and, since
   2026-10-15, the way on under each list. */
html body .lcr-home .lcr-home-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lcr-space-12);
	margin: var(--lcr-space-24) 0 0;
}

html body .lcr-home :is(.lcr-home-actions, .lcr-home-more) .ulz-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--lcr-size-control);
	padding: 0 var(--lcr-space-24);
	border-radius: var(--lcr-radius-pill);
	font-size: var(--lcr-web-type-label-font-size);
	font-weight: var(--lcr-font-weight-semibold);
	text-decoration: none;
}

html body .lcr-home :is(.lcr-home-actions, .lcr-home-more) .lcr-home-primary {
	background-color: var(--lcr-color-ink);
	box-shadow: none;
	color: var(--lcr-color-on-ink);
}

html body .lcr-home :is(.lcr-home-actions, .lcr-home-more) .lcr-home-secondary {
	background-color: var(--lcr-color-background);
	box-shadow: inset 0 0 0 var(--lcr-size-hairline) var(--lcr-color-outline);
	color: var(--lcr-color-ink);
}

/* ------------------------------------------------------------------------------------------- the hero */

html body .lcr-home .lcr-home-hero {
	margin-top: var(--lcr-space-32);
	text-align: center;
}

/* The hero's parts in one column, in the middle, the artists' page's rhythm between them. */
html body .lcr-home .lcr-home-hero > .lcr-home-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lcr-space-20);
}

html body .lcr-home .lcr-home-hero .lcr-home-actions {
	margin: var(--lcr-space-4) 0 0;
}

/* The title, one h1 of the years since the company's founding and the title ("9 Years of Exploring Creativity", the last
   word the accent italic, `lcr_accent()`; WEB-676): the artists' page's title type since 2026-10-15, the headline on a
   phone, the display on a tablet and the hero on a desktop, balanced over its lines. */
html body .lcr-home .lcr-home-display {
	margin: 0 auto;
	text-wrap: balance;
	color: var(--lcr-color-ink);
	font-size: var(--lcr-web-type-headline-font-size);
	font-weight: var(--lcr-web-type-headline-font-weight);
	letter-spacing: var(--lcr-web-type-headline-letter-spacing);
	line-height: var(--lcr-web-type-headline-line-height);
}

/* The tagline: muted under the title (the owner's request of 2026-10-09), the artists' page's lead since 2026-10-15. */
html body .lcr-home .lcr-home-tagline {
	max-width: calc(var(--lcr-web-container-text) * 0.85);
	margin: 0 auto;
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-body-large-font-size);
	line-height: var(--lcr-type-body-large-line-height);
}

html body .lcr-home .lcr-home-hero .lcr-home-actions {
	justify-content: center;
}

/* Above the title, in one centred row: the artists' avatars and how many countries they come from (Q108). */
html body .lcr-home .lcr-home-proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--lcr-space-8) var(--lcr-space-16);
	margin: 0;
}

/* The countries: the small muted line, its number in ink, its digits of one width, so the line keeps still while the
   number counts up (assets/js/home-counter.js). */
html body .lcr-home .lcr-home-countries {
	margin: 0;
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-body-font-size);
	line-height: var(--lcr-type-body-line-height);
}

html body .lcr-home .lcr-home-count {
	color: var(--lcr-color-ink);
	font-weight: var(--lcr-font-weight-semibold);
	font-variant-numeric: tabular-nums;
}

/* The artists: round avatars over one another, each with a white ring, then a "+" on ink (the reference image's). */
html body .lcr-home .lcr-home-avatars {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

html body .lcr-home .lcr-home-avatars li {
	margin: 0 0 0 calc(-1 * var(--lcr-space-12));
}

html body .lcr-home .lcr-home-avatars li:first-child {
	margin-left: 0;
}

html body .lcr-home .lcr-home-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lcr-size-avatar-row);
	height: var(--lcr-size-avatar-row);
	border-radius: var(--lcr-radius-pill);
	box-shadow: 0 0 0 calc(2 * var(--lcr-size-hairline)) var(--lcr-color-background);
	background-color: var(--lcr-color-panel);
	overflow: hidden;
}

html body .lcr-home .lcr-home-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

html body .lcr-home .lcr-home-avatar-more {
	background-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
}

html body .lcr-home .lcr-home-avatar-more .lcr-icon {
	width: var(--lcr-size-icon);
	height: var(--lcr-size-icon);
}

/* The stage of artworks in shapes under the buttons (templates/showcase/stage.php, layout-motion.css), on white with its
   own grays, as wide as the widest row. */
html body .lcr-home .lcr-home-showcase {
	margin: var(--lcr-space-32) 0 0;
}

/* ------------------------------------------------------------------------------------------- the article card */

/* The grid: one column on a phone, two from the tablet, three from the desktop, the grid-gap tokens between them and
   no negative margin, so the cards run from the page's left edge to its right edge (Heilz's own margins and cell
   paddings, which sat the cards 9px in and shifted them off-centre, are zero). */
html body .ulz-articles {
	margin: 0;
}

html body .ulz-articles .ulz-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lcr-web-grid-gap-phone);
	margin: 0;
}

html body .ulz-articles .ulz--cell {
	flex: none;
	width: auto;
	max-width: none;
	padding: 0;
	margin: 0;
}

html body .ulz-articles .ulz--item {
	margin: 0;
}

html body .ulz-articles .ulz--item .ulz--image {
	display: block;
	border-radius: var(--lcr-radius-tile);
	overflow: hidden;
}

/* An article without an image: the panel gray (Heilz printed `#ccc` inline). */
html body .ulz-articles .ulz--item .ulz--img {
	background-color: var(--lcr-color-panel);
	background-position: center;
	background-size: cover;
}

html body .ulz-articles .ulz--item .ulz--img.lcr-image {
	background-image: var(--lcr-image);
}

html body .ulz-articles .ulz--item .ulz--category {
	display: inline-block;
	padding: var(--lcr-space-4) var(--lcr-space-10);
	border: var(--lcr-size-hairline) solid var(--lcr-color-chip-outline);
	border-radius: var(--lcr-radius-pill);
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-caption-font-size);
	text-decoration: none;
}

html body .ulz-articles .ulz--item .ulz--date {
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-meta-font-size);
}

html body .ulz-articles .ulz--item .ulz--title {
	margin: var(--lcr-space-8) 0 0;
	font-size: var(--lcr-type-title-font-size);
	font-weight: var(--lcr-type-title-font-weight);
	letter-spacing: var(--lcr-type-title-letter-spacing);
	line-height: var(--lcr-type-title-line-height);
}

html body .ulz-articles .ulz--item .ulz--title a {
	color: var(--lcr-color-ink);
	text-decoration: none;
}

/* ------------------------------------------------------------------------------------------- tablet and up */

@media (min-width: 768px) {

	html body .ulz-articles .ulz-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lcr-web-grid-gap-desktop);
	}

	html body .lcr-home .lcr-home-display {
		font-size: var(--lcr-web-type-display-font-size);
		font-weight: var(--lcr-web-type-display-font-weight);
		letter-spacing: var(--lcr-web-type-display-letter-spacing);
		line-height: var(--lcr-web-type-display-line-height);
	}

	html body .lcr-home :is(.lcr-home-tagline, .lcr-home-sub) {
		font-size: var(--lcr-web-type-body-large-font-size);
		line-height: var(--lcr-web-type-body-large-line-height);
	}

	html body .lcr-home .lcr-home-title {
		font-size: var(--lcr-web-type-headline-font-size);
		font-weight: var(--lcr-web-type-headline-font-weight);
		letter-spacing: var(--lcr-web-type-headline-letter-spacing);
		line-height: var(--lcr-web-type-headline-line-height);
	}
}

/* ------------------------------------------------------------------------------------------- desktop */

@media (min-width: 1200px) {

	html body .lcr-home .lcr-home-row {
		max-width: calc(var(--lcr-web-container-content) + 2 * var(--lcr-web-gutter-tablet));
		padding-left: var(--lcr-web-gutter-tablet);
		padding-right: var(--lcr-web-gutter-tablet);
	}

	html body .ulz-articles .ulz-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	html body .lcr-home .lcr-home-section {
		margin-top: calc(1.5 * var(--lcr-web-section-gap-desktop));
	}

	html body .lcr-home .lcr-home-hero + .lcr-home-section {
		margin-top: var(--lcr-web-section-gap-desktop);
	}

	html body .lcr-home .lcr-home-hero {
		margin-top: var(--lcr-space-64);
	}

	html body .lcr-home .lcr-home-hero > .lcr-home-row {
		gap: var(--lcr-space-24);
	}

	html body .lcr-home .lcr-home-display {
		max-width: calc(var(--lcr-web-container-content) * 0.8);
		font-size: var(--lcr-web-type-hero-font-size);
		font-weight: var(--lcr-web-type-hero-font-weight);
		letter-spacing: var(--lcr-web-type-hero-letter-spacing);
		line-height: var(--lcr-web-type-hero-line-height);
	}

	html body .lcr-home .lcr-home-heading {
		margin-bottom: var(--lcr-space-48);
	}

	html body .lcr-home .lcr-home-title {
		font-size: var(--lcr-web-type-display-font-size);
		font-weight: var(--lcr-web-type-display-font-weight);
		letter-spacing: var(--lcr-web-type-display-letter-spacing);
		line-height: var(--lcr-web-type-display-line-height);
	}

	html body .lcr-home .lcr-home-countries {
		font-size: var(--lcr-web-type-body-font-size);
		line-height: var(--lcr-web-type-body-line-height);
	}

	html body .lcr-home .lcr-home-showcase {
		margin-top: var(--lcr-space-48);
	}

	html body .lcr-home .lcr-home-more {
		margin-top: var(--lcr-space-48);
	}
}