/**
 * Gather visual language — brand tokens.
 *
 * Colors match the identity guide: Chalk, Charcoal, Slate, Terra.
 * Target headline/body fonts: Canela Display, Neue Haas Grotesk (license separately).
 * Loaded web fonts: Fraunces + Cormorant Garamond, DM Sans, Courier Prime (accent).
 */

:root {
	--gather-chalk: #f2ede6;
	--gather-charcoal: #3a3535;
	--gather-slate: #7a7d7f;
	--gather-terra: #c47a5a;

	--gather-font-headline: "Fraunces", "Cormorant Garamond", "Canela Display", "Times New Roman", serif;
	--gather-font-body: "DM Sans", "Neue Haas Grotesk Text", "Helvetica Neue", Arial, sans-serif;
	--gather-font-accent: "Courier Prime", "Courier New", monospace;

	--gather-border-subtle: rgb(58 53 53 / 0.14);
	--gather-surface-panel: rgb(242 237 230 / 0.92);

	/** Match header, hero rail, ticker wrap, archive+bento gutter (fluid side margins). */
	--gather-page-gutter-x: clamp(1.25rem, 4vw, 3rem);

	/** Typical max width for constrained page columns (homepage curation, etc.). */
	--gather-content-max-width: 120rem;

	/** Default stacked-section vertical rhythm (homepage archive + bento wrapper). */
	--gather-page-section-py-start: clamp(1.5rem, 4vw, 2.75rem);
	--gather-page-section-py-end: clamp(2rem, 6vw, 4.5rem);

	/** Relaxed section rhythm (homepage curation inner, long-form editorial blocks). */
	--gather-page-section-py-start-lg: clamp(2.25rem, 5vw, 4rem);
	--gather-page-section-py-end-lg: clamp(2.5rem, 6vw, 4.5rem);

	color-scheme: only light;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

body {
	margin: 0;
	min-height: 100vh;
	background-color: var(--gather-chalk);
	color: var(--gather-charcoal);
	font-family: var(--gather-font-body);
	font-size: 1rem;
	line-height: 1.55;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--gather-font-headline);
	font-weight: 500;
	color: var(--gather-charcoal);
	line-height: 1.22;
}

a {
	color: var(--gather-terra);
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--gather-charcoal);
}

a:focus-visible {
	outline: 2px solid var(--gather-terra);
	outline-offset: 2px;
}

/**
 * Accent / mono — SKU lines, refs, certifications (Courier Prime).
 */
.gather-font-accent,
code,
kbd {
	font-family: var(--gather-font-accent);
}

/**
 * Editorial display title (listing / hero-style headings).
 */
.gather-display-title {
	font-family: var(--gather-font-headline);
	font-weight: 400;
	font-style: italic;
	color: var(--gather-charcoal);
	letter-spacing: -0.01em;
}

.gather-muted {
	color: var(--gather-slate);
}