*{box-sizing:border-box} :root{--green:#22543d;--leaf:#397653;--cream:#f7f5ed;--ink:#24312a;--muted:#647067} body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--cream);color:var(--ink);line-height:1.6}.hero{background:linear-gradient(135deg,#173e2b,#397653);color:white;padding:clamp(2.5rem,7vw,5rem) 1.25rem;text-align:center}.hero h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.12;max-width:850px;margin:.5rem auto 1rem}.hero p{max-width:720px;margin:.5rem auto}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;font-weight:700}.container{width:min(1080px,92%);margin:2rem auto 4rem}.notice{background:#fff8df;border-left:5px solid #b58b26;padding:1rem 1.2rem;border-radius:.4rem;margin-bottom:2rem}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}.plant-card{display:block;background:white;border:1px solid #e2e5dc;border-radius:1rem;overflow:hidden;color:inherit;text-decoration:none;box-shadow:0 3px 14px #20382a0b;transition:transform .15s,box-shadow .15s}.plant-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px #20382a14}.plant-card img{display:block;width:100%;height:180px;object-fit:cover;background:#e8eee4}.plant-card div{padding:1rem 1.1rem 1.25rem}.plant-card h3{margin:.1rem 0 .4rem;color:var(--green)}.plant-card p{margin:.25rem 0 .8rem;color:var(--muted)}.plant-card span{font-weight:700;color:var(--leaf)}.detail{max-width:850px;margin:2rem auto 4rem;width:min(850px,92%)}.back{color:var(--green);font-weight:700;text-decoration:none}.detail h1{font-size:clamp(2rem,5vw,3rem);line-height:1.15;color:var(--green)}.plant-photo{display:block;width:100%;max-height:380px;object-fit:cover;border-radius:1rem;background:#e8eee4}.audio-panel{background:white;border:1px solid #e1e6dc;border-radius:.8rem;padding:1rem;margin:1rem 0}.audio-panel h3{margin:.1rem 0 .6rem}.audio-panel audio{width:100%;max-width:100%}.small-note{color:var(--muted);font-size:.92rem}footer{text-align:center;padding:1.5rem;background:#e8eee4;color:#506055;font-size:.9rem} @media(max-width:520px){.container{width:90%}.plant-card img{height:160px}}