:root { --green: #164b3a; --dark: #11372c; --paper: #eff2e5; --lime: #c9d961; --red: #dd6044; --blue: #cde3e5; --ink: #17352d; --line: #97ab9f; }
* { box-sizing: border-box; letter-spacing: 0; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", Arial, sans-serif; line-height: 1.5; } a { color: inherit; text-decoration: none; }.wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.demo-note { min-height: 34px; display: flex; justify-content: space-between; align-items: center; padding: 0 max(24px, calc((100vw - 1180px) / 2)); color: #e2efde; background: var(--dark); font-family: "DM Mono", monospace; font-size: 11px; }.demo-note a { text-decoration: underline; }.site-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }.logo { font-size: 18px; font-weight: 700; line-height: .85; }.logo i { color: #5a8d58; font-family: "Space Grotesk", "DM Sans", Arial, sans-serif; font-size: 22px; font-weight: 600; font-style: normal; }.site-header nav { display: flex; gap: 25px; font-size: 13px; font-weight: 700; }.visit { min-height: 38px; display: inline-flex; align-items: center; border: 1px solid var(--green); border-radius: 3px; padding: 8px 12px; font-size: 13px; font-weight: 700; }
.hero { position: relative; min-height: 660px; overflow: hidden; color: white; background: var(--green); }.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.hero::after { position: absolute; inset: 0; content: ""; background: rgba(12, 58, 43, .48); }.hero-content { position: relative; z-index: 1; min-height: 660px; display: flex; flex-direction: column; justify-content: end; padding-bottom: 76px; }.eyebrow { margin: 0 0 14px; color: inherit; font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; }h1, h2, h3 { margin: 0; font-family: "Space Grotesk", "DM Sans", Arial, sans-serif; font-weight: 600; line-height: .9; }.hero h1 { max-width: 650px; font-size: clamp(57px, 7.3vw, 101px); }.hero h1 em { color: var(--lime); font-style: normal; }.hero-content > p:last-of-type { max-width: 430px; margin: 27px 0; color: #e0eee4; font-size: 17px; }.button { display: inline-flex; width: fit-content; min-height: 45px; align-items: center; gap: 12px; border-radius: 3px; padding: 10px 14px; color: var(--dark); background: var(--lime); font-size: 13px; font-weight: 700; }.season-tag { position: absolute; z-index: 1; right: max(24px, calc((100vw - 1180px) / 2)); bottom: 36px; display: grid; gap: 7px; padding: 15px; color: var(--dark); background: var(--lime); }.season-tag span { font-family: "DM Mono", monospace; font-size: 10px; }.season-tag b { font-family: "Space Grotesk", "DM Sans", Arial, sans-serif; font-size: 23px; line-height: .9; }
.season { padding: 117px 0; }.season-head { display: grid; grid-template-columns: .72fr 1.28fr; gap: 45px; align-items: start; margin-bottom: 48px; }.season h2, .advice h2, .visit-section h2 { font-size: clamp(42px, 5vw, 68px); }.plant-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.plant-card { min-height: 300px; display: flex; flex-direction: column; padding: 21px; color: white; }.plant-card span { font-family: "DM Mono", monospace; font-size: 10px; }.plant-card h3 { margin-top: auto; font-size: 42px; }.plant-card p { margin: 4px 0 18px; }.plant-card a { display: flex; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, .65); padding-top: 9px; font-size: 12px; font-weight: 700; }.herbs { background: #3e7966; }.perennials { color: var(--ink); background: var(--blue); }.perennials a { border-color: var(--ink); }.citrus { background: var(--red); }
.advice { padding: 105px 0; color: #e9f3e7; background: var(--green); }.advice-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; }.advice .eyebrow { color: var(--lime); }.advice-list { border-top: 1px solid #729483; }.advice-list article { display: grid; grid-template-columns: .34fr 1fr; gap: 20px; border-bottom: 1px solid #729483; padding: 18px 0; }.advice-list span { color: var(--lime); font-family: "DM Mono", monospace; font-size: 11px; }.advice-list p { margin: 0; font-size: 18px; }
.visit-section { display: grid; grid-template-columns: 1fr .84fr; gap: 100px; padding: 118px 0; }.visit-section > div > p:last-child { max-width: 400px; margin: 25px 0 0; color: #536a60; }.visit-board { display: grid; gap: 13px; padding: 24px; color: #dcebdc; background: var(--dark); }.visit-board > p { margin: 0 0 13px; color: var(--lime); font-family: "DM Mono", monospace; font-size: 11px; }.visit-board div { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid #668777; padding-top: 11px; }.visit-board span { color: #b8cfbf; font-size: 13px; }.visit-board strong { font-family: "Space Grotesk", "DM Sans", Arial, sans-serif; font-size: 21px; }.visit-board a { display: flex; justify-content: space-between; margin-top: 14px; color: var(--dark); background: var(--lime); padding: 11px; font-size: 13px; font-weight: 700; }
footer { padding: 26px 0; color: #d2e0d4; background: var(--dark); font-size: 12px; } footer .wrap { display: flex; justify-content: space-between; gap: 16px; }
@media (max-width: 760px) { .wrap { width: min(100% - 32px, 1180px); }.demo-note { padding: 0 16px; }.site-header nav { display: none; }.hero, .hero-content { min-height: 590px; }.hero-content { padding-bottom: 125px; }.season-tag { right: 16px; bottom: 26px; }.season, .visit-section { padding: 75px 0; }.season-head, .advice-layout, .visit-section { grid-template-columns: 1fr; gap: 42px; }.plant-grid { grid-template-columns: 1fr; }.plant-card { min-height: 230px; }.advice { padding: 75px 0; }.advice-list article { grid-template-columns: 1fr; gap: 7px; } footer .wrap { display: grid; } }