/* ── The green world ──────────────────────────────────────────────────────────
   One dark hero band holds the verdict; everything meant to be READ sits on warm
   light ground below it. That split is the whole design — see CLAUDE.md.

   Shared by the homepage and every town page. Extracted from index.html on
   2026-08-02 when town pages arrived, so the two can never drift apart. */
:root {
  --hero: #24352A;
  --hero-ink: #F2EFE4;
  --hero-mute: #A9BFA6;
  --hero-body: #CFDDCA;
  --hero-line: rgba(242,239,228,.18);

  --page: #F2EFE4;
  --ink: #26332A;
  --body-ink: #46543F;
  --mute: #7E8B78;
  --line: #DFDACA;
  --chip: #E6E1D2;

  --water: #E9A360;
  --wait: #9FCFA4;
  --hold: #9CC4DD;
  --ochre: #C29A2E;
  --bar: #3E6B44;
}

/* Dark mode is a second design, not an inversion: the hero holds and the reading
   ground goes deep, keeping the same relationship between the two. */
@media (prefers-color-scheme: dark) {
  :root {
    --hero: #1B2820; --page: #151C17; --ink: #E7E4D7; --body-ink: #C3CBBC;
    --mute: #8A9784; --line: #2A362B; --chip: #222E24; --ochre: #D2AA3E; --bar: #6E9E74;
  }
}
:root[data-theme="dark"] {
  --hero: #1B2820; --page: #151C17; --ink: #E7E4D7; --body-ink: #C3CBBC;
  --mute: #8A9784; --line: #2A362B; --chip: #222E24; --ochre: #D2AA3E; --bar: #6E9E74;
}
:root[data-theme="light"] {
  --hero: #24352A; --page: #F2EFE4; --ink: #26332A; --body-ink: #46543F;
  --mute: #7E8B78; --line: #DFDACA; --chip: #E6E1D2; --ochre: #C29A2E; --bar: #3E6B44;
}

* { box-sizing: border-box; }
/* Must match the BODY ground, not the hero: this fills any space below the content
   and shows on overscroll. Setting it to the hero colour puts a stray dark band at
   the foot of every short page. It did. */
html { background: var(--page); }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 17px/1.62 Georgia, "Iowan Old Style", "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero { background: var(--hero); color: var(--hero-ink); }
.hero-in { max-width: 34rem; margin: 0 auto; padding: 1.15rem 1.35rem 1.9rem; }

.mast {
  display: flex; align-items: center; gap: .55rem;
  font-size: 1rem; font-style: italic; color: var(--hero-mute); letter-spacing: .01em;
  text-decoration: none;
}
.mast svg { width: 17px; height: 17px; flex: none; }

.crumb {
  margin-top: 1.1rem; font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hero-mute);
}
.crumb a { color: inherit; }

.verdict { margin-top: 2.1rem; }
.verdict h1, .pitch h1 { text-wrap: balance; }
.verdict h1 {
  margin: 0; font-weight: 400; letter-spacing: -.022em;
  font-size: clamp(2.35rem, 11vw, 3.15rem); line-height: 1.03; color: var(--water);
}
.verdict[data-tone="wait"] h1 { color: var(--wait); }
.verdict[data-tone="hold"] h1 { color: var(--hold); }
.verdict p { margin: .85rem 0 0; font-size: 1.06rem; line-height: 1.5; color: var(--hero-body); max-width: 26ch; }

.place {
  margin-top: 1.5rem; padding-top: 1.05rem; border-top: 1px solid var(--hero-line);
  font-size: .77rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--hero-mute); display: flex; align-items: center; gap: .5rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.place .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ochre); flex: none; }

.pitch { margin-top: 1.9rem; }
.pitch h1 {
  margin: 0; font-size: clamp(1.9rem, 8vw, 2.5rem); line-height: 1.12;
  font-weight: 400; letter-spacing: -.02em;
}
.pitch p { margin: 1rem 0 0; font-size: 1.04rem; line-height: 1.55; color: var(--hero-body); max-width: 34ch; }

/* A town page leads with the place, not the verdict — the verdict follows it. */
.town-head { margin-top: 1.6rem; }
.town-head h1 {
  margin: 0; font-size: clamp(1.75rem, 7.5vw, 2.3rem); line-height: 1.1;
  font-weight: 400; letter-spacing: -.02em; text-wrap: balance;
}
.town-verdict {
  margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--hero-line);
}
.town-verdict strong {
  display: block; font-weight: 400; letter-spacing: -.022em;
  font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.05; color: var(--water);
}
.town-verdict[data-tone="wait"] strong { color: var(--wait); }
.town-verdict[data-tone="hold"] strong { color: var(--hold); }
.town-verdict p { margin: .75rem 0 0; font-size: 1.04rem; color: var(--hero-body); max-width: 30ch; }

/* ── body ─────────────────────────────────────────────────────────────────── */
main { max-width: 34rem; margin: 0 auto; padding: 1.9rem 1.35rem 3.5rem; }

.btn {
  display: block; width: 100%; padding: .95rem 1.25rem; border: 0; border-radius: 3px;
  background: var(--ochre); color: #24352A; cursor: pointer; text-align: center;
  text-decoration: none;
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: 1.02rem; font-weight: 700;
}
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .62; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

h2 { margin: 0 0 .5rem; font-size: 1.12rem; font-weight: 400; letter-spacing: -.012em; }
main p { margin: 0 0 .75rem; color: var(--body-ink); }
main p:last-child { margin-bottom: 0; }
main a { color: var(--body-ink); }

.rule { border-top: 1px solid var(--line); margin: 1.7rem 0; }

.lbl {
  font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 600;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute);
}

.chart {
  margin-top: .6rem; height: 76px; display: flex; align-items: flex-end; gap: 3px;
  border-bottom: 1px solid var(--line);
}
.chart i { flex: 1; background: var(--bar); min-height: 2px; border-radius: 1px 1px 0 0; }
/* A dry day is still drawn. Fourteen visible stubs say "nothing, fourteen times";
   an empty box just looks broken. */
.chart i.dry { background: var(--line); height: 4px; }
.chart-foot {
  display: flex; justify-content: space-between; margin-top: .45rem;
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: .68rem;
  letter-spacing: .06em; color: var(--mute);
}

.err {
  margin-top: 1rem; padding: .8rem 1rem; background: var(--chip); border-radius: 3px;
  font-size: .95rem; color: var(--body-ink);
}

details summary {
  cursor: pointer; list-style: none; color: var(--mute);
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: .9rem; font-weight: 600;
}
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "▸  "; }
details[open] summary::before { content: "▾  "; }
details summary:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }

.tablewrap { overflow-x: auto; margin-top: 1rem; }
table { border-collapse: collapse; width: 100%; min-width: 21rem; font-size: .84rem;
        font-family: ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: .34rem .4rem; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
th { color: var(--mute); font-weight: 600; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
td.none { color: var(--mute); }
tr.today td { font-weight: 700; color: var(--ink); }

/* rainfall through a normal year — twelve bars, month initials beneath */
.year {
  margin-top: 1rem; height: 84px; display: flex; align-items: flex-end; gap: 4px;
  border-bottom: 1px solid var(--line);
}
.year i {
  flex: 1; background: var(--bar); opacity: .85; min-height: 3px; position: relative;
  border-radius: 1px 1px 0 0;
}
.year i span {
  position: absolute; top: 100%; left: 0; right: 0; text-align: center; padding-top: 3px;
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: .62rem; color: var(--mute);
}
.year + .chart-foot { margin-top: 1.1rem; }

/* what today means for what you grow */
.plants { margin: 1rem 0 0; padding: 0; list-style: none; }
.plants li { padding: .8rem 0; border-top: 1px solid var(--line); }
.plants li:first-child { border-top: 0; padding-top: 0; }
.plants b { display: block; font-weight: 400; color: var(--ink); }
.plants span { font-size: .95rem; color: var(--body-ink); }

/* town links */
.towns { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; padding: 0; list-style: none; }
.towns a {
  display: inline-block; padding: .4rem .75rem; background: var(--chip); border-radius: 3px;
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: .88rem;
  text-decoration: none; color: var(--ink);
}
.towns a:hover { background: var(--ochre); color: #24352A; }

footer {
  border-top: 1px solid var(--line); margin-top: 2.2rem; padding-top: 1.1rem;
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: .76rem;
  line-height: 1.6; color: var(--mute);
}
footer a { color: inherit; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }