/* ============================================================
   EARTHNESS BASE LAYER
   ============================================================
   Loaded after tokens.css. Contains:
     1. Reset & element defaults
     2. Utility primitives (.container, .eyebrow, .rule, .screen-reader-text)
     3. Global chrome — site header, primary nav, mobile menu button
     4. Global newsletter band
     5. Global site footer + columns + bottom bar
     6. Reveal-on-scroll animation
     7. Skip link

   Section-specific styles (hero, story, experiences grid, journal
   cards, friends rows, stay band, count strip, page-header, etc.)
   live in components.css and land in commit 4b.
   ============================================================ */

/* ============================================================
   1. RESET & ELEMENT DEFAULTS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--sans);
	font-size: var(--fs-body);
	line-height: 1.65;
	color: var(--ink);
	background: var(--paper);
	font-weight: 400;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
}

p { margin: 0; }


/* ============================================================
   2. UTILITY PRIMITIVES
   ============================================================ */
.container {
	max-width: var(--max-w);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.eyebrow {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
}

.rule {
	height: 1px;
	background: var(--rule);
	border: 0;
	margin: 0;
}

/* WordPress accessibility convention — hide text visually,
   keep it available to screen readers and skip links. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--paper);
	clip: auto !important;
	-webkit-clip-path: none;
	clip-path: none;
	color: var(--ink);
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Skip link, focusable for keyboard users */
.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--ink);
	color: var(--paper);
	padding: var(--s-2) var(--s-4);
	z-index: 100;
}
.skip-link:focus { top: 0; }


/* ============================================================
   3. SITE HEADER + PRIMARY NAV
   ============================================================ */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	padding: var(--s-5) 0;
}

/* Scrolled state — fixed, white-paper backdrop, subtle border. */
.site-header.scrolled {
	position: fixed;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--rule);
	padding: var(--s-4) 0;
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-5);
}

.nav__brand {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ink); /* default for non-hero pages */
	transition: color 0.3s ease;
}

/* Light brand on dark photo hero (set by .is-dark-header on body) */
body.is-dark-header .nav__brand            { color: var(--paper); }
body.is-dark-header .scrolled .nav__brand  { color: var(--ink); }

.nav__brand sup {
	font-size: 0.5em;
	vertical-align: super;
	margin-left: 1px;
}

.nav__brand-tag {
	display: block;
	font-family: var(--sans);
	font-size: 0.6875rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-mute);
	margin-top: 2px;
}

.nav__list {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--s-6);
}

/* WP nav menu sometimes wraps items in extra <span class="menu-item"> —
   target both the WP markup and the fallback markup we render in header.php */
.nav__list li { margin: 0; padding: 0; }

.nav__list a {
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--ink);
	position: relative;
	transition: opacity 0.2s ease;
}

body.is-dark-header .nav__list a            { color: var(--paper); }
body.is-dark-header .scrolled .nav__list a  { color: var(--ink); }

.nav__list a:hover { opacity: 0.7; }

.nav__list a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.nav__list a:hover::after { transform: scaleX(1); }

/* Mobile menu button — three-bar hamburger */
.nav__menu-btn {
	background: none;
	border: 0;
	color: var(--ink);
	padding: var(--s-2);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

body.is-dark-header .nav__menu-btn            { color: var(--paper); }
body.is-dark-header .scrolled .nav__menu-btn  { color: var(--ink); }

.nav__menu-btn span {
	display: block;
	width: 22px;
	height: 1px;
	background: currentColor;
}

@media (min-width: 900px) {
	.nav__list { display: flex; }
	.nav__menu-btn { display: none; }
}

/* ----- Mobile menu drawer (open state) -----------------------------
   Stage 3 oversight: nav.js was wired to toggle body.has-menu-open
   but the visual styles for the open drawer were never written. The
   button click was firing, the class was being added, and nothing
   happened. Below 900px, the open state turns .nav__list into a
   full-screen paper sheet with stacked links. Above 900px the
   @media block above wins and .nav__list is inline-flex regardless
   of body class. */
@media (max-width: 899.98px) {
	/* Drawer fills the ENTIRE viewport (inset: 0) so it cannot be
	   clipped by an ancestor's positioning context (the .site-header
	   is itself position:absolute or position:fixed when scrolled,
	   and Safari was clipping a top:81px child to its parent on
	   scrolled pages — that's the 0.1.18/19 truncated-list bug).
	   The header sits at z-index:100 above this drawer's z-index:80,
	   so the burger/X button stays on top and tappable. padding-top
	   pushes the first menu item below the visible header. */
	body.has-menu-open .nav__list {
		display: flex !important;
		flex-direction: column;
		gap: var(--s-6);
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		margin: 0;
		padding: 112px var(--s-6) var(--s-8);
		background: var(--paper);
		z-index: 80;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* When the drawer is open the header background is forced to paper,
	   so brand + burger must flip to ink even on is-dark-header pages —
	   otherwise white-on-white = invisible (the 0.1.18 empty-header bug).
	   Also: position:relative + high z-index so the burger paints ABOVE
	   the drawer <ul>. Both elements are siblings inside .nav, so they
	   share a stacking context — without explicit z-index, the <ul>
	   paints over the button because it comes later in source order
	   (the 0.1.20 missing-X bug). */
	body.has-menu-open .nav__menu-btn,
	body.has-menu-open.is-dark-header .nav__menu-btn,
	body.has-menu-open.is-dark-header .scrolled .nav__menu-btn {
		color: var(--ink) !important;
		position: relative !important;
		z-index: 110 !important;
	}
	body.has-menu-open .nav__brand,
	body.has-menu-open.is-dark-header .nav__brand,
	body.has-menu-open.is-dark-header .scrolled .nav__brand {
		color: var(--ink) !important;
		position: relative !important;
		z-index: 110 !important;
	}
	/* Force the header above the drawer and pin it to viewport top
	   while the menu is open, so the burger is always reachable. */
	body.has-menu-open .site-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: var(--paper);
		z-index: 100;
	}
	body.has-menu-open .nav__list a {
		font-size: 1.125rem;
		color: var(--ink);
	}
	/* Burger → X transform when open. */
	body.has-menu-open .nav__menu-btn span:nth-child(1) {
		transform: translateY(5px) rotate(45deg);
	}
	body.has-menu-open .nav__menu-btn span:nth-child(2) {
		opacity: 0;
	}
	body.has-menu-open .nav__menu-btn span:nth-child(3) {
		transform: translateY(-5px) rotate(-45deg);
	}
	.nav__menu-btn span {
		transition: transform 0.2s ease, opacity 0.2s ease;
	}
}


/* ============================================================
   4. NEWSLETTER BAND
   ============================================================ */
.newsletter {
	padding: var(--s-10) 0;
	background: var(--paper-warm);
	text-align: center;
}

.newsletter__inner {
	max-width: 36rem;
	margin: 0 auto;
}

.newsletter__title {
	font-size: var(--fs-h2);
	font-weight: 300;
	margin-bottom: var(--s-5);
	font-variation-settings: "opsz" 144;
}

.newsletter__title em { font-style: italic; }

.newsletter__text {
	color: var(--ink-soft);
	margin-bottom: var(--s-7);
	line-height: 1.6;
}

.newsletter__form {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--ink);
	max-width: 28rem;
	margin: 0 auto;
	padding-bottom: var(--s-2);
}

.newsletter__form input {
	flex: 1;
	border: 0;
	background: transparent;
	font-family: var(--sans);
	font-size: 0.9375rem;
	color: var(--ink);
	padding: var(--s-3) 0;
	outline: none;
}

.newsletter__form input::placeholder { color: var(--ink-mute); }

.newsletter__form button {
	background: transparent;
	border: 0;
	font-family: var(--sans);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink);
	padding: var(--s-3) var(--s-4);
}

/* ----- MailPoet form bridge ----------------------------------------
   Bridges MailPoet's actual rendered markup onto the .newsletter
   band's Final mockup styling. MailPoet wraps each field in a
   <div class="mailpoet_paragraph"> (NOT a <p>), and the submit
   wrapper carries .last as its second class. The form is the flex
   container; the paragraph divs are the flex items, NOT the inputs
   themselves. Specificity is bumped on input/border resets because
   browser UA defaults (2px inset border) win over single-class
   selectors. */
.newsletter .mailpoet_form {
	max-width: 28rem;
	margin: 0 auto;
}
.newsletter form.mailpoet_form {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	border-bottom: 1px solid var(--ink);
	padding: 0 0 var(--s-2) 0 !important;
	margin: 0 auto;
	max-width: 28rem;
	background: transparent;
}
.newsletter form.mailpoet_form .mailpoet_paragraph {
	margin: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}
.newsletter form.mailpoet_form .mailpoet_paragraph.last {
	flex: 0 0 auto;
}
.newsletter form.mailpoet_form input.mailpoet_text {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	border: 0 !important;
	background: transparent !important;
	font-family: var(--sans);
	font-size: 0.9375rem;
	color: var(--ink);
	padding: var(--s-3) 0;
	outline: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
.newsletter form.mailpoet_form input.mailpoet_text::placeholder {
	color: var(--ink-mute);
}
.newsletter form.mailpoet_form input.mailpoet_submit {
	background: transparent !important;
	border: 0 !important;
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink) !important;
	padding: var(--s-3) var(--s-4);
	cursor: pointer;
	box-shadow: none !important;
	border-radius: 0 !important;
	width: auto !important;
	display: inline-block;
}
.newsletter form.mailpoet_form input.mailpoet_submit:hover {
	color: var(--accent) !important;
}
/* Honeypot label — anti-spam, must stay hidden */
.newsletter .mailpoet_hp_email_label {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}
/* Inline validation error span */
.newsletter form.mailpoet_form .mailpoet_paragraph > span[class*="mailpoet_error"] {
	display: none;
}
/* Loading spinner — let MailPoet's defaults render but match brand */
.newsletter .mailpoet_form_loading > span { background: var(--ink); }
/* Success / error messages — force-wrap to own line below the underline.
   MailPoet renders .mailpoet_message as a child of the form, so without
   flex-basis:100% it competes with the input paragraph for horizontal
   flex space (the bug from 0.1.23 — input was 276px, message was 40px,
   underline visibly right-shifted). flex-wrap on the form + this rule
   pushes the message to its own row, restoring symmetric centering. */
.newsletter form.mailpoet_form .mailpoet_message {
	flex: 0 0 100%;
	width: 100%;
	max-width: 28rem;
	margin: var(--s-4) auto 0;
	font-family: var(--sans);
	font-size: 0.875rem;
	text-align: center;
	color: var(--ink);
	order: 10;
}
.newsletter .mailpoet_validate_success { color: var(--ink); }
.newsletter .mailpoet_validate_error { color: #b94a48; }
/* Popup overlay div MailPoet injects unconditionally — kill it for shortcode embeds */
.newsletter .mailpoet_form_popup_overlay { display: none !important; }

/* Inside Philosophy's closing block, the form should left-align with
   the heading + intent text, not center within the wide closing column
   like it does in the global footer band. Constrain the wrapper div's
   width to 28rem and pin it to the left. */
.closing div.newsletter {
	max-width: 28rem;
	margin-left: 0;
	margin-right: auto;
	padding: 0 !important;
}
.closing .newsletter form.mailpoet_form {
	margin-left: 0 !important;
	margin-right: auto !important;
}


/* ============================================================
   5. SITE FOOTER
   ============================================================ */
.site-footer {
	background: var(--paper);
	padding: var(--s-9) 0 var(--s-6);
	border-top: 1px solid var(--rule);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-7);
	margin-bottom: var(--s-8);
}

@media (min-width: 700px) {
	.site-footer__grid {
		grid-template-columns: 2fr 1fr 1fr 1fr;
	}
}

.footer__brand {
	font-family: var(--serif);
	font-size: 1.5rem;
	font-weight: 500;
	margin-bottom: var(--s-4);
}

.footer__brand sup { font-size: 0.5em; vertical-align: super; }

.footer__tagline {
	font-family: var(--serif);
	font-style: italic;
	color: var(--ink-soft);
	font-size: 0.9375rem;
	line-height: 1.5;
	max-width: 28ch;
}

.footer__heading {
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-mute);
	margin-bottom: var(--s-4);
}

.footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.footer__list a {
	font-size: 0.875rem;
	color: var(--ink);
	transition: opacity 0.2s ease;
}

.footer__list a:hover { opacity: 0.6; }

.footer__list li {
	font-size: 0.875rem;
	color: var(--ink);
}

.footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s-4);
	padding-top: var(--s-6);
	border-top: 1px solid var(--rule);
	font-size: 0.75rem;
	color: var(--ink-mute);
}

.footer__bottom a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.footer__legal a + a { margin-left: var(--s-1); }


/* ============================================================
   6. REVEAL-ON-SCROLL ANIMATION
   ============================================================ */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1),
		transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Respect reduced-motion users — no animation, content always visible. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}