.garden-page { background:#fffaf3; }
.garden-site-header { position:absolute; z-index:3; top:1.35rem; right:1.35rem; left:1.35rem; grid-template-columns:auto 1fr auto; gap:1rem; border:0; border-radius:28px 28px 0 0; background:transparent; color:#fffaf3; backdrop-filter:none; opacity:0; }
.garden-site-header .wordmark,.garden-site-header nav a,.garden-site-header .header-link { font-family:var(--sans); font-size:.52rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.garden-site-header nav { justify-self:start; gap:1.35rem; }
.garden-site-header nav a { color:rgba(255,250,243,.76); }
.garden-site-header nav a:hover,.garden-site-header nav a[aria-current="page"] { color:#fffaf3; }
.garden-site-header .header-link { color:#fffaf3; }
.garden-hero { position:relative; isolation:isolate; display:block; aspect-ratio:793/446; min-height:0; margin:1.35rem 1.35rem 0; overflow:hidden; padding:0; border:0; border-radius:30px 30px 0 0; background:#173424 url("images/garden-canvas-hero-headerless.jpg") center/cover no-repeat; color:#fffaf3; }
.garden-hero::after { display:none; }
.garden-hero-copy { position:absolute; z-index:1; inset:0; max-width:none; }
.garden-hero h1,.garden-zone h2,.garden-plan h2,.garden-companions h2 { margin:0; font-family:var(--serif); font-size:clamp(4rem,7.5vw,8.2rem); font-weight:500; letter-spacing:-.065em; line-height:.86; }
.garden-hero h1 { max-width:8.5ch; font-size:clamp(3.35rem,4.55vw,5.4rem); text-wrap:balance; opacity:0; }
.garden-hero h1 em { color:#fffaf3; font-weight:500; }
.garden-zone h2 em,.garden-companions h2 em { color:var(--coral); font-weight:500; }
.garden-hero .label { color:#e3e9d9; opacity:0; }
.garden-hero .label::before { display:inline-block; width:1.15rem; height:1px; margin:0 .55rem .24rem 0; background:currentColor; content:""; }
.garden-hero .button { position:absolute; top:61%; left:5.6%; width:20%; height:8%; min-height:0; margin:0; padding:0; border:0; border-radius:99px; background:transparent; color:transparent; box-shadow:none; font-size:0; }
.garden-hero .button:hover { transform:none; background:transparent; box-shadow:none; }
.garden-month-ribbon { display:none; }
.garden-month-ribbon::before { position:absolute; bottom:-1.2rem; left:1.3rem; color:rgba(68,103,82,.42); content:"❧  ❧"; font-family:var(--serif); font-size:3.2rem; letter-spacing:.25rem; transform:rotate(-12deg); }
.garden-month-ribbon .label { margin:0; color:var(--green); text-align:left; }
.garden-month-ribbon .label::before,.garden-month-ribbon .label::after { display:inline-block; width:2.2rem; height:1px; margin:0 .6rem .2rem; background:var(--green); content:""; }
.garden-month-ribbon h2 { margin:0; color:var(--ink); font-family:var(--serif); font-size:1.2rem; font-weight:500; text-align:center; }
.garden-month-ribbon>div>p { display:none; }
.garden-month-zone { color:var(--muted); font-size:.58rem; font-weight:600; letter-spacing:.1em; text-align:right; text-transform:uppercase; }
.garden-zone { display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(4rem,10vw,11rem); align-items:start; background:#fffaf3; }
.garden-zone-intro>p:last-child { max-width:35rem; margin:1.7rem 0 0; color:var(--muted); }
.garden-zone-tools { display:grid; gap:1.1rem; }
.zip-finder,.starting-picker { padding:clamp(1.5rem,3vw,2.4rem); border:1px solid var(--line); background:#f3eee6; }
.zip-finder>label,.starting-picker>label { display:block; margin-bottom:.7rem; color:var(--green); font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.zip-finder>div { display:flex; gap:.75rem; padding-bottom:.8rem; border-bottom:1px solid var(--ink); }
.zip-finder input { min-width:0; flex:1; border:0; outline:0; background:transparent; font:inherit; }
.zip-finder button { padding:.55rem .8rem; border:0; border-radius:99px; background:var(--green); color:white; font-size:.62rem; font-weight:600; white-space:nowrap; }
.zip-finder p,.starting-picker p { margin:.8rem 0 0; color:var(--muted); font-size:.68rem; }
.starting-picker select { width:100%; padding:.9rem 1rem; border:1px solid var(--line); border-radius:8px; outline:0; background:#fffaf3; color:var(--ink); font:inherit; }
.starting-picker { background:#fbf3df; }
.garden-plan { background:#f3eee6; }
.garden-plan-head { display:grid; grid-template-columns:1fr .65fr; gap:2rem 5rem; align-items:end; margin-bottom:3rem; }
.garden-plan-head h2 { max-width:11ch; font-size:clamp(3.5rem,6.2vw,6.5rem); }
.garden-plan-head>p:last-child { max-width:27rem; margin:0; color:var(--muted); }
.garden-starting-note { grid-column:2; max-width:27rem; margin:1rem 0 0; color:var(--green); font-family:var(--serif); font-size:1.05rem; font-style:italic; line-height:1.3; }
.garden-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem 1.45rem; align-items:start; }
.garden-plan-card { --garden-card-accent:var(--green); --garden-card-paper:#fffaf0; position:relative; display:flex; min-height:29rem; flex-direction:column; padding:1.8rem 1.6rem 1.7rem; border:0; border-radius:2px; background-color:var(--garden-card-paper); background-image:repeating-linear-gradient(to bottom,transparent 0 1.92rem,rgba(68,103,82,.045) 1.95rem 1.99rem),radial-gradient(circle at 24% 20%,rgba(255,255,255,.75) 0 1px,transparent 1.5px); background-size:auto,19px 21px; box-shadow:5px 6px 0 rgba(68,103,82,.15),0 18px 32px rgba(54,43,34,.12); }
.garden-plan-card::before,.garden-plan-card::after { position:absolute; right:0; left:0; height:9px; content:""; background:radial-gradient(circle at 8px 0,transparent 7px,var(--garden-card-paper) 7.5px) 0 0/16px 9px repeat-x; }
.garden-plan-card::before { top:-9px; transform:rotate(180deg); }
.garden-plan-card::after { bottom:-9px; }
.garden-plan-card:nth-child(2) { --garden-card-accent:#4779a8; --garden-card-paper:#fffaf3; }
.garden-plan-card:nth-child(3) { --garden-card-accent:#9a7110; --garden-card-paper:#fbf3df; }
.garden-plan-card>span { color:var(--garden-card-accent); font-size:.58rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.garden-plan-card h3 { max-width:10ch; margin:1.7rem 0 .8rem; font-family:var(--hand); font-size:clamp(2.3rem,3.2vw,3.15rem); font-weight:600; letter-spacing:-.02em; line-height:.9; }
.garden-plan-card h3::after { display:block; width:3rem; margin:.55rem 0 0 .2rem; border-bottom:2px solid var(--garden-card-accent); content:""; opacity:.8; transform:rotate(-3deg); }
.garden-plan-card p { margin:0; color:var(--muted); font-size:.77rem; }
.garden-plan-card ul { margin:1rem 0 0; padding:0; list-style:none; color:var(--ink); font-size:.74rem; }
.garden-plan-card li { padding:.65rem 0; border-top:1px dashed #c2b6a7; }
.garden-neighbor-card { background:#fffaf3 !important; }
.garden-neighbor-card h3 { margin:2.2rem 0 .7rem; }
.garden-neighbor-card ul { margin-top:.4rem; }
.garden-neighbor-card li { display:grid; grid-template-columns:5.8rem 1fr; gap:.55rem; font-size:.62rem; line-height:1.3; }
.garden-neighbor-card strong { color:var(--ink); font-family:var(--serif); font-size:.86rem; font-weight:500; }
.garden-neighbor-card li span { color:var(--muted); }
.garden-harvest { padding-bottom:clamp(3rem,5vw,4.5rem); display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(3rem,9vw,9rem); align-items:center; background:#fffaf3; }
.garden-harvest-photo { position:relative; margin:0; }
.garden-harvest-photo img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center; box-shadow:10px 12px 0 rgba(68,103,82,.13),0 22px 42px rgba(54,43,36,.14); transform:rotate(-1.2deg); }
.garden-harvest-photo figcaption { margin-top:.8rem; color:var(--green); font-family:var(--serif); font-size:1rem; font-style:italic; }
.garden-harvest-copy h2 { max-width:10ch; margin:0; font-family:var(--serif); font-size:clamp(3.8rem,6vw,6.5rem); font-weight:500; letter-spacing:-.06em; line-height:.88; }
.garden-harvest-copy h2 em { color:var(--coral); font-weight:500; }
.garden-harvest-copy>p:last-child { max-width:30rem; margin:1.7rem 0 0; color:var(--muted); font-size:1rem; }
.garden-zone { padding-top:clamp(3rem,5vw,4.5rem); }
.garden-kit { display:flex; justify-content:center; background:#dae6d9; }
.garden-kit-card { width:min(100%,34rem); min-height:0; padding:2.2rem; }
.garden-closing-pair { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.garden-closing-pair .section { min-width:0; }
.garden-closing-pair .garden-kit { padding:clamp(4rem,7vw,7rem) clamp(1.2rem,5vw,4.5rem); }
.garden-closing-pair .garden-note { display:flex; align-items:center; padding:clamp(4rem,7vw,7rem) clamp(1.2rem,5vw,4.5rem); }
.garden-companions { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(4rem,10vw,11rem); background:#fffaf3; }
.garden-companion-copy>p:last-child { max-width:30rem; margin:1.7rem 0 0; color:var(--muted); }
.garden-companion-list { border-top:1px solid var(--ink); }
.garden-companion-list article { display:grid; grid-template-columns:11rem 1fr; gap:1.5rem; padding:1.25rem 0; border-bottom:1px solid var(--line); }
.garden-companion-list span { font-family:var(--serif); font-size:1.35rem; }
.garden-companion-list p { margin:0; color:var(--muted); font-size:.75rem; }
.garden-note { padding-block:clamp(5rem,9vw,9rem); background:#395647; }
.garden-note-paper { max-width:50rem; margin:0 auto; padding:clamp(2.5rem,6vw,5.5rem); background:#fffaf0; box-shadow:8px 10px 0 rgba(188,211,238,.18),0 28px 50px rgba(29,39,32,.25); text-align:center; transform:rotate(-.7deg); }
.garden-note-paper .label { color:var(--coral); }
.garden-note-paper h2 { max-width:14ch; margin:0 auto; font-family:var(--serif); font-size:clamp(2.6rem,5vw,5.5rem); font-weight:500; letter-spacing:-.06em; line-height:.9; }
.garden-note-paper p:last-child { max-width:37rem; margin:1.7rem auto 0; color:var(--muted); font-size:.8rem; }
@media (max-width:760px) { .garden-site-header { top:.65rem; right:.65rem; left:.65rem; grid-template-columns:1fr auto; padding:1rem; } .garden-site-header nav { display:none; } .garden-site-header .header-link { display:none; } .garden-hero { min-height:40rem; margin:.65rem .65rem 0; padding:9.5rem 1.7rem 3rem; border-radius:22px 22px 0 0; background-image:linear-gradient(180deg,rgba(19,52,36,.86) 0%,rgba(19,52,36,.55) 48%,rgba(19,52,36,.78) 100%),url("images/garden-hero.jpg"); background-position:center,56% center; } .garden-month-ribbon { grid-template-columns:1fr; gap:.45rem; margin:0 .65rem; padding:1.1rem 1rem; border-radius:0 0 22px 22px; text-align:center; } .garden-month-ribbon .label,.garden-month-zone { text-align:center; } .garden-month-ribbon h2 { font-size:1rem; } .garden-zone,.garden-companions,.garden-harvest { grid-template-columns:1fr; } .garden-plan-head { grid-template-columns:1fr; } .garden-starting-note { grid-column:auto; } .garden-plan-grid { grid-template-columns:1fr; } .garden-companion-list article { grid-template-columns:1fr; gap:.3rem; } .zip-finder>div { align-items:stretch; flex-direction:column; border-bottom:0; } .zip-finder input { min-height:2.5rem; border-bottom:1px solid var(--ink); } }
@media (max-width:760px) { .garden-hero { aspect-ratio:793/446; min-height:0; margin:.65rem .65rem 0; padding:0; border-radius:22px 22px 0 0; background:#173424 url("images/garden-canvas-hero-headerless.jpg") center/cover no-repeat; } .garden-month-ribbon { display:none; } }
@media (max-width:900px) { .garden-closing-pair { grid-template-columns:1fr; } }