/* ========================================================================== *
 * # Site layout — getpomello.com
 * ==========================================================================
 *
 * The marketing scale on top of the app's tokens (css/0-root.css):
 *   --display, --headline, --title, --lead	type for a page that has to be read from across the room
 *   --section-space						vertical rhythm between sections
 *   --measure								comfortable line length for body copy
 * Breakpoints only at 500, 1000 and 1500 px (Mako). Role tokens only: no hex, no rgba.
 * ========================================================================== */

:root {
	--display: 40px;
	--headline: 32px;
	--title: 22px;
	--lead: 19px;
	--section-space: 72px;
	--measure: 680px;
	--radius-frame: 20px;
	--bezel: oklch(0.165 0.020 260);	/* The phone frame — FIXED dark in both themes */
}

@media (min-width: 500px) {
	:root {
		--display: 52px;
		--headline: 38px;
	}
}

@media (min-width: 1000px) {
	:root {
		--display: 68px;
		--headline: 48px;
		--title: 24px;
		--lead: 21px;
		--section-space: 112px;
	}
}

@media (min-width: 1500px) {
	:root {
		--display: 80px;
		--headline: 56px;
		--section-space: 136px;
	}
}



/* -- Document -- */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
}

body {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	text-rendering: optimizeLegibility;
}

.main {
	flex-grow: 1;

	&:focus {
		outline: none;
	}
}

/* Wide screens: the Mako container is 12/14 of the viewport; cap it so lines and screenshots stay readable. */
.container {
	max-width: min(var(--container-width), 1240px);
}



/* -- Wordmark (lower case, Inter 700, the bambino treatment, D21) -- */

.wordmark {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--wordmark-sm);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--ink);
	text-decoration: none;

	&:hover {
		color: var(--ink);
	}
}



/* -- Skip link: hidden until focused -- */

.skip-link {
	position: absolute;
	left: var(--space-100);
	top: var(--space-100);
	z-index: 100;
	transform: translateY(-200%);

	&:focus {
		transform: none;
	}
}



/* -- Large buttons for heroes and bands -- */

.b-lg {
	min-height: 52px;
	padding: 0 24px;
	font-size: 17px;
	border-radius: 12px;
}

.b-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-75);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-25);
	min-height: 44px;
	font-weight: 600;
	text-decoration: none;

	& svg {
		transition: transform var(--transition-speed) var(--transition-ease);
	}

	&:hover svg {
		transform: translateX(3px);
	}
}



/* -- Draft marker: text Mario still has to approve (visible only in local builds via body.show-drafts) -- */

.show-drafts [data-draft] {
	outline: 2px dashed var(--warn-line);
	outline-offset: 4px;
}