/**
 * base.css — design tokens + resets.
 * Colour/font values are extracted 1:1 from the approved mockup's inline
 * styles (PlaynChill Homepage.dc.html <style> block) so the production
 * site matches pixel-for-pixel, defined ONCE as CSS custom properties
 * instead of repeated hex codes across every template.
 */

:root {
	/* Palette */
	--pnc-cream:        #FBF8F1;
	--pnc-ink:          #16281E;
	--pnc-muted:        #4C5D53;
	--pnc-green-900:    #0C2116;
	--pnc-green-800:    #123020;
	--pnc-green-700:    #1E4A31;
	--pnc-accent:       #E8801C;
	--pnc-accent-ink:   #8A4A08;
	--pnc-success:      #3E9C55;
	--pnc-success-light:#7FD08A;
	--pnc-danger:       #B4443A;
	--pnc-sand:         #E4D5BC;
	--pnc-border:       rgba(18,48,32,0.12);
	--pnc-border-light: rgba(18,48,32,0.10);
	--pnc-on-dark:      #FBF8F1;
	--pnc-on-dark-muted:rgba(251,248,241,0.78);

	/* Typography */
	--pnc-font-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
	--pnc-font-body:    "DM Sans", system-ui, sans-serif;

	/* Layout */
	--pnc-container-max: 1280px;
	--pnc-radius-sm: 12px;
	--pnc-radius-md: 18px;
	--pnc-radius-lg: 24px;
	--pnc-radius-pill: 999px;
}

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

html, body { margin: 0; padding: 0; background: var(--pnc-cream); }

body {
	font-family: var(--pnc-font-body);
	color: var(--pnc-ink);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--pnc-font-display);
	margin: 0;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; line-height: 1.6; }

a { color: var(--pnc-green-700); text-decoration: none; }
a:hover { color: var(--pnc-accent); }

button { font-family: inherit; cursor: pointer; background: none; border: none; }

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

.pnc-container {
	max-width: var(--pnc-container-max);
	margin: 0 auto;
	padding: 0 28px;
}

.pnc-section--dark {
	background: var(--pnc-green-900);
	color: var(--pnc-on-dark);
	padding: 72px 0;
}

.pnc-eyebrow {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pnc-accent);
}

.pnc-prose { font-size: 16.5px; line-height: 1.7; color: var(--pnc-muted); }
.pnc-prose p + p { margin-top: 14px; }

.pnc-fineprint { font-size: 14.5px; color: var(--pnc-muted); margin-top: 24px; }

.pnc-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 28px;
}

.pnc-grid { display: grid; gap: 20px; }
.pnc-grid--three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pnc-grid--activities,
.pnc-grid--events,
.pnc-grid--packages,
.pnc-grid--camping-options,
.pnc-grid--experiences,
.pnc-grid--testimonials,
.pnc-grid--audiences,
.pnc-grid--pillars,
.pnc-grid--facilities { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

@keyframes pncFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }