/* ==========================================================================
   Base, layout system, typography
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
	margin: 0;
	background: var(--bll-black);
	color: var(--bll-off-white);
	font-family: var(--bll-font);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.31;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
	container-type: inline-size; /* so 100cqw = viewport width without the scrollbar */
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, ul, ol, figure, blockquote, fieldset { margin: 0; padding: 0; border: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--bll-gold); outline-offset: 3px; border-radius: 4px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 1000; background: var(--bll-gold); color: #fff; padding: 12px 18px; border-radius: var(--r-sm); }
.skip-link:focus { top: 16px; }

.site { position: relative; isolation: isolate; }

/* --------------------------------------------------------------------------
   Design-coordinate system (desktop ≥1200px)
   Positioned elements carry Figma coordinates: style="--x;--y;--w;--h".
   --px = one design pixel at the current width (1512 design width).
   -------------------------------------------------------------------------- */
:root { --px: calc(100cqw / 1512); }

@media (min-width: 1200px) {
	.sec { position: relative; height: calc(var(--sec-h) * var(--px)); }
	.p {
		position: absolute !important;
		left: calc(var(--x, 0) * var(--px));
		top: calc(var(--y, 0) * var(--px));
		width: calc(var(--w) * var(--px));
		height: calc(var(--h) * var(--px));
		margin: 0;
	}
}

/* --------------------------------------------------------------------------
   Typography — Zalando Sans Expanded Light is the whole personality.
   -------------------------------------------------------------------------- */
.h1, .h2, .h3 { font-weight: 300; color: var(--bll-off-white); }
.h1 { font-size: 34px; line-height: 1.05; letter-spacing: -.01em; }
.h2 { font-size: 30px; line-height: 1.13; letter-spacing: -.01em; }
.accent { color: var(--bll-gold); }
.body-copy { font-weight: 400; font-size: 15px; line-height: 21px; }
.body-copy p + p { margin-top: 21px; }

@media (min-width: 700px) {
	.h1 { font-size: 44px; }
	.h2 { font-size: 38px; }
	.body-copy { font-size: 16px; }
}

@media (min-width: 1200px) {
	.h1 { font-size: calc(55 * var(--px)); line-height: calc(56 * var(--px)); letter-spacing: calc(-.55 * var(--px)); white-space: nowrap; }
	.h2 { font-size: calc(45 * var(--px)); line-height: calc(51 * var(--px)); letter-spacing: calc(-.45 * var(--px)); white-space: nowrap; }
	.body-copy { font-size: calc(16 * var(--px)); line-height: calc(21 * var(--px)); }
	.body-copy p + p { margin-top: calc(21 * var(--px)); }
}

/* Basic pages (until designed) */
.page-basic { max-width: 900px; margin: 0 auto; padding: 160px var(--gutter) 120px; }
.page-basic__content { margin-top: 32px; font-size: 17px; line-height: 1.6; }
.page-basic__content a { color: var(--bll-gold); }

/* --------------------------------------------------------------------------
   Label style (Dave, 2026-09-28) — small, widely-spaced capitals, taken from the
   Instagram tile. Used for eyebrows, buttons, tile links and footer links; the big light
   headings and body copy stay as they are — the contrast is what makes it feel expensive.
   -------------------------------------------------------------------------- */
.eyebrow { font-size: 11px; line-height: 1.4; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; color: var(--bll-gold); }
.eyebrow--center { text-align: center; }
@media (min-width: 1200px) {
	.eyebrow { font-size: calc(13 * var(--px)); line-height: normal; white-space: nowrap; }
}