/* ============================================================
   Garden area · michaelnocito.github.io/garden/
   Zinc & Sky neutrals and type, emerald accent for the garden.
   Shared by the hub and every post. Post pages link ../garden.css
   ============================================================ */

:root{
  color-scheme: light only;
  --bg:      #F5F7F8;
  --bg-2:    #F1F3F5;
  --card:    #FFFFFF;
  --ink:     #09090B;
  --ink-2:   #27272A;
  --ink-3:   #52525B;
  --line:    #E4E7EA;
  --line-2:  #C3C7CE;
  --accent:  #047857;   /* emerald: the garden room of the house */
  --accent-2:#065F46;
  --warn:    #B45309;
  --maxw:    880px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; background:var(--bg)}
body{
  background:var(--bg); color:var(--ink-2);
  font-family:"Inter",-apple-system,system-ui,sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
a{color:inherit}
img{max-width:100%}

h1,h2,h3{font-family:"Newsreader",Georgia,serif; font-weight:500; color:var(--ink); line-height:1.15; letter-spacing:-.01em}
.mono-label{font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink-3)}
.hr{border:none; border-top:1px solid var(--line); margin:0}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.mn{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1.5px solid var(--ink); border-radius:8px; font-family:"Newsreader",serif; font-weight:600; font-size:16px; color:var(--ink); text-decoration:none; letter-spacing:.02em}
.nav-links{display:flex; gap:26px; align-items:center}
.nav-links a{font-size:15px; font-weight:500; text-decoration:none; color:var(--ink-2); transition:color .2s}
.nav-links a:hover{color:var(--accent)}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; font-size:22px; color:var(--ink)}
@media(max-width:720px){
  .nav-links{position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height .35s ease}
  .nav-links.open{max-height:340px}
  .nav-links a{padding:14px 28px; width:100%; border-top:1px solid var(--line)}
  .nav-toggle{display:block}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; text-decoration:none;
  padding:11px 20px; border-radius:8px; border:1px solid var(--line-2); color:var(--ink); background:var(--card);
  transition:border-color .2s, color .2s, background .2s}
.btn:hover{border-color:var(--ink)}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-2); border-color:var(--accent-2)}

/* ---------- hero ---------- */
.hero{padding:72px 0 44px}
.hero .mono-label{margin-bottom:16px}
.hero h1{font-size:clamp(38px,7vw,66px); letter-spacing:-.025em; margin-bottom:20px}
.hero h1 .dot{color:var(--accent)}
.hero .lede{font-size:20px; color:var(--ink-2); max-width:56ch; margin-bottom:26px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.meta-row{display:flex; gap:18px; flex-wrap:wrap; font-size:14px; color:var(--ink-3); margin-top:22px}

/* ---------- sections ---------- */
section{padding:52px 0}
.sec-label{font-family:"Newsreader",serif; font-size:15px; color:var(--ink-3); font-style:italic; margin-bottom:10px}
.sec-head{margin-bottom:28px}
.sec-head h2{font-size:clamp(25px,4vw,36px); letter-spacing:-.02em}
.sec-head p{color:var(--ink-2); margin-top:10px; max-width:62ch}

/* ---------- prose ---------- */
.prose p{margin-bottom:16px; max-width:66ch}
.prose h3{font-size:22px; margin:34px 0 12px}
.prose ul,.prose ol{margin:0 0 18px 22px; max-width:64ch}
.prose li{margin-bottom:9px}
.prose strong{color:var(--ink); font-weight:600}
.inline-link{color:var(--accent); font-weight:600; text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accent) 35%, transparent)}
.inline-link:hover{border-bottom-color:var(--accent)}

/* ---------- the one directive, always visible ---------- */
.directive{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:10px; padding:20px 24px; margin:26px 0}
.directive .k{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); font-weight:700; display:block; margin-bottom:7px}
.directive p{font-family:"Newsreader",serif; font-size:20px; color:var(--ink); line-height:1.45; margin:0; max-width:none}

/* ---------- ready / not-ready checks ---------- */
.checks{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:26px 0}
@media(max-width:720px){.checks{grid-template-columns:1fr}}
.check{border:1px solid var(--line); border-radius:12px; padding:22px; background:var(--card)}
.check h4{font-family:"Newsreader",serif; font-size:19px; color:var(--ink); margin-bottom:12px; display:flex; align-items:center; gap:9px}
.check.go h4::before{content:"✓"; color:var(--accent); font-weight:700}
.check.wait h4::before{content:"✕"; color:var(--warn); font-weight:700}
.check ul{list-style:none; margin:0; display:flex; flex-direction:column; gap:10px}
.check li{font-size:15.5px; padding-left:16px; position:relative}
.check li::before{content:""; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%; background:var(--line-2)}

/* ---------- numbered steps ---------- */
.steps{list-style:none; counter-reset:step; margin:0; display:flex; flex-direction:column; gap:26px}
.steps > li{counter-increment:step; display:grid; grid-template-columns:38px 1fr; gap:16px; align-items:start}
.steps > li::before{content:counter(step); grid-row:1/99; width:34px; height:34px; border:1px solid var(--line-2); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--accent); background:var(--card)}
.steps h3{font-size:20px; margin:4px 0 8px; font-family:"Newsreader",serif}
.steps p{margin-bottom:10px; max-width:62ch}
.steps ul{margin:0 0 10px 20px}

/* ---------- variety cards ---------- */
.vcards{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:8px}
@media(max-width:780px){.vcards{grid-template-columns:1fr}}
.vcard{border:1px solid var(--line); border-radius:12px; padding:26px; background:var(--card)}
.vcard h3{font-size:22px; margin-bottom:4px}
.vcard .sub{font-size:13.5px; color:var(--ink-3); margin-bottom:16px}

/* ---------- callout ---------- */
.callout{border:1px solid var(--line); border-left:3px solid var(--warn); background:var(--card);
  border-radius:10px; padding:18px 22px; margin:24px 0; font-size:15.5px}
.callout b{color:var(--ink)}

/* ---------- table ---------- */
.tbl-scroll{overflow-x:auto; margin:22px 0}
table{border-collapse:collapse; width:100%; font-size:15px; background:var(--card); border:1px solid var(--line); border-radius:10px}
th,td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); font-weight:700; background:var(--bg-2)}
tr:last-child td{border-bottom:none}

/* ---------- photos: invisible until the file exists ----------
   Every photo slot is a <figure class="shot"> whose <img> points at a filename
   that may not be in garden/img/ yet. The figure is display:none by default.
   The img's onload adds .has-img (and .in, so the reveal animation can't strand
   it hidden), which is the only thing that makes the figure appear.

   So: a missing photo renders NOTHING. No dashed box, no broken icon, no
   "under construction" look. Drop the correctly named file into garden/img/
   and the figure appears on the next load, with no code edit.

   The filename each slot wants is recorded in an HTML comment right above its
   <img>, and the full list with shooting notes is in garden/img/PHOTOS.md.    */
.shot{display:none; margin:26px 0}
.shot.has-img{display:block}
.shot img{display:block; width:100%; border:1px solid var(--line); border-radius:12px}
.shot figcaption{font-size:14px; color:var(--ink-3); margin-top:10px; max-width:62ch}

/* A pair collapses to one full-width photo when only one half is shot,
   and disappears entirely when neither is. */
.shot-pair{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin:26px 0}
@media(max-width:640px){.shot-pair{grid-template-columns:1fr}}
.shot-pair .shot{margin:0}
.shot-pair:not(:has(.has-img)){display:none}

/* ---------- post list (hub) ---------- */
.posts{display:flex; flex-direction:column; gap:20px}
.post-card{display:block; text-decoration:none; border:1px solid var(--line); border-radius:12px; background:var(--card);
  padding:26px 28px; transition:border-color .2s, transform .2s}
.post-card:hover{border-color:var(--accent); transform:translateY(-2px)}
.post-card .kicker{font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); font-weight:700}
.post-card h3{font-size:25px; margin:8px 0 8px}
.post-card p{color:var(--ink-2); font-size:16px; max-width:64ch}
.post-card .tags{margin-top:14px; display:flex; gap:8px; flex-wrap:wrap}
.tag{font-size:12.5px; color:var(--ink-3); border:1px solid var(--line); border-radius:100px; padding:4px 11px; background:var(--bg-2)}
.soon{opacity:.62; pointer-events:none}
.soon .kicker{color:var(--ink-3)}

/* ---------- back link / footer ---------- */
.backlink{display:inline-flex; align-items:center; gap:7px; font-size:14.5px; color:var(--ink-3); text-decoration:none; padding:26px 0 0}
.backlink:hover{color:var(--accent)}
footer{padding:40px 0; border-top:1px solid var(--line); margin-top:20px}
.foot{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-size:14.5px; color:var(--ink-3)}
.foot a{text-decoration:none; color:var(--ink-2); transition:color .2s}
.foot a:hover{color:var(--accent)}
.foot-links{display:flex; gap:20px; flex-wrap:wrap}

/* reveal */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none}}