/* =============================================================
	 Starseed Genesis — Regenerative Entrepreneurship Residency
	 Stylesheet (loads after pico.min.css)

	 Structure
		 1. Design tokens (light = default)
		 2. Dark band token overrides
		 3. Base / reset tweaks over Pico
		 4. Typography
		 5. Layout: bands + staggered rows
		 6. Hero + topbar
		 7. Components: buttons, links, lists, day table, details, pull quote
		 8. Responsive: mobile-first, tablet (>=768), desktop (>=1024)
		 9. Accessibility
	 ============================================================= */

/* ---------- 1. Design tokens -------------------------------- */
:root {
	/* light palette (from the white-ground style guide) */
	--paper: #ffffff;
	--paper-warm: #f9f6e5;
	--cocoa: #3b2c20;
	--umber: #7c5537;
	--umber-light: #8e6a46;
	--sage: #93a187;
	--sage-deep: #5b6a53;
	--sage-pale: #b0d185;
	--brass: #96742f;
	--rule: rgba(91, 106, 83, 0.26);

	/* semantic roles — remapped per band */
	--bg: var(--paper-warm);
	--bg-panel: var(--paper-warm);
	--ink: var(--cocoa);
	--ink-soft: var(--sage-deep);
	--action: var(--umber);
	--action-ink: var(--paper);
	--line: var(--rule);
	--frame: var(--sage);

	/* type */
	--display: "Josefin Sans", "Century Gothic", "Futura", sans-serif;
	--text: "Jost", "Futura", "Century Gothic", sans-serif;

	/* metrics */
	--gut: clamp(20px, 5vw, 64px);
	--maxw: 1120px;
	--band-pad: clamp(56px, 10vw, 120px);
	color-scheme: light;
}

/* ---------- 2. Dark band overrides ------------------------- */
/* From the dark-ground style guide: sage becomes the light and
	 the action colour; umber drops back to structure; bone is type. */
.band--dark,
main > .band:not(.band--plain):nth-of-type(even) {
	--bg: #2e2822;
	--bg-panel: #3a322a;
	--ink: #e6e3d8; /* bone */
	--ink-soft: #aac785; /* sage */
	--action: #a8b499; /* sage */
	--action-ink: #241e19;
	--line: rgba(168, 180, 153, 0.22);
	--frame: #7c8a6e;
	--umber: #a87b50; /* umber-light: structural marks + fine print */
	--sage-deep: #7c8a6e;
	--sage-pale: #3a322a;
	--brass: #c9a46a;
}

.band--footer {
	--bg: #241e19;
	--ink: #e6e3d8;
	--ink-soft: #c9c4b4;
	--umber: #c9a46a;
}

/* ---------- 3. Base / reset over Pico ---------------------- */
html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--text);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

figure {
	margin: 0;
}

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

::selection {
	background: var(--sage-pale);
	color: var(--cocoa);
}

/* ---------- 4. Typography --------------------------------- */
h1,
h2 {
	font-family: var(--display);
	font-weight: 400;
	color: var(--ink);
	margin: 0;
	--typography-spacing-vertical: 0; /* neutralise Pico */
}

h1 {
	font-size: clamp(2.4rem, 6vw, 4.2rem);
	line-height: 1.05;
	letter-spacing: 0.06em;
}

h2 {
	font-size: clamp(1.6rem, 3.6vw, 2.45rem);
	line-height: 1.16;
	letter-spacing: 0.05em;
	margin-bottom: 0.7em;
	max-width: 20ch;
}

p {
	margin: 0 0 1.15rem;
	max-width: 64ch;
	color: var(--ink);
}

p:last-child {
	margin-bottom: 0;
}
td {
	background-color: inherit;
}

.eyebrow {
	font-family: var(--text);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--sage-deep);
	margin: 0 0 1.6em;
}

.lead {
	font-size: clamp(1.05rem, 2vw, 1.28rem);
	/* font-weight: 350; */
	line-height: 1.6;
	color: var(--ink-soft);
	max-width: 52ch;
}

.fineprint {
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--ink-soft);
	max-width: 56ch;
	font-weight: 500;
}

.tbd {
	color: var(--brass);
	font-style: normal;
	white-space: nowrap;
}

.tbd--wrap {
	white-space: normal;
}

/* generic links inside prose (not .btn / .link) */
.band a:not(.btn):not(.link) {
	color: var(--action);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--frame);
}

.band a:not(.btn):not(.link):hover {
	text-decoration-color: currentColor;
}

/* ---------- 5. Bands + staggered rows --------------------- */
.band {
	background: var(--bg);
	color: var(--ink);
	padding: var(--band-pad) 0;
	/* border-top: 1px solid var(--line); */
}

.hero + .band {
	border-top: 0;
}

.band__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gut);
}

.band--plain .band__inner {
	max-width: 820px;
}

/* staggered two-column row: default = text left / media right */
.stagger {
	display: grid;
	gap: clamp(28px, 6vw, 64px);
	/*align-items: center;*/
}

.band__media img {
	width: 100%;
	aspect-ratio: 1 / 1; /* square, per instruction — no arch */
	object-fit: cover;
	border: 1px solid var(--frame);
	/* border-radius: 231px; */
	border-radius: 32px;
}

.band__media--noborder img {
	border: none;
}

.band__media--auto {
	display: flex;
	justify-content: center;
	align-items: center;
}

.band__media--auto img {
	width: auto;
	max-width: 92%;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
}

.band__media figcaption {
	margin-top: 0.85em;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--sage-deep);
	max-width: 40ch;
}

/* ---------- 6. Hero + topbar ----------------------------- */
.topbar {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: clamp(18px, 3vw, 30px) var(--gut);
	color: #f6f4ef;
}

.topbar__brand {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--display);
	font-weight: 800;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-size: 0.82rem;
}

.topbar__logo {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
}

.topbar__logo .seed-of-life {
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
}

.topbar__link {
	font-family: var(--text);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #f6f4ef;
	text-decoration: none;
	border-bottom: 1px solid rgba(246, 244, 239, 0.5);
	padding-bottom: 3px;
	font-weight: 600;
}

.topbar__link:hover,
.topbar__link:focus-visible {
	border-color: #f6f4ef;
}

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 100vh;
	overflow: hidden;
	color: #f6f4ef;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(46, 40, 34, 0.12) 0%,
		rgba(46, 40, 34, 0.42) 45%,
		rgba(46, 40, 34, 0.74) 100%
	);
}

.hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gut) clamp(48px, 9vw, 104px);
}

.hero__kicker {
	font-family: var(--display);
	font-weight: 300;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	font-size: 0.8rem;
	margin: 0 0 1.4em;
}

.hero h1 {
	color: #ffffff;
	max-width: 15ch;
}

.hero__sub {
	max-width: 46ch;
	margin: 1.2em 0 2.1em;
	font-size: clamp(1rem, 1.9vw, 1.16rem);
	color: #f2efe8;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.1rem 1.8rem;
}

.hero .link {
	color: #f6f4ef;
	border-color: rgba(246, 244, 239, 0.55);
}

.hero .link:hover,
.hero .link:focus-visible {
	color: #ffffff;
	border-color: #ffffff;
}

/* ---------- 7. Components -------------------------------- */
.btn {
	display: inline-block;
	font-family: var(--text);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 15px 30px;
	border: 1px solid var(--action);
	background: #659f44;
	color: var(--action-ink);
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.btn:hover,
.btn:focus-visible {
	background: #8bd869;
	color: #b17318;
}

.link {
	font-family: var(--text);
	font-size: 0.95rem;
	color: var(--action);
	text-decoration: none;
	border-bottom: 1px solid var(--frame);
	padding-bottom: 2px;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.link:hover,
.link:focus-visible {
	color: var(--ink);
	border-color: var(--action);
}

.band--dark .link:hover,
.band--dark .link:focus-visible {
	color: var(--brass);
	border-color: var(--brass);
}

.pull {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(1.35rem, 2.3vw, 1.9rem);
	line-height: 1.35;
	letter-spacing: 0.05em;
	color: var(--brass);
	border-left: 1px solid var(--brass);
	padding-left: clamp(16px, 3vw, 28px);
	margin: 2.2em 0 0;
	max-width: 30ch;
}

/* day table */
.day {
	width: 100%;
	max-width: 520px;
	border-collapse: collapse;
	font-size: 0.98rem;
	margin: 1.6em 0 0;
}

.day td {
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	color: var(--ink); /* overrides Pico's td colour, which is unreadable on dark bands */
}

.day tr:last-child td {
	border-bottom: 0;
}

.day td:first-child {
	width: 34%;
	padding-right: 16px;
	color: var(--sage-deep);
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* fit / included lists */
.fit {
	list-style: none;
	margin: 0 0 1.4em;
	padding: 0;
	font-size: 0.98rem;
}

.fit:last-child {
	margin-bottom: 0;
}

.fit li {
	position: relative;
	list-style: none;
	padding: 9px 0 9px 28px;
	max-width: 54ch;
	line-height: 1;
	color: var(--ink);
}

.fit li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 1px;
	background: var(--umber);
}

#fit .fit li::before {
	content: "+";
	width: auto;
	height: auto;
	background: none;
	font-size: 1rem;
	line-height: 1;
	color: var(--umber);
}

.fit--2col {
	columns: 2;
	column-gap: 1.5em;
}

.fit--2col li {
	break-inside: avoid;
	max-width: none;
}


#fit .fit--no li::before {
	content: "\2212";
}

.list-label {
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sage-deep);
	margin: 0 0 0.6em;
	font-weight: 600;
}

/* practical details */
.details {
	margin: 0;
}

.details > div {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	padding: 18px 0;
	border-top: 1px solid var(--line);
}

.details > div:first-child {
	border-top: 0;
}

.details dt {
	font-weight: 400;
	color: var(--ink);
	letter-spacing: 0.03em;
}

.details dd {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.96rem;
	max-width: 60ch;
}

/* apply section */
.apply {
	text-align: center;
}

.apply .lead,
.apply p {
	margin-left: auto;
	margin-right: auto;
}

.apply .hero__actions,
.apply .actions {
	justify-content: center;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.1rem 1.8rem;
	margin-top: 0.6em;
}

/* footer */
.site-footer .band__inner {
	display: grid;
	gap: 1rem;
}

.site-footer p {
	font-size: 1.05rem;
	color: var(--ink-soft);
	max-width: 62ch;
}

.site-footer .location {
	color: var(--umber);
	letter-spacing: 0.06em;
}

.band.site-footer a:not(.btn):not(.link) {
	color: var(--ink);
	text-decoration-color: var(--umber);
}

/* ---------- 8. Responsive ------------------------------- */

/* Mobile: image above text for every section */
@media (max-width: 767px) {
	.stagger .band__media {
		order: -1;
	}
}

/* Tablet and up: staggered rows become two columns */
@media (min-width: 768px) {
	.stagger {
		grid-template-columns: 1fr 1fr;
		gap: clamp(36px, 5vw, 68px);
	}

	/* reversed rows: media moves to the left column */
	.stagger--reverse .band__media {
		order: -1;
	}

	/* same effect, applied by position: bands alternate normal/reversed */
	main > section:nth-of-type(even) .band__inner.stagger .band__media {
		order: -1;
	}

	.details > div {
		grid-template-columns: 190px 1fr;
		gap: 28px;
		align-items: baseline;
	}
}

/* Desktop: a little more air between columns */
@media (min-width: 1024px) {
	.stagger {
		gap: clamp(56px, 6vw, 92px);
	}

	.band__media img {
		/* keep primary images from ballooning on very wide screens */
		max-height: 560px;
		object-position: center;
		margin-top: 3rem;
	}

	.band__media--auto img {
		max-height: none;
	}
}

/* Small phones: tighten the hero */
@media (max-width: 480px) {
	.hero {
		min-height: 100vh;
	}

	.hero__kicker {
		letter-spacing: 0.26em;
	}

	.btn {
		display: block;
		text-align: center;
	}

	.hero__actions .link,
	.actions .link {
		display: inline-block;
	}
}

/* ---------- 9. Accessibility ---------------------------- */
:focus-visible {
	outline: 2px solid var(--action);
	outline-offset: 3px;
}

:where(section, footer)[id] {
	scroll-margin-top: 2rem;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		transition: none !important;
		animation: none !important;
	}
}

/* "We Give Back": three equal charity columns with line separators in the gaps */
.give {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: clamp(64px, 11vw, 176px);
	margin-top: 3.5rem;
}

.give__col {
	position: relative;
}

.give__col + .give__col::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(clamp(64px, 11vw, 176px) / -2);
	border-left: 1px solid var(--sage-deep);
	opacity: 0.7;
}

.give__col img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--frame);
	border-radius: 32px;
}

.give__col img.give__logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: 3rem;
	aspect-ratio: auto;
	object-fit: contain;
	border: 0;
	border-radius: 0;
	margin: 0 auto 1.25rem;
}

.give__text {
	margin-top: 1rem;
	font-family: var(--text);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ink);
}

@media (max-width: 767px) {
	.give {
		grid-template-columns: 1fr;
		row-gap: 4rem;
	}
	.give__col + .give__col::before {
		top: -2rem;
		bottom: auto;
		left: 0;
		right: 0;
		border-left: 0;
		border-top: 2px solid var(--action);
	}
	.give__col img.give__logo {
		height: 4.5rem;
	}
}

.give__title,
.give__sub {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.give__title {
	font-size: clamp(1.2rem, 3vw, 1.6rem);
	margin-bottom: 1em;
}

/* wider columns on large screens (e.g. 1440) */
@media (min-width: 1200px) {
	.give__inner {
		max-width: 1400px;
	}
}

.give__link {
	display: block;
	border: 0;
}

.give__url {
	display: block;
	margin-top: 1rem;
	font-size: 0.85rem;
	color: var(--ink-soft);
}