/* ============================================================== fonts === */

@font-face {
	font-family: 'Geist';
	src: url('../assets/fonts/Geist-Variable.woff2') format('woff2');
	font-weight: 100 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Geist Mono';
	src: url('../assets/fonts/GeistMono-Variable.woff2') format('woff2');
	font-weight: 100 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Instrument Serif';
	src: url('../assets/fonts/InstrumentSerif-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Instrument Serif';
	src: url('../assets/fonts/InstrumentSerif-Italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* ============================================================== tokens === */

:root {
	--ink: #f2f0e6;
	--ink-soft: rgba(242, 240, 230, 0.68);
	--ink-faint: rgba(242, 240, 230, 0.4);
	--accent: #c5e4a3;
	--line: rgba(242, 240, 230, 0.14);

	/* EcoPlot brand primitives */
	--forest: #10261d;
	--botanical: #315b45;
	--sage: #a8c7a0;
	--cream: #f2f0e6;
	--lime: #c5e4a3;
	--soil: #795b42;
	--charcoal: #181f1b;

	--gutter: clamp(1.4rem, 4.6vw, 6.5rem);
	--chapter-height: 185vh;

	--sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
	--display: 'Instrument Serif', Georgia, 'Times New Roman', serif;

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================== base ==== */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: #0b120e;
	color: var(--ink);
	font-family: var(--sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: -0.004em;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: #10261d; }

a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, figure, ul { margin: 0; }
code { font-family: var(--mono); font-size: 0.92em; letter-spacing: 0; }
em { font-style: italic; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ============================================================== buttons == */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.68rem 1.5rem;
	border-radius: 999px;
	border: 1px solid transparent;
	background: none;
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.25s var(--ease-out), background 0.25s var(--ease-out),
		border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.btn:active { transform: scale(0.97); }

.btn--primary {
	background: var(--lime);
	color: #10261d;
}

.btn--primary:hover { background: #d8f0bd; }

.btn--ghost {
	border-color: rgba(242, 240, 230, 0.35);
	color: var(--ink);
}

.btn--ghost:hover { border-color: var(--lime); color: var(--lime); }

.btn--dark {
	background: var(--charcoal);
	color: var(--cream);
}

.btn--dark:hover { background: var(--forest); }

.btn--ghost-dark {
	border-color: rgba(24, 31, 27, 0.4);
	color: var(--charcoal);
}

.btn--ghost-dark:hover { border-color: var(--botanical); color: var(--botanical); }

/* ============================================================== tags ==== */

.tag {
	display: inline-block;
	padding: 0.18em 0.6em;
	border-radius: 999px;
	border: 1px solid currentColor;
	font-family: var(--mono);
	font-size: 0.52rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	vertical-align: 0.18em;
	margin-left: 0.5em;
	white-space: nowrap;
}

.tag--pilot { color: #e0a05c; }
.tag--planned { color: var(--sage); }
.tag--live { color: var(--lime); }
.tag--prototype { color: #8fd0c0; }

.sheet--cream .tag--pilot { color: #9a5b1e; }
.sheet--cream .tag--planned { color: var(--botanical); }
.sheet--cream .tag--live { color: #3f7a2e; }
.sheet--cream .tag--prototype { color: #1e7a68; }

/* ============================================================== canvas == */

#stage {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
	opacity: 0;
	transition: opacity 1.6s var(--ease-out);
}

body.is-live #stage { opacity: 1; }

/* a whisper of extra depth on top of the render */
.atmosphere {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(120% 78% at 50% 8%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.36) 100%),
		linear-gradient(to bottom, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5));
	opacity: 0;
	transition: opacity 2s var(--ease-out);
}

body.is-live .atmosphere { opacity: 1; }

/* ============================================================== chrome == */

.chrome {
	position: fixed;
	z-index: 20;
	opacity: 0;
	pointer-events: none;
}

body.is-live .chrome { opacity: 1; transition: opacity 1.2s var(--ease-out) 0.5s; }

.nav {
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: clamp(1.1rem, 2.4vw, 2.1rem) var(--gutter);
	mix-blend-mode: normal;
}

.nav__brand {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--mono);
	font-weight: 400;
	font-size: 0.78rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--ink);
	transition: color 0.5s var(--ease-out);
}

.plant-mark {
    width:36px;height:39px;flex:none;color:#c6df9a;
    --root-ink:#d8c398;--seed-ink:#e4ba73;--seed-seam:#79532c;
    --leaf-ink:#8bb588;--pod-seam:#476d4d;
}
body.is-sheets .nav .plant-mark {
    color:#305b39;--root-ink:#795e3d;--leaf-ink:#60834c;--seed-ink:#ab773d;--seed-seam:#573719;
}
.plant-root,.plant-stem {stroke-dasharray:1;stroke-dashoffset:var(--root-gap,0);opacity:clamp(0,calc((1 - var(--root-gap,0))*25),1)}
.plant-stem {stroke-dashoffset:var(--stem-gap,0);opacity:clamp(0,calc((1 - var(--stem-gap,0))*25),1)}
.plant-kernel {transform-origin:22px 37px;transform:scale(var(--kernel, .48))}
.plant-sprout {transform:scale(var(--sprout,1))}
.plant-leaves {transform:scale(var(--leaves,1))}
.plant-tip {transform:scale(var(--tip,1))}
@media (prefers-reduced-motion:no-preference) {
    .nav .plant-mark {--root-gap:1;--stem-gap:1;--kernel:1;--sprout:0;--leaves:0;--tip:0}
}

.nav__links {
	display: flex;
	gap: clamp(1rem, 2.4vw, 2.4rem);
	pointer-events: auto;
}

.nav__group { position: relative; }

.nav__item {
	background: none;
	border: 0;
	padding: 0.6rem 0.2rem;
	min-height: 44px;
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(242, 240, 230, 0.75);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	transition: color 0.25s var(--ease-out);
}

.nav__item:hover, .nav__item[aria-expanded="true"] { color: #f2f0e6; }

.nav__item::after {
	content: '';
	width: 0.34rem;
	height: 0.34rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translateY(-0.1rem);
	transition: transform 0.25s var(--ease-out);
}

.nav__item:hover, .nav__item[aria-expanded="true"] { color: var(--ink); }

.nav__group:hover .nav__item,
.nav__group:focus-within .nav__item { color: var(--ink); }

.nav__menu {
	position: absolute;
	top: calc(100% + 0.6rem);
	left: 50%;
	transform: translate(-50%, 0.5rem);
	min-width: 17rem;
	padding: 0.5rem;
	border-radius: 0.9rem;
	background: rgba(13, 22, 17, 0.92);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(242, 240, 230, 0.12);
	display: grid;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
	z-index: 30;
}

.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu,
.nav__group.is-open .nav__menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.nav__menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	padding: 0.72rem 0.9rem;
	border-radius: 0.55rem;
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--ink-soft);
	transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.nav__menu a:hover { background: rgba(197, 228, 163, 0.1); color: var(--ink); }

.nav__cta { pointer-events: auto; }

.nav__burger {
	display: none;
	pointer-events: auto;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 44px;
	height: 44px;
	background: none;
	border: 1px solid rgba(242, 240, 230, 0.45);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.5s var(--ease-out);
}

.nav__burger i {
	display: block;
	width: 16px;
	height: 1.5px;
	background: var(--ink);
	transition: transform 0.25s var(--ease-out);
}

.nav__burger[aria-expanded="true"] i:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* mobile menu overlay */
.menu {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(9, 16, 12, 0.97);
	backdrop-filter: blur(18px);
	padding: clamp(1.4rem, 5vw, 3rem);
}

.menu[hidden] { display: none; }

.menu__inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	overflow-y: auto;
}

.menu nav { display: grid; gap: 0.2rem; padding-top: 3.5rem; }

.menu nav a {
	font-family: var(--display);
	font-size: clamp(1.7rem, 7vw, 2.4rem);
	line-height: 1.25;
	color: var(--ink);
	padding: 0.3rem 0;
	min-height: 44px;
}

.menu nav a:hover { color: var(--lime); }

.menu__label {
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 1.4rem 0 0.4rem;
}

.menu__close {
	align-self: flex-start;
	min-height: 44px;
	padding: 0.6rem 1.6rem;
	border-radius: 999px;
	border: 1px solid rgba(242, 240, 230, 0.3);
	background: none;
	color: var(--ink);
	font-family: var(--mono);
	font-size: 0.66rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	cursor: pointer;
}

.dot { opacity: 0.42; }

/* thin progress line at the very top */
.scrollbar {
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: rgba(255, 255, 255, 0.07);
}

.scrollbar i {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--accent);
	box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 80%, transparent);
	transition: background 0.8s linear;
}

/* chapter rail — sits opposite the readout so it never fights the copy */
.rail {
	right: var(--gutter);
	bottom: clamp(1rem, 2.2vw, 1.9rem);
}

.rail ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 1.5rem;
}

.rail li {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-faint);
	transition: color 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
	opacity: 0.45;
}

.rail li b {
	font-weight: 400;
	font-size: 0.58rem;
	color: inherit;
}

.rail li span {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width 0.7s var(--ease-out);
}

.rail li.is-active {
	opacity: 1;
	color: var(--accent);
}

.rail li.is-active span { max-width: 8rem; }

/* live readout */
.hud {
	left: var(--gutter);
	bottom: clamp(1rem, 2.2vw, 1.9rem);
	display: flex;
	gap: 0.55rem;
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

/* ============================================================== layout == */

main { position: relative; z-index: 10; }

.panel {
	position: relative;
	min-height: var(--chapter-height);
}

.panel__inner {
	position: sticky;
	top: 0;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(6rem, 12vh, 10rem) var(--gutter) clamp(5rem, 10vh, 8rem);
}

.hero {
	min-height: 100svh;
}

.hero .panel__inner {
	min-height: 100svh;
	justify-content: flex-end;
	padding-bottom: clamp(6rem, 16vh, 11rem);
	max-width: 62rem;
}

.chapter--right .panel__inner { align-items: flex-end; text-align: right; }

.card {
	position: relative;
	max-width: 33rem;
}

/* soft local scrim so type always reads over the render — sized to the sticky
   frame itself, so nothing ever overhangs the viewport */
.panel__inner::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(66% 58% at 24% 52%, rgba(4, 6, 9, 0.74), rgba(4, 6, 9, 0) 72%);
}

.chapter--right .panel__inner::before {
	background: radial-gradient(66% 58% at 76% 52%, rgba(4, 6, 9, 0.74), rgba(4, 6, 9, 0) 72%);
}

/* the hero carries no scrim of its own — its inner is width-capped, so any
   fill here shows its own edge. The full-viewport .atmosphere gradient is
   what keeps the headline legible. */
.hero .panel__inner::before { content: none; }

.outro .panel__inner::before {
	background: radial-gradient(72% 62% at 26% 50%, rgba(4, 6, 9, 0.8), rgba(4, 6, 9, 0) 74%);
}

/* ============================================================== type ==== */

.eyebrow {
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: clamp(1.1rem, 2.4vh, 2rem);
}

.eyebrow b {
	font-weight: 400;
	color: var(--accent);
	transition: color 0.8s linear;
}

.display {
	font-family: var(--display);
	/* 与首屏标题同一路数：更小更细。行高 > 1，中文多行标题才不会相碰 */
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -0.012em;
	font-size: clamp(2rem, 4.4vw, 4.4rem);
	text-wrap: balance;
}

.display--hero {
	/* 四个汉字整体成行，字号随视口收敛，窄屏下也不会折行叠字 */
	font-size: clamp(2.6rem, 6vw, 6rem);
	line-height: 1;
	white-space: nowrap;
	font-weight: 300;
	max-width: none;
}

.display--outro {
	font-size: clamp(1.9rem, 4vw, 4rem);
	max-width: 20ch;
}

.chapter .display { margin-bottom: clamp(1.4rem, 3vh, 2.4rem); }

.lede {
	margin-top: clamp(1.6rem, 3.4vh, 2.6rem);
	max-width: 38ch;
	font-size: clamp(1rem, 1.05vw, 1.14rem);
	line-height: 1.62;
	color: var(--ink-soft);
}

.lede b {
	font-weight: 400;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.body {
	max-width: 40ch;
	font-size: clamp(0.95rem, 0.98vw, 1.06rem);
	line-height: 1.68;
	color: var(--ink-soft);
}

.chapter--right .body,
.chapter--right .spec { margin-left: auto; }

/* ============================================================== specs === */

.spec,
.colophon {
	margin-top: clamp(1.8rem, 3.6vh, 2.8rem);
	display: grid;
	gap: 0;
	border-top: 1px solid var(--line);
	max-width: 34rem;
}

.spec > div,
.colophon > div {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: 1rem;
	padding: 0.62rem 0;
	border-bottom: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
}

.chapter--right .spec > div { grid-template-columns: 1fr 9rem; }
.chapter--right .spec dt { order: 2; text-align: right; }
.chapter--right .spec dd { order: 1; text-align: right; }

.spec dt,
.colophon dt {
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.62rem;
	align-self: center;
}

.spec dd,
.colophon dd {
	margin: 0;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.outro .panel__inner { max-width: 64rem; }

.colophon { margin-top: clamp(2.4rem, 5vh, 4rem); max-width: 44rem; }
.colophon > div { grid-template-columns: 10rem 1fr; }

.foot {
	margin-top: clamp(2.4rem, 5vh, 4rem);
	display: flex;
	gap: 0.6rem;
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

/* ============================================================== hero cue */

.hero__cue {
	position: absolute;
	left: var(--gutter);
	bottom: clamp(2.2rem, 5vh, 3.4rem);
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.hero__cue i {
	display: block;
	width: 3.4rem;
	height: 1px;
	background: linear-gradient(to right, var(--accent), transparent);
	transform-origin: left center;
	animation: cue 2.8s var(--ease-out) infinite;
}

@keyframes cue {
	0%, 100% { transform: scaleX(0.35); opacity: 0.45; }
	45% { transform: scaleX(1); opacity: 1; }
}

/* ============================================================== reveal == */

[data-reveal],
.split-line {
	will-change: transform, opacity;
}

.split-mask { overflow: hidden; display: block; }

/* ============================================================== boot ==== */

.boot {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	background: #05070a;
	transition: opacity 1.1s var(--ease-out), visibility 1.1s;
}

.boot.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.boot__inner { display: grid; justify-items: center; gap: 1.5rem; }

.boot__mark {
	font-family: var(--mono);
	font-size: 0.8rem;
	letter-spacing: 0.5em;
	text-indent: 0.5em;
	color: var(--ink);
}

.boot__bar {
	width: min(46vw, 14rem);
	height: 1px;
	background: rgba(255, 255, 255, 0.12);
	overflow: hidden;
}

.boot__bar i {
	display: block;
	height: 100%;
	width: 30%;
	background: var(--accent);
	animation: boot 1.5s ease-in-out infinite;
}

@keyframes boot {
	0% { transform: translateX(-110%); }
	100% { transform: translateX(360%); }
}

.boot__note {
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

/* ============================================================== fallback  */

.fallback {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: grid;
	place-items: center;
	padding: var(--gutter);
	background:
		radial-gradient(120% 90% at 30% 10%, #16202c, #05070a 70%);
}

.fallback[hidden] { display: none; }
.fallback__inner { max-width: 40rem; display: grid; gap: 1.4rem; }
.fallback .display { font-size: clamp(2.4rem, 6vw, 4.2rem); }
.fallback__reason { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint); }

/* ============================================================== small === */

@media (max-width: 900px) {
	:root { --chapter-height: 165vh; }

	.rail { display: none; }
	.card { max-width: 100%; }
	.chapter--right .panel__inner { align-items: flex-start; text-align: left; }
	.chapter--right .body, .chapter--right .spec { margin-left: 0; }
	.chapter--right .spec > div { grid-template-columns: 8rem 1fr; }
	.chapter--right .spec dt { order: 0; text-align: left; }
	.chapter--right .spec dd { order: 0; text-align: left; }
	.chapter--right .panel__inner::before { background: radial-gradient(80% 58% at 30% 52%, rgba(4, 6, 9, 0.76), rgba(4, 6, 9, 0) 74%); }
	.spec > div, .colophon > div { grid-template-columns: 7.5rem 1fr; font-size: 0.66rem; }
	.hud { font-size: 0.55rem; letter-spacing: 0.12em; }
	.nav__meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__cue i { animation: none; }
	.boot__bar i { animation: none; width: 100%; }
	#stage, .atmosphere, .chrome { transition-duration: 0.01ms; }
}


/* ============================================================== hero acts */

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-top: clamp(1.6rem, 3.4vh, 2.6rem);
}

.card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: clamp(1.6rem, 3.4vh, 2.4rem);
}

.body--wide { max-width: 56ch; }

.link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--botanical);
	text-underline-offset: 3px;
	transition: color 0.2s var(--ease-out);
}

.link:hover { color: var(--botanical); }

/* ============================================================== sheets ===
   The light/dark acts of the site — opaque sections that lift off the field
   after the scroll story ends. Ink tokens are re-scoped per surface. */

.sheet {
	position: relative;
	z-index: 10;
	background: var(--cream);
	color: var(--charcoal);
	padding: clamp(5rem, 12vh, 9rem) var(--gutter);
}

.sheet--cream {
	--ink: #181f1b;
	--ink-soft: rgba(24, 31, 27, 0.74);
	--ink-faint: rgba(24, 31, 27, 0.46);
	--accent: #315b45;
	--line: rgba(24, 31, 27, 0.14);
}

.sheet--forest {
	background: var(--forest);
	color: var(--ink);
	--ink: #f2f0e6;
	--ink-soft: rgba(242, 240, 230, 0.72);
	--ink-faint: rgba(242, 240, 230, 0.42);
	--accent: #c5e4a3;
	--line: rgba(242, 240, 230, 0.14);
}

.sheet__inner {
	max-width: 72rem;
	margin: 0 auto;
	display: grid;
	gap: clamp(2rem, 4.5vh, 3.4rem);
}

.sheet .display { max-width: 22ch; }

.sheet__inner--split {
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}

.support-card, .contact-card {
	display: grid;
	gap: 1.1rem;
	padding: clamp(1.6rem, 3vw, 2.4rem);
	border-radius: 1.2rem;
	background: transparent;
	border: 1px solid rgba(24, 31, 27, 0.12);
}

.sheet--forest .support-card {
	background: transparent;
	border-color: rgba(242, 240, 230, 0.14);
}

.support-card h3, .contact-card h3,
.tile h3 {
	font-family: var(--sans);
	font-weight: 500;
	font-size: 1.02rem;
	letter-spacing: -0.01em;
}

.support-card p, .contact-card p { color: var(--ink-soft); }

.support-card .btn, .contact-card .btn { justify-self: start; }

.spec--dark { max-width: 100%; }

.fine {
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--ink-faint);
	max-width: 62ch;
}

.fine--dark { color: var(--ink-faint); }

/* ============================================================== grids ==== */

.grid {
	display: grid;
	gap: 1rem;
}

.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.tile {
	display: grid;
	gap: 0.8rem;
	align-content: start;
	padding: clamp(1.4rem, 2.6vw, 2rem);
	border-radius: 1.2rem;
	border: 1px solid rgba(24, 31, 27, 0.12);
	background: transparent;
	transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.tile:hover { transform: translateY(-3px); border-color: rgba(49, 91, 69, 0.45); }

.tile p { color: var(--ink-soft); font-size: 0.95rem; }

.tile .btn { justify-self: start; margin-top: 0.4rem; }

.tile--dark {
	background: transparent;
	border-color: rgba(242, 240, 230, 0.12);
}

.tile--dark:hover { border-color: rgba(197, 228, 163, 0.5); }

.tile__status { margin-bottom: -0.4rem; }

.tile--dark .tile__status .tag { margin-left: 0; }

/* ============================================================== ecosystem */

.ecosystem {
	display: grid;
	gap: 1.4rem;
	padding: clamp(1.4rem, 3vw, 2.4rem);
	border-radius: 1.4rem;
	border: 1px solid rgba(24, 31, 27, 0.12);
	background: transparent;
}

.ecosystem__map svg { width: 100%; height: auto; display: block; }

.eco-line {
	fill: none;
	stroke: rgba(49, 91, 69, 0.5);
	stroke-width: 1.5;
	stroke-dasharray: 5 7;
	animation: eco-dash 2.6s linear infinite;
}

@keyframes eco-dash {
	to { stroke-dashoffset: -24; }
}

.eco-dot { fill: #315b45; }
.eco-dot--out { fill: #795b42; }

.eco-node circle {
	fill: rgba(49, 91, 69, 0.08);
	stroke: rgba(49, 91, 69, 0.55);
	stroke-width: 1.5;
	transition: fill 0.3s var(--ease-out), stroke 0.3s var(--ease-out);
}

.eco-node text {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	fill: var(--charcoal);
	text-anchor: middle;
}

.eco-node--hub circle { fill: rgba(49, 91, 69, 0.2); }

.ecosystem[data-active="farmers"] .eco-node[data-eco-node="farmers"] circle,
.ecosystem[data-active="network"] .eco-node[data-eco-node="network"] circle,
.ecosystem[data-active="tables"] .eco-node[data-eco-node="tables"] circle {
	fill: rgba(49, 91, 69, 0.32);
	stroke: #315b45;
}

.ecosystem__pick {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.ecosystem__pick button {
	min-height: 44px;
	padding: 0.55rem 1.3rem;
	border-radius: 999px;
	border: 1px solid rgba(24, 31, 27, 0.25);
	background: none;
	font-family: var(--mono);
	font-size: 0.64rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-soft);
	cursor: pointer;
	transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.ecosystem__pick button[aria-selected="true"] {
	background: var(--charcoal);
	border-color: var(--charcoal);
	color: var(--cream);
}

.ecosystem__list {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.6rem 1.6rem;
}

.ecosystem__list li {
	display: flex;
	gap: 0.7rem;
	align-items: baseline;
	font-size: 0.95rem;
	color: var(--ink-soft);
}

.ecosystem__list li::before {
	content: '';
	flex: none;
	width: 0.42rem;
	height: 0.42rem;
	border-radius: 50%;
	background: var(--botanical);
	transform: translateY(-0.08rem);
}

/* ============================================================== dialog == */

.dialog {
	width: min(36rem, calc(100vw - 2rem));
	max-height: min(44rem, calc(100dvh - 2rem));
	border: 1px solid rgba(242, 240, 230, 0.14);
	border-radius: 1.3rem;
	padding: 0;
	background: #0e1a13;
	color: var(--ink);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.dialog::backdrop {
	background: rgba(6, 11, 8, 0.72);
	backdrop-filter: blur(6px);
}

.dialog[open] {
	display: grid;
	grid-template-rows: auto 1fr;
	animation: dialog-in 0.3s var(--ease-out);
}

@keyframes dialog-in {
	from { opacity: 0; transform: translateY(14px) scale(0.98); }
}

.dialog__head {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1.4rem, 4vw, 2rem) clamp(1.4rem, 4vw, 2rem) 0.6rem;
}

.dialog__head .eyebrow { margin-bottom: 0.4rem; }

.dialog__title {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.6rem, 4vw, 2.1rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.dialog__close {
	flex: none;
	min-height: 44px;
	min-width: 44px;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	border: 1px solid rgba(242, 240, 230, 0.25);
	background: none;
	color: var(--ink-soft);
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.dialog__close:hover { color: var(--ink); border-color: var(--lime); }

.dialog__body {
	overflow-y: auto;
	padding: 0.6rem clamp(1.4rem, 4vw, 2rem) clamp(1.4rem, 4vw, 2rem);
}

/* ============================================================== forms ==== */

.form { display: grid; gap: 1.15rem; }

.form__row { display: grid; gap: 1.15rem; grid-template-columns: 1fr 1fr; }

.field { display: grid; gap: 0.4rem; }

.field > span, .field legend {
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.7rem 0.9rem;
	border-radius: 0.65rem;
	border: 1px solid rgba(242, 240, 230, 0.18);
	background: rgba(242, 240, 230, 0.05);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 0.95rem;
	transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.field textarea { min-height: 6.5rem; resize: vertical; line-height: 1.55; }

.field input:focus, .field select:focus, .field textarea:focus {
	outline: none;
	border-color: var(--lime);
	background: rgba(242, 240, 230, 0.08);
}

.field select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
	background-position: calc(100% - 1.1rem) 50%, calc(100% - 0.8rem) 50%;
	background-size: 0.3rem 0.3rem;
	background-repeat: no-repeat;
}

.field select:invalid { color: var(--ink-faint); }

.field input::placeholder, .field textarea::placeholder { color: rgba(242, 240, 230, 0.3); }

.field.is-error input, .field.is-error select, .field.is-error textarea {
	border-color: #e78a6a;
}

.field__error {
	display: none;
	font-size: 0.78rem;
	color: #e78a6a;
}

.field.is-error .field__error { display: block; }

.checks {
	border: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}

.checks__options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.45rem 1rem;
}

.check {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	font-size: 0.92rem;
	color: var(--ink-soft);
	cursor: pointer;
}

.check input {
	appearance: none;
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 0.3rem;
	border: 1px solid rgba(242, 240, 230, 0.35);
	background: none;
	cursor: pointer;
	display: grid;
	place-content: center;
	transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.check input:checked {
	background: var(--lime);
	border-color: var(--lime);
}

.check input:checked::before {
	content: '';
	width: 0.5rem;
	height: 0.28rem;
	border-left: 2px solid #10261d;
	border-bottom: 2px solid #10261d;
	transform: rotate(-45deg) translateY(-0.05rem);
}

.consent {
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--ink-faint);
}

.form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form__notice {
	display: flex;
	gap: 0.7rem;
	align-items: baseline;
	font-size: 0.8rem;
	line-height: 1.55;
	color: var(--ink-faint);
	padding: 0.85rem 1rem;
	border-radius: 0.7rem;
	background: rgba(197, 228, 163, 0.07);
	border: 1px solid rgba(197, 228, 163, 0.18);
}

.form__actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

.form__status {
	display: none;
	padding: 0.85rem 1rem;
	border-radius: 0.7rem;
	font-size: 0.85rem;
	line-height: 1.5;
}

.form__status.is-error {
	display: block;
	background: rgba(231, 138, 106, 0.1);
	border: 1px solid rgba(231, 138, 106, 0.35);
	color: #f0b8a2;
}

/* success panel */
.success { display: grid; gap: 1rem; padding: 0.8rem 0 0.4rem; }

.success__badge {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: rgba(197, 228, 163, 0.14);
	border: 1px solid rgba(197, 228, 163, 0.4);
	display: grid;
	place-content: center;
}

.success__badge svg { width: 1.3rem; height: 1.3rem; stroke: var(--lime); }

.success h3 {
	font-family: var(--display);
	font-weight: 300;
	font-size: 1.7rem;
	line-height: 1.2;
}

.success p { color: var(--ink-soft); font-size: 0.95rem; }

.success__summary {
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--ink-faint);
	padding: 0.8rem 1rem;
	border-radius: 0.7rem;
	border: 1px solid rgba(242, 240, 230, 0.12);
	display: grid;
	gap: 0.3rem;
}

/* ============================================================== footer == */

.footer {
	position: relative;
	z-index: 10;
	background: var(--charcoal);
	color: var(--cream);
	padding: clamp(3.5rem, 8vh, 6rem) var(--gutter) 2rem;
}

.footer__inner {
	max-width: 72rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.3fr 0.8fr 0.8fr 1.2fr;
	gap: clamp(2rem, 5vw, 4rem);
}

.footer__brand { display: grid; gap: 1.1rem; align-content: start; }

.footer__brand p { color: rgba(242, 240, 230, 0.6); font-size: 0.95rem; max-width: 30ch; }
.footer__brand em { color: rgba(242, 240, 230, 0.45); }

.footer__col { display: grid; gap: 0.55rem; align-content: start; }

.footer__col > p {
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(242, 240, 230, 0.4);
	margin-bottom: 0.5rem;
}

.footer__col a {
	color: rgba(242, 240, 230, 0.72);
	font-size: 0.92rem;
	padding: 0.2rem 0;
	min-height: 32px;
	transition: color 0.2s var(--ease-out);
}

.footer__col a:hover { color: var(--lime); }

.footer__fine { font-size: 0.8rem; line-height: 1.6; color: rgba(242, 240, 230, 0.45); }

.footer__base {
	max-width: 72rem;
	margin: clamp(2.5rem, 6vh, 4rem) auto 0;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(242, 240, 230, 0.1);
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(242, 240, 230, 0.35);
}

/* ============================================================== small ==== */

@media (max-width: 1024px) {
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
	.sheet__inner--split { grid-template-columns: 1fr; }
	.footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
	.nav__links, .nav__cta { display: none; }
	.nav__burger { display: flex; }
	.grid--3 { grid-template-columns: 1fr; }
	.ecosystem__list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.grid--4 { grid-template-columns: 1fr; }
	.form__row { grid-template-columns: 1fr; }
	.checks__options { grid-template-columns: 1fr; }
	.footer__inner { grid-template-columns: 1fr; }
	.hero__actions .btn, .card__actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.eco-line { animation: none; }
	.tile:hover { transform: none; }
	.eco-dot { display: none; }
}

/* scene chrome fades once the opaque sheets take over the page */
body.is-sheets .rail,
body.is-sheets .hud {
	opacity: 0;
	transition: opacity 0.6s var(--ease-out);
}

/* scene chrome fades once the opaque sheets take over the page — and the
   fixed nav flips to dark ink so it stays readable over cream surfaces */
body.is-sheets .rail,
body.is-sheets .hud {
	opacity: 0;
	transition: opacity 0.6s var(--ease-out);
}

body.is-sheets .nav__brand { color: #181f1b; }

body.is-sheets .nav__item { color: rgba(24, 31, 27, 0.72); }

body.is-sheets .nav__item:hover,
body.is-sheets .nav__item[aria-expanded="true"] { color: #181f1b; }

body.is-sheets .nav__burger { border-color: rgba(24, 31, 27, 0.45); }

body.is-sheets .nav__burger i { background: #181f1b; }

/* The document is usable before the optional landscape has its first frame. */
.nav { opacity: 1; background-color: rgba(13,24,20,.78); }
body.is-sheets .nav { background-color: #efede1; }
.hero { background: linear-gradient(90deg, rgba(7,22,21,.88), rgba(7,22,21,.64) 40%, transparent 82%); }
.hero .lede, .hero .eyebrow { color: #fff9e8; }
body:not(.is-live) .panel { background-color: #17372e; }
body:not(.is-live) .chapter { min-height: 100svh; }
.study { padding: clamp(1.3rem,4vw,3rem); margin: 2rem 0; border: 1px solid #62766a; border-radius: 1rem; color: #fff8e6; background: transparent; }
.study h3 { font-family: var(--serif); font-size: clamp(1.75rem,4vw,3rem); margin: .6rem 0 1rem; }
.study table { width: 100%; max-width: 42rem; border-collapse: collapse; margin: 1.5rem 0; }
.study caption, .study th, .study td { text-align: left; padding: .65rem .25rem; }
.study td, .study th, .study details { border-top: 1px solid #698377; }
.study summary { padding: 1rem 0; cursor: pointer; font-weight: 600; }
.study details p { max-width: 60ch; padding: 0 0 1rem; line-height: 1.65; }

.field-stories {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.7vw,2.5rem);margin:clamp(2rem,5vw,4rem) 0}
.field-stories figure {margin:0}
.field-stories img {display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:.6rem}
.field-stories figcaption {padding:1rem 0}
.field-stories small {font:600 .72rem/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.field-stories h3 {font:400 clamp(1.8rem,3vw,2.8rem)/1.08 var(--serif);margin:.5rem 0}
.field-stories p {line-height:1.6;margin:.7rem 0}
.field-stories a {color:inherit;text-decoration:underline;text-underline-offset:.22em}
#grower-intro {scroll-margin-top:7rem}
@media(max-width:740px){.field-stories{grid-template-columns:1fr}.field-stories img{max-height:22rem}}
#youth-academy .panel__inner {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,6vw,7rem)}
.academy-photo {margin:0;position:relative;align-self:center;background:transparent;border-radius:.6rem;overflow:hidden;text-align:left}
.academy-photo img {display:block;width:100%;height:auto}
.academy-photo figcaption {text-shadow:0 1px 4px #10261d;padding:.8rem 1rem;color:#f8f1dc;font:500 .72rem/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase}
@media(max-width:760px){#youth-academy .panel__inner {position:relative;grid-template-columns:1fr}.academy-photo{max-width:34rem}}

#empower,#harvest-story {min-height:0;background:#19382d;scroll-margin-top:4rem}
#empower .experiment,#harvest-story .harvest-story {position:relative;top:auto;max-width:100%;min-height:85svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);align-items:center;text-align:left}
#empower .experiment::before,#harvest-story .harvest-story::before {content:none}
#empower .body {margin:1rem 0 1.8rem;color:#edf3e9}
.experiment figure,.harvest-story figure {margin:0}
.experiment figure {padding:clamp(.9rem,2vw,2rem);background:transparent;border-radius:.6rem;color:#fff8e6}
.experiment figure .eyebrow {color:#3b5945}
.experiment img,.harvest-story img {display:block;width:100%;height:auto}
.experiment figcaption,.harvest-story figcaption {font:500 .78rem/1.5 var(--mono);padding-top:.7rem}
#harvest-story {background:#282b22}
.harvest-story img {aspect-ratio:1.15;object-fit:cover;border-radius:.5rem}
.harvest-story .lede {font-size:clamp(1rem,1.5vw,1.28rem);color:#f1efdf;margin:1.3rem 0}
@media(max-width:760px){#empower .experiment,#harvest-story .harvest-story{grid-template-columns:1fr;min-height:0}.harvest-story img{max-height:20rem}}

#empower .experiment {background:linear-gradient(110deg,#1c382d,#203e32 62%,#183028)}
.experiment .trial-sheet {border-radius:2px 7px 3px 2px;box-shadow:4px 5px 0 #cdc5af,8px 12px 24px #10261e66;position:relative}
.trial-sheet::before {content:"";position:absolute;top:-8px;left:42%;width:16%;height:19px;transform:rotate(-4deg);background:#d6c48dcc}
.sheet-id,.probe-readings small {font:600 .68rem/1.4 var(--mono);letter-spacing:.07em}
.sheet-id {display:flex;justify-content:space-between;gap:.5rem;border-bottom:1px solid #aba995;padding-bottom:.8rem}
.trial-date {font:400 clamp(1.5rem,2.6vw,2.15rem)/1.1 var(--serif);margin:1rem 0 .3rem}
.probe-readings {display:grid;grid-template-columns:1fr 1fr;gap:.8rem;padding:0 .6rem}
.probe-readings small,.probe-readings strong {display:block}
.probe-readings strong {font:400 clamp(2rem,4vw,3rem)/1.1 var(--serif);color:#246764}
.trial-note {margin:.8rem 0 .4rem;padding:.7rem 0;border-block:1px solid #c4bfa9;font:italic 1rem/1.4 Georgia,serif}
.trial-actions {display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}.trial-actions [hidden]{display:none}
.trial-link {color:#e2edcf;font-size:.9rem;text-underline-offset:.25em}
#crate-film{background:transparent;border:1px solid #65735e;border-radius:.45rem;overflow:hidden;color:#fff8e6}
.film-head,#crate-film figcaption,.film-controls{padding:.9rem 1rem}
.film-head{display:flex;justify-content:space-between;border-bottom:1px solid #b9b59a;font:600 .68rem/1.5 var(--mono);letter-spacing:.08em}
#crate-film svg{display:block;width:100%;height:auto}
#crate-film figcaption{border-top:1px solid #b9b59a}
#crate-film figcaption strong,#crate-film figcaption small{display:block}
#crate-film figcaption small{margin-top:.3rem}
.print-act{opacity:0;transition:opacity .45s}
[data-current="0"] [data-act="0"],[data-current="1"] [data-act="1"],[data-current="2"] [data-act="2"]{opacity:1}
.film-controls{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;padding-top:0}
.film-controls[hidden]{display:none}.film-controls button{background:transparent;color:#ecf2dc;border:1px solid #8c9983;padding:.45rem .65rem;border-radius:1rem;cursor:pointer}
.film-controls #film-play,.film-controls button[aria-pressed=true]{background:#264b38;color:#fff9e5}
@media(prefers-reduced-motion:no-preference){
[data-playing=true][data-current="0"] .sprouts{transform-origin:50% 70%;animation:leaves 3s ease-in-out both}
[data-playing=true][data-current="1"] .lift{animation:lift 1s ease-out both}
[data-playing=true][data-current="2"] .steam{animation:steam 2.8s ease-out both}
@keyframes leaves{0%{transform:rotate(-2deg)}60%{transform:rotate(1.5deg)}}
@keyframes lift{from{transform:translate(-32px,-9px) rotate(-3deg)}}
@keyframes steam{from{opacity:.15;transform:translateY(6px)}to{opacity:.9;transform:translateY(-5px)}}
}
@media(prefers-reduced-motion:reduce){.print-act{transition:none}}

.sky-flock {position:fixed;z-index:2;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;visibility:hidden}
.sky-flock.in-sky {visibility:visible}
.sky-flock svg {position:absolute;left:0;top:0;width:clamp(155px,24vw,340px);overflow:visible;transform-origin:0 0;filter:drop-shadow(0 1px 1px #f6ecc980)}
.near-wing,.far-wing {transform-origin:2px 2px;animation:flock-stroke 1s ease-in-out calc(var(--wing-phase,0s) + var(--offset,0s)) infinite paused}
.far-wing {animation-direction:reverse}
@keyframes flock-stroke {0%,100%{transform:scaleY(.95) rotate(-6deg)}50%{transform:scaleY(-.38) rotate(7deg)}}
@media(min-width:761px){#youth-academy .academy-photo {order:2} #youth-academy .card {text-align:left}}
.hero .panel__inner,.hero__cue,#mission .panel__inner {z-index:3}
.wind-seeds {position:absolute;inset:0;overflow:hidden;pointer-events:none}
.wind-seeds span {position:absolute;left:0;top:var(--y);width:var(--size);animation:seed-travel var(--d) linear var(--lag) infinite}
.wind-seeds svg {width:100%;display:block;animation:seed-roll 3.2s ease-in-out var(--lag) infinite alternate}
@keyframes seed-travel {0%{transform:translate(-50px,10px)}50%{transform:translate(50vw,-20px)}100%{transform:translate(102vw,8px)}}
@keyframes seed-roll {from{transform:rotate(-12deg)}to{transform:rotate(24deg)}}
#gardens .card {background:transparent;padding:clamp(1.1rem,2.4vw,2.3rem);border-radius:.6rem}
.soil-web svg {display:block;width:100%;height:auto;margin:.7rem 0;background:#ece7cb}
.soil-web .lens>g {transition:transform .65s;transform-origin:0 0}
.soil-web[data-focus="0"] .l0>g,.soil-web[data-focus="1"] .l1>g,.soil-web[data-focus="2"] .l2>g {transform:scale(1.25)}
.micro {animation:micro-drift 3.8s ease-in-out infinite alternate}
@keyframes micro-drift {to{transform:translate(3px,-2px) rotate(5deg)}}
.soil-picks {display:flex;gap:.5rem;flex-wrap:wrap}
.soil-picks button {border:1px solid #71856a;background:transparent;color:#ecf2dc;border-radius:2rem;padding:.45rem .75rem;cursor:pointer}
.soil-picks button[aria-pressed=true]{background:#294a38;color:#fff7df}
.soil-web figcaption{min-height:4.8em}
@media(prefers-reduced-motion:reduce){.wing,.sky-flock.in-sky svg,.wind-seeds span,.wind-seeds svg,.micro{animation:none}.sky-flock.in-sky svg{transform:translateX(52vw)}.wind-seeds span{left:var(--y)}.soil-web .lens>g{transition:none}}

.feature-guide { scroll-margin-top: 6rem; }
.feature-guide > p:not(.eyebrow) { max-width: 65ch; line-height: 1.65; margin-bottom: 1.5rem; }
.feature-guide summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.plot-tour { border: 1px solid var(--line); max-width: 52rem; margin: 2rem 0; background: transparent; color: #fff8e6; border-radius: .65rem; overflow: hidden; scroll-margin-top: 5rem; }
.plot-tour__head, .plot-tour figcaption { padding: 1.2rem clamp(1rem, 3vw, 2rem); }
.plot-tour .eyebrow { color: #ecf2dc; margin: 0 0 .5rem; }
.plot-tour h4, .plot-tour h5 { font: 500 clamp(1.45rem, 4vw, 2.15rem)/1.13 var(--serif); margin: 0; }
.plot-tour__chapters, .plot-tour__controls, .plot-tour__steps { display: flex; align-items: stretch; flex-wrap: wrap; }
.plot-tour [hidden] { display: none; }
.plot-tour button { color: #ecf2dc; background: transparent; line-height: 1.2; font-family: inherit; font-size: .94rem; font-weight: 600; cursor: pointer; min-height: 44px; padding: .6rem .85rem; border: 1px solid #aeb69a; border-radius: .35rem; }
.plot-tour button:focus-visible { outline: 3px solid #e9bc73; outline-offset: -3px; }
.plot-tour button:disabled { opacity: .45; cursor: default; }
.plot-tour__chapters { background: transparent; }
.plot-tour__chapters button { flex: 1; border: 0; border-radius: 0; }
.plot-tour__chapters [aria-pressed=true], .plot-tour [data-tour-play] { background: #214b38; color: #fff7dd; }
.plot-tour__map svg { display: block; width: 100%; height: auto; }
.plot-tour figcaption p:last-child { margin: .55rem 0 0; max-width: 62ch; line-height: 1.55; }
.plot-tour__controls { justify-content: space-between; gap: .45rem; padding: 0 clamp(1rem, 3vw, 2rem) 1.25rem; }
.plot-tour__steps { gap: .35rem; }
@media (max-width: 440px) { .plot-tour { margin-inline: -.6rem; } .plot-tour button { padding-inline: .6rem; } }

.plot-tour h4, .plot-tour h5 { font-family: var(--display); font-weight: 400; }
.plot-tour h4 { font-size: clamp(1.8rem, 4vw, 2.45rem); }
.plot-tour h5 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
.plot-mode, .practice-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.plot-mode, .practice-intro, .practice-panel { padding: .75rem clamp(1rem, 3vw, 2rem); }
.plot-mode { border-block: 1px solid #c8ccb3; background: transparent; }
.plot-mode [aria-pressed=true] { background: #214b38; border-color: #214b38; color: #fff7dd; }
.practice-intro p:last-child { margin: .4rem 0; line-height: 1.45; }
.practice-panel { padding-bottom: 1.2rem; }
.practice-panel p { font-weight: 600; margin: 0 0 .75rem; }
.practice-actions select { font: inherit; min-height: 44px; padding: .35rem; background: #fffbed; color: #254635; border-radius: .35rem; }
.practice-actions [data-practice-reset] { margin-left: auto; }
.plot-tour[data-mode=practice] :is(#guided-layer, .plot-tour__chapters, .plot-tour__controls, figcaption) { display: none; }
.plot-tour[data-mode=practice] #practice-layer { display: inline; }
.plot-tour[data-mode=practice] .plot-tour__map svg { touch-action: none; user-select: none; -webkit-user-select: none; }
#practice-layer text { font: bold 13px var(--mono); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
#practice-corners [role=button], #practice-canopies circle { cursor: pointer; }
#practice-canopies circle { cursor: grab; }
#practice-canopies circle:active { cursor: grabbing; }
#practice-layer :focus-visible { outline: 3px solid #954423; outline-offset: 3px; }
.practice-tools, .practice-inspector { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:.65rem 0; }
.practice-tools label, .practice-inspector label { display:inline-flex; align-items:center; flex-wrap:wrap; gap:.4rem; }
.practice-tools input { max-width:100%; width:12rem; min-height:44px; padding:.4rem .6rem; color:#203b2a; background:#fffbed; border:1px solid #808f74; border-radius:.3rem; font:inherit; }
.practice-tools button[aria-pressed=true] { background:#214b38; color:#fff7dd; }
.practice-inspector { width:100%; border-top:1px solid #bcbea4; padding:.65rem 0; }
.practice-inspector input[type=range] { accent-color:#315b45; width:9rem; }
.plot-tour__map svg:focus-visible { outline:3px solid #8d4726; outline-offset:-4px; }
.plot-tour .field-library { border-block: 1px solid #bcc4aa; margin-bottom: 1rem; }
.plot-tour .field-library summary { padding: .55rem 0; }
.field-save-info a { color:#ecf2dc; text-decoration: underline; }
.field-save-info [data-save-message]:not(:empty) { margin: .6rem 0; font-weight:600; }
.practice-tools [data-save-plan] { background:#214b38; color:#fff7dd; }

.planting-study { scroll-margin-top: 7rem; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr); gap:clamp(1.4rem,3vw,3rem); align-items:center; }
.planting-study p { line-height:1.6; max-width:65ch; }
.planting-intro h3 { font:400 clamp(2.7rem,5vw,4.7rem)/.99 var(--display); margin:.65rem 0 1rem; }
.planting-plate { width:100%; height:auto; border-radius:.45rem; }
.planting-key,.planting-next,.planting-notes { grid-column:1/-1; }
.planting-key { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,3vw,3rem); }
.planting-key > div,.planting-next,.planting-notes { border-top:1px solid #81927b; padding-top:1rem; }
.planting-key h4 { font:400 2rem/1.1 var(--display); margin:.4rem 0 .6rem; }
.planting-next { display:flex; align-items:center; gap:1.5rem; justify-content:space-between; }
.planting-notes summary { cursor:pointer; }
.planting-notes p { margin-top:.75rem; }
.planting-notes a { text-decoration:underline; }
@media (max-width:700px) {
 .planting-study,.planting-key { grid-template-columns:1fr; }
 .planting-next { align-items:start; flex-direction:column; }
}
#toolkit { background:radial-gradient(ellipse 95% 55rem at 85% 22rem,#354c39,transparent 95%),var(--forest); }

.planting-launch { display:inline-flex; align-items:center; gap:.55rem; min-height:44px; margin-top:.6rem; font-weight:600; text-decoration:underline; text-underline-offset:.22em; }
.habitat-tools { border-block:1px solid #81927b; padding:.85rem 0; margin-block:1rem; }
.habitat-tools [data-layout-tip] { line-height:1.5; max-width:58ch; }
.habitat-tools [data-patches] button { display:inline-flex; align-items:center; gap:.4rem; }
.habitat-tools [data-patches] svg { width:2rem; height:1.5rem; }
.patch-manager select { max-width:100%; min-height:44px; font:inherit; background:#fffbed; color:#254635; }

.field-plan-switcher { flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; padding-bottom:.8rem; border-bottom:1px solid #81927b; }
.field-plan-switcher select { min-height:44px; max-width:100%; width:min(17rem,65vw); font:inherit; color:#254635; background:#fffbed; border-radius:.3rem; }

/* Field notebook shortcuts over the opening wheat scene. */
.hero-tools {
    width: min(100%, 39rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .5rem;
    margin-top: clamp(1rem, 3vh, 2rem);
}
.hero-tools a {
    position: relative;
    padding: .75rem 2rem .75rem 1rem;
    border: 1px solid rgb(238 232 204 / 48%);
    border-radius: .35rem;
    background: rgb(14 34 26 / 80%);
    color: #fff9e8;
    text-decoration: none;
}
.hero-tools strong { display:block; font: 500 clamp(1.2rem, 2vw, 1.65rem)/1.15 var(--display); }
.hero-tools span { display:block; margin-top:.28rem; font-size:.88rem; line-height:1.35; }
.hero-tools a::after { content:'→'; position:absolute; top:.74rem; right:.75rem; color:#e2d89d; }
.hero-tools a:hover, .hero-tools a:focus-visible { background:#294835; border-color:#efe5af; }
.hero-tools a:focus-visible { outline:2px solid #fff5c3; outline-offset:2px; }
@media(max-width:640px) {
    .hero .panel__inner { padding-block:5.5rem 4rem; }
    .hero .lede { margin-top:1rem; }
    .hero-tools a { padding:.65rem .7rem; }
    .hero-tools a::after { display:none; }
    .hero-tools span { font-size:.8rem; }
    .hero__cue { bottom:1.4rem; }
}

#mission .body + .body { margin-top:1em; }
.mission-source { text-decoration:underline; text-underline-offset:.18em; }

.hero .display--hero { white-space:normal; max-width:15ch; text-wrap:balance; }
.hero__cue { min-height:2.75rem; text-decoration:none; color:#fff5d6; }
.hero__cue:focus-visible { outline:2px solid currentColor; outline-offset:.25rem; }
body:not(.is-live) .hero {
    background:linear-gradient(90deg,rgba(12,24,18,.84),rgba(15,30,22,.55) 58%,rgba(15,30,22,.08)),url('../assets/scene-one-wheat.jpg') center / cover;
}
@media(max-width:640px) {
    .hero .display--hero { font-size:clamp(2.25rem,9vw,3.4rem); }
    .hero__cue { bottom:.6rem; }
}

/* Keep a clear flight lane beside the opening story on a portrait phone. */
@media (max-width:640px) and (orientation:portrait) {
  .hero .panel__inner {padding-right:38vw;}
  .hero .display--hero {font-size:clamp(2rem,8.2vw,2.75rem);}
  .hero-tools {grid-template-columns:1fr;gap:.3rem;}
  .hero-tools a {min-height:44px;padding:.34rem .65rem;}
  .hero-tools strong {font-size:1.06rem;}
  .hero-tools span {margin-top:.1rem;font-size:.76rem;}
  .hero .lede {font-size:.92rem;line-height:1.4;}
  .sky-flock svg {width:clamp(120px,35vw,182px);}
}

/* Match the fixed live landscape when a device uses the still wheat scene. */
body:not(.is-live)::before {
  content:""; position:fixed; inset:0; pointer-events:none;
  background:url('../assets/scene-one-wheat.jpg') center / cover;
}
body:not(.is-live) .hero, body:not(.is-live) #mission {
  background:linear-gradient(90deg,rgba(12,24,18,.9),rgba(15,30,22,.64) 55%,rgba(15,30,22,.12));
}

.notebook-entries { margin:clamp(1.75rem,5vw,4rem) 0 2rem; }
.notebook-entry { display:grid;grid-template-columns:minmax(9rem,1fr) minmax(0,2fr);gap:clamp(1.2rem,4vw,3.75rem);align-items:start;padding:clamp(1.5rem,3vw,2.75rem) 0;border-top:1px solid #8c9a83;scroll-margin-top:6rem; }
.notebook-entry img { width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;border-radius:.35rem; }
.notebook-entry h3 { font:400 clamp(1.9rem,4vw,3rem)/1.08 var(--display);margin:.45rem 0 .7rem; }
.notebook-entry p:not(.eyebrow) { max-width:63ch;line-height:1.6; }
.notebook-entry details { margin-top:.45rem; }
.notebook-entry summary { cursor:pointer;padding:.65rem 0;min-height:44px;width:fit-content;color:#f1ddac;text-decoration:underline;text-underline-offset:.24em; }
.notebook-entry details p { margin:.65rem 0; }
.notebook-entry .notebook-source { font-size:.88rem; }
.notebook-source a { text-decoration:underline; }
.nb-close,.notebook-entry details[open] .nb-open { display:none; }
.notebook-entry details[open] .nb-close { display:inline; }
@media(max-width:640px) { .notebook-entry {grid-template-columns:1fr;gap:1rem;} .notebook-entry img {max-height:10.5rem;} }

.farmer-stories { margin-block:2.5rem; }
.farmer-stories h3 {font:400 clamp(1.8rem,4vw,3rem)/1.1 var(--display);margin:.5rem 0}
.farmer-entry {border-block-start:1px solid #8c9a83;padding-block:1.25rem;overflow-wrap:anywhere}
.farmer-entry h3 {font-size:clamp(1.6rem,3vw,2.4rem)}
.farmer-entry details {max-width:68ch}
.farmer-entry summary {min-height:44px;padding:.6rem 0;text-decoration:underline;cursor:pointer}
.farmer-entry details p {white-space:pre-wrap;line-height:1.65}
.farmer-entry img {max-width:100%;max-height:30rem;display:block;margin:1rem 0 .5rem;border-radius:.35rem}

.scene-carriers {position:fixed;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.scene-carriers svg {position:absolute;left:0;top:0;visibility:hidden;transform-origin:0 0}
.marsh-seed {width:clamp(28px,3.5vw,50px)}
.hedge-leaf {width:clamp(34px,4vw,58px)}
#gardens .panel__inner {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,6vw,7rem)}
.garden-edge {order:2;margin:0}
.garden-edge img {display:block;width:100%;height:auto;border-radius:.6rem}
.garden-edge figcaption {padding:.8rem 1rem;color:#f8f1dc;font:.72rem/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase}
@media(max-width:760px){#gardens .panel__inner {position:relative;grid-template-columns:1fr}.garden-edge {order:0;max-width:34rem}}

/* An annotated field plate. Linework carries the motion; the caption stays still. */
.garden-edge {min-width:0;overflow:hidden;border-radius:.55rem;color:#263e31;background:#f4edda;scroll-margin-top:6rem}
.garden-edge .edge-head {display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;padding:1rem 1.15rem .8rem;color:#294536;text-transform:none}
.edge-kicker,.edge-folio {font:600 .65rem/1.2 var(--mono);letter-spacing:.12em}
.edge-folio {color:#73532e}
.edge-head h3 {grid-column:1/-1;margin:0;font:400 clamp(1.6rem,3vw,2.5rem)/1.08 var(--display);letter-spacing:0}
.edge-drawing {position:relative;border-block:1px solid #a7ac91;isolation:isolate}
.garden-edge .edge-drawing img {border-radius:0}
.edge-overlay {position:absolute;width:100%;height:100%;inset:0;pointer-events:none}
.edge-frame {opacity:0;transition:opacity .24s}
[data-note="0"] .edge-arrival,[data-note="1"] .edge-shelter,[data-note="2"] .edge-return {opacity:1}
.edge-trace {fill:none;stroke:#5e563c;stroke-width:2;stroke-dasharray:.012 .016;stroke-linecap:round}
.edge-pin {fill:#f4edda;stroke:#775631;stroke-width:3}
.edge-stream,.edge-eddy {stroke:#375747;stroke-width:3;stroke-linecap:round;stroke-dasharray:12 8}
.edge-key {display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #c0bd9f}
.edge-key button {background:transparent;border:0;color:#555d49;min-height:44px;padding:.55rem .2rem;font:.72rem/1.3 var(--mono);cursor:pointer}
.edge-key button+button {border-left:1px solid #c0bd9f}
.edge-key b {font:600 .92rem/1.3 var(--sans,system-ui)}
.edge-key button[aria-pressed=true] {background:#294536;color:#fff3d5}
.edge-key button:focus-visible {outline:3px solid #ce914b;outline-offset:-4px}
.edge-notes {padding:.8rem 1.15rem 1rem;min-height:6.5em}
.edge-notes p {margin:0;line-height:1.45;font-size:.95rem}
.edge-notes strong {display:block;color:#2c4335}
.edge-notes p[hidden] {display:none}
@media(prefers-reduced-motion:reduce){.edge-frame{transition:none}}

.edge-label text {font:600 19px ui-monospace,monospace;letter-spacing:1px;fill:#304b3b}

/* A pinned field plate below the masthead; the document owns all scrolling. */
#empower .soil-chapter-grid {display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(2rem,6vw,7rem);align-items:start;padding:4rem var(--gutter);text-align:left}
.soil-intro {position:sticky;top:26svh;align-self:start}
.soil-track {--pin:clamp(5.5rem,13svh,8.5rem);min-height:260svh;min-width:0}
.soil-atlas {position:sticky;top:var(--pin);max-width:min(100%,34rem,max(14rem,calc(85svh - 16rem)));margin:0 auto;color:#283f32;background:#f4edda;border-radius:.55rem;overflow:hidden;scroll-margin-top:6rem}
.soil-atlas .edge-head {position:static;display:grid;grid-template-columns:1fr auto;gap:.4rem;padding:.8rem 1rem;width:100%}
.soil-atlas .edge-notes {min-height:5.8em;line-height:1.4}
.soil-atlas .edge-notes strong {display:block;margin-bottom:.15rem}
.soil-window {position:relative;aspect-ratio:1;overflow:hidden;isolation:isolate;background:#ded2b7;border-block:1px solid #b9b69a}
.soil-layer,.soil-microscope {position:absolute;display:block;inset:0;width:100%;height:100%;pointer-events:none}
.field-layer {transform-origin:60% 76%}
.cut-layer {opacity:0;transform-origin:48% 34%}
.grazer-layer {opacity:0;transform-origin:52% 40%}
.soil-microscope {opacity:0;transform-origin:70% 65%}
.soil-scale {position:absolute;left:.65rem;top:.65rem;background:#f6edda;color:#2d493b;padding:.35rem .6rem;border-radius:2px;font:600 .65rem/1.2 var(--mono);letter-spacing:.08em}
@media(max-width:760px){#empower .soil-chapter-grid {grid-template-columns:1fr;padding-block:2.4rem;gap:1.3rem}.soil-intro {position:static}.soil-track {--pin:5.5rem;min-height:225svh}.soil-atlas {max-width:min(100%,max(14rem,calc(84svh - 10rem)))}}
@media(prefers-reduced-motion:reduce),(max-height:500px){.soil-track {min-height:0}.soil-atlas,.soil-intro {position:relative;top:0}}

.landing-cover {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}

/* Community garden spread */
#gardens {min-height:auto;background:#303a21;color:#faf5e7}
#gardens .panel__inner {position:relative;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:3vw;padding:7rem 3.5vw 3rem;background:linear-gradient(to top,transparent,#303a21 28%),url('../assets/garden-horizon.jpg') bottom left / 48% auto no-repeat}
#gardens .panel__inner::before {display:none}
#gardens .card {padding:0;max-width:34rem}
#gardens .eyebrow {color:#ecc16e}
#connect-title {font:400 clamp(3.2rem,6.7vw,7rem)/.99 Georgia,serif;letter-spacing:-.055em;color:#fff9e9}
#gardens .body {color:#faf5e7;font-size:clamp(1rem,1.4vw,1.4rem);max-width:34ch}
.garden-inquiry {display:inline-block;margin-top:1.6rem;background:#bdcb97;color:#22321c;padding:.9rem 1.15rem;border-radius:.3rem;font:600 1rem/1.4 var(--sans);text-decoration:none}
#garden-boundary {border-radius:3px;scroll-margin-top:7rem}
#garden-boundary .edge-head {padding:1.2rem 1.4rem .85rem}
#edge-title {font:400 clamp(2rem,3.65vw,4rem)/1.08 Georgia,serif;letter-spacing:-.045em}
#garden-boundary .edge-drawing {margin:0 1.4rem;aspect-ratio:860/464;overflow:hidden}
#garden-boundary .edge-drawing img {width:100%;height:100%;object-fit:cover}
#garden-boundary .garden-leaf-art {position:absolute;inset:0;display:none}
#garden-boundary[data-note="2"] .garden-leaf-art {display:block}
#garden-boundary[data-note="2"] .edge-overlay {display:none}
#garden-boundary[data-note="2"] .edge-drawing img:first-child {visibility:hidden}
#garden-boundary .edge-key {margin:.85rem 1.4rem 0;border-block:1px solid #b8b69b}
#garden-boundary .edge-notes {padding:1rem 1.4rem;min-height:5.8rem}
#garden-boundary .edge-notes strong {font:italic 1.4rem/1.25 Georgia,serif}
#garden-boundary .edge-notes a {display:inline-block;margin-top:.35rem;color:#263e31;text-decoration:underline}
@media(max-width:760px){#gardens .panel__inner {grid-template-columns:1fr;gap:2rem;padding:6rem 5vw 2rem;background-size:auto,100% auto}#garden-boundary {max-width:none;width:100%}#garden-boundary .edge-drawing {margin-inline:.75rem}}