:root {
    color-scheme: dark;
    --ink: #f2efdf;
    --muted: #c0c8a9;
    --moss: #9ebc72;
    --earth: #203226;
    --deep-earth: #101b13;
    --line: rgb(242 239 223 / 0.18);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--deep-earth); color: var(--ink); font-family: Georgia, "Times New Roman", serif; }
main { overflow: hidden; }
.hero { display: grid; grid-template-columns: minmax(18rem, 0.9fr) minmax(20rem, 1.1fr); min-height: 43rem; background: radial-gradient(circle at 80% 12%, #e2d48d 0 3.6rem, transparent 3.7rem), linear-gradient(145deg, #3b5d3e 0%, var(--earth) 57%, #172419 100%); }
.copy { display: flex; flex-direction: column; justify-content: center; max-width: 37rem; padding: clamp(2.5rem, 8vw, 8rem); }
.eyebrow { margin: 0 0 1rem; color: var(--moss); font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 7ch; margin-bottom: 1.4rem; font-size: clamp(3.5rem, 7vw, 6.9rem); font-weight: 400; letter-spacing: -0.075em; line-height: 0.86; }
h1 em { color: #d9e8b5; font-style: italic; }
.lede { max-width: 31rem; color: var(--muted); font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.6; }
.note { margin-top: 1.1rem; color: var(--moss); font-style: italic; }
.garden-shot { align-self: end; position: relative; max-width: 58rem; margin: 0; padding: clamp(1rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem) 0 0; }
.garden-shot img { display: block; width: 100%; border: 1px solid rgb(242 239 223 / 0.32); border-bottom: 0; box-shadow: -1.8rem 1.8rem 0 rgb(10 22 12 / 0.2); }
figcaption { padding: 0.85rem 1rem; color: var(--muted); border: 1px solid var(--line); border-bottom: 0; font-size: 0.9rem; }
.play { padding: clamp(4rem, 10vw, 9rem) clamp(1.5rem, 8vw, 8rem); background: #ece8d5; color: #1f301f; }
.play > h2 { max-width: 15ch; margin-bottom: clamp(2.5rem, 6vw, 5rem); font-size: clamp(2.4rem, 5vw, 5.4rem); font-weight: 400; letter-spacing: -0.06em; line-height: 0.94; }
.play .eyebrow { color: #557144; }
.ideas { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgb(31 48 31 / 0.25); }
.ideas article { min-height: 15rem; padding: 1.5rem 1.5rem 1.5rem 0; border-right: 1px solid rgb(31 48 31 / 0.25); }
.ideas article + article { padding-left: 1.5rem; }
.ideas article:last-child { border-right: 0; }
.ideas span { display: block; margin-bottom: 3rem; color: #557144; font-family: ui-monospace, monospace; font-size: 0.8rem; }
.ideas h3 { font-size: 1.55rem; font-weight: 400; }
.ideas p { max-width: 21rem; color: #50604d; line-height: 1.55; }
footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem clamp(1.5rem, 8vw, 8rem); color: #aebca0; background: #101b13; font-size: 0.86rem; }

@media (max-width: 760px) {
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .copy { padding: 4.5rem 1.5rem 2.5rem; }
    .garden-shot { padding: 0 1.5rem; }
    .ideas { grid-template-columns: 1fr; }
    .ideas article, .ideas article + article { min-height: auto; padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid rgb(31 48 31 / 0.25); }
    .ideas span { margin-bottom: 1rem; }
    footer { flex-direction: column; }
}