/* Plot & Sprout — a bed plan on green graph paper: Fraunces headings, leaf green and terracotta. */
:root,[data-theme="garden-tools"]{
--color-primary:#166534;--color-accent:#c2410c;--color-bg:#f2f6ec;--color-bg-alt:#e6eedd;
--color-text:#14311c;--color-text-muted:#54684e;--color-border:#c8d8bb;--paper:#fff;
--grid-fine:#e3ecda;--grid-bold:#d0dfc3;
--radius-sm:2px;--radius-md:3px;
--font-display:"Fraunces",Georgia,"Times New Roman",serif;
--font-base:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,"Courier New",monospace}
*{box-sizing:border-box}
body{margin:0;color:var(--color-text);font-family:var(--font-base);-webkit-font-smoothing:antialiased;
background-color:var(--color-bg);background-image:
linear-gradient(var(--grid-fine) 1px,transparent 1px),linear-gradient(90deg,var(--grid-fine) 1px,transparent 1px),
linear-gradient(var(--grid-bold) 1px,transparent 1px),linear-gradient(90deg,var(--grid-bold) 1px,transparent 1px);
background-size:10px 10px,10px 10px,50px 50px,50px 50px}
a{color:var(--color-primary)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
/* nav */
.site-nav{background:var(--paper);border-bottom:2px solid var(--color-primary)}
.nav-container{position:relative;height:70px;max-width:1160px;margin:auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}
.nav-logo{height:32px}
.nav-site-name{font:700 21px/1 var(--font-display);letter-spacing:-.015em}
.nav-links,.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.nav-links a,.footer-links a{text-decoration:none;color:var(--color-text-muted);font:11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.nav-links a:hover,.footer-links a:hover{color:var(--color-accent)}
/* home */
.ps-home{max-width:1160px;margin:auto;padding:0 20px 90px}
.ps-hero{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:60px;align-items:center;padding:72px 0 60px}
.ps-hero span{display:block;font:11px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent)}
.ps-hero h1{font:700 clamp(36px,4.6vw,58px)/1.06 var(--font-display);letter-spacing:-.02em;margin:18px 0 16px;max-width:17ch}
.ps-hero p{font-size:18px;line-height:1.7;color:var(--color-text-muted);max-width:48ch;margin:0}
.ps-plan{display:block;width:100%;height:auto}
.ps-plan rect.bed{fill:var(--paper);stroke:var(--color-primary);stroke-width:2;animation:ps-set .5s ease-out both}
.ps-plan rect.bed:nth-of-type(2){animation-delay:.12s}
.ps-plan rect.bed:nth-of-type(3){animation-delay:.24s}
.ps-plan line.row{stroke:var(--color-border);stroke-width:1;stroke-dasharray:4 5}
.ps-plan line.rule{stroke:var(--color-accent);stroke-width:2}
.ps-plan text{fill:var(--color-text-muted);font:10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
@keyframes ps-set{from{opacity:0}to{opacity:1}}
.ps-legend{display:flex;align-items:baseline;gap:14px;padding-bottom:12px;border-bottom:2px solid var(--color-primary);font:11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)}
.ps-legend b{color:var(--color-text)}
.ps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.ps-packet{position:relative;display:block;background:var(--paper);border:2px solid var(--color-primary);border-radius:var(--radius-md);padding:26px 22px 20px;text-decoration:none;color:inherit;transition:box-shadow .16s,transform .16s}
.ps-packet::before{content:"";position:absolute;top:-2px;left:-2px;width:16px;height:16px;background:var(--color-accent)}
.ps-packet:hover{transform:translateY(-3px);box-shadow:0 12px 26px #14311c1f}
.ps-packet img{width:34px;height:34px;margin:0 0 14px auto;display:block}
.ps-packet h2{font:700 20px/1.25 var(--font-display);letter-spacing:-.015em;margin:0 0 8px}
.ps-packet p{margin:0 0 16px;font-size:14px;line-height:1.65;color:var(--color-text-muted)}
.ps-sow{font:11px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent)}
.ps-note{margin-top:34px;padding:16px 18px;border-left:4px solid var(--color-accent);background:var(--paper);font-size:14px;line-height:1.7;color:var(--color-text-muted)}
/* detail */
.psd-page{max-width:1060px;margin:auto;padding:22px 20px 90px}
.psd-crumb{font:11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)}
.psd-crumb a{text-decoration:none}
.psd-head{max-width:720px;padding:40px 0 26px;border-bottom:2px solid var(--color-primary)}
.psd-kicker{font:11px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent)}
.psd-head h1{font:700 clamp(32px,4.4vw,52px)/1.07 var(--font-display);letter-spacing:-.02em;margin:14px 0}
.psd-head p{font-size:18px;line-height:1.7;color:var(--color-text-muted);margin:0}
.psd-tool{position:relative;background:var(--paper);border:2px solid var(--color-primary);border-radius:var(--radius-md);padding:26px;margin:32px 0 50px}
.psd-tool::before{content:"";position:absolute;top:-2px;left:-2px;width:16px;height:16px;background:var(--color-accent)}
.psd-tool-label{font:11px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted);padding:0 0 14px 24px;border-bottom:1px solid var(--color-border);margin-bottom:22px}
.psd-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:56px}
.psd-reading{font-size:17px;line-height:1.8}
.psd-reading h2{font:700 26px/1.2 var(--font-display);letter-spacing:-.02em;margin:36px 0 12px}
.psd-reading h3{font:700 19px var(--font-display);margin:26px 0 8px}
.psd-reading p{margin:0 0 14px}
.psd-reading ol,.psd-reading ul{margin:0 0 16px;padding-left:22px}
.psd-reading li{margin-bottom:7px}
.psd-reading code{font:14px var(--font-mono);background:var(--color-bg-alt);padding:2px 6px;border-radius:2px}
.psd-side{align-self:start;background:var(--paper);border-top:4px solid var(--color-accent);padding:18px;color:var(--color-text-muted);font-size:14px;line-height:1.65}
.psd-side strong{display:block;color:var(--color-text);font:11px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.psd-side a{display:inline-block;margin-top:12px;color:var(--color-primary);font-weight:700;text-decoration:none}
.psd-side a:hover{text-decoration:underline}
.psd-index{margin-top:24px;border-top:1px solid var(--color-border);padding-top:14px}
.psd-index ul{list-style:none;margin:10px 0 0;padding:0}
.psd-index li{padding:6px 0;font-size:13px}
.psd-index a{display:block;color:var(--color-text);text-decoration:none}
.psd-index a:hover{color:var(--color-accent)}
.psd-index span[aria-current]{font-weight:700;color:var(--color-accent)}
.psd-faq{margin-top:56px}
.psd-faq h2{font:700 26px var(--font-display);letter-spacing:-.02em}
.psd-faq details{border-bottom:1px solid var(--color-border);padding:15px 0}
.psd-faq summary{cursor:pointer;font-weight:700}
.psd-faq p{color:var(--color-text-muted);line-height:1.75}
.psd-related{margin-top:56px}
.psd-related h2{font:700 26px var(--font-display);letter-spacing:-.02em;margin-bottom:18px}
.psd-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.psd-related-card{position:relative;display:block;background:var(--paper);border:2px solid var(--color-primary);border-radius:var(--radius-md);padding:20px;text-decoration:none;color:inherit;transition:transform .16s,box-shadow .16s}
.psd-related-card::before{content:"";position:absolute;top:-2px;left:-2px;width:12px;height:12px;background:var(--color-accent)}
.psd-related-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px #14311c1f}
.psd-related-card h3{font:700 18px var(--font-display);letter-spacing:-.015em;margin:0 0 8px}
.psd-related-card p{font-size:14px;line-height:1.6;color:var(--color-text-muted);margin:0 0 12px}
.psd-related-card span{font:11px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent)}
.psd-disclaimer{margin:44px 0 0;padding:16px 18px;border-left:4px solid var(--color-accent);background:var(--paper);font-size:14px;line-height:1.7;color:var(--color-text-muted)}
.site-footer{border-top:2px solid var(--color-primary);padding:32px 20px;text-align:center;background:var(--paper)}
.footer-copyright{margin-top:14px;font:11px var(--font-mono);letter-spacing:.08em;color:var(--color-text-muted)}
/* tool surface: the planting plan */
[data-theme="garden-tools"] .tool-row{gap:18px;margin-bottom:20px}
[data-theme="garden-tools"] .tool-field{font:11px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-muted);gap:9px}
[data-theme="garden-tools"] .tool-input,[data-theme="garden-tools"] .tool-textarea{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fcfdfa;padding:11px 12px;font:16px/1.5 var(--font-mono);color:var(--color-text)}
[data-theme="garden-tools"] .tool-input:focus,[data-theme="garden-tools"] .tool-textarea:focus{outline:0;border-color:var(--color-primary);box-shadow:0 0 0 3px #16653422}
[data-theme="garden-tools"] .tool-btn{border-radius:var(--radius-sm);padding:12px 22px;font:11px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase}
[data-theme="garden-tools"] .tool-btn-primary{background:var(--color-primary);color:#fff;border:0}
[data-theme="garden-tools"] .tool-btn-primary:hover{background:#0f4d27}
[data-theme="garden-tools"] .tool-result-box{margin-top:26px;padding:22px;border:2px solid var(--color-primary);border-radius:var(--radius-md);background:#fcfdfa}
[data-theme="garden-tools"] .tool-stat-hero{margin:0 0 6px;font:700 clamp(32px,6vw,50px)/1.05 var(--font-display);letter-spacing:-.03em;color:var(--color-primary)}
[data-theme="garden-tools"] .tool-unit{display:inline-block;margin-left:10px;font:11px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent);vertical-align:middle}
[data-theme="garden-tools"] .tool-hint{font-size:13px;line-height:1.7;color:var(--color-text-muted);margin-top:10px}
@media(max-width:960px){
.ps-hero{grid-template-columns:1fr;gap:34px}
.ps-grid,.psd-related-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
.ps-hero{display:none}
.ps-home{padding:24px 16px 60px}
.ps-grid,.psd-related-grid{grid-template-columns:1fr}
.psd-head{padding-top:26px}
.psd-layout{grid-template-columns:1fr;gap:28px}
.psd-side{margin-top:8px}
.psd-tool{padding:20px 18px}
}
@media(prefers-reduced-motion:reduce){
.ps-plan rect.bed{animation:none}
.ps-packet:hover,.psd-related-card:hover{transform:none}
}