:root { --ink:#183126; --paper:#f5f1e8; --cream:#fffdf7; --sage:#cbd7c3; --moss:#466a50; --rust:#b95e3c; --gold:#e5b84c; --line:#d9d5c8; --font-sans:'DM Sans'; --font-serif:'Lora'; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans), sans-serif; }
a { color:inherit; }
img { display:block; max-width:100%; }
.hero { min-height:88vh; padding:28px max(24px,5vw) 64px; display:grid; grid-template-rows:auto 1fr auto; background:linear-gradient(135deg,rgba(20,48,36,.96),rgba(55,92,66,.9)),url('/assets/plants/18-monstera.jpg') center/cover; color:white; }
nav { display:flex; justify-content:flex-end; gap:28px; font-size:14px; }
nav a { text-decoration:none; border-bottom:1px solid transparent; } nav a:hover { border-color:white; }
.hero-copy { align-self:center; max-width:870px; padding:80px 0; }
.eyebrow { margin:0 0 12px; text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:800; }
h1,h2 { font-family:var(--font-serif), serif; font-weight:500; letter-spacing:-.035em; }
h1 { font-size:clamp(58px,9vw,118px); line-height:.92; margin:0 0 30px; max-width:1000px; }
.hero-copy>p:last-child { max-width:680px; margin:0; font-size:19px; line-height:1.6; color:#edf3eb; }
.rule { display:grid; grid-template-columns:220px 1fr; max-width:850px; gap:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,.45); }
.rule span { font-weight:800; }.rule p { margin:0; line-height:1.55; color:#edf3eb; }
.section { padding:90px max(24px,5vw); max-width:1600px; margin:auto; }
.section-heading { max-width:850px; margin-bottom:38px; }.section-heading h2 { font-size:clamp(42px,6vw,74px); margin:0 0 14px; }.section-heading>p:last-child { line-height:1.6; color:#52665a; }
.calendar { display:grid; grid-template-columns:repeat(7,1fr); border:1px solid var(--line); background:var(--cream); }
.day { padding:24px 18px; min-height:285px; border-right:1px solid var(--line); display:flex; flex-direction:column; }.day:last-child { border:0; }.day>div>p { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--rust); margin:0 0 8px; }.day h3 { margin:0; font-family:var(--font-serif); font-size:22px; line-height:1.1; }.plant-list { font-size:12px; line-height:1.6; margin:24px 0; color:var(--moss); font-weight:700; }.day-note { font-size:13px; line-height:1.55; margin-top:auto; color:#5e675f; }.season-note { background:#e8dec4; margin:22px 0 0; padding:18px 22px; line-height:1.55; }
.urgent-section { background:var(--ink); color:white; max-width:none; }.urgent-section>.section-heading,.urgent-grid { max-width:1440px; margin-left:auto; margin-right:auto; }.urgent-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }.urgent-card { background:#294537; }.urgent-card img { width:100%; aspect-ratio:4/3; object-fit:cover; }.urgent-card>div { padding:20px; }.urgent-card h3 { font-family:var(--font-serif); font-size:26px; margin:4px 0 12px; }.urgent-card p { line-height:1.55; font-size:14px; color:#e3ebe5; }.urgent-card .number { color:#f3bf72; text-transform:uppercase; letter-spacing:.1em; font-size:11px; font-weight:800; }.urgent-card a { font-size:13px; font-weight:800; color:#f3bf72; }
.plant-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:34px 22px; }.plant-card { background:var(--cream); scroll-margin-top:20px; box-shadow:0 8px 24px rgba(34,47,38,.07); }.photo-wrap { position:relative; overflow:hidden; }.photo-wrap img { width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .35s; }.plant-card:hover .photo-wrap img { transform:scale(1.02); }.plant-number { position:absolute; left:16px; bottom:14px; color:white; font-family:var(--font-serif); font-size:38px; text-shadow:0 2px 10px #0008; }.status { position:absolute; right:14px; top:14px; padding:7px 10px; border-radius:99px; color:white; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }.status.good { background:#367447; }.status.watch { background:#bd7927; }.status.urgent { background:#b74734; }.plant-body { padding:24px; }.identity { min-height:74px; }.identity h3 { font-family:var(--font-serif); font-size:30px; margin:0 0 4px; }.identity p { margin:0; color:#667269; font-size:13px; }.plant-body dl { margin:22px 0 0; }.plant-body dl>div { border-top:1px solid var(--line); padding:15px 0; }.plant-body dt { text-transform:uppercase; font-size:10px; font-weight:900; letter-spacing:.11em; color:var(--moss); margin-bottom:5px; }.plant-body dd { margin:0; font-size:14px; line-height:1.55; }.interval { display:block; margin-top:5px; font-weight:800; color:var(--rust); }.care { margin:0 -24px -24px; padding:17px 24px 22px!important; border:0!important; }.care.good { background:#e6efe3; }.care.watch { background:#f4e7cb; }.care.urgent { background:#f0d2c8; }
footer { padding:36px max(24px,5vw); background:#10261c; color:#dbe6dd; display:flex; justify-content:space-between; gap:30px; } footer p { margin:0; max-width:800px; } footer a { color:#f3bf72; white-space:nowrap; }
@media(max-width:1100px){.calendar{grid-template-columns:repeat(2,1fr)}.day{border-bottom:1px solid var(--line);min-height:220px}.urgent-grid{grid-template-columns:repeat(2,1fr)}.plant-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.hero{min-height:100vh}.hero nav{justify-content:flex-start;gap:16px;font-size:12px;flex-wrap:wrap}.rule{grid-template-columns:1fr}.section{padding:64px 18px}.calendar,.urgent-grid,.plant-grid{grid-template-columns:1fr}.identity{min-height:0}.urgent-card{display:grid;grid-template-columns:120px 1fr}.urgent-card img{height:100%;aspect-ratio:auto}footer{flex-direction:column}.day{min-height:0}.day-note{margin-top:20px}}