/* BUZZ Coming Soon. Wie der Hero der Website: der BUZZ-Ring als Bild (Screenshot von buzz.loskill.net, freigestellt),
   darunter der Claim in Dunkelrot. Schriften Anton und Martian Grotesk vom eigenen Server (SIL OFL, fonts/OFL-*.txt). */
@font-face {
	font-family: 'Anton';
	src: url('/fonts/Anton-Latin.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Martian Grotesk';
	font-weight: 100 1000;
	font-stretch: 75% 200%;
	src: url('/fonts/MartianGrotesk-VF.woff2') format('woff2');
	font-display: swap;
}
:root {
	--red: #ff0000;
	--dark-red: #af1510;
	--navy: #000163;
	--sky: #8eecf6;
	--margin: clamp(16px, 4vw, 40px);
}
* { box-sizing: border-box; }
html { background: var(--red); }
body { margin: 0; min-height: 100svh; display: grid; color: var(--navy); font-family: 'Anton', Impact, sans-serif; text-transform: uppercase; -webkit-font-smoothing: antialiased; }
/* Dünne Kontur wie die Texte der Website: Strich aussen, Füllung darüber */
.outline { -webkit-text-stroke: 0.08em var(--sky); paint-order: stroke fill; }

.soon { display: grid; place-content: center; justify-items: center; gap: clamp(12px, 3svh, 32px); padding: var(--margin); text-align: center; }
.soon h1 { margin: 0; }
/* Ring so gross wie möglich, aber Claim und «Coming soon» bleiben im Bild. Das Bild ist um die Ringachse zugeschnitten,
   mittig gesetzt steht BUZZ also mittig */
.soon h1 img { display: block; width: min(100vw - 2 * var(--margin), 90svh); height: auto; }
/* Claim wie im Hero: Martian Grotesk in Versalien, Dunkelrot, Grösse wie dort (44 % von min(8.1vw, 4.5svh)) */
.soon .claim { margin: 0; font-family: 'Martian Grotesk', sans-serif; font-weight: 400; font-size: max(13px, min(3.6vw, 2svh)); line-height: 1.2; color: var(--dark-red); }
.soon .later { margin: 0; font-size: min(4.6vw, 3svh); line-height: 1.1; letter-spacing: 0.04em; }