/* ── Primary: PP Neue Montreal ──────────────────── */
@font-face {
	font-family: "PPNeueMontreal-Regular";
	src: url("/fonts/PPNeueMontreal-Regular.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "PPNeueMontreal-Semibold";
	src: url("/fonts/PPNeueMontreal-Semibold.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "PPNeueMontreal-Extrabold";
	src: url("/fonts/PPNeueMontreal-Extrabold.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

/* ── Secondary: PP Neue Bit ──────────────────────── */
@font-face {
	font-family: "PPNeueBit-Regular";
	src: url("/fonts/PPNeueBit-Regular.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "PPNeueBit-Bold";
	src: url("/fonts/PPNeueBit-Bold.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

/* Emphasis/semantic tags render with the real Semibold face instead of a
   browser-synthesized bold, since PPNeueMontreal has no "bold" file. */
strong,
b {
	font-family: "PPNeueMontreal-Semibold", sans-serif;
	font-weight: normal;
}

/* Headings default to font-weight: bold in the browser's UA stylesheet.
   Our fonts only register a "normal" weight per family, so that default
   was forcing the browser to fake/synthesize bold on every h1-h6 (thick,
   uneven strokes) instead of rendering the real Regular/Bit face as
   designed. Components that want real heavier weight should set
   font-family to the Semibold/Extrabold/Bold face, not font-weight. */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
}

html,
body {
	position: relative;
}

body {
	color: #050505;
	margin: 0;
	box-sizing: border-box;
	font-family: "PPNeueMontreal-Regular", sans-serif;
}


:root {
	--grid-columns: 8;
	--grid-gutter: 24px;
	--grid-margin: 32px;
	--baseline: 8px;
}

.swiss-grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
	column-gap: var(--grid-gutter);
	row-gap: var(--baseline);
	padding-left: var(--grid-margin);
	padding-right: var(--grid-margin);
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

/* Grid overlay for layout debugging */
.show-grid .page {
	position: relative;
}
.show-grid .page::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
	background-color: transparent;
	--debug-cols: 8;
	--debug-col-width: calc((100% - (var(--grid-margin) * 2)) / var(--debug-cols));
	--debug-line: rgba(255, 0, 0, 1);
	--debug-inner-width: calc(100% - (var(--grid-margin) * 2));
	--debug-fill: rgba(255, 0, 0, 0.08);
	background-image:
		linear-gradient(
			to bottom,
			var(--debug-fill) 0,
			var(--debug-fill) var(--grid-margin),
			transparent var(--grid-margin),
			transparent calc(100% - var(--grid-margin)),
			var(--debug-fill) calc(100% - var(--grid-margin)),
			var(--debug-fill) 100%
		),
		linear-gradient(to right, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px),
		linear-gradient(to right, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px),
		linear-gradient(to right, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px),
		linear-gradient(to right, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px),
		linear-gradient(to right, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px),
		linear-gradient(to right, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px),
		linear-gradient(to right, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px),
		linear-gradient(to right, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px),
		linear-gradient(to right, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--debug-line) 0, var(--debug-line) 1px, transparent 1px);
	background-size:
		100% 100%,
		1px 100%, 1px 100%, 1px 100%, 1px 100%, 1px 100%,
		1px 100%, 1px 100%, 1px 100%, 1px 100%,
		var(--debug-inner-width) 1px, var(--debug-inner-width) 1px,
		var(--debug-inner-width) 1px, var(--debug-inner-width) 1px,
		var(--debug-inner-width) 1px, var(--debug-inner-width) 1px,
		var(--debug-inner-width) 1px, var(--debug-inner-width) 1px,
		var(--debug-inner-width) 1px;
	background-position:
		0 0,
		var(--grid-margin) 0,
		calc(var(--grid-margin) + (var(--debug-col-width) * 1)) 0,
		calc(var(--grid-margin) + (var(--debug-col-width) * 2)) 0,
		calc(var(--grid-margin) + (var(--debug-col-width) * 3)) 0,
		calc(var(--grid-margin) + (var(--debug-col-width) * 4)) 0,
		calc(var(--grid-margin) + (var(--debug-col-width) * 5)) 0,
		calc(var(--grid-margin) + (var(--debug-col-width) * 6)) 0,
		calc(var(--grid-margin) + (var(--debug-col-width) * 7)) 0,
		calc(100% - var(--grid-margin)) 0,
		var(--grid-margin) var(--grid-margin),
		var(--grid-margin) calc(var(--grid-margin) + (var(--baseline) * 6)),
		var(--grid-margin) calc(var(--grid-margin) + (var(--baseline) * 12)),
		var(--grid-margin) calc(var(--grid-margin) + (var(--baseline) * 18)),
		var(--grid-margin) calc(var(--grid-margin) + (var(--baseline) * 24)),
		var(--grid-margin) 50%,
		var(--grid-margin) calc(100% - (var(--baseline) * 24)),
		var(--grid-margin) calc(100% - (var(--baseline) * 12)),
		var(--grid-margin) calc(100% - var(--grid-margin));
	background-repeat: no-repeat;
	mix-blend-mode: normal;
}

@media (max-width: 900px) {
	:root {
		--grid-columns: 8;
		--grid-gutter: 16px;
		--grid-margin: 24px;
		--baseline: 7px;
	}
}

@media (max-width: 600px) {
	:root {
		--grid-columns: 6;
		--grid-gutter: 12px;
		--grid-margin: 16px;
		--baseline: 6px;
	}
}

a {
	color: #f9f9fa;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: #f9f9fa;
}

label {
	display: block;
}

input,
button,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	box-sizing: border-box;
	border: 1px solid #f9f9fa;
	border-radius: 2px;
}

input:disabled {
	color: #f9f9fa;
}

.swiper-slide {
	height: 100% !important;
}

.swiper {
	height: 100%;
}