:root {
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    scroll-behavior: smooth;
}

* { box-sizing: border-box; }

body { margin: 0; background: #f8f6ed; color: #183b2a; }
a { color: inherit; }
.page { width: min(100% - 3rem, 78rem); margin: 0 auto; }
.site-header { display: flex; min-height: 6.5rem; align-items: center; gap: 3rem; }
.brand { font-size: 2rem; font-weight: 800; letter-spacing: -.08em; text-decoration: none; }
.brand span { color: #b97558; }
.site-header nav { display: flex; gap: 1.75rem; margin-left: auto; }
.site-header nav a, .back-link { font-size: .9rem; font-weight: 650; text-decoration: none; }
.site-header nav a:hover, .back-link:hover, footer a:hover { text-decoration: underline; text-underline-offset: .3em; }
.back-link { border: 1px solid #b9c7b6; border-radius: 999px; padding: .75rem 1rem; }
.hero { display: grid; min-height: 39rem; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 2rem 0 5rem; }
.eyebrow { margin: 0 0 1.2rem; color: #7a947b; font-size: .75rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 10ch; margin-bottom: 1.6rem; font-size: clamp(4rem, 8vw, 7.5rem); font-weight: 600; letter-spacing: -.075em; line-height: .98; }
.lead { max-width: 34rem; margin-bottom: 2rem; color: #526552; font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.7; }
.button { display: inline-flex; align-items: center; gap: 1rem; border-radius: 999px; padding: 1rem 1.3rem; background: #274c35; color: #fff; font-size: .95rem; font-weight: 700; text-decoration: none; }
.button:hover, .button:focus-visible { background: #183b2a; outline-offset: 4px; }
.hero-art { position: relative; display: grid; min-height: 34rem; place-items: center; overflow: hidden; border-radius: 2rem; background: radial-gradient(circle at 53% 40%, #f3ebd7 0 35%, #e8dfc8 75%); }
.hero-art::before { position: absolute; right: 2.5rem; bottom: 2rem; left: 2.5rem; height: 1px; background: #c5bca7; content: ""; }
.hero-art img { position: relative; width: min(95%, 34rem); height: auto; filter: drop-shadow(0 1.5rem 1.4rem rgba(28, 48, 33, .1)); }
.art-caption { position: absolute; z-index: 1; top: 1.5rem; left: 1.75rem; color: #68816a; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.collection { padding: 4rem 0 8rem; scroll-margin-top: 2rem; }
.section-heading { margin-bottom: 2.25rem; }
h2 { max-width: 16ch; margin-bottom: 0; font-size: clamp(2.8rem, 5vw, 4.5rem); font-weight: 600; letter-spacing: -.06em; line-height: 1.05; }
.plant-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.plant-card { position: relative; display: flex; min-height: 22rem; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 1.5rem; padding: 1.5rem; }
.plant-card.warm { background: #e9dfc9; }
.plant-card.sage { background: #dbe6d6; }
.plant-card.clay { background: #e8d3c3; }
.number { position: absolute; top: 1.5rem; left: 1.5rem; color: #65806b; font-size: .8rem; font-weight: 800; }
.shape { position: absolute; top: 2rem; left: 50%; width: 9rem; height: 11rem; background: #6b8d67; opacity: .95; transform: translateX(-50%) rotate(-15deg); }
.shape-round { border-radius: 60% 10% 60% 15%; }
.shape-leaf { width: 8rem; height: 12rem; border-radius: 5% 85% 5% 85%; background: #437653; transform: translateX(-50%) rotate(20deg); }
.shape-tall { width: 6.5rem; height: 13rem; border-radius: 90% 0 90% 0; background: #315b43; transform: translateX(-50%) rotate(-35deg); }
.plant-card h3 { position: relative; margin-bottom: .4rem; font-size: 1.45rem; letter-spacing: -.04em; }
.plant-card p { position: relative; margin-bottom: 0; color: #526552; line-height: 1.5; }
.about { max-width: 49rem; padding: 2rem 0 8rem; scroll-margin-top: 2rem; }
.about h2 { margin-bottom: 1.4rem; }
.about > p:not(.eyebrow) { max-width: 42rem; color: #526552; font-size: 1.1rem; line-height: 1.75; }
.about a { display: inline-block; margin-top: 1rem; font-weight: 750; text-underline-offset: .3em; }
footer { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid #cdd7ca; padding: 1.5rem 0 2.5rem; color: #667b68; font-size: .85rem; }

@media (max-width: 900px) {
    .site-header { flex-wrap: wrap; gap: 1rem; padding: 1.5rem 0; }
    .site-header nav { order: 3; width: 100%; margin-left: 0; }
    .back-link { margin-left: auto; }
    .hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 3rem; }
    .hero-art { min-height: 29rem; }
}

@media (max-width: 600px) {
    .page { width: min(100% - 2rem, 78rem); }
    .hero { min-height: auto; padding: 2rem 0 4rem; }
    h1 { font-size: clamp(3.6rem, 15vw, 5rem); }
    .hero-art { min-height: 22rem; border-radius: 1.25rem; }
    .plant-cards { grid-template-columns: 1fr; }
    .plant-card { min-height: 18rem; }
    .collection { padding: 2rem 0 5rem; }
    .about { padding-bottom: 5rem; }
    footer { flex-direction: column; }
}

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