/* gardenplanetbook.com — static build */

:root{
  --ink:#1b1a17; --ink-soft:#4a4741; --ink-faint:#6f6a62;
  --rule:#ddd7cc; --rule-soft:#ebe6dc;
  --paper:#fbf9f5; --paper-warm:#f4f0e7; --white:#fff;
  --leaf:#2f6b47; --leaf-dark:#245439; --clay:#9c4a2f;
  --measure:68ch;
  --serif:"Source Serif 4",Charter,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 19px/1.7 var(--serif); -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--white);padding:.6em 1em;z-index:10}

a{color:var(--leaf-dark);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--clay)}

/* ---------- header ---------- */
.site-head{background:var(--paper);border-bottom:1px solid var(--rule)}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-top:1.1rem;padding-bottom:1.1rem}
.brand{font:600 1.24rem/1 var(--serif);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--leaf-dark)}
.site-head nav ul{display:flex;gap:1.35rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.site-head nav a{font:500 .86rem/1 var(--sans);letter-spacing:.015em;color:var(--ink-soft);text-decoration:none;padding-bottom:.35em}
.site-head nav a:hover{color:var(--leaf-dark)}
.site-head nav a.current{color:var(--leaf-dark);box-shadow:inset 0 -2px 0 var(--leaf)}

/* ---------- page head ---------- */
main.wrap{padding-top:3.4rem;padding-bottom:4.5rem}
article{max-width:var(--measure);margin:0 auto}
.page-head{margin-bottom:2.4rem}
.eyebrow{font:600 .74rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--leaf);margin:0 0 .9rem}
h1{font:600 2.45rem/1.18 var(--serif);letter-spacing:-.015em;margin:0 0 .4em}
.byline{font:.8rem/1 var(--sans);color:var(--ink-faint);letter-spacing:.02em;margin:0}

/* ---------- prose ---------- */
.prose{max-width:100%}
.prose>p,.prose>ul,.prose>ol,.prose>h2,.prose>h3,.prose>h4{max-width:var(--measure)}
.prose p{margin:0 0 1.35em}
.prose strong{font-weight:650}
.prose h2{font:600 1.62rem/1.25 var(--serif);margin:2.4em 0 .55em;padding-bottom:.3em;border-bottom:1px solid var(--rule)}
.prose h3{font:600 1.24rem/1.3 var(--serif);margin:1.9em 0 .4em}
.prose h4{font:700 1.06rem/1.35 var(--serif);margin:1.6em 0 .35em}
.prose ul,.prose ol{margin:0 0 1.5em;padding-left:1.3em}
.prose li{margin-bottom:.6em}
.prose li::marker{color:var(--leaf)}
.prose hr{max-width:5rem;margin:3em 0;border:0;border-top:2px solid var(--rule)}
.prose blockquote{border-left:3px solid var(--leaf);padding-left:1.2em;margin:0 0 1.4em;color:var(--ink-soft)}
.prose code{font-size:.88em;background:var(--paper-warm);padding:.12em .38em;border-radius:2px}

/* outbound marker — this site cites heavily, readers should see where a link goes */
.prose a[target="_blank"]::after{
  content:"";display:inline-block;width:.52em;height:.52em;margin-left:.28em;
  background:currentColor;opacity:.5;
  clip-path:polygon(0 0,100% 0,100% 100%,82% 100%,82% 27%,0 27%);
}

/* ---------- tables ---------- */
.table-wrap{margin:2.2em 0;max-width:100%}
@media (min-width:1180px){.table-wrap,figure{width:calc(100% + 9rem);margin-left:-4.5rem}}
table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--rule);font:.9rem/1.5 var(--sans)}
thead th{background:var(--paper-warm);font-weight:650;text-align:left;padding:.7em .85em;border-bottom:2px solid var(--rule)}
td{padding:.68em .85em;border-bottom:1px solid var(--rule-soft);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#fcfbf8}

/* ---------- figures ---------- */
figure{margin:2.4em 0;max-width:100%}
figure img{display:block;width:100%;height:auto;background:var(--white);border:1px solid var(--rule-soft);padding:1.1em}
figcaption{font:.82rem/1.5 var(--sans);color:var(--ink-faint);margin-top:.75em;padding-left:.9em;border-left:2px solid var(--rule);max-width:var(--measure)}

/* ---------- footer ---------- */
.site-foot{background:var(--paper-warm);border-top:1px solid var(--rule);margin-top:5rem;padding:2.6rem 0}
.site-foot ul{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;list-style:none;margin:0 0 1.4rem;padding:0}
.site-foot a{font:.85rem/1 var(--sans);color:var(--ink-soft);text-decoration:none}
.site-foot a:hover{color:var(--leaf-dark);text-decoration:underline}
.fine{font:.8rem/1.6 var(--sans);color:var(--ink-faint);margin:0;max-width:60ch}

::selection{background:#d8e6dc}

@media (max-width:768px){
  body{font-size:18px}
  main.wrap{padding-top:2.2rem}
  h1{font-size:1.9rem}
  .prose h2{font-size:1.35rem}
  .head-inner{gap:.9rem}
  .site-head nav ul{gap:1rem}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:34rem}
  figure img{padding:.6em}
}

@media print{
  .site-head,.site-foot,.skip{display:none}
  body{font-size:11pt;background:#fff}
  .prose a[target="_blank"]::after{content:" (" attr(href) ")";font-size:.8em;background:none;clip-path:none;width:auto;height:auto}
}
