/* ============================================
   muwav.surf — Main Stylesheet
   Night Beach: same shore, different hour.
   ============================================ */

/* === Fonts === */
@font-face {
	font-family: 'Fraunces';
	src: url('/static/font/Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf') format('truetype');
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: 'Source Serif 4';
	src: url('/static/font/SourceSerif4-VariableFont_opsz,wght.ttf') format('truetype');
	font-weight: 200 900;
	font-display: swap;
}

/* === Brand Palette === */
:root {
	/* Background */
	--bg-black: #000000;

	/* Ocean */
	--ocean-abyss: #000F3B;
	--ocean-deep: #00408C;
	--ocean-mid: #0073BF;
	--ocean-light: #00A6E8;
	--ocean-foam: #BFE6F5;
	--ocean-sky: #E6F5FC;

	/* Sky */
	--sky-light: #87D8FA;
	--sky-blue: #00B5F5;

	/* Sand */
	--sand-light: #F5DEB3;
	--sand-dark: #D9BF8C;
	--sand-burnt: #8C5933;

	/* Surfboard Wood */
	--surfboard-light: #D18540;
	--surfboard-mid: #A66126;
	--surfboard-dark: #73401A;

	/* Accents */
	--deep-blue: #000F3B;
	--golden: #FFD600;
	--golden-foam: #FFEB8C;

	/* Surfaces */
	--surface-subtle: rgba(255, 255, 255, 0.03);
	--surface-card: rgba(255, 255, 255, 0.06);
	--border-subtle: rgba(255, 255, 255, 0.06);
	--border-card: rgba(255, 255, 255, 0.10);
	--divider: rgba(245, 222, 179, 0.15);

	/* Text */
	--text-primary: #F5DEB3;
	--text-secondary: #BFE6F5;
	--text-accent: #FFD600;
	--text-muted: rgba(245, 222, 179, 0.5);

	/* Layout */
	--content-width: 64rem;
	--content-narrow: 48rem;
	--section-padding: clamp(4rem, 8vh, 8rem);
	--page-gutter: clamp(1.5rem, 4vw, 3rem);

	/* Shared type treatment — single source of truth for the feature-
	   section headings AND the home highlights bullet list, so the two
	   render as the same Fraunces cut and can't drift apart. Everything
	   here is identical between the two; only font-size is allowed to
	   differ. opsz is pinned (not size-driven) so the heading's display
	   contrast is reproduced at bullet size without raising weight. */
	--feature-type-family: 'Fraunces', 'Georgia', serif;
	--feature-type-weight: 700;
	--feature-type-style: normal;
	--feature-type-color: var(--text-primary);
	--feature-type-letter-spacing: -0.02em;
	--feature-type-line-height: 1.15;
	--feature-type-opsz: 32;
}

/* === Reset === */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	background: var(--bg-black);
	color: var(--text-primary);
	font-family: 'Source Serif 4', 'Georgia', serif;
	font-size: clamp(1rem, 1.2vw, 1.2rem);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--text-secondary);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover,
a:focus-visible {
	color: var(--text-primary);
}

/* === Typography === */
h1, h2, h3, h4 {
	font-family: 'Fraunces', 'Georgia', serif;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--text-primary);
}

h1 {
	font-size: clamp(2.5rem, 5vw, 4.5rem);
}

h2 {
	font-size: clamp(1.8rem, 3.5vw, 3rem);
}

h3 {
	font-size: clamp(1.3rem, 2.5vw, 2rem);
}

h4 {
	font-size: clamp(1.1rem, 1.5vw, 1.4rem);
}

p + p {
	margin-top: 1.2em;
}

/* === Layout Utilities === */
.container {
	max-width: var(--content-width);
	margin-inline: auto;}

.container--narrow {
	max-width: var(--content-narrow);
	margin-inline: auto;}

.section {
	padding-block: var(--section-padding);
}

.section--bleed {
	padding-block: var(--section-padding);
	width: 100%;
}

/* === Gradient Recipes === */
.ocean-depth {
	background: linear-gradient(
		180deg,
		rgba(0, 64, 140, 0.12) 0%,
		rgba(0, 15, 59, 0.08) 100%
	);
}

.sand-glow {
	background: linear-gradient(
		180deg,
		rgba(245, 222, 179, 0.06) 0%,
		transparent 100%
	);
}

.golden-stripe {
	border-top: 2px solid var(--golden);
	background: linear-gradient(
		180deg,
		rgba(255, 214, 0, 0.05) 0%,
		transparent 40%
	);
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}