/*
 * Fashion Museum Tel Aviv — landing shell, rules that must not be lost.
 *
 * This file is plain CSS on purpose. It is NOT compiled from any .scss, and
 * nothing regenerates it, so a rebuild of landing-page.css cannot take these
 * rules with it. It loads immediately after landing-page.css, at the same
 * specificity, so whatever it declares here wins.
 *
 * Everything below has been lost twice to a rebuild from an older .scss: the
 * background video's sizing, the play/pause button, the whole thank-you page,
 * and the Hebrew font stacks. Keeping them here makes the landing page
 * independent of which copy of the .scss happens to get compiled next.
 *
 * Sizes use --u, the single design-pixel unit declared on .lp.
 */

/* ---------------------------------------------------------------------------
 * Background video
 *
 * Without these three declarations the <video> falls back to its intrinsic
 * size (1280x720) and sits in the corner instead of filling the screen.
 * ------------------------------------------------------------------------ */
.lp__media-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 27% center;
}

@media (min-width: 992px) {
	.lp__media-video {
		object-position: center;
	}
}

/* ---------------------------------------------------------------------------
 * Play / pause button
 *
 * Moving content that starts on its own has to be stoppable (WCAG 2.1 AA,
 * 2.2.2). The script unhides this button only once playback actually starts.
 * ------------------------------------------------------------------------ */
.lp-media-toggle {
	position: absolute;
	z-index: 4;
	inset-block-end: calc(24 * var(--u));
	inset-inline-start: calc(20 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(44px, calc(47 * var(--u)));
	height: max(44px, calc(47 * var(--u)));
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.65);
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.lp-media-toggle[hidden] {
	display: none;
}

.lp-media-toggle:hover {
	background-color: rgba(0, 0, 0, 0.85);
}

.lp-media-toggle:focus-visible {
	outline: 2px solid #e1fe03;
	outline-offset: 3px;
}

.lp-media-toggle__icon {
	display: block;
	width: 45%;
	height: 45%;
}

.lp-media-toggle__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/*
 * `hidden` is an HTMLElement property and the user-agent [hidden] rule only
 * applies to HTML elements, so an SVG <g hidden> is still painted. Without
 * this rule both icons are drawn on top of each other and the button never
 * appears to change.
 */
.lp-media-toggle__icon svg [hidden] {
	display: none;
}

@media (min-width: 992px) {
	.lp-media-toggle {
		inset-block-end: calc(24 * var(--u));
		inset-inline-start: calc(24 * var(--u));
	}
}

/* ---------------------------------------------------------------------------
 * Fonts
 *
 * Univers carries no Hebrew glyphs at all, so any Hebrew set in it silently
 * falls through to Arial. Oron is the body face everywhere; Univers is used
 * for exactly one string, the Latin COMING SOON label.
 * ------------------------------------------------------------------------ */
.lp,
.lp-intro__fallback,
.lp-thanks__title,
.lp-thanks__text,
.lp .lp-form__submit,
.lp input.lp-form__submit,
.lp input[type="submit"].lp-form__submit {
	font-family: 'Oron Classic FM', 'Univers LT Std', 'Assistant', 'Heebo', 'Arial Hebrew', Arial, sans-serif;
}

/*
 * COMING SOON is the one string on the site set in Univers, and it now sits on
 * the top line beside the navigation rather than above the lockup. Its whole
 * appearance is declared here so it does not depend on landing-page.css, which
 * still carries the rules for its old position.
 */
.lp-nav__status {
	margin: 0;
	/* Holds the far side of the bar, so the link and the language sit at the
	   other end however many of them there are. */
	margin-inline-end: auto;
	color: #e1fe03;
	font-family: 'Univers LT Std', 'Oron Classic FM', 'Univers', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: var(--fs-label);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Contact Form 7 leftovers
 *
 * CF7 prints an empty response box and a fieldset of hidden inputs on every
 * form; both take up space in a layout that has none to spare.
 * ------------------------------------------------------------------------ */
.lp .wpcf7-response-output:empty {
	display: none;
}

.lp .wpcf7 fieldset.hidden-fields-container {
	display: none;
}

.lp .wpcf7-form.init .wpcf7-response-output {
	display: none;
}

/* ===========================================================================
 * Thank-you page
 *
 * The same single screen as the landing page — same photograph, same scrim,
 * same footer — with a confirmation in the middle instead of the form.
 * ======================================================================== */
/*
 * The narrow layout has its own two-row grid, and it must stay inside its own
 * media query. Left unscoped it also replaced the nine-row grid the wide layout
 * declares, and the items placed in rows three to eight then landed in implicit
 * rows a few pixels tall: the photograph stopped halfway down the screen and
 * the confirmation was squashed onto the footer.
 */
@media (max-width: 991.98px) {
	.lp--thanks {
		grid-template-rows: 1fr auto;
	}

	/*
	 * Full height here, unlike the landing page: there is no newsletter card to
	 * float over the photograph, so the 90% that leaves a black strip along the
	 * bottom of the landing page would only put a black strip behind this
	 * page's footer.
	 */
	.lp--thanks .lp__media {
		grid-column: 1;
		grid-row: 1 / -1;
		height: 100%;
	}

	.lp--thanks .lp-thanks {
		grid-column: 1;
		grid-row: 1;
	}

	.lp--thanks .lp__foot {
		grid-column: 1;
		grid-row: 2;
	}
}

.lp-thanks {
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(28 * var(--u));
	min-height: 0;
	padding: calc(40 * var(--u)) calc(22 * var(--u));
	text-align: center;
}

/*
 * The footer is the same component on both pages and has to read the same on
 * both: the address on its own line, the legal links under it, aligned to the
 * reading edge.
 *
 * It is laid out that way in custom.css, but under a selector that names the
 * landing page's template — `.page-template-landing-page .lp__foot` — so none
 * of it reaches this page, which carries the thank-you template instead. The
 * declarations are repeated here rather than left broken. `.lp__foot` only
 * ever exists on these two pages, so dropping the template from that selector
 * in custom.css would cover both and make this block unnecessary.
 */
.lp--thanks .lp__foot {
	flex-flow: column;
	align-items: flex-start;
	gap: 10px;
}

@media (max-width: 767px) {
	.lp--thanks .lp__foot {
		align-items: center;
	}
}

.lp-thanks__title {
	margin: 0;
	color: #ffffff;
	font-size: max(24px, calc(44 * var(--u)));
	font-weight: 400;
	line-height: 1.15;
}

.lp-thanks__text {
	max-width: calc(560 * var(--u));
	margin: 0;
	color: #ffffff;
	font-size: var(--fs-body);
	line-height: 1.45;
}

.lp-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(20 * var(--u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-social__item {
	display: flex;
}

.lp-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(44px, calc(46 * var(--u)));
	height: max(44px, calc(46 * var(--u)));
	border-radius: 50%;
	color: #ffffff;
}

.lp-social__link:focus-visible {
	outline: 2px solid #e1fe03;
	outline-offset: 4px;
}

.lp-social__icon {
	display: block;
	width: max(24px, calc(26 * var(--u)));
	height: auto;
}

@media (min-width: 992px) {
	.lp--thanks .lp__media {
		grid-column: 1 / -1;
		grid-row: 1 / -1;
	}

	.lp--thanks .lp-thanks {
		grid-column: 2;
		grid-row: 3 / 8;
		align-items: flex-start;
		align-self: center;
		padding: 0;
		text-align: start;
	}

	.lp--thanks .lp-social {
		justify-content: flex-start;
	}

	.lp--thanks .lp__foot {
		grid-column: 2;
		grid-row: 8;
	}
}

/* ---------------------------------------------------------------------------
 * The intro lockup, when the screen runs out of height
 *
 * The page is exactly one screen and never scrolls, so every pixel the
 * newsletter card gains — a validation message, a success message — has to come
 * out of somewhere else. The grid takes it from the row the lockup sits in.
 *
 * `.lp-intro` declares `min-height: 0`, which lets that row shrink below the
 * height of its contents; the image then overflowed the row and the card, which
 * is painted after it, covered the bottom of the lockup. These three rules make
 * the image shrink with its row instead of spilling out of it, so it can never
 * end up behind anything.
 *
 * `object-fit: contain` keeps the proportions while it shrinks. Nothing here
 * changes the layout while there is room — it only takes effect at the point
 * where the lockup would otherwise be cut off.
 * ------------------------------------------------------------------------ */
.lp-intro {
	min-height: 0;
}

.lp-intro__title {
	display: flex;
	min-height: 0;
}

.lp-intro__logo {
	max-height: 100%;
	object-fit: contain;
	object-position: center;
}

/* ---------------------------------------------------------------------------
 * Mobile: the media fills the screen, the card floats on it
 *
 * On a narrow screen the media used to occupy only the rows above the
 * newsletter card — about half the height — with the card and the footer on
 * flat black beneath it. It now spans the whole grid at 90% of the screen's
 * height, anchored to the top, and the card is the same 80% black it already
 * is on a wide screen, so the video carries on behind it instead of stopping
 * at it. The footer keeps its solid black strip along the bottom.
 *
 * 80% black under the form is what holds the text's contrast over whatever
 * frame happens to be playing (WCAG 1.4.3) — it is the reason the card is
 * tinted rather than clear.
 * ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
	.lp__media {
		grid-row: 1 / -1;
		height: 90%;
	}

	.lp-news {
		background-color: rgba(0, 0, 0, 0.8);
	}
}

/* ---------------------------------------------------------------------------
 * The museum lockup in the thank-you page's top bar
 *
 * Same size and same placement as on the interior pages: two fifths of the
 * landing page's lockup, held at the reading edge of the bar. Here it can be
 * said in the shell's own unit — 720.7 design pixels there, 288.28 here —
 * because this page is the landing shell and carries `--u`.
 *
 * It is not the page heading: the confirmation below it is. So the image is
 * decorative, and the rules below only size and place it.
 *
 * Below the desktop breakpoint the bar wraps, exactly as it does on the
 * interior pages: the lockup takes a line of its own and the language sits
 * centred underneath, where 40% would be too small to read the credit lines.
 * ------------------------------------------------------------------------ */
.lp--thanks .lp-nav__logo {
	display: flex;
	align-items: center;
	margin-inline-end: auto;
}

.lp--thanks .lp-nav__logo-image {
	display: block;
	width: calc(288.28 * var(--u));
	height: auto;
}

@media (max-width: 991.98px) {
	/*
	 * A third row for the bar. Without it the bar would share row one with the
	 * confirmation, which is what the two-row grid above declares.
	 */
	.lp--thanks {
		grid-template-rows: auto 1fr auto;
	}

	.lp--thanks .lp-thanks {
		grid-column: 1;
		grid-row: 2;
	}

	.lp--thanks .lp__foot {
		grid-column: 1;
		grid-row: 3;
	}

	.lp--thanks .lp__nav {
		flex-wrap: wrap;
		justify-content: center;
	}

	.lp--thanks .lp-nav__logo {
		flex: 0 0 100%;
		justify-content: center;
		margin-inline-end: 0;
	}

	.lp--thanks .lp-nav__logo-image {
		width: clamp(180px, 56vw, 320px);
	}
}

/* ---------------------------------------------------------------------------
 * The lockup is a link to the home page
 *
 * Wrapping the image in an anchor adds an element between the flex container
 * and the image, so the anchor has to be a flex box too or the image stops
 * being centred in the bar. The focus ring is the same yellow the rest of the
 * shell uses, offset far enough to clear the artwork (WCAG 2.1 AA, 2.4.7).
 * ------------------------------------------------------------------------ */
.lp-nav__logo-link {
	display: flex;
	align-items: center;
}

.lp-nav__logo-link:focus-visible {
	outline: 2px solid #e1fe03;
	outline-offset: 4px;
}

/* ===========================================================================
 * Everything but the picture, centred
 *
 * The design placed the content in a column against the reading edge: on a wide
 * screen the grid was `100u | 750u | 1fr`, so the column sat 100 units in from
 * the right with the rest of the photograph open to its left. Centring is one
 * change to that track list — `1fr | 750u | 1fr` — and then a handful of rules
 * that stop each block from aligning itself back to the start of the line.
 *
 * The column keeps its width. Stretching the text across the whole screen would
 * push the line length past what is comfortable to read; the measure stays the
 * same, it just sits in the middle now.
 *
 * The photograph and the video are untouched: they already span the whole grid.
 * =========================================================================== */
@media (min-width: 992px) {
	.lp {
		grid-template-columns: 1fr calc(750 * var(--u)) 1fr;
	}
}

/* The top bar: COMING SOON, the contact link and the language. */
.lp__nav {
	justify-content: center;
}

/*
 * This margin is what used to hold COMING SOON against the far edge while the
 * link and the language sat at the other end. Centring the row means there is
 * no far edge to hold.
 */
.lp-nav__status {
	margin-inline-end: 0;
}

/* The museum lockup. */
.lp-intro {
	align-items: center;
	text-align: center;
}

.lp-intro__logo {
	margin-inline: auto;
}

/* The newsletter card. The fields themselves stay full width. */
.lp-news__heading,
.lp-news .wpcf7-response-output {
	text-align: center;
}

.lp .lp-form__consent {
	text-align: center;
}

.lp .lp-form__consent .wpcf7-list-item > label {
	justify-content: center;
}

/*
 * `flex: 1 1 auto` made the consent text fill the line, so centring the row
 * moved nothing. Letting it size to its content is what puts the checkbox and
 * the sentence together in the middle.
 */
.lp .lp-form__consent .wpcf7-list-item-label {
	flex: 0 1 auto;
	text-align: center;
}

/* The footer: the address on one line, the legal links under it. */
.lp__foot {
	align-items: center;
	justify-content: center;
	text-align: center;
}

.lp-address {
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Social links under the newsletter form (landing page)
 *
 * The same list the thank-you page shows, kept in Site Settings. It sits inside
 * the newsletter card, between the form and the footer; the row is already
 * centred by .lp-social, this only separates it from the form above.
 * ------------------------------------------------------------------------ */
.lp-news .lp-social {
	margin-block-start: calc(24 * var(--u));
}

/* ---------------------------------------------------------------------------
 * The lockup with a separate mobile file
 *
 * When Site Settings holds a mobile logo, the <img> sits inside a <picture>.
 * Every size rule above is written for the <img> and its parent, so the
 * <picture> steps out of the layout: without this, `max-height: 100%` on the
 * image would resolve against a wrapper with no height of its own and the
 * lockup would stop shrinking with its row.
 * ------------------------------------------------------------------------ */
.lp-intro__title picture,
.lp-nav__logo picture {
	display: contents;
}

/* Mobile background image: <picture> must not add a box of its own. */
.lp__media picture{display:contents}

/* ---------------------------------------------------------------------------
 * Mobile logo: as wide as the screen allows
 *
 * These rules apply only when Site Settings holds a mobile logo (the <img> then
 * sits inside a <picture>), and only below the desktop breakpoint, so nothing
 * changes for a site without one. The height cap above (`max-height: 100%` with
 * `object-fit: contain`) is lifted here: it kept a wide lockup inside its grid
 * row, but a mobile logo has its own proportions and was being shrunk inside a
 * full-width box instead of filling it.
 * ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
	.lp-intro__title picture > .lp-intro__logo {
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: none;
		flex: 0 0 100%;
	}

	.lp-nav__logo:has(picture) .lp-nav__logo-link {
		flex: 0 0 100%;
		width: 100%;
	}

	.lp-nav__logo picture > .lp-nav__logo-image {
		width: 100%;
		height: auto;
	}
}

/* Mobile logo, edge to edge: undo the page gutter around it. The title is a
 * flex item centred by `.lp-intro`, so without a width of its own it shrinks
 * to its content instead of spanning the screen. */
@media (max-width: 991.98px) {
	.lp-intro:has(picture) .lp-intro__title {
		width: calc(100% + 44 * var(--u));
		margin-inline: calc(-22 * var(--u));
	}

	.lp--thanks .lp-nav__logo:has(picture) {
		flex: 0 0 calc(100% + 44 * var(--u));
		margin-inline: calc(-22 * var(--u));
	}
}

/* Mobile logo keeps its own proportions: the title no longer shrinks with the
 * grid row, and the image is not stretched to the title's height. If a very
 * short screen leaves too little room, the logo runs on downwards rather than
 * being made smaller. */
@media (max-width: 991.98px) {
	.lp-intro:has(picture) {
		justify-content: safe center;
	}

	.lp-intro:has(picture) .lp-intro__title {
		flex: none;
		min-height: auto;
	}

	.lp-intro__title picture > .lp-intro__logo {
		align-self: flex-start;
	}
}

/* ---------------------------------------------------------------------------
 * Logo on a phone: the full width of the screen, whichever file it is
 *
 * The rules above that scope themselves to a mobile logo (`picture`) are kept,
 * but the full-width treatment is for every lockup below the desktop
 * breakpoint, the Hebrew site's main logo included: the height cap and
 * `object-fit: contain` from the top of this file no longer apply here, and
 * the page gutter around the logo is cancelled so it runs edge to edge.
 * ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
	.lp-intro {
		justify-content: safe center;
	}

	.lp-intro .lp-intro__title {
		flex: none;
		min-height: auto;
		width: calc(100% + 44 * var(--u));
		margin-inline: calc(-22 * var(--u));
	}

	.lp-intro .lp-intro__title .lp-intro__logo {
		align-self: flex-start;
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: none;
	}

	.lp--thanks .lp-nav__logo {
		flex: 0 0 calc(100% + 44 * var(--u));
		margin-inline: calc(-22 * var(--u));
	}

	.lp--thanks .lp-nav__logo .lp-nav__logo-link {
		flex: 0 0 100%;
		width: 100%;
	}

	.lp--thanks .lp-nav__logo .lp-nav__logo-image {
		width: 100%;
		height: auto;
	}
}

/* Logo on a phone: 90% of the screen, centred, with room on every side. */
@media (max-width: 991.98px) {
	.lp-intro .lp-intro__title .lp-intro__logo {
		flex: 0 0 auto;
		width: 90vw;
		margin-block: calc(24 * var(--u));
		margin-inline: auto;
	}

	.lp--thanks .lp-nav__logo .lp-nav__logo-link {
		justify-content: center;
	}

	.lp--thanks .lp-nav__logo .lp-nav__logo-image {
		width: 90vw;
		margin-block: calc(12 * var(--u));
	}
}

/* ---------------------------------------------------------------------------
 * Phones: the page scrolls
 *
 * The landing shell is locked to exactly one screen (html and body
 * `overflow: hidden`, the grid `height: 100dvh`). That is right on a desktop,
 * but with a tall logo, the form and the footer on a phone the content does not
 * fit, so the bottom was simply cut off. Below the desktop breakpoint the shell
 * is at least one screen tall and grows with its content, and the page
 * scrolls. Above 992px nothing changes.
 * ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
	.lp-html,
	.lp-html:has(body.admin-bar) {
		height: auto;
		min-height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: auto;
	}

	.lp-html body.lp-body {
		height: auto;
		min-height: 100%;
		overflow: visible;
		overscroll-behavior: auto;
	}

	.lp {
		height: auto;
		min-height: calc(100dvh - var(--lp-chrome));
	}

	/* The row may not shrink below its content any more, or the logo would
	 * overflow it and sit on top of the form. */
	.lp .lp-intro {
		min-height: auto;
	}
}

/* ---------------------------------------------------------------------------
 * Phones: the same shading over the background as on a wide screen
 *
 * On a desktop the overlay is a strong gradient on the side where the text sits
 * (82% black fading to clear by 62% of the width) plus a soft vignette. The
 * phone layout only had a faint vignette, so the logo sat on the bare photo.
 * Here the text is stacked from the top, so the same gradient runs top to
 * bottom, with the same stops and the same vignette. Above 992px nothing changes.
 * ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
	.lp__media-overlay {
		background:
			linear-gradient(to bottom, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.6) 38%, rgba(0, 0, 0, 0) 62%),
			radial-gradient(ellipse 95% 80% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
	}
}

/* ---------------------------------------------------------------------------
 * Form fields: white placeholders at full strength, on a light black tint
 *
 * The placeholder was #c0c1c3. It is plain white now, with no opacity (browsers
 * dim a placeholder by default; `opacity: 1` switches that off), and the field
 * itself sits on 20% black so the white text keeps its contrast over any frame
 * of the background.
 * ------------------------------------------------------------------------ */
.lp .lp-form__input,
.lp input[type="email"].lp-form__input {
	background-color: rgba(0, 0, 0, 0.2);
}

.lp .lp-form__input::placeholder,
.lp input[type="email"].lp-form__input::placeholder {
	color: #fff;
	opacity: 1;
}

.lp .lp-form__input::-webkit-input-placeholder {
	color: #fff;
	opacity: 1;
}

.lp .lp-form__input::-moz-placeholder {
	color: #fff;
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Phones: the pause button sits on the first screen and can be pressed
 *
 * The button used to sit at the bottom of the media layer, which on a phone is
 * the bottom of the whole page — below the fold, and under the footer, so it
 * could not be reached or pressed. It is now a grid item of the page, in the
 * row of the logo, at the reading edge just above the form card, and stacked
 * above everything.
 * ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
	.lp .lp-media-toggle {
		position: relative;
		inset: auto;
		z-index: 6;
		grid-column: 1;
		grid-row: 2;
		align-self: end;
		justify-self: start;
		margin-inline-start: calc(20 * var(--u));
		margin-block-end: calc(14 * var(--u));
	}
}

/* Email fields: Univers LT Std, the same face as COMING SOON. The stack is the
 * one that label uses, so an address (Latin letters, digits, @) is set in
 * Univers and a stray Hebrew character falls back to Oron. The placeholder
 * inherits it. */
.lp input[type="email"].lp-form__input {
	font-family: 'Univers LT Std', 'Oron Classic FM', 'Univers', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
 * The top bar on a narrow screen: the contact link beside the language, and
 * COMING SOON on a line of its own underneath.
 *
 * The markup order is link, COMING SOON, language (the order they are read in
 * on a wide screen, where they share one line). Here the status word is moved
 * after the other two with `order` and given the full width, which wraps it
 * onto its own line. It is not focusable, so the keyboard order (link, then
 * language) is the same as the visual one.
 * ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
	.lp__nav {
		flex-wrap: wrap;
		justify-content: center;
		column-gap: calc(24 * var(--u));
		row-gap: calc(8 * var(--u));
	}

	.lp__nav > nav:not(.lp-langs) {
		order: 1;
	}

	.lp__nav > .lp-langs {
		order: 2;
	}

	.lp__nav > .lp-nav__status {
		order: 3;
		flex: 0 0 100%;
		text-align: center;
	}
}


/* ---------------------------------------------------------------------------
 * Thank-you page on a phone: no scroll lock at all
 *
 * The thank-you template uses the same shell as the landing page, so it was
 * given the same unlock above. This block states it again for the page itself,
 * with a stronger selector and for every layer that could hold the page to one
 * screen: the root, the body and the shell. The shell stops clipping vertically
 * too (`overflow: visible`), so nothing is cut off at the bottom of the grid
 * and no inner scroll container is left to take the touch. Sideways overflow
 * is still cut at the root, so the full-width lockup cannot make the page
 * scroll sideways. Above 992px the single locked screen is unchanged.
 * ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
	html.lp-html:has(.lp--thanks) {
		height: auto;
		min-height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: auto;
	}

	html.lp-html:has(.lp--thanks) body.lp-body {
		height: auto;
		min-height: 100%;
		overflow: visible;
		overscroll-behavior: auto;
		touch-action: auto;
	}

	.lp.lp--thanks {
		height: auto;
		min-height: calc(100dvh - var(--lp-chrome));
		overflow: visible;
	}
}