/* Garden Layer coming-soon page: the app's leaf palette (GardenLayer src/lib/styles/app.css) and fonts. */
@font-face { font-family: 'Instrument Serif'; src: url('/fonts/instrument-serif-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
	--bg: #f3efe4; --panel: #fbf9f3; --ink: #162117; --muted: #4a5648; --line: #dcd5c3;
	--accent: #2e5b3c; --accent-soft: #e2ebd9; --sand: #d8c39a;
	--serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
	--sans: 'IBM Plex Sans', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
	:root { --bg: #152219; --panel: #1c2c21; --ink: #f4f6ee; --muted: #abbda6; --line: #304636; --accent: #93c99e; --accent-soft: #1e3427; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); }
b { font-weight: 600; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- hero: the aerial photo, always dark (it sits on the photo in both themes) */
.hero { position: relative; overflow: hidden; color: #f4f6ee; background: #1a2a1f; min-height: min(92vh, 860px); display: flex; align-items: center; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14,24,17,.92) 0%, rgba(14,24,17,.75) 45%, rgba(14,24,17,.25) 100%); }
.hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 72px 24px; }
.brand { font: 32px/1 var(--serif); margin: 0 0 56px; letter-spacing: .01em; }
h1 { font: clamp(42px, 6.4vw, 84px)/1.02 var(--serif); font-weight: 400; margin: 0; max-width: 19ch; }
.lead { max-width: 38em; font-size: 19px; margin: 28px 0 0; color: #dfe7d8; }
.lead b { color: #fff; }

.signup { margin-top: 40px; max-width: 520px; }
.signup h2 { font: 28px/1.1 var(--serif); font-weight: 400; margin: 0 0 12px; }
.signup-form { display: block; width: 100%; height: 300px; border: 0; border-radius: 14px; background: transparent; }
.note { font-size: 14px; color: #c9d4c3; margin: 8px 0 0; }

/* ---- sneak previews */
main { max-width: 1200px; margin: 0 auto; padding: 72px 24px 32px; }
.section-h { font: clamp(32px, 4vw, 48px)/1.1 var(--serif); font-weight: 400; margin: 0 0 32px; }
.previews { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.previews .wide { grid-column: 1 / -1; }
figure { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
	transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .18s ease-out; }
figure:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(20, 40, 25, .14); border-color: var(--sand); }
figure img { display: block; width: 100%; height: auto; }
figcaption { padding: 16px 18px 20px; color: var(--muted); font-size: 16px; border-top: 1px solid var(--line); }

footer { max-width: 1200px; margin: 0 auto; padding: 32px 24px 56px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
footer p { margin: 4px 0; }
.credit { font-size: 13px; }

@media (max-width: 860px) {
	.previews { grid-template-columns: minmax(0, 1fr); }
	.hero-inner { padding: 48px 20px; }
	.brand { margin-bottom: 36px; }
	.lead { font-size: 17px; }
	main { padding: 48px 16px 24px; }
	footer { padding: 24px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) { figure { transition: none; } figure:hover { transform: none; } }