/*
 * CILI: the site's frame follows the app (roadmap F10, ADR-0023 D2 to D7): the desktop header, the mobile header,
 * the bottom bar, the mobile menu and the footer.
 *
 * From the desktop breakpoint up the frame follows the reference image (docs/design/reference/, a guide, never
 * copied): a white header with the logo, a centred navigation and a near-black pill call to action, and a near-black
 * footer. Below it, the approved mockups (ADR-0018): the app's header with its wordmark and round icon buttons, and
 * its white navigation bar with a divider above it. Grayscale only, colour only from content (Q48); every value is
 * a design token (design-tokens.css, generated from docs/design/tokens.json; ./scripts/verify.sh refuses one written
 * by hand). The markup is Heilz's, through the child templates of templates/header/ and templates/mobile/; the
 * footer is Heilz's footer.php, by CSS only (D4).
 *
 * Every rule starts with `html body`, as design.css does, so it wins a tie with a vendor rule whatever the order;
 * `!important` answers only a vendor `!important` or an inline style a vendor script writes, and its comment names
 * which. @media widths are the web breakpoints: min-width 1200px, max-width 1199.98px, as Heilz's own `lg`.
 */

/*
 * ------------------------------------------------------------------------------------------- focus (D7, WCAG 2.4.7)
 * Heilz's own style.css removes every outline (`*, ::before, ::after { outline: 0 !important }`), so no control of
 * the site showed where the keyboard is (WEB-605); only `!important` answers it. This sheet loads on every page, so
 * every element the keyboard reaches, on every page (the frame, the restyled pages, the account, the submission form,
 * the modals), gets the ring of the focus tokens, in ink (WEB-622).
 *
 * Every element keeps the ring's width, colour and offset at all times, with no style: when the keyboard arrives only
 * the style turns on, which no transition animates, so the vendors' `transition: all` and `.3s` (links, Utillz's and
 * WooCommerce's buttons, whatever their selectors) have nothing to grow from nothing. On the near-black surfaces the
 * ring is white, so it keeps its contrast with the ground around it (1.4.11): the footer's ink body (its light panel
 * keeps the ink ring, Q111) and the account dashboard's
 * cover, which Heilz paints near-black (or covers with the member's image) outside the artist's /u/ page. The sign-in
 * modal is white since the owner's request of 2026-10-14 (the app's screen), so it keeps the ink ring. Where a rounded clip
 * would cut the ring off, the card's and the gallery's own sheets draw it elsewhere (layout-cards.css,
 * layout-artwork.css).
 */

html body * {
	outline-width: var(--lcr-web-focus-ring) !important; /* Heilz's style.css: `outline: 0 !important` */
	outline-color: var(--lcr-color-focus) !important; /* the same rule; the focus role is the ink, and the stage's inside a stage (layout-mode.css) */
	outline-offset: var(--lcr-web-focus-offset);
}

html body :focus-visible {
	outline-style: solid !important; /* the same rule */
}

html body .ulz-footer :is(.lcr-footer-main, .lcr-footer-bottom) *,
html body:not(.author) .ulz-author-cover .ulz--cover * {
	outline-color: var(--lcr-color-on-ink) !important; /* the ring's colour above */
}

/* A modal's close sits in its corner, inside the modal's clip (Utillz's `.ulz-modal { overflow: hidden }`), which
   would cut its ring off: the ring is drawn inside the button, at all times so no transition slides it in. */
html body .ulz-modal .ulz-close {
	outline-offset: calc(-2 * var(--lcr-web-focus-ring));
}

/* The line icons (lcr_icon()) take the text's colour and the icon size. */
html body :is(.ulz-header, .ulz-mobile-header, .ulz-mobile-bar, .ulz-mobile-nav) .lcr-icon {
	width: var(--lcr-size-icon);
	height: var(--lcr-size-icon);
	flex: none;
}

/*
 * Utillz's search form, in the header and the mobile search (the module's own markup, which no override reaches):
 * its icon-font glyphs give way, as ADR-0023 D4 says, to the line icons' SVG files as masks, or to shapes of the
 * tokens where the line icons have no glyph (the tab's chevron, the spinner).
 */
html body :is(.ulz-header, .ulz-mobile-search) .ulz-search-form .material-icons {
	font-size: 0 !important; /* Utillz core.css's `.ulz-preloader { font-size: 20px !important }`. */
}

/* The category's label is its name alone, in the header's search and the phone's: Utillz prints the field's name before it
   ("Category :") in a <strong>, which the pill has no room for and the label does not need (the owner's request of
   2026-10-12). */
html body :is(.ulz-header, .ulz-mobile-search) .ulz-search-form .ulz-tab-title strong {
	display: none;
}

/* "All", the list's first row (cili/seo-urls.js): its name starts where the other names do, after the icon they have. */
html body .ulz-search-form .lcr-radio-all > span {
	margin-left: calc(var(--lcr-space-20) + var(--lcr-space-8));
}

/* A category's icon beside its name in a search form's list (cili/seo-urls.js; the listing type's icon set in wp-admin,
   cili/type-icons.php), in the text's colour. */
html body label.ulz-radio .lcr-category-icon {
	width: var(--lcr-space-20);
	height: var(--lcr-space-20);
	margin: 0 var(--lcr-space-8) 0 0;
	vertical-align: text-bottom; /* its foot on the text's: the icon on the name's middle */
}

/* The subject field (the owner's request of 2026-10-11): its clear button centred on the text, where Utillz puts its top
   at the middle; and no ring after a click or a tap in it (cili/seo-urls.js marks that focus), while the keyboard's
   focus keeps the ring (WCAG 2.4.7, WEB-622). */
html body :is(.ulz-header, .ulz-mobile-search) .ulz-search-form .ulz-autosuggest .ulz--clear {
	top: 50%;
	margin-top: 0;
	transform: translateY(-50%);
	line-height: 0; /* Utillz shows it only once something is typed or chosen (`.ulz--typed`, `.ulz--selected`) */
}

html body .ulz-search-form .ulz-autosuggest input.ulz--label.lcr-pointer-focus {
	outline-style: none !important; /* the frame's `:focus-visible` ring, for the keyboard only here */
}

html body :is(.ulz-header, .ulz-mobile-search) .ulz-search-form .ulz--clear .material-icons {
	display: inline-block;
	width: var(--lcr-size-icon);
	height: var(--lcr-size-icon);
	background-color: currentColor;
	-webkit-mask: url("../icons/close.svg") center / contain no-repeat;
	mask: url("../icons/close.svg") center / contain no-repeat;
}

html body :is(.ulz-header, .ulz-mobile-search) .ulz-search-form .ulz-preloader.material-icons {
	box-sizing: border-box;
	border: calc(2 * var(--lcr-size-hairline)) solid currentColor;
	border-right-color: transparent;
	border-radius: var(--lcr-radius-pill);
}

/* The tab's chevron: a square of borders turned 45 degrees, whose corners then stand out of its own box; it sits a
   step in from the tab's right edge, which clips (`overflow: hidden`), so it shows whole (the owner's report of
   2026-10-09: Utillz's `right: 0` cut its tip off). */
html body :is(.ulz-header, .ulz-mobile-search) .ulz-search-form .ulz-tab-title::after {
	content: "";
	box-sizing: border-box;
	width: var(--lcr-space-8);
	height: var(--lcr-space-8);
	right: var(--lcr-space-4);
	margin-top: calc(-1 * var(--lcr-space-6));
	border-right: calc(2 * var(--lcr-size-hairline)) solid currentColor;
	border-bottom: calc(2 * var(--lcr-size-hairline)) solid currentColor;
	transform: rotate(45deg);
	font-size: 0;
}

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

@media (min-width: 1200px) {

	/* The fixed header's height, under it the page; the fixed header never hides a focused element (2.4.11). */
	html {
		scroll-padding-top: var(--lcr-web-header-height-desktop);
	}

	html body,
	html body.ulz--header-overlap {
		padding-top: var(--lcr-web-header-height-desktop);
	}

	/* White, always: Heilz makes it transparent over the Elementor home (`.ulz--header-white:not(.ulz--is-sticky)`). */
	html body .ulz-header,
	html body.ulz--header-white:not(.ulz--is-sticky):not(.ulz--megamenu-open) .ulz-header {
		background-color: var(--lcr-color-background);
		color: var(--lcr-color-ink);
		box-shadow: inset 0 calc(-1 * var(--lcr-size-hairline)) 0 var(--lcr-color-divider);
	}

	/* The white logo is for Heilz's transparent header only (its `opacity: 1 !important` over the home): not shown. */
	html body .ulz-header .ulz--white {
		display: none;
	}

	/* The page's one edge (ADR-0023, lane R2): the header's content starts where the pages' rows do, Heilz's `--row`
	   inside the tablet gutter (60px at 1440), the same as the footer's and the home's, the artwork's and the
	   artist's rows. */
	html body .ulz-header > .ulz-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-header .ulz-header-container {
		min-height: var(--lcr-web-header-height-desktop);
		margin-left: 0;
		margin-right: 0;
		gap: var(--lcr-space-24);
	}

	html body .ulz-header .ulz-header-container > * {
		padding-left: 0;
		padding-right: 0;
	}

	/* The logo has one size everywhere, the site's and the app's (the owner's request of 2026-10-14): 32 high, its width
	   its own (`space.32`, the scale the app sizes its logo with). */
	html body .ulz-header .ulz-site-logo img {
		width: auto;
		height: var(--lcr-space-32);
		max-height: none;
		margin-top: 0;
		margin-bottom: 0;
	}

	/* The navigation in the middle, the label type; the menu "primary" is empty today (WEB-601). */
	html body .ulz-header .ulz-site-nav {
		flex: 1 1 auto;
		align-items: center;
		margin-right: 0;
	}

	html body .ulz-header .ulz-nav > ul > li > a {
		padding: var(--lcr-space-8) var(--lcr-space-12);
		font-size: var(--lcr-web-type-label-font-size);
		font-weight: var(--lcr-web-type-label-font-weight);
		line-height: var(--lcr-web-type-label-line-height);
		color: var(--lcr-color-ink);
	}

	/* The site's search: one field of the fill gray, a pill, as the app's search field (`size.field`), which holds its
	   button, a pill of the buttons' one height, `size.control` (WEB-652). */
	html body .ulz-header .ulz-site-search {
		flex: 0 1 var(--lcr-web-container-text);
		min-width: 0;
	}

	html body .ulz-header .ulz-search-form .ulz--form {
		display: flex;
		align-items: center;
		gap: var(--lcr-space-8);
		min-height: var(--lcr-size-field);
		padding: 0 var(--lcr-space-4) 0 var(--lcr-space-16);
		background-color: var(--lcr-color-fill);
		border-radius: var(--lcr-radius-pill);
	}

	html body .ulz-header .ulz-search-form .ulz-search-mods {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The tab's "Select" and the subject's text and placeholder at the body's type, the site's standard size (the owner's
	   request of 2026-10-11; the small type read too small). */
	html body .ulz-header .ulz-search-form :is(input[type="text"], .ulz-tab-title) {
		background-color: transparent;
		box-shadow: none;
		font-size: var(--lcr-web-type-body-font-size);
		color: var(--lcr-color-ink);
	}

	html body .ulz-header .ulz-search-form .ulz-heading {
		display: none;
	}

	/* The category's label as bold as the phone's pill has it (the owner's request of 2026-10-12: one design at both widths). */
	html body .ulz-header .ulz-search-form .ulz-tab-title {
		font-weight: var(--lcr-font-weight-semibold);
	}

	/* UtillzEnhance's 7px around the button would make the field taller than `size.field`. */
	html body .ulz-header .ulz-search .ulz-search-form .ulz-search-submit {
		padding: 0;
	}

	/* Against theme.css's `.ulz-primary-search:not(.ulz-mobile-search) .ulz-search-form .ulz-search-submit .ulz-button`
	   (five classes), which made it a 35px rectangle with 5px corners. */
	html body .ulz-header .ulz-search.ulz-primary-search .ulz-search-form .ulz-search-submit .ulz-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: var(--lcr-size-control);
		padding: 0 var(--lcr-space-20);
		border-radius: var(--lcr-radius-pill);
		background-color: var(--lcr-color-ink);
		color: var(--lcr-color-on-ink);
		font-size: var(--lcr-web-type-small-font-size);
		font-weight: var(--lcr-font-weight-semibold);
		line-height: var(--lcr-web-type-label-line-height);
	}

	/* The actions: round icon buttons of the fill gray (ADR-0018 D3), the member's avatar and name. */
	html body .ulz-header .ulz-site-actions {
		align-items: center;
		gap: var(--lcr-space-8);
		margin: 0;
	}

	html body .ulz-header .ulz-site-actions > * {
		margin: 0;
	}

	html body .ulz-header .ulz-site-icon {
		flex: none;
	}

	html body .ulz-header .ulz-site-icon .ulz--icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--lcr-size-control);
		min-width: var(--lcr-size-control);
		height: var(--lcr-size-control);
		padding: 0;
		border-radius: var(--lcr-radius-pill);
		background-color: var(--lcr-color-fill);
		color: var(--lcr-color-ink);
	}

	html body .ulz-header .ulz-site-icon.ulz--active .ulz--icon {
		width: auto;
		padding: 0 var(--lcr-space-12);
		background-color: var(--lcr-color-ink);
		color: var(--lcr-color-on-ink);
		font-size: var(--lcr-type-meta-font-size);
		font-weight: var(--lcr-font-weight-semibold);
		border-radius: var(--lcr-radius-pill);
	}

	html body .ulz-header .ulz-site-icon img {
		width: var(--lcr-size-avatar-card);
		height: var(--lcr-size-avatar-card);
	}

	html body .ulz-header .ulz-site-icon .ulz--text {
		margin-left: var(--lcr-space-8);
		font-size: var(--lcr-web-type-label-font-size);
		font-weight: var(--lcr-web-type-label-font-weight);
	}

	/* A visitor's "Sign in": the outlined secondary pill, its person icon inside. */
	html body .ulz-header .ulz-site-user a[data-modal="signin"] {
		min-height: var(--lcr-size-control);
		padding: 0 var(--lcr-space-16) 0 var(--lcr-space-8);
		border-radius: var(--lcr-radius-pill);
		box-shadow: inset 0 0 0 var(--lcr-size-hairline) var(--lcr-color-outline);
	}

	html body .ulz-header .ulz-site-user a[data-modal="signin"] .ulz--icon {
		width: var(--lcr-size-icon);
		min-width: var(--lcr-size-icon);
		height: var(--lcr-size-icon);
		background-color: transparent;
	}

	html body .ulz-header .ulz-site-user a[data-modal="signin"] .ulz--text {
		margin-left: var(--lcr-space-6);
	}

	/* The user menu: a white panel with the divider's edge, no elevation (ADR-0018 D3). */
	html body .ulz-header .ulz-upanel {
		margin-top: var(--lcr-space-8);
		background-color: var(--lcr-color-background);
		color: var(--lcr-color-ink);
		border-radius: var(--lcr-radius-panel);
		box-shadow: inset 0 0 0 var(--lcr-size-hairline) var(--lcr-color-divider);
		font-size: var(--lcr-web-type-label-font-size);
	}

	/* Each item is a pill inside the panel's padding, so its hover never reaches the panel's rounded corners (the hover
	   of the first and the last item used to be a rectangle whose corners showed over them, WEB-653). */
	html body .ulz-header .ulz-upanel ul {
		padding: var(--lcr-space-8);
	}

	html body .ulz-header .ulz-upanel a {
		gap: var(--lcr-space-12);
		padding: var(--lcr-space-10) var(--lcr-space-12);
		border-radius: var(--lcr-radius-pill);
		font-weight: var(--lcr-web-type-label-font-weight);
		color: var(--lcr-color-ink);
	}

	html body .ulz-header .ulz-upanel li:hover a {
		background-color: var(--lcr-color-fill);
		color: var(--lcr-color-ink);
	}

	html body .ulz-header .ulz-upanel li.ulz--separator::after {
		height: var(--lcr-size-hairline);
		margin: var(--lcr-space-8) 0;
		background-color: var(--lcr-color-divider);
	}

	/* The call to action: the near-black primary pill (against theme.css's `.ulz-header .ulz-site-header .ulz-site-cta .ulz-button`). */
	html body .ulz-header .ulz-site-header .ulz-site-cta .ulz-button {
		display: inline-flex;
		align-items: center;
		min-height: var(--lcr-size-control);
		padding: 0 var(--lcr-space-20);
		border-radius: var(--lcr-radius-pill);
		background-color: var(--lcr-color-ink);
		color: var(--lcr-color-on-ink);
		box-shadow: none;
		font-size: var(--lcr-web-type-label-font-size);
		font-weight: var(--lcr-font-weight-semibold);
		line-height: var(--lcr-web-type-label-line-height);
	}

	html body .ulz-header .ulz-site-header .ulz-site-cta .ulz-button span {
		margin: 0;
		line-height: inherit;
	}
}

/* ------------------------------------------------------------------------------------------- phone and tablet */

@media (max-width: 1199.98px) {

	/*
	 * The phone header, dribbble.com's (the owner's request of 2026-10-12, WEB-666): the menu button, the wordmark, and on
	 * the right the search on its round gray button, as the desktop's, then a member's bell and avatar or a visitor's
	 * "Sign in" pill; white, the divider under it, sticky.
	 */
	html body .ulz-mobile-header,
	html body.ulz--header-overlap .ulz-mobile-header,
	html body.ulz-mobile-search--visible .ulz-mobile-header {
		position: sticky;
		top: 0;
		min-height: var(--lcr-web-header-height-phone);
		padding: 0 var(--lcr-web-gutter-phone);
		background-color: var(--lcr-color-background);
		color: var(--lcr-color-ink);
		box-shadow: inset 0 calc(-1 * var(--lcr-size-hairline)) 0 var(--lcr-color-divider);
		line-height: var(--lcr-type-wordmark-line-height);
		z-index: 110;
	}

	html body .ulz-mobile-header > * {
		padding: 0;
	}

	/*
	 * The menu button, first, before the wordmark: a bare icon in a box as large as the round buttons, so its target is
	 * theirs. The icon, not the box, starts on the page's margin, as the content below it, so the box reaches into the
	 * gutter by what it has around the icon; the wordmark follows at `space.8`. The open menu turns the bars into the X: both
	 * icons stand in the same place and trade, the bars turning away and thinning out while the X turns in and comes up, and
	 * the other way round when it closes.
	 */
	html body .ulz-mobile-header .lcr-mobile-menu {
		flex: none;
		margin: 0 var(--lcr-space-8) 0 calc((var(--lcr-size-icon) - var(--lcr-size-icon-button)) / 2);
	}

	html body .ulz-mobile-header .lcr-mobile-menu a {
		display: grid;
		place-items: center;
		width: var(--lcr-size-icon-button);
		height: var(--lcr-size-icon-button);
		padding: 0;
		color: var(--lcr-color-ink);
		text-decoration: none;
	}

	html body .ulz-mobile-header .lcr-mobile-menu .lcr-icon {
		grid-area: 1 / 1;
		transition:
			transform var(--lcr-motion-duration-medium) var(--lcr-motion-easing-standard),
			opacity var(--lcr-motion-duration-short) var(--lcr-motion-easing-standard);
	}

	html body .ulz-mobile-header .lcr-mobile-menu .lcr-icon--close {
		opacity: 0;
		transform: rotate(-90deg) scale(0.5);
		stroke-width: 3; /* as heavy as the bars, whose solid shapes are 3 of the icon's 24 points thick */
	}

	html body.ulz-do-mobile-nav:not([data-lcr-menu="account"]) .ulz-mobile-header .lcr-mobile-menu .lcr-icon--menu-sort {
		opacity: 0;
		transform: rotate(90deg) scale(0.5);
	}

	html body.ulz-do-mobile-nav:not([data-lcr-menu="account"]) .ulz-mobile-header .lcr-mobile-menu .lcr-icon--close {
		opacity: 1;
		transform: none;
	}

	html body .ulz-mobile-header .ulz--site-name {
		flex: 0 1 auto;
		min-width: 0;
		font-size: var(--lcr-type-wordmark-font-size);
		font-weight: var(--lcr-type-wordmark-font-weight);
		letter-spacing: var(--lcr-type-wordmark-letter-spacing);
	}

	/* The logo, the desktop header's (the owner's request of 2026-10-09), at the one size the logo has everywhere, 32 high
	   (`space.32`, the owner's request of 2026-10-14; against theme.css's 45px and its 10px margin). On a phone too narrow
	   for it and the actions, its box gives way first and the wordmark is drawn smaller inside it, never stretched. */
	html body .ulz-mobile-header .ulz--site-name img {
		display: block;
		width: auto;
		max-width: 100%;
		height: var(--lcr-space-32);
		max-height: none;
		margin: 0;
		object-fit: contain;
		object-position: left center;
	}

	/* Search, the bell and the avatar, or search and the visitor's pill: on the right, the room the logo leaves. */
	html body .ulz-mobile-header .lcr-mobile-actions {
		display: flex;
		flex: none;
		align-items: center;
		gap: var(--lcr-space-4);
		margin-left: auto;
		padding-left: var(--lcr-space-12);
	}

	/* The round icon buttons, search, the bell and the avatar: the fill gray, as the desktop header's (the owner's request of
	   2026-10-12), in the round buttons' 44-pixel target. */
	html body .ulz-mobile-header .ulz--site-search a,
	html body.ulz--header-overlap .ulz-mobile-header .ulz--site-search a,
	html body.ulz-mobile-search--visible .ulz-mobile-header .ulz--site-search a,
	html body .ulz-mobile-header .ulz-site-notifications .ulz-site-icon,
	html body .ulz-mobile-header .lcr-mobile-avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--lcr-size-icon-button);
		height: var(--lcr-size-icon-button);
		padding: 0;
		border-radius: var(--lcr-radius-pill);
		background-color: var(--lcr-color-fill);
		color: var(--lcr-color-ink);
		overflow: hidden;
		text-decoration: none;
	}

	/* The link is the target; theme.css's 30px gray pill around the icon (and its 7px box around the number) goes. */
	html body .ulz-mobile-header .ulz-site-notifications .ulz-site-icon .ulz--icon {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		height: auto;
		padding: 0;
		border-radius: 0;
		background-color: transparent;
		color: inherit;
		line-height: inherit;
	}

	/* Unread notifications: their number on ink, as the desktop bell. */
	html body .ulz-mobile-header .ulz-site-notifications .ulz-site-icon.ulz--active {
		background-color: var(--lcr-color-ink);
		color: var(--lcr-color-on-ink);
		font-size: var(--lcr-type-meta-font-size);
		font-weight: var(--lcr-font-weight-semibold);
	}

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

	/* A visitor's "Sign in": the ink pill, as the desktop header's call to action. */
	html body .ulz-mobile-header .lcr-mobile-signin {
		display: inline-flex;
		align-items: center;
		min-height: var(--lcr-size-control);
		margin-left: var(--lcr-space-4);
		padding: 0 var(--lcr-space-20);
		border-radius: var(--lcr-radius-pill);
		background-color: var(--lcr-color-ink);
		color: var(--lcr-color-on-ink);
		font-size: var(--lcr-type-label-font-size);
		font-weight: var(--lcr-type-label-font-weight);
		line-height: var(--lcr-type-label-line-height);
		text-decoration: none;
		white-space: nowrap;
	}

	/* "Search" stays the button's name for screen readers, as the app's icon buttons are named. */
	html body .ulz-mobile-header .ulz--site-search span {
		position: absolute;
		width: var(--lcr-size-hairline);
		height: var(--lcr-size-hairline);
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	html body .ulz-mobile-search,
	html body.ulz--header-overlap .ulz-mobile-search {
		padding: var(--lcr-space-12) var(--lcr-web-gutter-phone) var(--lcr-space-16);
		background-color: var(--lcr-color-background);
		box-shadow: inset 0 calc(-1 * var(--lcr-size-hairline)) 0 var(--lcr-color-divider);
	}

	/*
	 * The search form under the header, dribbble.com's bar (the owner's request of 2026-10-12, WEB-668): one pill of the fill
	 * gray, as the desktop header's (`size.field`), with the subject's text first, the category after it as a bold label
	 * with its chevron, and the search as a round ink button with the line icon, at the pill's right end. Utillz's markup
	 * (the module's own, which no override reaches) is only laid out again: the mods in a row, the headings and the
	 * boxes' borders gone, the button's word kept for screen readers.
	 */
	html body .ulz-mobile-search .ulz-search-form .ulz--form {
		display: flex;
		flex-wrap: nowrap; /* Utillz wraps the button under the mods */
		align-items: center;
		gap: var(--lcr-space-8);
		min-height: var(--lcr-size-field);
		padding: var(--lcr-space-4) var(--lcr-space-4) var(--lcr-space-4) var(--lcr-space-16);
		background-color: var(--lcr-color-fill);
		border-radius: var(--lcr-radius-pill);
	}

	html body .ulz-mobile-search .ulz-search-form .ulz-search-mods {
		display: flex;
		flex: 1 1 auto;
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--lcr-space-8);
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		background-color: transparent;
	}

	html body .ulz-mobile-search .ulz-search-form .ulz-search-mods > .ulz-mod {
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
		border: 0;
		background-color: transparent;
	}

	html body .ulz-mobile-search .ulz-search-form .ulz-search-mods > .ulz-mod[data-type="autosuggest"] {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
	}

	html body .ulz-mobile-search .ulz-search-form .ulz-search-mods > .ulz-mod[data-type="tab"] {
		order: 2;
		flex: none;
	}

	html body .ulz-mobile-search .ulz-search-form .ulz-heading {
		display: none;
	}

	html body .ulz-mobile-search .ulz-search-form .ulz-form-group {
		margin: 0;
		padding: 0;
		border: 0;
		background-color: transparent;
	}

	html body .ulz-mobile-search .ulz-search-form :is(input[type="text"], .ulz-tab-title) {
		min-height: var(--lcr-size-control);
		padding-top: 0;
		padding-bottom: 0;
		border: 0;
		background-color: transparent;
		box-shadow: none;
		font-size: var(--lcr-web-type-body-font-size);
		color: var(--lcr-color-ink);
	}

	/* Against theme.css's `.ulz-search .ulz-search-form .ulz-search-mods > .ulz-mod > .ulz-form-group > .ulz-autosuggest
	   input { padding: 0 21px !important }`, whose 21px on the left made room for an icon the pill does not have (the
	   right keeps room for the clear button); a long placeholder ends in an ellipsis. */
	html body .ulz-mobile-search .ulz-search-form .ulz-search-mods > .ulz-mod > .ulz-form-group > .ulz-autosuggest input.ulz--label {
		height: var(--lcr-size-control); /* theme.css's 51px under 768px */
		padding: 0 var(--lcr-space-24) 0 0 !important;
		text-overflow: ellipsis;
	}

	html body .ulz-mobile-search .ulz-search-form .ulz-filter-tab .ulz-tab-title {
		display: flex;
		align-items: center;
		width: auto;
		height: var(--lcr-size-control); /* theme.css's 51px and line-height under 768px */
		line-height: var(--lcr-size-control);
		margin-right: 0; /* theme.css's 17px under 768px */
		padding: 0 var(--lcr-space-24) 0 0 !important; /* against theme.css's `padding: 0 10px 0 8px !important` under 1280px */
		font-weight: var(--lcr-font-weight-semibold);
		white-space: nowrap;
	}

	/* The chevron a step in from the label's end, against theme.css's `right: 0 !important` under 1280px. */
	html body .ulz-mobile-search .ulz-search-form .ulz-filter-tab .ulz-tab-title::after {
		right: var(--lcr-space-6) !important;
	}

	html body .ulz-mobile-search .ulz-search-form .ulz-tab-title span {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	html body .ulz-mobile-search .ulz-search-form .ulz-search-mods > .ulz-mod[data-type="tab"] {
		max-width: 55%;
	}

	html body .ulz-mobile-search .ulz-search-form .ulz-search-submit {
		flex: none;
		margin: 0;
		padding: 0;
	}

	html body .ulz-mobile-search .ulz-search-form .ulz-search-submit .ulz-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--lcr-size-control);
		min-width: 0;
		height: var(--lcr-size-control);
		min-height: 0;
		margin: 0;
		padding: 0;
		border-radius: var(--lcr-radius-pill);
		background-color: var(--lcr-color-ink);
		color: var(--lcr-color-on-ink);
		font-size: 0; /* "Search" stays in the markup, for screen readers; the icon is the pill's */
	}

	html body .ulz-mobile-search .ulz-search-form .ulz-search-submit .ulz-button::before {
		content: "";
		width: var(--lcr-size-icon);
		height: var(--lcr-size-icon);
		background-color: currentColor;
		-webkit-mask: url("../icons/search.svg") center / contain no-repeat;
		mask: url("../icons/search.svg") center / contain no-repeat;
	}

	/* The app's navigation bar: white, the divider above it, ink icons and caption labels (ADR-0018 D1). */
	html body .ulz-mobile-bar {
		height: calc(var(--lcr-web-header-height-phone) + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background-color: var(--lcr-color-background);
		box-shadow: inset 0 var(--lcr-size-hairline) 0 var(--lcr-color-divider);
	}

	html body .ulz-mobile-bar .ulz--background {
		display: none;
	}

	html body .ulz-mobile-bar ul {
		padding: 0 var(--lcr-space-12);
		margin: 0;
		gap: var(--lcr-space-4);
	}

	html body .ulz-mobile-bar li {
		margin: 0;
	}

	html body .ulz-mobile-bar a {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--lcr-space-4);
		color: var(--lcr-color-ink);
	}

	html body .ulz-mobile-bar span {
		font-size: var(--lcr-type-caption-font-size);
		font-weight: var(--lcr-font-weight-semibold);
		line-height: var(--lcr-type-caption-line-height);
	}

	/*
	 * The mobile menu, dribbble.com's: a white panel under the header, which stays, over a scrim that dims the page.
	 * Heilz's mobile.js slides the root in from `visibility: hidden` with an inline style (TweenMax), so a11y.js's focus,
	 * given while it is still hidden, does not land (WEB-603): the root is visible from the moment the menu opens, against
	 * that inline style, and hidden again once the panel has gone out; its inline transform is answered too, since the
	 * panel and the scrim are what move. The root's box starts under the header and clips the panel, which comes down from
	 * under the header's edge. Above the artwork's "Send message" bar (z-index 119), under the modals and the
	 * notifications panel it opens.
	 *
	 * What moves is animated, not transitioned: TweenMax measures the fixed root by taking it out of the page and putting it
	 * back (its offsetParent is null), and an element put back has no style to change from, so a transition inside it never
	 * starts and the panel and the scrim jumped. An animation needs no previous style. The closing ones wait for the first
	 * use of the menu (`lcr-menu-used`, assets/js/mobile-menu.js), or they would play when the page loads. The root's
	 * `visibility` is animated too, visible until the end, because a `!important` hidden would cut the panel's way out short;
	 * an animation beats the vendor's inline style, and not an `!important` one, which only the open state needs.
	 */
	html body .ulz-mobile-nav {
		top: var(--lcr-web-header-height-phone);
		display: block;
		overflow: hidden;
		background-color: transparent;
		color: var(--lcr-color-ink);
		transform: none !important;
	}

	html body.ulz-do-mobile-nav .ulz-mobile-nav {
		visibility: visible !important;
	}

	html body.lcr-menu-used:not(.ulz-do-mobile-nav) .ulz-mobile-nav {
		animation: lcr-nav-hide var(--lcr-motion-duration-medium) linear both;
	}

	@keyframes lcr-nav-hide {
		from { visibility: visible; }
		to { visibility: hidden; }
	}

	/* An administrator's WordPress toolbar (`body.admin-bar`, z-index 99999) covers the top of the page: the header sits
	   under it, and so does the panel, at the height WordPress gives it (`--wp-admin--admin-bar--height`). */
	html body.admin-bar .ulz-mobile-nav {
		top: calc(var(--wp-admin--admin-bar--height) + var(--lcr-web-header-height-phone));
	}

	html body .ulz-mobile-nav .lcr-mobile-scrim {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: var(--lcr-color-scrim); /* the barrier behind the menu: a heavier veil on the dark ground */
		opacity: 0;
	}

	html body.ulz-do-mobile-nav .ulz-mobile-nav .lcr-mobile-scrim {
		opacity: 1;
		animation: lcr-scrim-in var(--lcr-motion-duration-medium) var(--lcr-motion-easing-standard) both;
	}

	html body.lcr-menu-used:not(.ulz-do-mobile-nav) .ulz-mobile-nav .lcr-mobile-scrim {
		animation: lcr-scrim-out var(--lcr-motion-duration-medium) var(--lcr-motion-easing-standard) both;
	}

	@keyframes lcr-scrim-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	@keyframes lcr-scrim-out {
		from { opacity: 1; }
		to { opacity: 0; }
	}

	/* One panel at a time, the one of the button that opened the menu (assets/js/mobile-menu.js): the site's, unless the
	   avatar's asks for the account's. */
	html body .ulz-mobile-nav .lcr-mobile-panel {
		display: none;
	}

	html body:not([data-lcr-menu="account"]) .ulz-mobile-nav .lcr-mobile-panel[data-lcr-panel="site"],
	html body[data-lcr-menu="account"] .ulz-mobile-nav .lcr-mobile-panel[data-lcr-panel="account"] {
		display: block;
	}

	html body .ulz-mobile-nav .lcr-mobile-panel {
		position: relative;
		max-height: 100%;
		padding: var(--lcr-space-8) 0 calc(var(--lcr-space-16) + env(safe-area-inset-bottom));
		background-color: var(--lcr-color-background);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateY(-100%);
	}

	html body.ulz-do-mobile-nav .ulz-mobile-nav .lcr-mobile-panel {
		transform: translateY(0);
		animation: lcr-panel-down var(--lcr-motion-duration-medium) var(--lcr-motion-easing-standard) both;
	}

	html body.lcr-menu-used:not(.ulz-do-mobile-nav) .ulz-mobile-nav .lcr-mobile-panel {
		animation: lcr-panel-up var(--lcr-motion-duration-medium) var(--lcr-motion-easing-standard) both;
	}

	@keyframes lcr-panel-down {
		from { transform: translateY(-100%); }
		to { transform: translateY(0); }
	}

	@keyframes lcr-panel-up {
		from { transform: translateY(0); }
		to { transform: translateY(-100%); }
	}

	/*
	 * The panel never fades: it slides down from, and back up under, the header's edge, white with its text the whole way,
	 * so nothing is left floating over the page once its background is gone. Only its rows come in, a little after it starts
	 * and from just above their place (an animation, so it plays on opening and never on the way out).
	 */
	html body.ulz-do-mobile-nav .ulz-mobile-nav .lcr-mobile-panel > * {
		animation: lcr-panel-in var(--lcr-motion-duration-medium) var(--lcr-motion-easing-standard) calc(var(--lcr-motion-duration-short) / 2) backwards;
	}

	@keyframes lcr-panel-in {
		from {
			opacity: 0;
			transform: translateY(calc(-1 * var(--lcr-space-8)));
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	html body .ulz-mobile-nav .ulz-nav-mobile a {
		padding: var(--lcr-space-12) var(--lcr-web-gutter-phone);
		font-size: var(--lcr-web-type-title-font-size);
		font-weight: var(--lcr-web-type-title-font-weight);
		letter-spacing: var(--lcr-web-type-title-letter-spacing);
		color: var(--lcr-color-ink);
	}

	/* The site's links (templates/mobile/navigation.php): the footer's columns, a small heading and rows of large bold
	   type, as dribbble.com's. */
	html body .ulz-mobile-nav .lcr-mobile-links ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	html body .ulz-mobile-nav .lcr-mobile-links li {
		margin: 0;
	}

	html body .ulz-mobile-nav .lcr-mobile-links-heading {
		margin: 0;
		padding: var(--lcr-space-16) var(--lcr-web-gutter-phone) var(--lcr-space-4);
		color: var(--lcr-color-muted);
		font-size: var(--lcr-type-caption-font-size);
		font-weight: var(--lcr-type-caption-font-weight);
		line-height: var(--lcr-type-caption-line-height);
		letter-spacing: var(--lcr-type-caption-letter-spacing);
	}

	html body .ulz-mobile-nav .lcr-mobile-links a,
	html body .ulz-mobile-nav .lcr-mobile-account a {
		display: flex;
		align-items: center;
		gap: var(--lcr-space-12);
		padding: var(--lcr-space-12) var(--lcr-web-gutter-phone);
		color: var(--lcr-color-ink);
		font-size: var(--lcr-web-type-title-font-size);
		font-weight: var(--lcr-web-type-title-font-weight);
		letter-spacing: var(--lcr-web-type-title-letter-spacing);
		line-height: var(--lcr-web-type-title-line-height);
		text-decoration: none;
	}

	/* A member's account links (templates/mobile/navigation.php), the avatar's panel: rows of the same type, each an icon
	   and its label. */
	html body .ulz-mobile-nav .lcr-mobile-account {
		margin: 0;
	}

	html body .ulz-mobile-nav .lcr-mobile-account ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	html body .ulz-mobile-nav .lcr-mobile-account li {
		margin: 0;
	}

	html body .ulz-mobile-nav .lcr-mobile-account .ulz--separator {
		height: var(--lcr-size-hairline);
		margin: var(--lcr-space-8) var(--lcr-web-gutter-phone);
		background-color: var(--lcr-color-divider);
	}

	/* "Close", for the keyboard and screen readers: the header's button is outside the dialog, which keeps the focus
	   inside it, so the panel ends with its own, unseen until it has the focus (WCAG 2.4.7). */
	html body .ulz-mobile-nav .lcr-mobile-close {
		position: absolute;
		width: var(--lcr-size-hairline);
		height: var(--lcr-size-hairline);
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	html body .ulz-mobile-nav .lcr-mobile-close:focus {
		position: static;
		display: block;
		width: auto;
		height: auto;
		padding: var(--lcr-space-12) var(--lcr-web-gutter-phone);
		clip-path: none;
		color: var(--lcr-color-ink);
		font-size: var(--lcr-web-type-title-font-size);
		font-weight: var(--lcr-web-type-title-font-weight);
		text-decoration: none;
	}
}

@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {

	/* No movement: the panel and the scrim appear and disappear in place, the rows without their entrance, and the icon
	   swaps without turning. The closed menu is hidden at once, as no animation hides it. */
	html body .ulz-mobile-header .lcr-mobile-menu .lcr-icon {
		transition: none;
	}

	html body .ulz-mobile-nav,
	html body .ulz-mobile-nav .lcr-mobile-panel,
	html body .ulz-mobile-nav .lcr-mobile-scrim,
	html body .ulz-mobile-nav .lcr-mobile-panel > * {
		animation: none !important;
	}

	html body .ulz-mobile-nav .lcr-mobile-panel {
		transform: none;
	}

	html body.lcr-menu-used:not(.ulz-do-mobile-nav) .ulz-mobile-nav {
		visibility: hidden !important;
	}

	html body:not(.ulz-do-mobile-nav) .ulz-mobile-nav {
		transition: none;
	}
}

/* ------------------------------------------------------------------------------------------- page titles */

/* The title of Explore, the search pages, the blog and the content pages: the display type (Heilz prints 70px at
   weight 700, 1440 wide), the app's at phone width. */
html body .ulz-page-title h1.ulz--title {
	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);
}

@media (min-width: 1200px) {

	html body .ulz-page-title .lcr-title-line {
		margin-bottom: var(--lcr-space-16);
	}

	/* Next to the desktop's large title, the controls' size. */
	html body .ulz-page-title .lcr-summary-toggle {
		width: var(--lcr-size-control);
		height: var(--lcr-size-control);
	}

	html body .ulz-page-title h1.ulz--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);
	}
}

/* The introduction under a title (a category's description, ADR-0031) spans the container, where Heilz caps it at 800px
   (the owner's request of 2026-10-11). */
html body .ulz-page-title .ulz--summary {
	position: relative;
	max-width: none;
	color: var(--lcr-color-muted); /* a step lighter than the title (the owner's request of 2026-10-12) */
}

/*
 * The introduction's two lines (cili/summary.php, WEB-671): the first paragraph is drawn two lines high, the browser ending
 * the second with "…"; the text is whole in the page, a line clamp only decides how many lines are drawn, never `hidden` or
 * `display: none`. Later paragraphs, if there are any, are clipped to a pixel until the arrow opens the text. The arrow, a round
 * button of the fill gray next to the title, on its line, shows only when the text is longer than that
 * (assets/js/summary-toggle.js) and turns up when the text is whole.
 */
html body .ulz-page-title .lcr-title-line {
	display: flex;
	align-items: center;
	gap: var(--lcr-space-12);
	margin-bottom: var(--lcr-space-8); /* the title's own, which moves to its line */
}

html body .ulz-page-title .lcr-title-line h1.ulz--title {
	min-width: 0;
	margin-bottom: 0;
}

html body .ulz-page-title .ulz--summary.lcr-summary:not(.lcr-summary--open) > p:first-of-type {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

html body .ulz-page-title .ulz--summary.lcr-summary:not(.lcr-summary--open) > p ~ p {
	position: absolute;
	width: var(--lcr-size-hairline);
	height: var(--lcr-size-hairline);
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

html body .ulz-page-title .lcr-summary-toggle {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--lcr-size-control-small);
	height: var(--lcr-size-control-small);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
	color: var(--lcr-color-ink);
	cursor: pointer;
}

html body .ulz-page-title .lcr-summary-toggle[hidden] {
	display: none;
}

html body .ulz-page-title .lcr-summary-toggle[aria-expanded="true"] .lcr-icon {
	transform: rotate(180deg);
}

/* The introduction's text starts where the title, the arrow and the breadcrumb do, against Heilz's 10px on the left of a
   paragraph at phone width. */
html body .ulz-page-title .ulz--summary p {
	margin-left: 0;
}

/* ------------------------------------------------------------------------------------------- footer */

/*
 * The footer (footer.php, cili/site-footer.php; the owner's request of 2026-10-10 after a reference image, Q111): one
 * rounded card on the page's own edge, as the first page's panels, on the page's white. Its top is a light panel with
 * the heading, the line, the two pills of the first page's hero and a phone that shows the newest artworks, cut off by
 * the panel's foot; its body is ink, with the white logo and LeonaCreo's social profiles under it, the link columns,
 * and the company's line under a divider. The card paints the ink and its own corners and clips nothing, so no
 * ancestor cuts a link's ring off (WEB-622); only the panel clips, for the phone. The interface stays grayscale
 * (ADR-0018): colour comes only from the artworks on the phone.
 */
/* The space between a page and its footer is the space between two blocks, the section gap (the owner's request of
   2026-10-11: on every page, the same space as between the first page's sections); the pages' own trailing spaces go,
   so this is the only one: the first page's, Utillz's "Load more", an artwork's last block, a content page's last
   paragraph, a post's last block. A post without comments keeps Heilz's empty `#comments` box, whose top margin added
   itself to the gap: it goes. */
html body .ulz-load-more,
html body .ulz-mod-listing:last-child,
html body :is(.ulz-post-content, .ulz-content, .ulz-main) .ulz-page-content,
html body :is(.ulz-page-content, .ulz-post-content) > :last-child {
	margin-bottom: 0;
}

html body .comments-area:not(:has(*)) {
	display: none;
}

/* The blog's page numbers: Heilz spaced them with a margin on every side, whose bottom stayed under the last row; the
   same spacing as a gap, between the numbers only. */
html body .ulz-paging ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lcr-space-10) var(--lcr-space-6);
}

html body .ulz-paging ul.page-numbers > li {
	margin: 0;
}

/* Utillz's "Load more" and "Nothing else to load" (templates/explore/paging.php: Explore, a category, a search, an
   artist's page): its large button, 46px at 1440, is the site's pill of the control height, the label in its middle
   (WEB-652); the spinner stays Utillz's, over the label. */
html body .ulz-load-more .ulz-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--lcr-size-control);
	padding: 0 var(--lcr-space-24);
	font-size: var(--lcr-web-type-label-font-size);
	font-weight: var(--lcr-web-type-label-font-weight);
	line-height: var(--lcr-web-type-label-line-height);
}

html body .ulz-footer {
	padding: var(--lcr-web-section-gap-phone) 0 var(--lcr-web-gutter-phone);
	background-color: var(--lcr-color-background);
	color: var(--lcr-color-ink);
	font-size: var(--lcr-web-type-small-font-size);
	line-height: var(--lcr-web-type-small-line-height);
}

/* The page's one edge: the content token (`web.container.content`, 1320, Heilz's `--row`) inside the gutter (the
   home's, the artwork's and the artist's rows are the same), so the card starts where the content does (WEB-640). */
html body .ulz-footer .ulz-row {
	max-width: calc(var(--lcr-web-container-content) + 2 * var(--lcr-web-gutter-phone));
	padding-left: var(--lcr-web-gutter-phone);
	padding-right: var(--lcr-web-gutter-phone);
}

/* The card is its two parts, each with its own flat background and its own two corners: the light panel on top, the
   ink body under it. Nothing is painted behind the panel, so no ink shows at its rounded corners (Q112). */
html body .ulz-footer .lcr-footer-body {
	border-radius: 0 0 var(--lcr-radius-hero) var(--lcr-radius-hero);
	background-color: var(--lcr-color-ink); /* the stage's inside this scope (layout-mode.css): dark in both modes */
	color: var(--lcr-color-on-ink);
}

html body .ulz-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

html body .ulz-footer li {
	margin: 0;
	padding: 0;
}

/* The light panel: the panel gray, flat, as the first page's panels (Q112), in ink. */
html body .ulz-footer .lcr-footer-promo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lcr-space-32);
	padding: var(--lcr-space-40) var(--lcr-space-24) 0;
	overflow: hidden; /* the phone's foot */
	border-radius: var(--lcr-radius-hero) var(--lcr-radius-hero) 0 0;
	background-color: var(--lcr-color-panel);
	color: var(--lcr-color-ink);
	text-align: center;
}

html body .ulz-footer .lcr-footer-promo-text {
	max-width: var(--lcr-web-container-text);
}

html body .ulz-footer .lcr-footer-title {
	margin: 0 0 var(--lcr-space-12);
	color: var(--lcr-color-ink);
	text-wrap: balance;
	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 .ulz-footer .lcr-footer-lead {
	margin: 0;
	color: var(--lcr-color-body);
	font-size: var(--lcr-web-type-body-font-size);
	line-height: var(--lcr-web-type-body-line-height);
}

/* The first page's hero pills: "Explore" in ink, "Submit Your Art" outlined. */
html body .ulz-footer .lcr-footer-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lcr-space-12);
	margin: var(--lcr-space-24) 0 0;
}

html body .ulz-footer .lcr-footer-actions .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 .ulz-footer .lcr-footer-actions .lcr-footer-primary {
	background-color: var(--lcr-color-ink);
	box-shadow: none;
	color: var(--lcr-color-on-ink);
}

html body .ulz-footer .lcr-footer-actions .lcr-footer-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 phone: an ink bezel round a white screen, which shows the site's first page in small: the status bar with its
 * island, the header with the logo and the two round buttons, the title, and the newest artworks in the hero's
 * shapes (a circle, then a tilted rounded square). The panel's foot cuts it off; the box around it says how much shows.
 */
html body .ulz-footer .lcr-footer-phone {
	flex: none;
	height: 260px;
}

html body .ulz-footer .lcr-phone {
	box-sizing: border-box;
	width: 240px;
	aspect-ratio: 9 / 19.5;
	padding: var(--lcr-space-8);
	border-radius: calc(var(--lcr-radius-hero) + var(--lcr-radius-tile));
	background-color: var(--lcr-color-stage); /* the bezel is black in both modes */
	box-shadow: 0 var(--lcr-space-24) var(--lcr-space-48) var(--lcr-color-overlay);
}

html body .ulz-footer .lcr-phone-screen {
	height: 100%;
	overflow: hidden;
	border-radius: calc(var(--lcr-radius-hero) + var(--lcr-space-8));
	background-color: var(--lcr-color-background);
	color: var(--lcr-color-ink);
	text-align: left;
}

html body .ulz-footer .lcr-phone-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--lcr-space-10) var(--lcr-space-18) var(--lcr-space-6);
}

html body .ulz-footer .lcr-phone-time {
	font-size: var(--lcr-type-caption-font-size);
	font-weight: var(--lcr-font-weight-semibold);
	line-height: var(--lcr-type-caption-line-height);
}

html body .ulz-footer .lcr-phone-island {
	width: 64px;
	height: 18px;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-stage);
}

html body .ulz-footer .lcr-phone-battery {
	width: 18px;
	height: 9px;
	border-radius: var(--lcr-radius-pill);
	box-shadow: inset 0 0 0 var(--lcr-size-hairline) var(--lcr-color-ink);
	background-image: linear-gradient(to right, var(--lcr-color-ink) 70%, transparent 70%);
	background-clip: content-box;
}

html body .ulz-footer .lcr-phone-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--lcr-space-6) var(--lcr-space-14) var(--lcr-space-8);
	box-shadow: inset 0 calc(-1 * var(--lcr-size-hairline)) 0 var(--lcr-color-divider);
}

html body .ulz-footer .lcr-phone-logo {
	display: block;
	width: auto;
	height: 16px;
}

html body .ulz-footer .lcr-phone-name {
	font-size: var(--lcr-type-label-font-size);
	font-weight: var(--lcr-font-weight-bold);
}

html body .ulz-footer .lcr-phone-buttons {
	display: flex;
	gap: var(--lcr-space-6);
}

html body .ulz-footer .lcr-phone-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
}

html body .ulz-footer .lcr-phone-button .lcr-icon {
	width: 14px;
	height: 14px;
}

html body .ulz-footer .lcr-phone-title {
	margin: var(--lcr-space-14) 0 var(--lcr-space-12);
	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);
	text-align: center;
}

html body .ulz-footer .lcr-phone-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lcr-space-10);
	padding: 0 var(--lcr-space-14);
}

html body .ulz-footer .lcr-phone-item {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-panel);
}

html body .ulz-footer .lcr-phone-item:nth-child(even) {
	border-radius: var(--lcr-radius-tile);
	transform: rotate(10deg) scale(0.86);
}

html body .ulz-footer .lcr-phone-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

html body .ulz-footer .lcr-phone-item .ulz-watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	max-width: 80%;
	max-height: 80%;
	transform: translate(-50%, -50%);
	opacity: 0.5;
	pointer-events: none;
}

/* The body, on ink: the brand (the white logo, the social profiles under it), then the link columns. */
html body .ulz-footer .lcr-footer-main {
	display: grid;
	gap: var(--lcr-space-40);
	padding: var(--lcr-space-40) var(--lcr-space-24);
}

html body .ulz-footer a,
html body .ulz-footer a:hover {
	color: var(--lcr-color-on-ink);
	text-decoration: none;
}

html body .ulz-footer :is(.lcr-footer-nav, .lcr-footer-bottom) a:hover {
	text-decoration: underline;
}

html body .ulz-footer .lcr-footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--lcr-space-20);
}

html body .ulz-footer .lcr-footer-logo {
	display: inline-flex;
}

/* The owner's white logo file (cili_logo_stage()): the body stays dark in both modes (ADR-0045 D4, D6), so no filter. */
html body .ulz-footer .lcr-footer-logo img {
	display: block;
	width: auto;
	/* The one size of the logo everywhere (the owner's request of 2026-10-14). */
	height: var(--lcr-space-32);
}

html body .ulz-footer .lcr-footer-logo span {
	font-size: var(--lcr-type-wordmark-font-size);
	font-weight: var(--lcr-type-wordmark-font-weight);
	letter-spacing: var(--lcr-type-wordmark-letter-spacing);
	line-height: var(--lcr-type-wordmark-line-height);
}

/* The social profiles: round outlined icon buttons, the header's size. */
html body .ulz-footer .lcr-footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lcr-space-10);
}

html body .ulz-footer .lcr-footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lcr-size-icon-button);
	height: var(--lcr-size-icon-button);
	border-radius: var(--lcr-radius-pill);
	box-shadow: inset 0 0 0 var(--lcr-size-hairline) var(--lcr-color-ink-raised);
	transition: background-color var(--lcr-motion-duration-short) var(--lcr-motion-easing-standard);
}

html body .ulz-footer .lcr-footer-social a:hover {
	background-color: var(--lcr-color-ink-raised);
}

html body .ulz-footer .lcr-footer-social .lcr-icon {
	width: var(--lcr-space-20);
	height: var(--lcr-space-20);
}

/* The link columns: at most four links each (cili/site-footer.php); two columns on a phone. */
html body .ulz-footer .lcr-footer-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lcr-space-32) var(--lcr-web-grid-gap-phone);
}

html body .ulz-footer .lcr-footer-heading {
	margin: 0 0 var(--lcr-space-16);
	color: var(--lcr-color-on-ink);
	font-size: var(--lcr-web-type-label-font-size);
	font-weight: var(--lcr-font-weight-semibold);
	line-height: var(--lcr-web-type-label-line-height);
}

html body .ulz-footer .lcr-footer-column ul {
	display: flex;
	flex-direction: column;
	gap: var(--lcr-space-12);
}

html body .ulz-footer .lcr-footer-column a {
	font-size: var(--lcr-web-type-small-font-size);
	line-height: var(--lcr-web-type-small-line-height);
}

/* The company's line and the legal pages, under the divider. */
html body .ulz-footer .lcr-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--lcr-space-12) var(--lcr-space-24);
	margin: 0 var(--lcr-space-24);
	padding: var(--lcr-space-20) 0 var(--lcr-space-24);
	box-shadow: inset 0 var(--lcr-size-hairline) 0 var(--lcr-color-ink-raised);
	text-align: center;
}

html body .ulz-footer .lcr-footer-legal {
	margin: 0;
	font-size: var(--lcr-web-type-meta-font-size);
	line-height: var(--lcr-web-type-meta-line-height);
}

/* The line breaks between its parts only, never inside one ("Sakala tn 7-2"). */
html body .ulz-footer .lcr-footer-legal-part {
	white-space: nowrap;
}

html body .ulz-footer .lcr-footer-legal-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lcr-space-8) var(--lcr-space-24);
}

html body .ulz-footer .lcr-footer-legal-links a {
	font-size: var(--lcr-web-type-meta-font-size);
	line-height: var(--lcr-web-type-meta-line-height);
}

@media (max-width: 1199.98px) {

	/* What the foot of the screen keeps for the fixed bottom bar, which a page has only when the option
	   `ulz_mobile_bar_nav` lists an item (templates/mobile/bar.php): the bar's height with it, always the device's own
	   inset. The footer and the "Send message" bar (layout-artwork.css) leave it free. */
	html body {
		--lcr-mobile-bar-room: env(safe-area-inset-bottom);
	}

	html body:has(.ulz-mobile-bar) {
		--lcr-mobile-bar-room: calc(var(--lcr-web-header-height-phone) + env(safe-area-inset-bottom));
	}

	/* Room for the fixed bottom bar under the card. */
	html body .ulz-footer {
		padding-bottom: calc(var(--lcr-mobile-bar-room) + var(--lcr-web-gutter-phone));
	}
}

@media (min-width: 768px) {

	/* The panel's text on the left, the phone on the right, standing on the panel's foot. */
	html body .ulz-footer .lcr-footer-promo {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--lcr-space-40);
		padding: var(--lcr-space-48) var(--lcr-space-40) 0;
		text-align: left;
	}

	html body .ulz-footer .lcr-footer-promo-text {
		flex: 1 1 auto;
		align-self: center;
		padding-bottom: var(--lcr-space-48);
	}

	html body .ulz-footer .lcr-footer-actions {
		justify-content: flex-start;
	}

	html body .ulz-footer .lcr-footer-phone {
		height: 320px;
	}

	html body .ulz-footer .lcr-phone {
		width: 260px;
	}

	/* The brand as wide as its five profiles, so they keep to one row; the columns share the rest. */
	html body .ulz-footer .lcr-footer-main {
		grid-template-columns: auto minmax(0, 1fr);
		padding: var(--lcr-space-48) var(--lcr-space-40);
	}

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

	html body .ulz-footer .lcr-footer-bottom {
		justify-content: space-between;
		margin: 0 var(--lcr-space-40);
		text-align: left;
	}
}

@media (min-width: 1200px) {

	html body .ulz-footer {
		padding-top: var(--lcr-web-section-gap-desktop);
		padding-bottom: var(--lcr-space-40);
	}

	html body .ulz-footer .ulz-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-footer .lcr-footer-promo {
		padding: var(--lcr-space-64) var(--lcr-space-96) 0 var(--lcr-space-64);
	}

	html body .ulz-footer .lcr-footer-promo-text {
		padding-bottom: var(--lcr-space-64);
	}

	html body .ulz-footer .lcr-footer-title {
		margin-bottom: var(--lcr-space-16);
		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);
	}

	html body .ulz-footer .lcr-footer-lead {
		font-size: var(--lcr-web-type-body-large-font-size);
		line-height: var(--lcr-web-type-body-large-line-height);
	}

	html body .ulz-footer .lcr-footer-phone {
		height: 380px;
	}

	html body .ulz-footer .lcr-phone {
		width: 300px;
	}

	html body .ulz-footer .lcr-phone-title {
		font-size: var(--lcr-type-section-font-size);
		font-weight: var(--lcr-type-section-font-weight);
		letter-spacing: var(--lcr-type-section-letter-spacing);
		line-height: var(--lcr-type-section-line-height);
	}

	html body .ulz-footer .lcr-footer-main {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		padding: var(--lcr-space-64) var(--lcr-space-64) var(--lcr-space-48);
	}

	html body .ulz-footer .lcr-footer-bottom {
		margin: 0 var(--lcr-space-64);
		padding-bottom: var(--lcr-space-32);
	}
}

/*
 * The sign-in modal's stub (templates/modals/account/content.php; ADR-0039 D2) never shows, nor the overlay Utillz shows
 * with it: an opening goes to the sign-in page instead (cili/auth/opener.js). Utillz's `.ulz-modal.ulz-visible` and
 * `.ulz-modal-open .ulz-overlay` (core.css, `display: flex` and `block`) give way to the weight of `html body`.
 */
html body .ulz-modal.ulz-modal-signin,
html body.ulz-modal-open--signin .ulz-overlay {
	display: none;
}