/* Foundation — tokens, reset, typography, buttons, helpers.
 * High Life Treehouses. Extracted from the live site 18 Aug 2026. */

:root {
	/* Colour */
	--hl-bg:          #262626;
	--hl-bg-header:   #333333;
	--hl-bg-footer:   #2b2b2b;
	--hl-bg-deep:     #1a1a1a;
	--hl-bg-alt:      #f3f3f3;
	--hl-green:       #669b3d;
	--hl-green-text:  #7cb04d; /* lifted for AA on small text over charcoal */
	--hl-text:        #ffffff;
	--hl-muted:       #cccccc;
	--hl-dim:         #888888;
	--hl-rule:        #555555;

	/* Type */
	--hl-font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Space + measure */
	--hl-container: 1200px;
	--hl-gap: 2rem;
	--hl-section-y: clamp(2.5rem, 6vw, 5rem);
	/* Breath between two stacked photo sections (portals, image+text,
	 * video, gallery, full-width image). Each side gets this, so two
	 * neighbours sit 2x apart — live measures ~35px between photos. */
	--hl-photo-gap: 1.125rem;
	/* Extra room under a hero banner, on top of the next section's own gap. */
	--hl-banner-gap: clamp(1.25rem, 3vw, 2.25rem);
}

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

body {
	font-family: var(--hl-font);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.03em;
	color: var(--hl-text);
	background: var(--hl-bg);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--hl-green-text); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--hl-text); }

h1, h2, h3, h4, h5, h6 {
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.35;
}
h1 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); }
h2 { font-size: clamp(1.3rem, 3vw, 1.9rem); }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }

p { margin: 0 0 1.4rem; }
p:last-child { margin-bottom: 0; }

.container { width: 90%; max-width: var(--hl-container); margin: 0 auto; }
.section { padding-block: var(--hl-section-y); }

.btn, .pill {
	display: inline-block;
	font-family: var(--hl-font);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.95rem;
	padding: 0.85em 1.6em;
	border: 1px solid var(--hl-green);
	background: var(--hl-green);
	color: #fff;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease;
}
.btn:hover { background: transparent; color: #fff; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* Scroll reveal hook */
.fade-in { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.is-visible { opacity: 1; transform: none; }

/* ── Page entrance ──────────────────────────────────────────────────
 * A soft fade-and-lift on the page content, replacing the old full-screen
 * preloader. Pure CSS, starts at first paint, never waits for images, so it
 * costs nothing on Largest Contentful Paint beyond its own 0.4s. The header
 * stays solid so the page reads as "there" immediately. */
@keyframes hl-enter {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
.site-main { animation: hl-enter 0.45s cubic-bezier(.2,.7,.2,1) both; }
.site-footer { animation: hl-enter 0.45s cubic-bezier(.2,.7,.2,1) 0.1s both; }
@media (prefers-reduced-motion: reduce) {
	.site-main, .site-footer { animation: none; }
}