:root{--accent:#5c3566;--accent-hover:#472850;--accent-light:#f2ecf4;--accent-line:#d9c9de;--accent-fill:#5c3566;--accent-fill-hover:#472850;--accent-day:#5c3566}
/* Shared stylesheet for the crop sites. Phone first: 375 px wide, 16 px gutters,
   44 px tap targets. The accent comes from site.json; everything else is shared. */
:root {
  --bg: #f5f3f0; --surface: #fff; --paper: #faf7f2;
  --text: #1d1d1f; --text-2: #4f4f55; --text-3: #66666b;
  --border: #e6e2dd; --radius: 12px;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 34px; letter-spacing: -.01em; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }

.wrap { max-width: 680px; margin: 0 auto; padding: 0 16px; }
main { padding: 24px 0 48px; outline: none; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }

/* Header: brand and three links fit at 375 px, each 44 px tall. */
.top { background: var(--surface); border-bottom: 1px solid var(--border); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; }
.brand { font: 600 20px/1 var(--serif); color: var(--text); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.nav { display: flex; gap: 2px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 999px; color: var(--text-2); text-decoration: none; font-size: 15px; }
.nav a[aria-current="page"] { background: var(--accent-light); color: var(--accent); font-weight: 600; }

.lede { font-size: 18px; color: var(--text-2); }
.btn, .btn-2 { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 999px; font: 600 16px var(--sans); text-decoration: none; cursor: pointer; }
.btn { background: var(--accent-fill); color: #fff; border: 0; }
.btn:hover { background: var(--accent-fill-hover); color: #fff; }
.btn-2 { border: 1px solid var(--accent-line); color: var(--accent); background: var(--surface); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 8px; }
.note { background: var(--paper); border-radius: var(--radius); padding: 12px 14px; color: var(--text-2); }

/* Home */
.hero-img { margin: 0 0 16px; background: #fff; border-radius: var(--radius); overflow: hidden; }
.hero-img img { width: 100%; }
.hero-img.banner img { height: clamp(150px, 32vw, 230px); object-fit: cover; object-position: 50% 62%; }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.doors .btn { min-height: 56px; border-radius: 14px; font-size: 17px; padding: 8px 12px; text-align: center; line-height: 1.25; }
.month { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin: 16px 0; }
.month p { margin: 0 0 4px; }
.month .mk { font-size: 13px; color: var(--text-3); margin-bottom: 2px; }
.month b { font-size: 17px; }
.month .mw { font-size: 14px; color: var(--text-3); margin: 8px 0 0; }
.month fieldset { border: 0; padding: 0; margin: 6px 0 0; }
.month legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.faqs { margin-top: 32px; }
.qa { border-top: 1px solid var(--border); }
.qa summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; padding: 8px 28px 8px 0; position: relative; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after, .grow-row::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: translateY(-70%) rotate(45deg); }
.qa[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
details.how > summary, details.each > summary, details.src > summary { color: var(--accent); cursor: pointer; }
details.how > summary::marker, details.each > summary::marker, details.src > summary::marker { color: var(--accent); }
.grow-row::after { transform: translateY(-50%) rotate(-45deg); }
.qa p { color: var(--text-2); }

/* Choose */
.pick fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.pick legend { font: 600 21px/1.3 var(--serif); margin-bottom: 10px; padding: 0; }
.pick legend small { display: block; font: 400 14px var(--sans); color: var(--text-3); margin-top: 4px; }
.opt { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; min-height: 44px; }
.opt input { margin-top: 4px; width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.opt b { display: block; }
.opt small { display: block; color: var(--text-3); font-size: 14px; }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }

/* Results */
.res-ctx { color: var(--text-3); margin-bottom: 4px; }
.plantline { background: var(--accent-light); border-radius: var(--radius); padding: 10px 14px; }
.plantline a { white-space: nowrap; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 16px 0; }
.card h2 { margin-bottom: 2px; }
.card h2 a { color: var(--text); text-decoration: none; }
.identity { color: var(--accent); font-weight: 600; margin-bottom: 8px; }
.traits { color: var(--text-3); font-size: 15px; }
.card h3 { font: 600 15px var(--sans); margin: 12px 0 6px; }
.picks { list-style: none; padding: 0; margin: 0 0 12px; }
.picks li { padding: 6px 0; border-top: 1px solid var(--border); }
.picks .cvname { font-weight: 600; display: inline-flex; min-height: 44px; align-items: center; }
.picks .sup { display: block; font-size: 15px; }
.picks .sup a, .cv .buy a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 14px; margin: 4px 6px 0 0; border: 1px solid var(--accent-line); border-radius: 999px; text-decoration: none; }
.picks .sup, .cv .buy { color: var(--text-3); font-size: 15px; }
.how summary, .src summary, .each summary { cursor: pointer; color: var(--text-3); font-size: 15px; min-height: 44px; display: flex; align-items: center; }
.how p { font-size: 15px; color: var(--text-2); }
.again { margin-top: 20px; }
.again a { display: inline-flex; min-height: 44px; align-items: center; }

/* Grow */
.winter { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 16px 0; }
.winter fieldset { border: 0; margin: 0; padding: 0; }
.winter legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; margin: 0 6px 6px 0; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 15px; }
.chip input { accent-color: var(--accent); }
/* Native radios and checkboxes stay hollow in dark mode, so unchosen ones don't look half set. */
input[type=radio], input[type=checkbox] { color-scheme: light; }
.chip:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
#winter-current, #cal { margin: 0; }
#winter-current a { display: inline-flex; min-height: 44px; align-items: center; }
#cal { margin-top: 8px; }
.glance-h { font-size: 20px; margin-top: 28px; }
.glance { list-style: none; padding: 0; margin: 0 0 24px; counter-reset: g; }
.glance li { border-top: 1px solid var(--border); }
.glance a { display: block; padding: 10px 0; min-height: 44px; color: var(--text); text-decoration: none; }
.glance b { font-weight: 600; }
.glance .gm { display: block; color: var(--text-3); font-size: 14px; }
html[data-winter] .glance .gm { display: inline; margin-left: 6px; }
.now { background: var(--accent-fill); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; padding: 2px 8px; margin-left: 6px; }
.stage { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; scroll-margin-top: 12px; }
.stage > summary { list-style: none; cursor: pointer; padding: 6px 28px 6px 0; position: relative; min-height: 44px; }
.stage > summary::-webkit-details-marker { display: none; }
.stage > summary::after { content: ""; position: absolute; right: 6px; top: 22px; width: 9px; height: 9px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); transition: transform .15s; }
.stage[open] > summary::after { transform: rotate(-135deg); top: 26px; }
.stage > summary h2 { margin-bottom: 0; }
.stage[open] > summary { margin-bottom: 8px; }
.trouble { border-top: 1px solid var(--border); padding-top: 24px; margin-top: 24px; }
/* Diagrams: ink line drawings that sit beside the engraving. */
.dg-fig { margin: 8px 0 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.dg { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; font-family: var(--sans); }
.dg-fig figcaption { font-size: 14px; color: var(--text-3); text-align: center; margin-top: 6px; }
.dg-soil { fill: #f1ebe2; }
.dg-surface { stroke: #6b5b4a; stroke-width: 2; }
.dg-clove path { fill: #fff; stroke: #1d1d1f; stroke-width: 1.6; stroke-linejoin: round; }
.dg-clove .dg-fine { fill: none; stroke-width: 1; stroke: #8a8a8f; }
.dg-roots path { fill: none; stroke: #6b5b4a; stroke-width: 1.4; stroke-linecap: round; }
.dg-dim { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.dg-guide { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.dg-lead { stroke: #66666b; stroke-width: 1; }
.dg-lab { fill: var(--accent); font-size: 15px; font-weight: 600; }
.dg-note { fill: #4f4f55; font-size: 13.5px; }
html:not([data-winter]) .dg [data-w] { display: none; }
html[data-winter] .dg .w-any { display: none; }
.dg-bed { fill: #f1ebe2; stroke: #6b5b4a; stroke-width: 2; }
.dg-row { stroke: #d6c8b4; stroke-width: 1.2; }
.dg-dot { fill: #fff; stroke: #1d1d1f; stroke-width: 1.3; }
.dg-leaf { fill: #e2ead6; stroke: #56703f; stroke-width: 1.3; stroke-linejoin: round; }
.dg-dead { fill: #ecdcbf; stroke: #8b6f47; stroke-width: 1.3; stroke-linejoin: round; }
.dg-stalk { fill: none; stroke: #56703f; stroke-width: 3; stroke-linecap: round; }
.dg-stalk.dg-wood { stroke: #9a835f; stroke-width: 3.8; }
.dg-bud path { fill: #e2ead6; stroke: #56703f; stroke-width: 1.3; }
.dg-bud .dg-beak { fill: none; stroke-width: 1.8; stroke-linecap: round; }
.dg-snap { stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; }
.dg-bulb { fill: #fff; stroke: #1d1d1f; stroke-width: 1.6; }
.dg-bulbline { fill: none; stroke: #8a8a8f; stroke-width: 1; }
.dg-rootline { fill: none; stroke: #6b5b4a; stroke-width: 1.4; stroke-linecap: round; }
.dg-skin { fill: #fff; stroke: #8a8a8f; stroke-width: 1; }
.dg-flesh { fill: #f7ecd2; stroke: #1d1d1f; stroke-width: 1.1; stroke-linejoin: round; }
.dg-core { fill: #e9dcc4; stroke: #8b6f47; stroke-width: 1; }

/* The year strip: one box per stage, months in three rows of four. Built from
   the stage table, shown once a winter is chosen. */
.year { margin: 4px 0 20px; }
html:not([data-winter]) .year { display: none; }
.yr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 8px; }
.yr-m { font-size: 13px; color: var(--text-3); text-align: center; }
.yr-m.yr-now { color: var(--accent); font-weight: 600; }
.yr-s { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 2px 4px; border-radius: 8px; background: var(--accent-light); border: 1px solid var(--accent-line); color: var(--accent); font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.yr-s:hover { border-color: var(--accent); }
.yr-s.yr-0 { background: transparent; border-style: dashed; }
.yr-s.yr-now { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
/* Results: each card's verdict, in three short rows. */
.verdict { margin: 4px 0 12px; }
.verdict div { display: grid; grid-template-columns: 7em 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.verdict dt { font-size: 14px; font-weight: 600; color: var(--text-3); padding-top: 2px; }
.verdict dd { margin: 0; }
.yr-1 { grid-column: span 1; } .yr-2 { grid-column: span 2; } .yr-3 { grid-column: span 3; } .yr-4 { grid-column: span 4; }
.stage h2 { display: flex; gap: 10px; align-items: baseline; }
.stage .n { font: 600 15px var(--sans); color: var(--accent); }
.stages-wrap { counter-reset: stage; }
.stage { counter-increment: stage; }
.stage.trouble { counter-increment: none; }
.stage .n::before { content: counter(stage); }
.steps .after { display: block; margin-top: 4px; }
.when { color: var(--accent); font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.sign { color: var(--text-2); margin-bottom: 8px; }
.vars { list-style: none; padding: 0; margin: 4px 0 0; }
.vars li { margin: 0 0 4px; }
.vars .wl { font-weight: 600; color: var(--text); }
.steps { padding-left: 22px; margin: 8px 0 12px; }
.steps > li { margin-bottom: 10px; }
.good { font-size: 15px; color: var(--text-3); border-left: 3px solid var(--accent-line); padding-left: 12px; }
.src ol { font-size: 14px; color: var(--text-3); padding-left: 20px; }
.src li { margin-bottom: 6px; }
.src .sl { font-weight: 600; color: var(--text-2); }
.anchor { display: block; height: 0; }
.lookup div { border-top: 1px solid var(--border); padding: 10px 0; }
.lookup dt { font-weight: 600; }
.lookup dd { margin: 4px 0 0; color: var(--text-2); }

/* Varieties */
.group-rows { list-style: none; padding: 0; margin: 0 0 24px; }
.grow-row { display: block; padding: 12px 28px 12px 0; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; min-height: 44px; position: relative; }
.grow-row b { display: block; font-family: var(--serif); font-size: 19px; }
.grow-row span { display: block; color: var(--text-2); }
.grow-row .meta { color: var(--text-3); font-size: 14px; }
.all-h { margin-top: 32px; }
.search { margin: 8px 0 16px; }
.search label { display: block; font-weight: 600; margin-bottom: 6px; }
.search input { width: 100%; min-height: 48px; font: 16px var(--sans); padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
#cv-count { display: block; color: var(--text-3); font-size: 14px; margin-top: 6px; }
.cvgroup h2 a { color: var(--text); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.cvgroup { margin-top: 24px; }
.cv { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 10px 0; }
.cv h3 { margin: 0 0 2px; }
.cv .traits { margin-bottom: 4px; }
.cv .buy { margin-bottom: 0; }

.each dl { font-size: 14px; margin: 0 0 8px; }
.each dt { font-weight: 600; margin-top: 8px; }
.each dd { margin: 0; color: var(--text-2); }
.each .by { color: var(--text-3); }
.crumb a { display: inline-flex; min-height: 44px; align-items: center; }
.facts { display: grid; grid-template-columns: 1fr; gap: 2px 0; }
.facts dt { font-weight: 600; margin-top: 10px; }
.facts dd { margin: 0; color: var(--text-2); }
.wlines { padding-left: 20px; }

/* Research */
.finding { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
.finding h2 { font-size: 20px; }
.finding .by, .biblio { font-size: 14px; color: var(--text-3); }
.biblio li { margin-bottom: 6px; overflow-wrap: anywhere; }
#sources { margin-top: 40px; }

/* Footer */
.foot { background: var(--surface); border-top: 1px solid var(--border); padding: 24px 0 32px; font-size: 15px; }
.foot ul { list-style: none; padding: 0; margin: 0 0 12px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot-links a, .foot-sisters a { display: inline-flex; min-height: 44px; align-items: center; }
.foot-h { font-weight: 600; margin: 8px 0 0; }
.foot-sisters li span { color: var(--text-3); margin-left: 8px; }
.foot-small { font-size: 13px; color: var(--text-3); margin: 4px 0 0; }

@media (min-width: 720px) {
  h1 { font-size: 42px; }
  main { padding-top: 40px; }
  .facts { grid-template-columns: 160px 1fr; }
  .facts dt { margin-top: 6px; }
}

.sum-when { margin: 2px 0 0; color: var(--text-3); font-size: 14px; }
.sum-when span { display: none; }
html[data-winter="cold"] .sum-when [data-w="cold"], html[data-winter="moderate"] .sum-when [data-w="moderate"], html[data-winter="mild"] .sum-when [data-w="mild"] { display: inline; }
html:not([data-winter]) .sum-when { display: none; }
.stage .now { vertical-align: middle; }
.trouble > summary h2 { font-size: 22px; }
:root{color-scheme:light dark}
@media (prefers-color-scheme: dark){
:root{--bg:#151417;--surface:#201e23;--paper:#242127;--text:#ecebee;--text-2:#c9c6ce;--text-3:#a9a5ae;--border:#38343d;--accent:#d6b6e0;--accent-hover:#e8d3ef;--accent-light:#2e2534;--accent-line:#4e3f58;--accent-fill:#6c3f7c;--accent-fill-hover:#7e4b90}
.dg-fig{background:#fff;border-color:#e6e2dd;--accent:var(--accent-day)}
.dg-fig figcaption{color:#66666b}
}
html[data-winter="cold"] [data-w]:not([data-w~="cold"]){display:none}
html[data-winter="moderate"] [data-w]:not([data-w~="moderate"]){display:none}
html[data-winter="mild"] [data-w]:not([data-w~="mild"]){display:none}
html[data-winter] .vars .wl,html[data-winter] .gm .wl{display:none}