/*
 * Stage frame — the text of the four scroll stages starts flush with the
 * left edge of the navbar pill.
 *
 * Reversible: functions.php enqueues this file in one line; remove that line
 * and the stages look as before. Nothing in the blocks depends on it.
 *
 * --sf-x is the distance from the stage card's edge to the container line:
 * the card sits 1rem inside the window, the container (.seal-container) is
 * centred with the widths below.
 */

@media (min-width: 768px) {
	body .as-teaser,
	body .bs-teaser,
	body .pc-teaser,
	body .cr-teaser {
		--sf-w: 720px;
		--sf-x: max(1rem, calc((100vw - var(--sf-w)) / 2 - 1rem));
		/* the white navbar pill starts 16px inside the container line */
		--sf-in: calc(var(--sf-x) + 16px);
	}

	/* text starts where the navbar starts */
	body .as-hero,
	body .as-col {
		left: var(--sf-in);
	}

	body .as-finale {
		padding-left: var(--sf-in);
	}

	body .bs-act {
		left: var(--sf-in);
	}

	body .bs-act-wide {
		right: var(--sf-in);
	}

	body .pc-content {
		left: var(--sf-in);
	}

	/* with a full-bleed clip or image the column ends where the dark
	   gradient ends; the headline scales with the column, so
	   "Autocomplete yours with us." keeps its single line */
	body .pc-clip-full .pc-content,
	body .pc-bg-image .pc-content,
	body .pc-bg-port .pc-content {
		right: 53.5%;
		container-type: inline-size;
	}

	body .pc-clip-full .pc-title,
	body .pc-bg-image .pc-title,
	body .pc-bg-port .pc-title {
		font-size: min(clamp(1.75rem, 2.9vw, 3.5rem), 7.6cqi);
	}

	body .cr-content {
		padding-left: var(--sf-in);
	}
}

@media (min-width: 992px) {
	body .as-teaser,
	body .bs-teaser,
	body .pc-teaser,
	body .cr-teaser {
		--sf-w: 960px;
	}
}

@media (min-width: 1200px) {
	body .as-teaser,
	body .bs-teaser,
	body .pc-teaser,
	body .cr-teaser {
		--sf-w: 1140px;
	}
}

@media (min-width: 1400px) {
	body .as-teaser,
	body .bs-teaser,
	body .pc-teaser,
	body .cr-teaser {
		--sf-w: 1320px;
	}
}

/*
 * Large screens: the text columns no longer hang on the navbar line but sit
 * in the middle of the dark left half of the card, and the type keeps
 * growing with the screen. Every line and table of the four stages starts
 * on that same edge.
 */
@media (min-width: 1600px) {
	body .as-teaser,
	body .bs-teaser,
	body .pc-teaser,
	body .cr-teaser {
		/* text column width and its left edge, centred in the left half */
		--sf-col: min(52rem, 36%);
		--sf-left: calc((50% - var(--sf-col)) / 2);
	}

	/* Aiolos: the shell and the closing line */
	body .as-hero {
		left: var(--sf-left);
	}

	body .as-finale {
		padding-left: var(--sf-left);
	}

	/* Boreas: the statements and tables on the same edge */
	body .bs-act {
		left: var(--sf-left);
	}

	body .bs-act-wide {
		right: var(--sf-left);
	}

	/* the shell breaks before the video gets bright */
	body .as-col {
		left: var(--sf-left);
		width: min(46rem, 32%);
	}

	body .as-feed {
		font-size: clamp(1.05rem, min(0.95vw, 2.1vh), 1.45rem);
	}

	body .as-stats strong {
		font-size: clamp(2rem, 2.4vw, 3.25rem);
	}

	body .as-stats span {
		font-size: clamp(0.85rem, 0.7vw, 1.05rem);
	}

	/* contact: the closing line and the chat */
	body .pc-content,
	body .pc-clip-full .pc-content,
	body .pc-bg-image .pc-content,
	body .pc-bg-port .pc-content {
		left: var(--sf-left);
		right: auto;
		width: var(--sf-col);
		max-width: none;
		/* clear of the card's lower edge */
		bottom: clamp(3rem, 12vh, 9rem);
	}

	body .pc-clip-full .pc-title,
	body .pc-bg-image .pc-title,
	body .pc-bg-port .pc-title {
		font-size: min(3.3vw, 5rem, 7.6cqi);
	}

	body .pc-chat,
	body .pc-uses {
		max-width: none;
		font-size: clamp(1.05rem, min(0.95vw, 2.1vh), 1.45rem);
	}

	body .cr-content {
		padding-left: var(--sf-left);
		width: calc(var(--sf-left) + var(--sf-col));
	}

	body .cr-title {
		font-size: min(3.3vw, 5rem, 7.4cqi);
	}

	body .cr-shell {
		font-size: clamp(1.05rem, min(0.95vw, 2.1vh), 1.45rem);
	}

	/* Boreas: the statements grow like the contact headline */
	body .seal-boreas-scroll .bs-lead,
	body .seal-boreas-scroll .bs-title,
	body .seal-boreas-scroll .bs-title.bs-title-meet {
		font-size: min(2.6vw, 4rem);
	}
}

/* the header's hairline from the old grid layout ran across the first stage
   card behind the navbar; the stages draw their own border */
.site-header {
	border-bottom: 0;
}

/* inline code (the cookie names in the privacy policy) in the site's mono
   font instead of the browser's default monospace */
code,
kbd,
samp {
	font-family: var(--wp--preset--font-family--mono);
}