/* ---------------------------------------------------------------------------
* site.css — carried over from strategy/seedling-gtm/seedling-site.html, the
* chartreuse direction Lisa picked.
*
* SINGLE THEME, ALWAYS LIGHT. There is deliberately no prefers-color-scheme
* block and no data-theme rule anywhere in this file. This is a product, not a
* document: it has to look like itself on the customer's machine, whatever
* their system is set to. Learned 28 August 2026 when the chartreuse mock came
* up near-black on a dark-mode screen.
* ------------------------------------------------------------------------- */
:root{
/* --- grounds. Three per page, plus the ink bands. -----------------------
* CHANGED 15 September 2026 to the new design spec. Chartreuse used to be
* the page ground and carried about half the homepage; at that area it
* flattened everything sitting on it. It is now an accent field used in
* exactly three places: the hero, the lifted box card, and the waitlist. */
/* PONGA BUSH + CLAY, chosen by Cody 24 September 2026. Greens sampled from the
* ponga canopy; clay is the one colour no NZ garden competitor uses.
* --ground is now a DARK field (hero, lifted card, fifty band), so anything
* sitting on it takes the on-dark tokens below. --lime keeps its name but is
* now clay: every button, strip and accent that used lime. */
--paper:#F3F6F0; --surface:#FFFFFF; --sunk:#E7EFE3; --ground:#1D4A2F;
--rest:#E0DACF; /* rest-month cells */
/* --- ink and text ----------------------------------------------------- */
--ink:#0B2016; /* text, every border, ink bands */
--ink-2:#223528; /* body copy on light grounds */
--ink-3:#3A4A40; /* small meta. The floor for 12-13px */
--on-ink:#CBE0CE; /* body copy on ink bands */
--on-dark:#F1F5EE; /* headings and labels on dark grounds */
/* --- greens and earth ------------------------------------------------- */
--deep:#1E5233;
--deep-bright:#5FA864;
--frond:#9FD08F; /* small marks on the dark field */
--lime:#C77A4A; /* now CLAY. Ink on clay is 5.1:1 */
--marigold:#D9A77E; /* tags: a lighter clay */
--soil:#3A2A1F; /* loam: the footer */
--tint:#DCEBCF;
--rule-2:#B9CDB0;
--stone:#DCE0D6;
--warn:#D9541F;
/* --- geometry. Hard offsets, no blur, zero radius on containers. ------- */
/* Rounded corners, Lisa's call 17 September 2026. The blunt square-cornered
* look was the earlier direction; containers now carry a real radius while
* pills stay pills. --r is cards and panels, --r-sm small controls. */
--r:14px;
--r-sm:9px;
--sh:5px 5px 0 var(--ink);
--lift:8px 8px 0 var(--ink);
--lift-lg:10px 10px 0 var(--ink);
--pad-block:clamp(32px,4.5vw,72px);
--pad-inline:clamp(16px,3vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:Figtree,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;
/* Prices and dates line up in columns all over this site. */
font-variant-numeric:tabular-nums;
}
::selection{background:var(--ground);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
body.has-sticky{padding-bottom:86px}
h1,h2,h3,h4{
font-family:"Bricolage Grotesque",Figtree,sans-serif;margin:0;font-weight:800;
letter-spacing:-.02em;line-height:1.04;text-wrap:balance;
}
/* Three steps, deliberately, so a skimmer can tell which sections lead. */
h1{font-size:clamp(36px,5.4vw,68px);letter-spacing:-.03em;line-height:.98}
h2{font-size:clamp(30px,4vw,50px);letter-spacing:-.025em;line-height:1.02}
h3{font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.05;
text-transform:none}
h4{font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
p{margin:0}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;font-family:Figtree,sans-serif;color:inherit}
button{cursor:pointer}
a{color:inherit}
a:not([class]){text-decoration-thickness:2px;text-underline-offset:3px}
a:not([class]):hover{color:var(--deep)}
[hidden]{display:none!important}
/* `mono` kept as a class name so markup does not all have to change, but it is
* no longer monospace: the spec drops the third typeface. It now means
* "this is data" and buys weight and tighter tracking instead of a face. */
.mono{font-weight:600;font-size:.92em;letter-spacing:.01em}
.eyebrow{
font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--deep);font-weight:700;
}
.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.lead{color:var(--ink-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* --- skip link, because this is a real site ----------------------------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--on-dark);
padding:10px 16px;z-index:200;border-radius:0 0 10px 0}
.skip:focus{left:0}
/* --- chrome ------------------------------------------------------------- */
.bar{background:var(--lime);text-align:center;padding:9px 14px;font-size:.83rem;font-weight:700;
border-bottom:2px solid var(--ink)}
.nav{background:var(--surface);border-bottom:2px solid var(--ink);padding:12px 0;position:sticky;top:0;z-index:60}
.nav-in{max-width:1140px;margin:0 auto;padding:0 clamp(16px,4vw,32px);
display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.05rem;line-height:.95;
text-transform:uppercase;background:none;border:0;padding:0;text-align:left;text-decoration:none}
.logo{display:flex;gap:7px;align-items:baseline;font-size:1.25rem}
.logo em{font-style:normal;color:var(--deep-bright)}
.navlinks{display:flex;gap:5px;flex-wrap:wrap}
.navlinks a{background:none;border:2px solid transparent;border-radius:99px;padding:6px 13px;
font-size:.84rem;font-weight:700;color:var(--ink-2);text-decoration:none}
.navlinks a:hover{background:var(--tint);color:var(--ink)}
.navlinks a[aria-current="page"]{background:var(--lime);color:var(--ink);border-color:var(--ink)}
.navr{margin-left:auto;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.chipbtn{background:var(--lime);border:2px solid var(--ink);border-radius:99px;padding:6px 13px;
font-size:.72rem;font-weight:800;letter-spacing:.03em}
.chipbtn em{font-style:normal;font-weight:500;opacity:.7}
/* The chip became a link to the regional waitlist on 2 October 2026, so it
* needs to look like one you can press without turning into a second button. */
a.chipbtn{text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
a.chipbtn:hover,a.chipbtn:focus-visible{background:var(--marigold)}
/* Sign in. Text, not a button, so it stays quieter than Get started while
* being the first thing in .navr for anyone coming back. */
.navlogin{font-weight:700;font-size:.86rem;color:var(--ink);text-decoration:none;
padding:6px 4px;border-bottom:2px solid transparent;white-space:nowrap}
.navlogin:hover,.navlogin:focus-visible{border-bottom-color:var(--lime)}
/* --- buttons ------------------------------------------------------------ */
/* Pill is reserved for buttons and chips. Everything else is square. */
.cta{background:var(--ink);color:var(--on-dark);border:2px solid var(--ink);border-radius:999px;
padding:15px 30px;font-weight:700;font-size:1rem;box-shadow:var(--sh);min-height:48px;
display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.cta:hover{transform:translateY(-1px)}
.cta:active{transform:translateY(1px);box-shadow:var(--sh)}
.cta:disabled,.cta[aria-disabled="true"]{background:var(--stone);color:var(--ink-3);
border-color:var(--rule-2);box-shadow:none;cursor:not-allowed;transform:none}
.cta.sm{padding:10px 20px;font-size:.88rem;min-height:42px;box-shadow:var(--sh)}
.cta.dark{background:var(--ink);color:var(--on-dark)}
.cta.accent{background:var(--lime);color:var(--ink)}
.cta.gift{background:var(--marigold);color:var(--ink)}
.cta.ghost{background:transparent;color:var(--ink);box-shadow:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* --- layout ------------------------------------------------------------- */
section{padding:clamp(30px,4.5vw,56px) 0}
.sechead{display:flex;flex-direction:column;gap:9px;margin-bottom:24px;max-width:680px}
/* ONE card system, 15 September 2026. Every card on the site is this: 2px ink,
* white fill, square corners, no shadow. Exactly one card per section may be
* lifted with .card--lift, never two. Spending border, radius and shadow on
* every block is what flattened the hierarchy. */
.card{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);padding:22px;
display:flex;flex-direction:column;gap:9px}
.card--lift{background:var(--ground);box-shadow:var(--lift)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:15px}
.card h3{font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.card .big{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-weight:800;font-size:2.1rem;
line-height:1;color:var(--deep)}
.card p{font-size:.92rem;color:var(--ink-2)}
.card h3{font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.sunk{background:var(--sunk);border:2px solid var(--ink);border-radius:var(--r);padding:20px}
/* --- hero --------------------------------------------------------------- */
.hero{padding-top:clamp(26px,4vw,48px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,44px);align-items:stretch}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr}}
.hero p.big{font-size:clamp(1rem,2vw,1.18rem);color:var(--ink-2);max-width:52ch}
.herobox{border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--surface);
display:flex;
box-shadow:var(--lift-lg)}
/* Photo slot. SQUARE since 15 September 2026, Lisa's call: the 4:3 box was
* stretching the shot. The image file is cropped square too, so object-fit has
* nothing left to do and the picture cannot distort at any width. The striped
* placeholder stays as the background so a slow or missing image still reads
* as a deliberate slot rather than a blank. */
.photo{aspect-ratio:1/1;width:100%;height:auto;display:block;object-fit:cover;
background:repeating-linear-gradient(45deg,var(--tint) 0 14px,var(--sunk) 14px 28px)}
/* --- tiers -------------------------------------------------------------- */
/* Explicit column counts rather than auto-fit: four cards must never leave a
* ragged row. 4 / 2 / 1 by breakpoint. */
.tiers{display:grid;grid-template-columns:1fr;gap:15px}
@media(min-width:560px){ .tiers{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1040px){ .tiers{grid-template-columns:repeat(4,1fr)} }
.tier{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);padding:22px;
display:flex;flex-direction:column;gap:7px;position:relative;text-align:left;
align-items:flex-start;text-decoration:none;color:inherit}
/* The one lifted card in this section, and the only chartreuse on it. */
.tier.lead{background:var(--ground);box-shadow:var(--lift)}
.tier .flag{position:absolute;top:-13px;left:16px;background:var(--ink);color:var(--on-dark);
font-size:.6rem;letter-spacing:.1em;
text-transform:uppercase;padding:4px 10px;border-radius:99px;font-weight:700}
.tier .price{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:2.4rem;line-height:1}
.tier .plants{font-weight:800;text-transform:uppercase;font-size:.86rem}
.tier p{font-size:.86rem;color:var(--ink-2)}
.tier.sel{outline:4px solid var(--deep);outline-offset:3px}
.tier .ship{font-size:.76rem;font-weight:700;color:var(--deep)}
/* --- calendar ----------------------------------------------------------- */
/* TWELVE cells, and every breakpoint uses a divisor of twelve so no row is
* ever left ragged. This was a real bug: auto-fit put eight send months on one
* row and orphaned the two rest cards below, cramped. */
.calgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media(min-width:470px){ .calgrid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:760px){ .calgrid{grid-template-columns:repeat(4,1fr)} }
@media(min-width:1100px){ .calgrid{grid-template-columns:repeat(6,1fr)} }
.cal{padding:13px 12px;background:var(--surface);display:flex;flex-direction:column;gap:3px;
min-height:104px;border:2px solid var(--ink);border-radius:var(--r)}
/* A rest month is a deliberate state, not a gap: solid ground, readable text. */
.cal.off{background:var(--rest);color:var(--ink-3)}
.cal .m{font-weight:800;text-transform:uppercase;font-size:.82rem}
.cal .d{font-size:12.5px;font-weight:600;color:var(--deep)}
.cal.off .d{color:var(--ink-3)}
.cal .why{font-size:.7rem;color:var(--ink-3);line-height:1.35}
/* --- chooser ------------------------------------------------------------ */
.chooser{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(16px,3vw,30px);align-items:start}
@media(max-width:900px){.chooser{grid-template-columns:1fr}}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.filters button{background:var(--surface);border:2px solid var(--ink);border-radius:99px;
padding:6px 13px;font-size:.8rem;font-weight:700}
.filters button.on{background:var(--ink);color:var(--on-dark)}
.plantgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:11px}
.plant{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);padding:12px;
display:flex;flex-direction:column;gap:7px;text-align:left;align-items:stretch}
.plant.hero-p{background:var(--tint)}
.plant .n{font-weight:800;font-size:.92rem}
.plant .t{font-size:.7rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.plant .stepper{display:flex;align-items:center;gap:8px;margin-top:auto}
.plant .stepper button{width:32px;height:32px;border:2px solid var(--ink);border-radius:var(--r-sm);
background:var(--sunk);font-weight:800;font-size:1rem;line-height:1;display:flex;
align-items:center;justify-content:center}
.plant .stepper button:disabled{opacity:.35;cursor:not-allowed}
.plant .stepper .q{font-weight:700;min-width:20px;
text-align:center}
.plant.full{outline:3px solid var(--deep);outline-offset:2px}
.basket{position:sticky;top:86px;background:var(--surface);border:2px solid var(--ink);
border-radius:var(--r);padding:18px;box-shadow:var(--lift);display:flex;flex-direction:column;gap:12px}
.meter{height:12px;background:var(--sunk);border:2px solid var(--ink);border-radius:99px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--lime);transition:width .18s ease}
.meter.over i{background:var(--warn)}
.slots{display:flex;gap:5px;flex-wrap:wrap}
.slot{width:16px;height:16px;border:2px solid var(--ink);border-radius:var(--r);background:var(--sunk)}
.slot.on{background:var(--lime)}
.slot.hero{background:var(--marigold)}
.lines{display:flex;flex-direction:column;gap:5px;font-size:.85rem}
.line{display:flex;justify-content:space-between;gap:10px}
.line.total{border-top:2px solid var(--ink);padding-top:7px;font-weight:800;font-size:.96rem}
.line .muted{color:var(--ink-3)}
.hint{font-size:.78rem;color:var(--ink-2);background:var(--sunk);border:2px solid var(--rule-2);
border-radius:var(--r);padding:9px 11px}
.hint.warn{background:#FDEDE5;border-color:var(--warn);color:#7A2E0F;font-weight:600}
/* --- forms -------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label{font-weight:700;font-size:.86rem}
.field .help{font-size:.76rem;color:var(--ink-3)}
input[type=text],input[type=email],input[type=tel],input[type=password],select,textarea{
border:2px solid var(--ink);border-radius:var(--r);padding:11px 13px;background:var(--surface);
font-size:.96rem;width:100%}
input:invalid:not(:placeholder-shown){border-color:var(--warn)}
.err{color:#7A2E0F;background:#FDEDE5;border:2px solid var(--warn);border-radius:var(--r-sm);
padding:9px 11px;font-size:.82rem;font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:620px){.grid2{grid-template-columns:1fr}}
/* --- sticky bar --------------------------------------------------------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);
padding:10px clamp(14px,4vw,26px);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sticky .t{color:var(--on-dark);font-weight:700;font-size:.88rem}
.sticky .t span{color:var(--lime);font-weight:800}
.sticky .b{margin-left:auto;display:flex;gap:9px;align-items:center}
.sticky small{color:#A5AC8A;font-size:.73rem}
/* --- waitlist board ----------------------------------------------------- */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.reg{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);padding:15px;
display:flex;flex-direction:column;gap:8px}
.reg .rn{font-weight:800;text-transform:uppercase;font-size:.9rem}
.reg .cnt{font-size:.78rem;color:var(--ink-2)}
/* --- footer ------------------------------------------------------------- */
footer{background:var(--ink);color:var(--on-dark);padding:34px 0;margin-top:20px}
footer a{color:var(--lime)}
footer .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px}
footer h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--lime);margin-bottom:8px}
footer p,footer li{font-size:.84rem;color:#C9D0AC}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
/* --- admin -------------------------------------------------------------- */
table.orders{width:100%;border-collapse:collapse;background:var(--surface);
border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;font-size:.85rem}
table.orders th,table.orders td{padding:9px 11px;text-align:left;border-bottom:2px solid var(--rule-2)}
table.orders th{background:var(--ink);color:var(--on-dark);font-size:.7rem;text-transform:uppercase;
letter-spacing:.08em}
table.orders tr:last-child td{border-bottom:0}
.tablewrap{overflow-x:auto}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.cta:hover,.cta:active{transform:none}
}
/* --- the two models: pick a box, or build your own -------------------------
* Added 8 September 2026 with build-a-box. A segmented control rather than
* two more tiles, because it is a switch between two ways of choosing and
* not a fifth thing to choose. */
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
margin-top:18px}
.modes button{background:var(--sunk);border:2px solid var(--ink);border-radius:var(--r);
padding:14px 16px;text-align:left;display:flex;flex-direction:column;gap:3px;cursor:pointer;
font:inherit;color:var(--ink-2);transition:border-color .12s,background .12s}
.modes button strong{font-size:1rem;color:var(--ink)}
.modes button small{font-size:.78rem;color:var(--ink-3);line-height:1.35}
.modes button:hover{border-color:var(--ink)}
.modes button.on{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.modes button.on strong{color:var(--ink)}
.modes button:focus-visible{outline:3px solid var(--deep);outline-offset:2px}
/* The build-a-box price ladder. Information, not a choice — the count comes
* from what actually gets picked in step 3. */
.ladder{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);padding:24px;
margin-top:20px}
.ladder .lrow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
padding:9px 0;border-top:2px solid var(--ink);font-weight:600}
.ladder .lrow:first-of-type{border-top:0}
.ladder .lrow .mono{color:var(--deep);
font-weight:700}
/* --- the garden dashboard, 8 September 2026 -------------------------------- */
.gcols{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;align-items:start}
@media (max-width:900px){.gcols{grid-template-columns:1fr}}
.panel{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);padding:20px;
display:flex;flex-direction:column;gap:14px}
.panel > h3{font-size:1.15rem;margin:0}
.beds{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:13px}
.bed{border:2px solid var(--ink);border-radius:var(--r);padding:14px;background:var(--sunk);
display:flex;flex-direction:column;gap:9px;position:relative}
.bed.ready{background:var(--marigold)}
.bed.harvested,.bed.lost{opacity:.62}
.bed .who{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.bed .nm{font-weight:800;font-size:1.02rem}
.bed .qty{font-size:.78rem;color:var(--ink-3)}
.bed .when{font-size:.79rem;color:var(--ink-2);line-height:1.4}
.bed .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.bed .acts button{font:inherit;font-size:.74rem;font-weight:700;padding:5px 9px;border-radius:var(--r-sm);
border:2px solid var(--ink);background:var(--surface);cursor:pointer}
.bed .acts button:hover{background:var(--lime)}
.bed .acts button.quiet{border-color:var(--rule-2);color:var(--ink-3)}
.stagebar{height:9px;border:2px solid var(--ink);border-radius:99px;background:var(--surface);
overflow:hidden}
.stagebar i{display:block;height:100%;background:var(--deep)}
.bed.ready .stagebar i{background:var(--ink)}
.pill{display:inline-block;font-size:.63rem;
letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border-radius:99px;font-weight:700;
border:2px solid var(--ink)}
.pill.ready{background:var(--ink);color:var(--on-dark)}
.pill.growing{background:var(--lime)}
.pill.planted{background:var(--surface)}
.pill.harvested,.pill.lost{background:var(--stone);color:var(--ink-3);border-color:var(--rule-2)}
.entries{display:flex;flex-direction:column;gap:13px}
.entry{border-top:2px solid var(--rule-2);padding-top:13px;display:flex;flex-direction:column;gap:7px}
.entry:first-child{border-top:0;padding-top:0}
.entry .meta{font-size:.72rem;color:var(--ink-3);
display:flex;justify-content:space-between;gap:10px;align-items:center}
.entry .meta button{font:inherit;font-size:.7rem;border:0;background:none;color:var(--ink-3);
cursor:pointer;text-decoration:underline;padding:0}
.entry img{width:100%;border-radius:var(--r);border:2px solid var(--ink);display:block}
.entry p{font-size:.9rem;margin:0}
.recipe{border:2px solid var(--ink);border-radius:var(--r);padding:13px;background:var(--sunk);
display:flex;flex-direction:column;gap:7px}
.recipe.picked{background:var(--lime)}
.recipe .rt{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.recipe .rn{font-weight:800}
.recipe .rm{font-size:.74rem;color:var(--ink-3);
white-space:nowrap}
.recipe .uses{font-size:.78rem;color:var(--ink-2)}
.recipe button{align-self:flex-start;font:inherit;font-size:.75rem;font-weight:700;padding:6px 11px;
border-radius:var(--r);border:2px solid var(--ink);background:var(--surface);cursor:pointer}
.kidbtn{font:inherit;font-size:.76rem;font-weight:700;border:2px solid var(--ink);
background:var(--surface);border-radius:99px;padding:5px 13px;cursor:pointer;white-space:nowrap}
.kidbtn[aria-pressed="true"]{background:var(--marigold)}
.kidbtn:focus-visible{outline:3px solid var(--deep);outline-offset:2px}
/* Kid mode: bigger, rounder, warmer. Same layout, same prices, same light
* ground — the palette shifts, the information does not. */
body.kid{--ground:#FFFDF4}
body.kid h1{letter-spacing:-.02em}
body.kid .big,body.kid .lead{font-size:1.08rem}
body.kid .tier,body.kid .panel,body.kid .bed,body.kid .recipe,body.kid .ladder{border-radius:var(--r)}
body.kid .cta{border-radius:99px}
body.kid .tier .price{color:var(--deep)}
/* --- tabs on the garden page, 8 September 2026 -----------------------------
* Rebuilt 8 September after Lisa said they read as a different site. The
* first version used a browser-tab idiom — square-topped, sitting on a rule,
* borderless at the bottom — which is a visual language this site uses
* nowhere else. These follow `.filters`, the segmented control already on the
* build page: a pill, a chunky border, and an ink fill when it is the one
* you are on. Scaled up, because this is the page's main navigation rather
* than a filter row. */
.tabs{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px}
.tabs button{background:var(--surface);border:2px solid var(--ink);border-radius:99px;
padding:11px 21px;font:inherit;font-weight:800;font-size:.92rem;color:var(--ink);
cursor:pointer;box-shadow:var(--sh);display:inline-flex;align-items:center;gap:9px;
min-height:46px;white-space:nowrap}
.tabs button:hover{transform:translateY(-1px)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--on-dark);box-shadow:var(--sh)}
.tabs button:focus-visible{outline:3px solid var(--deep);outline-offset:3px}
.tabs .count{font-size:.74rem;font-weight:700;
color:var(--ink-3);background:var(--sunk);border-radius:99px;padding:2px 8px;min-width:24px;
text-align:center}
.tabs .count:empty{display:none}
.tabs button[aria-selected="true"] .count{background:var(--deep);color:var(--ink)}
@media (max-width:560px){
.tabs{gap:6px}
.tabs button{padding:9px 15px;font-size:.85rem;min-height:42px}
}
.order{border:2px solid var(--ink);border-radius:var(--r);padding:17px;background:var(--sunk);
display:flex;flex-direction:column;gap:11px}
.order .top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.order .ref{font-weight:700;font-size:.9rem}
.order .lbl{font-weight:800;font-size:1.08rem}
.order .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:11px}
.order .cell{display:flex;flex-direction:column;gap:2px}
.order .cell .k{font-size:.66rem;
letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.order .cell .v{font-weight:700;font-variant-numeric:tabular-nums}
.order .what{font-size:.86rem;color:var(--ink-2)}
.order .sends{display:flex;gap:6px;flex-wrap:wrap}
.order .sd{font-size:.7rem;padding:3px 8px;
border-radius:99px;border:2px solid var(--rule-2);color:var(--ink-3)}
.order .sd.ahead{border-color:var(--ink);color:var(--ink);background:var(--surface);font-weight:700}
.order .sd.next{background:var(--marigold);border-color:var(--ink);color:var(--ink)}
/* ===========================================================================
* THE MEAL PLANNER — HelloFresh's layout, Kete Kai's card, 8 September 2026.
*
* Lisa asked for HelloFresh's layout, so their live menu page was captured
* and read rather than recalled. Four mechanics came off it, and all four are
* about information rather than decoration — which is the part worth taking:
*
* 1. A WEEK STRIP. They sell six weeks ahead and let you move between them.
* Dig In had no notion of "which week" at all, even though the menus
* table has been keyed by week since it was built.
* 2. A NAMED WEEK as the heading, so you always know what you are looking at.
* 3. AN UNEVEN GRID. One dish runs double width with a much bigger photo.
* Here that slot goes to the meal using the most of your own crops, so
* the emphasis carries real information instead of being a layout trick.
* 4. A STICKY BAR at the bottom carrying the count and the action, instead
* of a button buried in a side column.
*
* The card itself stays Kete Kai's, which is the house style for content here.
* Ground moved to a warm off-white: food photography sits better on cream than
* on cool grey, and every kit company in the category has landed on the same
* thing for the same reason.
* ========================================================================= */
.kk{
--kk-ink:#1A202C; --kk-ink-2:#4A5568; --kk-mute:#718096;
--kk-hair:#E2E8F0; --kk-hair-2:#CBD5E0; --kk-sunk:#F0F1F3;
--kk-panel:#fff; --kk-accent:#4F8F2F; --kk-accent-dk:#3C6F23; --kk-wash:#F4F9EE;
--kk-bg:#F8F6F1; /* warm off-white — photography sits better on cream */
--kk-sans:Poppins,Figtree,ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
--kk-mono:Figtree,-apple-system,sans-serif;
color:var(--kk-ink);
font-family:var(--kk-sans);
font-size:15px;
line-height:1.55;
/* Kete Kai's own quiet ground. Without it the white photo cards float on
* Dig In's chartreuse and read as pasted on rather than designed. The
* negative margin lets the panel run to the page gutters on a phone. */
background:var(--kk-bg);
border:1px solid var(--kk-hair);
border-radius:var(--r);
padding:26px 24px 28px;
}
@media (max-width:640px){
.kk{margin:0 -20px;border-radius:var(--r);border-left:0;border-right:0;padding:22px 20px 24px}
}
/* Dig In sets every heading uppercase in Bricolage. That is right for the rest
* of the site and wrong here — Kete Kai's cards are sentence case and quiet,
* and the photography is what carries the page. Reset rather than fight it. */
.kk h1,.kk h2,.kk h3,.kk h4{
font-family:var(--kk-sans);
text-transform:none;
letter-spacing:-.025em;
color:var(--kk-ink);
}
.kk h2{font-size:19px;font-weight:700;margin:0}
.kk .sub{color:var(--kk-ink-2);max-width:62ch;margin:0 0 22px;font-size:15.5px}
.kk .cap{font-family:var(--kk-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
color:var(--kk-mute)}
.kk .meals{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.kk .meal{background:var(--kk-panel);border:1px solid var(--kk-hair);border-radius:var(--r);
display:flex;flex-direction:column;overflow:hidden;text-align:left;padding:0;font:inherit;
cursor:pointer;transition:border-color .12s,box-shadow .12s}
.kk .meal:hover{border-color:var(--kk-hair-2);box-shadow:0 4px 14px rgba(26,32,44,.07)}
.kk .meal:focus-visible{outline:3px solid var(--kk-accent);outline-offset:3px}
.kk .meal[data-on="true"]{border-color:var(--kk-accent);box-shadow:0 0 0 1px var(--kk-accent)}
.kk .meal .shot{aspect-ratio:3/2;background:var(--kk-sunk);position:relative;display:block}
.kk .meal .shot img{width:100%;height:100%;object-fit:cover;display:block}
.kk .meal .night{position:absolute;top:9px;left:9px;background:var(--kk-accent);color:#fff;
font-family:var(--kk-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
font-weight:600;padding:4px 8px;border-radius:var(--r)}
.kk .meal .body{padding:13px 15px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.kk .meal h3{font-size:15px;font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.28;
color:var(--kk-ink)}
.kk .meal .facts{display:flex;flex-wrap:wrap;gap:4px 10px;font-family:var(--kk-mono);font-size:11px;
color:var(--kk-mute)}
.kk .meal .uses{font-size:12.5px;color:var(--kk-ink-2)}
.kk .meal .uses b{color:var(--kk-accent-dk);font-weight:600}
.kk .meal .act{margin-top:auto;padding-top:10px;border-top:1px solid var(--kk-hair);
font-family:var(--kk-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
color:var(--kk-accent-dk);font-weight:600}
.kk .meal[data-on="true"] .act{color:var(--kk-ink)}
.kk .week{background:var(--kk-panel);border:1px solid var(--kk-hair);border-radius:var(--r);
padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.kk .week .row{display:flex;align-items:center;gap:11px;padding:10px 0;
border-top:1px solid var(--kk-hair)}
.kk .week .row:first-of-type{border-top:0}
.kk .week .row img{width:52px;height:38px;object-fit:cover;border-radius:var(--r);flex:none}
.kk .week .row .nm{font-size:14px;font-weight:600;letter-spacing:-.015em;flex:1;line-height:1.3}
.kk .week .row .mins{font-family:var(--kk-mono);font-size:11px;color:var(--kk-mute);flex:none}
.kk .week .row button{border:0;background:none;font:inherit;font-size:11px;color:var(--kk-mute);
cursor:pointer;text-decoration:underline;padding:0;flex:none}
.kk .week .row button:hover{color:var(--kk-accent-dk)}
.kk .cut{background:var(--kk-wash);border:1px solid var(--kk-hair);border-radius:var(--r);
padding:13px 15px;font-size:13.5px;color:var(--kk-ink-2)}
.kk .cut b{color:var(--kk-ink);font-weight:600}
.kk .kkbtn{display:inline-block;background:var(--kk-accent);color:#fff;font-weight:600;font-size:14px;
padding:11px 20px;border-radius:var(--r);border:0;cursor:pointer;font-family:inherit;align-self:flex-start}
.kk .kkbtn:hover{background:var(--kk-accent-dk)}
.kk .kkbtn:disabled{background:var(--kk-hair-2);cursor:not-allowed}
.kk .note{font-size:13px;color:var(--kk-mute)}
.kk .note a{color:var(--kk-accent-dk)}
.kk .plannercols{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}
@media (max-width:900px){.kk .plannercols{grid-template-columns:1fr}}
/* Kid mode keeps the same layout — only the roundness and the type soften. */
body.kid .kk .meal,body.kid .kk .week{border-radius:var(--r)}
body.kid .kk .meal h3{font-size:16px}
/* --- the week strip, the uneven grid and the sticky bar -------------------- */
.kk .weekhead{text-align:center;margin-bottom:20px}
.kk .weekhead h2{font-size:clamp(20px,3vw,27px);font-weight:800;letter-spacing:-.035em}
.kk .weekhead .sub{margin:6px auto 0;text-align:center}
.kk .weekstrip{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin:0 auto 26px;
border:1px solid var(--kk-hair-2);border-radius:var(--r);overflow:hidden;width:max-content;
max-width:100%;background:var(--kk-panel)}
.kk .weekstrip button{border:0;border-left:1px solid var(--kk-hair-2);background:var(--kk-panel);
font:inherit;font-size:12.5px;line-height:1.25;padding:10px 17px;cursor:pointer;color:var(--kk-ink-2);
text-align:center;min-width:88px}
.kk .weekstrip button:first-child{border-left:0}
.kk .weekstrip button b{display:block;font-weight:700;color:var(--kk-ink)}
.kk .weekstrip button[aria-pressed="true"]{background:var(--kk-ink);color:#fff}
.kk .weekstrip button[aria-pressed="true"] b{color:#fff}
.kk .weekstrip button:disabled{color:var(--kk-hair-2);cursor:not-allowed}
.kk .weekstrip button:disabled b{color:var(--kk-hair-2)}
/* The uneven grid. The best match runs two columns wide with a taller photo,
* so the thing most worth cooking is the thing you see first. */
/* The feature spans two columns AND two rows, so the normal cards stack
* beside it in the remaining column. Spanning only columns left them
* stretched to the tall row's height with dead space above the meta line —
* which is what it looked like on the first render. `align-items:start` keeps
* every other card sized to its own content. */
.kk .meals{grid-auto-flow:dense;align-items:start}
.kk .meal.feature{grid-column:span 2;grid-row:span 2}
.kk .meal.feature .shot{aspect-ratio:16/10}
.kk .meal.feature h3{font-size:19px;font-weight:700}
.kk .meal.feature .body{padding:15px 18px 17px}
@media (max-width:560px){.kk .meal.feature{grid-column:span 1;grid-row:span 1}
.kk .meal.feature .shot{aspect-ratio:3/2}}
.kk .tags{display:flex;gap:6px;flex-wrap:wrap}
.kk .tag{font-family:var(--kk-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
font-weight:600;padding:3px 7px;border-radius:var(--r);background:var(--kk-sunk);color:var(--kk-ink-2)}
.kk .tag.ready{background:var(--kk-accent);color:#fff}
.kk .tag.soon{background:#B7791F;color:#fff}
.kk .meal .with{font-size:12.5px;color:var(--kk-ink-2);line-height:1.35}
.kk .meal .meta{display:flex;align-items:center;gap:9px;font-family:var(--kk-mono);font-size:11px;
color:var(--kk-mute);margin-top:auto;padding-top:10px;border-top:1px solid var(--kk-hair)}
.kk .meal .meta .div{width:1px;height:11px;background:var(--kk-hair-2)}
.kk .meal .meta .add{margin-left:auto;color:var(--kk-accent-dk);font-weight:600;
letter-spacing:.09em;text-transform:uppercase;font-size:9.5px}
.kk .meal[data-on="true"] .meta .add{color:var(--kk-ink)}
.kk .stickybar{position:sticky;bottom:0;z-index:20;margin:22px -24px -28px;
background:color-mix(in srgb,var(--kk-panel) 94%,transparent);backdrop-filter:blur(10px);
border-top:1px solid var(--kk-hair-2);padding:13px 24px;
display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kk .stickybar .count{font-size:14px;font-weight:600}
.kk .stickybar .cut{background:none;border:0;padding:0;font-size:12.5px;color:var(--kk-ink-2);flex:1;
min-width:180px}
.kk .stickybar .kkbtn{margin-left:auto}
@media (max-width:640px){.kk .stickybar{margin:22px -20px -24px;padding:12px 20px}}
.kk .picked{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px}
.kk .picked .p{display:flex;align-items:center;gap:7px;background:var(--kk-panel);
border:1px solid var(--kk-hair);border-radius:999px;padding:4px 5px 4px 4px;font-size:12.5px}
.kk .picked .p img{width:26px;height:26px;object-fit:cover;border-radius:999px}
.kk .picked .p button{border:0;background:none;cursor:pointer;color:var(--kk-mute);font-size:15px;
line-height:1;padding:0 5px;font-family:inherit}
.kk .picked .p button:hover{color:var(--kk-ink)}
/* --- preferences bar and the shopping list, 8 September 2026 --------------- */
.kk .prefs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:center;
margin:0 auto 20px;max-width:760px}
.kk .prefs .lbl{font-family:var(--kk-mono);font-size:10px;letter-spacing:.1em;
text-transform:uppercase;color:var(--kk-mute);margin-right:2px}
.kk .chip{font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:999px;
background:var(--kk-sunk);color:var(--kk-ink-2);border:1px solid transparent;cursor:pointer;
font-family:inherit}
.kk .chip:hover{border-color:var(--kk-hair-2)}
.kk .chip[data-on="true"]{background:var(--kk-accent);color:#fff}
.kk .chip:focus-visible{outline:3px solid var(--kk-accent);outline-offset:2px}
.kk .prefs .sep{width:1px;height:20px;background:var(--kk-hair-2);margin:0 4px}
.kk .servings{display:inline-flex;align-items:center;gap:0;border:1px solid var(--kk-hair-2);
border-radius:999px;overflow:hidden;background:var(--kk-panel)}
.kk .servings button{border:0;background:none;font:inherit;font-size:15px;line-height:1;
padding:6px 11px;cursor:pointer;color:var(--kk-ink-2)}
.kk .servings button:hover{background:var(--kk-sunk)}
.kk .servings button:disabled{color:var(--kk-hair-2);cursor:not-allowed}
.kk .servings .n{font-size:12.5px;font-weight:600;padding:0 4px;min-width:62px;text-align:center}
/* The shopping list. Two columns on a desk, one on a phone — it is meant to be
* read in an aisle, so the buy side comes first on a narrow screen. */
.kk .lists{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
@media (max-width:640px){.kk .lists{grid-template-columns:1fr}}
.kk .list{background:var(--kk-panel);border:1px solid var(--kk-hair);border-radius:var(--r);
padding:15px 17px}
.kk .list h4{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:-.01em;
display:flex;align-items:center;gap:8px}
.kk .list h4 .n{font-family:var(--kk-mono);font-size:10.5px;font-weight:600;color:var(--kk-mute)}
.kk .list.garden{background:var(--kk-wash);border-color:#D8E8C8}
.kk .list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.kk .list li{display:flex;gap:10px;align-items:baseline;padding:5px 0;
border-top:1px solid var(--kk-hair);font-size:13.5px}
.kk .list li:first-child{border-top:0}
.kk .list .q{font-family:var(--kk-mono);font-size:12px;color:var(--kk-ink);font-weight:600;
min-width:64px;text-align:right;flex:none}
.kk .list .nm{flex:1}
.kk .list .why{font-size:11px;color:var(--kk-mute);flex:none}
.kk .listfoot{margin-top:12px;display:flex;gap:9px;flex-wrap:wrap}
.kk .ghostbtn{border:1px solid var(--kk-hair-2);background:var(--kk-panel);border-radius:var(--r);
padding:8px 14px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--kk-ink-2)}
.kk .ghostbtn:hover{border-color:var(--kk-ink);color:var(--kk-ink)}
/* ---------------------------------------------------------------------------
* MORE TO TRY — links out to other people's recipes (ideas.js, CC BY).
*
* Deliberately quieter than .meal and deliberately a link, not a button. A
* Dig In recipe has our photo, our steps and a shopping list, and goes on the
* week. An idea is somebody else's recipe on somebody else's site. If these
* two ever look the same, the page is lying about which is which.
*
* No photo frame: the dump's image urls are from 2017 and a sample of 40 found
* only 2 still loading. A wall of broken frames looked far worse than type.
* ------------------------------------------------------------------------- */
.kk .ideahead{margin-bottom:12px}
.kk .ideahead h2{margin:0 0 2px}
.kk .ideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:10px}
.kk .idea{background:var(--kk-panel);border:1px solid var(--kk-hair);border-radius:var(--r);
padding:13px 15px 12px;display:flex;flex-direction:column;gap:7px;
text-decoration:none;color:inherit;position:relative;
border-left:3px solid var(--kk-hair-2);
transition:border-left-color .12s ease,border-color .12s ease,background .12s ease}
.kk .idea:hover{border-left-color:var(--kk-accent);background:var(--kk-wash)}
.kk .idea:focus-visible{outline:2px solid var(--kk-accent);outline-offset:2px}
.kk .idea.cook{border-left-color:var(--kk-accent)}
.kk .idea h3{font-size:14px;font-weight:600;line-height:1.32;margin:0;letter-spacing:-.012em;
color:var(--kk-ink)}
.kk .idea .uses{font-size:12px;color:var(--kk-ink-2)}
.kk .idea .uses b{color:var(--kk-accent-dk);font-weight:600}
.kk .idea .via{margin-top:auto;padding-top:9px;border-top:1px solid var(--kk-hair);
font-family:var(--kk-mono);font-size:10.5px;color:var(--kk-mute);
display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.kk .idea .via .site{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kk .idea .via .out{color:var(--kk-accent-dk);flex:none}
/* "uses a little" — the crop is a garnish here. Say so rather than drop it. */
.kk .idea .littletag{font-family:var(--kk-mono);font-size:10px;letter-spacing:.05em;
color:var(--kk-mute);align-self:flex-start}
.kk .note.credit{margin-top:14px;font-size:11.5px;color:var(--kk-mute)}
.kk .note.credit a{color:var(--kk-ink-2)}
body.kid .kk .idea{border-radius:var(--r)}
/* --- build-a-box visualiser ---------------------------------------------
* Lisa's ask, 15 September 2026: the band list was four numbers with nothing
* showing what they mean. The mechanism is "more plants, cheaper each", so the
* bar length IS the per-plant price and it visibly shrinks down the list. The
* numbers stay beside it because a picture of a price is not a price. */
.bandviz{display:flex;flex-direction:column;gap:9px;margin:4px 0 14px}
.bandrow{display:grid;grid-template-columns:minmax(84px,auto) 1fr auto;gap:12px;align-items:center}
.bandrow .qty{display:flex;gap:2px;align-items:flex-end;min-height:16px}
.bandrow .qty i{width:5px;border-radius:var(--r) 2px 0 0;background:var(--deep);display:block}
.bandtrack{background:var(--sunk);border:2px solid var(--ink);border-radius:var(--r);height:20px;
position:relative;overflow:hidden}
.bandfill{position:absolute;inset:0 auto 0 0;background:var(--lime)}
.bandrow .lab{font-size:.8rem;font-weight:700;line-height:1.1}
.bandrow .amt{font-size:13.5px;font-weight:700;white-space:nowrap}
.bandrow.best .bandfill{background:var(--deep-bright)}
.bandcap{font-size:.78rem;color:var(--ink-2);margin:0 0 14px}
@media(max-width:420px){ .bandrow{grid-template-columns:1fr auto;gap:4px 10px} }
/* Box name on a tier card. Added 15 September 2026: the card template had no
* slot for a name at all, so BOXES[].name had never once reached the page.
* Lisa asked for box names; the names existed, the markup did not show them. */
.tier .tname{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.12rem;
line-height:1.05;display:block;margin-bottom:2px}
.tier.lead .tname{color:var(--deep)}
/* --- section grounds. Three per page, plus the ink bands. -----------------
* Added 15 September 2026. Sections used to carry inline background styles,
* which is how the page ended up with seven alternating full-width bands. */
.band{border-bottom:2px solid var(--ink);padding-block:var(--pad-block)}
.band--paper{background:var(--paper)}
.band--sunk{background:var(--sunk)}
.band--ground{background:var(--ground)}
.band--ink{background:var(--ink);color:var(--on-ink)}
.band--ink h1,.band--ink h2,.band--ink h3{color:var(--on-dark)}
.band--ink .eyebrow{color:var(--lime)}
.band--lime{background:var(--lime)}
.band--lime .eyebrow{color:var(--ink)}
.band--lime .lead{color:var(--ink-2)}
/* ===========================================================================
* NEW SECTIONS, 15 September 2026, built to the design spec's homepage
* structure. Everything here follows the one card system: 2px ink, square,
* flat, with one lifted object per band.
* ========================================================================= */
/* --- first-run panel: the fifty-spot meter in the hero -------------------- */
.firstrun{background:var(--paper);border:2px solid var(--ink);padding:18px 20px;
display:flex;flex-direction:column;gap:10px;max-width:420px}
.firstrun .lab{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
color:var(--deep)}
.firstrun .big{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-weight:800;
font-size:clamp(20px,2.4vw,26px);line-height:1.05}
.meter{display:flex;flex-wrap:wrap;gap:3px}
.meter i{width:10px;height:14px;background:var(--surface);border:1.5px solid var(--ink);display:block}
.meter i.on{background:var(--deep);border-color:var(--deep)}
.firstrun .left{font-size:13px;font-weight:600;color:var(--ink-2)}
/* --- this month's box ---------------------------------------------------- */
.boxsplit{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,34px);align-items:center}
@media(min-width:860px){ .boxsplit{grid-template-columns:1.05fr .95fr} }
/* --- variety grid -------------------------------------------------------
* Flex rather than grid, so an incomplete last row centres instead of hanging
* off the left. Eleven tiles into six columns leaves five on the second row,
* and a grid has no way to centre that row on its own. The basis is written so
* a full row still fills the width exactly, which keeps complete rows flush. */
.varigrid{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;justify-content:center;
align-items:stretch}
.vari{flex:0 1 calc((100% - 10px) / 2)}
@media(min-width:620px){ .vari{flex-basis:calc((100% - 20px) / 3)} }
@media(min-width:960px){ .vari{flex-basis:calc((100% - 50px) / 6)} }
.vari{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);padding:0;
display:flex;flex-direction:column}
.vari .ph{aspect-ratio:1/1;background:
repeating-linear-gradient(45deg,var(--tint) 0 12px,var(--sunk) 12px 24px);
border-bottom:2px solid var(--ink);display:flex;align-items:flex-end;padding:8px}
.vari .ph em{font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
font-weight:700;color:var(--ink-3);background:var(--paper);padding:2px 5px;border:1px solid var(--ink)}
/* EMOJI TILES — VARIETY_ART = 'emoji' in config.js, Lisa's call 27 Sep 2026.
Four emoji cover thirteen varieties, so the picture cannot be what tells
them apart. The tile is deliberately quiet — flat tint, no diagonal hatch,
emoji sized to sit as a mark rather than an illustration — and the variety
name below it is bumped up, because the name is doing the identifying. */
.vari .ph.emoji{background:var(--tint);align-items:center;justify-content:center;padding:0;
line-height:1;
/* Sized off the TILE, not the viewport, so it stays the same proportion of
the square at two, three and six across. Two thirds of the tile width,
Lisa's call 27 Sep 2026 — it was 82% and read as overfilling the square. */
container-type:inline-size}
.vari .ph.emoji > *{font-size:67cqw;line-height:1;display:block}
@supports not (font-size:1cqw){ .vari .ph.emoji > *{font-size:clamp(78px,15.5vw,122px)} }
.vari:has(.ph.emoji) b{font-size:16.5px}
.vari .tx{padding:11px 12px;display:flex;flex-direction:column;gap:3px}
.vari .crop{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
color:var(--deep)}
.vari b{font-size:15px;font-weight:800;line-height:1.15}
.vari span{font-size:12.5px;color:var(--ink-3);line-height:1.4}
.vari .tag{align-self:flex-start;background:var(--marigold);border:2px solid var(--ink);
border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
padding:2px 9px;margin-top:4px}
/* --- give: the ink band -------------------------------------------------- */
.givegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:22px}
.giv{border:2px solid var(--lime);border-radius:var(--r);padding:16px;display:flex;
flex-direction:column;gap:5px}
.giv b{font-size:15.5px;font-weight:800;color:var(--on-dark)}
.giv span{font-size:13.5px;color:var(--on-ink);line-height:1.45}
/* --- the first fifty ----------------------------------------------------- */
.fifty{display:grid;grid-template-columns:1fr;gap:12px;counter-reset:ff}
@media(min-width:760px){ .fifty{grid-template-columns:repeat(3,1fr)} }
.ff{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;align-content:start;
border-top:2px solid var(--ink);padding-top:12px}
.ff::before{counter-increment:ff;content:counter(ff);grid-row:1 / span 2;
font-family:"Bricolage Grotesque",Figtree,sans-serif;font-weight:800;font-size:1.4rem;line-height:1}
.ff b{font-size:16px;font-weight:800;line-height:1.2}
.ff span{font-size:13.5px;color:var(--ink-2);line-height:1.45}
/* --- FAQ ----------------------------------------------------------------- */
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:2px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;padding:15px 0;display:flex;gap:16px;
align-items:baseline;justify-content:space-between;font-weight:700;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Bricolage Grotesque",Figtree,sans-serif;
font-weight:800;font-size:1.4rem;line-height:1;color:var(--deep);
transition:transform .18s ease;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 16px;max-width:64ch;color:var(--ink-2);font-size:15.5px}
@media(prefers-reduced-motion:reduce){ .faq summary::after{transition:none} }
/* --- footer -------------------------------------------------------------- */
.foot{background:var(--ink);color:var(--on-ink);padding-block:clamp(30px,4vw,52px)}
.footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:22px}
.foot h4{color:var(--lime);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
font-weight:700;margin-bottom:9px}
.foot a{color:var(--on-ink);text-decoration:none;display:block;padding:3px 0;font-size:14px}
.foot a:hover{color:var(--on-dark);text-decoration:underline}
.foot p{font-size:14px;line-height:1.5}
/* ===========================================================================
* THE RING, and the rest of the homepage, built to the visual mockup.
* 15 September 2026.
* ========================================================================= */
/* --- the cycle ring ------------------------------------------------------
* Seven nodes on a circle with a dashed orbit behind them and the centre
* carrying the "then round again" line. Below 900px it falls back to a plain
* numbered list, because a ring at phone width is unreadable. */
.ring{position:relative;width:min(760px,100%);margin:0 auto;aspect-ratio:1/1}
.ring .orbit{position:absolute;inset:14%;border:2px dashed var(--ink);border-radius:50%}
.ring .mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;
background:var(--sunk);padding:10px 18px;max-width:240px}
.ring .mid .lab{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
font-weight:700;color:var(--ink-3);margin-bottom:2px}
.ring .mid b{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-weight:800;
font-size:clamp(18px,2vw,24px);line-height:1.05}
.ring .node{position:absolute;width:158px;margin-left:-79px;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:2px}
/* A solid plate so the dashed orbit reads behind the words rather than through
* them. The spec asks for this explicitly and it is the difference between a
* diagram and a mess. */
.ring .node b,.ring .node span:not(.dot){background:var(--sunk);
padding:0 5px;position:relative;z-index:2}
.ring .node .dot{position:relative;z-index:2}
.ring .node .dot{width:54px;height:54px;border:2px solid var(--ink);border-radius:50%;
background:var(--sunk);display:flex;align-items:center;justify-content:center;
font-size:22px;line-height:1}
.ring .node .n{font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--deep)}
.ring .node b{font-size:15px;font-weight:800;line-height:1.15}
.ring .node span{font-size:12.5px;color:var(--ink-2);line-height:1.35}
.ringlist{display:none;counter-reset:rl}
@media(max-width:900px){
.ring{display:none}
.ringlist{display:flex;flex-direction:column;gap:0}
.rl{display:grid;grid-template-columns:auto auto 1fr;gap:2px 12px;align-items:baseline;
border-top:2px solid var(--ink);padding:13px 0}
.rl .n{font-size:12px;font-weight:700;color:var(--deep);letter-spacing:.1em}
.rl .ic{font-size:18px;line-height:1}
.rl b{font-size:16px;font-weight:800}
.rl span{grid-column:3;font-size:13.5px;color:var(--ink-2)}
}
/* --- tier cards, mockup version ------------------------------------------
* The homepage builds a tier as .cap (a caption bar) + .body (the padded
* content), so the card itself carries no padding. /build renders the SAME
* .tier class as a flat card with no .body - so a blanket padding:0 left every
* word jammed against the border and dropped the .flag badge onto the title.
* Found 1 October 2026 from a screenshot of step 2.
*
* So the reset is scoped to the cards that actually have a .body, and the flat
* version keeps the padding and gap from the base rule above. */
.tier{overflow:visible}
.tier:has(.body){padding:0;gap:0}
.tier .cap{border-bottom:2px solid var(--ink);padding:7px 18px;font-size:11px;font-weight:700;
letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);min-height:30px}
.tier.lead .cap{background:var(--ink);color:var(--on-dark)}
.tier .body{padding:18px;display:flex;flex-direction:column;gap:11px;flex:1}
.tier .tname{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-weight:800;
font-size:22px;line-height:1.05}
.tier .price{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-weight:800;
font-size:clamp(34px,3.6vw,44px);line-height:1;display:flex;align-items:baseline;gap:7px}
.tier .price em{font-style:normal;font-family:Figtree,sans-serif;font-size:14px;font-weight:500;
color:var(--ink-3)}
.tier .per{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:8px 0;
font-size:13.5px;font-weight:600}
.tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.tier li{display:grid;grid-template-columns:auto 1fr;gap:9px;font-size:14px;line-height:1.35;
color:var(--ink-2)}
.tier li::before{content:"\2713";color:var(--deep);font-weight:800}
.tier.lead li{color:var(--ink)}
.tier .btns{display:flex;gap:9px;flex-wrap:wrap;margin-top:2px}
.tier .blurb{font-size:13.5px;color:var(--ink-3);line-height:1.4;font-style:italic}
/* --- build-a-box panel, split -------------------------------------------- */
.buildsplit{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
@media(min-width:820px){ .buildsplit{grid-template-columns:.85fr 1.15fr} }
/* --- october: photo beside copy ------------------------------------------ */
.herobox .photoslot{flex:1;aspect-ratio:auto;border:0}
.photoslot{aspect-ratio:4/3;border:2px dashed var(--ink);background:var(--sunk);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
text-align:center;padding:20px;color:var(--ink-3);font-size:13px}
.photoslot .ic{font-size:26px;line-height:1}
.shipstrip{background:var(--ground);border:2px solid var(--ink);padding:10px 14px;
font-size:14px;font-weight:600}
/* --- what's inside: six across ------------------------------------------- */
.vari .ph{aspect-ratio:1/1;align-items:center;justify-content:center;flex-direction:column;
gap:2px;text-align:center;color:var(--ink-3);font-size:11.5px;background:var(--sunk);
border-bottom:2px solid var(--ink);display:flex;padding:8px}
.vari .tag{align-self:flex-start;margin:0 0 6px}
/* --- gift ---------------------------------------------------------------- */
.giftgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:700px){ .giftgrid{grid-template-columns:repeat(3,1fr)} }
.gcard{border:2px solid var(--ink);border-radius:var(--r);background:var(--surface);
display:flex;flex-direction:column}
.gcard .photoslot{border:0;border-bottom:2px solid var(--ink);aspect-ratio:16/10}
.gcard .tx{padding:16px;display:flex;flex-direction:column;gap:5px}
.gcard b{font-size:17px;font-weight:800}
.gcard span{font-size:14px;color:var(--ink-2);line-height:1.4}
/* --- split bands (fifty, waitlist, planner) ------------------------------ */
.split{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,44px);align-items:start}
@media(min-width:880px){ .split{grid-template-columns:1fr 1fr} }
.numrows{display:flex;flex-direction:column}
.numrow{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
border-top:2px solid var(--ink);padding:13px 0;font-size:14.5px;line-height:1.4}
.numrow:last-child{border-bottom:2px solid var(--ink)}
.numrow .n{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--deep)}
/* --- waitlist form ------------------------------------------------------- */
.wlform{display:flex;flex-direction:column;gap:7px}
.wlform label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.wlrow{display:flex;gap:10px;flex-wrap:wrap}
.wlrow input{flex:1;min-width:200px;border:2px solid var(--ink);border-radius:var(--r);
background:var(--surface);padding:14px 15px;font-size:15px}
.wlform .note{font-size:13px;color:var(--ink-2)}
/* --- calendar cell gains a state label ----------------------------------- */
.cal .st{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
color:var(--deep)}
.cal.off .st{color:var(--ink-3)}
.cal .m{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:20px;font-weight:800;
text-transform:none;letter-spacing:-.01em}
.cal .why{font-size:12.5px;color:var(--ink-2);line-height:1.35}
.cal.off .why{color:var(--ink-3)}
/* Real photographs in the slots the placeholders held. */
.herobox .photo{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:auto}
/* `.vari .ph` is two classes and beats a bare `img.ph`, and inside a flex
* column the image was stretching to the tallest card in the row. Match the
* specificity and take it out of the flex stretch. */
.vari img.ph{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;height:auto;
flex:none;padding:0;border-bottom:2px solid var(--ink);background:var(--sunk)}
/* Cards stretch to the tallest in their row so the bottoms line up. That was
* the ragged edge: text lengths differ, so left to themselves every card
* finished somewhere different. */
.shot{width:100%;height:auto;display:block;border:2px solid var(--ink);
border-radius:var(--r);box-shadow:var(--lift)}
/* --- rounding, the bits a radius alone does not fix -----------------------
* Added 17 September 2026 with the radius. A rounded box whose child sits flush
* to the edge shows square corners through the curve, so anything holding an
* image, a header strip or a grid has to clip. */
.vari,.gcard,.herobox,.calgrid,.ladder,.panel{overflow:hidden}
/* .tier is NOT in that list, and the reason is the .flag badge.
*
* A tier only needs clipping when it has a .cap strip running to its top edge,
* which is the homepage's layout. /build renders a flat tier with a .flag that
* sits deliberately ABOVE the border at top:-13px - and a blanket
* overflow:hidden sliced the top off every badge. Caught 1 October 2026 from a
* screenshot; the chain walk found the clip on the button itself. */
.tier:has(.body){overflow:hidden}
/* The tier's category strip runs to the top edge, so it follows the curve. */
/* .tier sets align-items:flex-start, so the strip was only as wide as its own
* text. It has to span the card. */
.tier .cap{border-radius:calc(var(--r) - 2px) calc(var(--r) - 2px) 0 0;
align-self:stretch;display:block}
.tier .body,.tier .btns,.tier ul,.tier .per{align-self:stretch}
/* Variety tiles: the photo and its placeholder both sit at the top edge. */
.vari .ph,.vari img.ph{border-radius:calc(var(--r) - 2px) calc(var(--r) - 2px) 0 0}
.gcard .photoslot{border-radius:calc(var(--r) - 2px) calc(var(--r) - 2px) 0 0}
/* Small controls and bars take the smaller radius. */
.bandtrack{border-radius:999px}
.bandfill{border-radius:999px 0 0 999px}
.wlrow input,.field input,.field select,.field textarea{border-radius:var(--r-sm)}
/* .giv is a card and takes --r above; these are small surfaces. */
.shipstrip,.firstrun{border-radius:var(--r-sm)}
.meter i{border-radius:3px}
/* The calendar is one bordered grid, so only the outer corners round and the
* cells inside stay square against each other. */
/* --- variety tile alignment, 17 September 2026 ---------------------------
* Three of the eleven carry a tag. Rendering the tag only when it exists moved
* the crop label, the name and the note down on those three and left the rest
* sitting higher, so nothing lined up across the row. The row is now always
* present and always the same height, empty or not. */
.vari .tagrow{min-height:26px;display:flex;align-items:center}
.vari .tag{margin:0}
/* The text block fills whatever height the row settles on, so the card border
* finishes level with its neighbours. */
.vari .tx{flex:1}
/* ===========================================================================
* PONGA BUSH + CLAY: the dark field. Added 24 September 2026.
* The field used to be pale chartreuse under ink text. It is now deep bush
* green, so the text tokens are re-pointed inside it rather than every rule
* being rewritten. Light panels that sit inside the field put them back.
* ========================================================================= */
.band--ground,.card--lift,.tier.lead,.shipstrip{
--ink-2:#CFE2D2; --ink-3:#B5CDBB; --deep:#9FD08F;
color:var(--on-dark);
}
.band--ground h1,.band--ground h2,.band--ground h3,.tier.lead .price{color:var(--on-dark)}
.band--ground .firstrun,.band--ground .herobox,.band--ground .card:not(.card--lift){
--ink-2:#223528; --ink-3:#3A4A40; --deep:#1E5233; color:var(--ink);
}
.band--ground .cta:not(.ghost),.tier.lead .cta:not(.ghost){background:var(--lime);color:var(--ink)}
.band--ground .cta.ghost{color:var(--on-dark);border-color:var(--on-dark)}
.band--ground .numrow{border-color:rgba(241,245,238,.35)}
#heroHonest{border-top-color:rgba(241,245,238,.35)!important}
.tier.lead{border-color:var(--ink)}
/* The footer sits on loam, not ink: the soil half of the palette. */
.foot,footer{background:var(--soil)}
.tier.lead li{color:var(--on-dark)}
.tier.lead li::before{color:var(--frond)}
/* The brand line in the footer is written inline with var(--ground); on loam
* it has to be the light one. */
.foot{--ground:#F1F5EE}
/* Cycle step that points somewhere: step 06 links down to the planner. */
.ringlink{color:inherit;text-decoration:underline;text-decoration-color:var(--lime);
text-decoration-thickness:3px;text-underline-offset:4px}
.ringlink:hover{color:var(--deep)}
/* ===========================================================================
* PHONES, 24 September 2026.
* 1. The sticky bar was ~200px tall under 720px (logo, two rows of links, the
* region chip, Get started) and sat on top of a third of the screen the
* whole way down. Now: one slim row, links behind a Menu button (nav.js).
* 2. The hero photo came after every line of hero text, so nobody on a phone
* saw it without scrolling. It now sits straight under the buttons.
* 3. The build-your-own price bars collapsed to 4px under 420px: the track was
* left in an auto-width column. It now gets its own full-width row.
* ========================================================================= */
.navtoggle{display:none}
@media (max-width:720px){
.bar{font-size:.74rem;padding:7px 12px;line-height:1.35}
.nav{padding:9px 0}
.nav-in{gap:10px;flex-wrap:nowrap}
.logo{font-size:1.15rem}
.navr{gap:8px;flex-wrap:nowrap}
.navr .chipbtn{display:none}
.navlogin{font-size:.8rem;padding:6px 2px}
.navr .cta.sm{padding:8px 14px;min-height:40px;font-size:.84rem;box-shadow:none}
.navtoggle{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;
border:2px solid var(--ink);border-radius:99px;background:var(--surface);color:var(--ink);
font-weight:800;font-size:.84rem}
.navtoggle .bars,.navtoggle .bars::before,.navtoggle .bars::after{display:block;width:16px;height:2px;
background:currentColor;border-radius:2px;position:relative}
.navtoggle .bars::before,.navtoggle .bars::after{content:"";position:absolute;left:0}
.navtoggle .bars::before{top:-5px}
.navtoggle .bars::after{top:5px}
.nav.open .navtoggle .bars{background:transparent}
.nav.open .navtoggle .bars::before{top:0;transform:rotate(45deg)}
.nav.open .navtoggle .bars::after{top:0;transform:rotate(-45deg)}
.nav .navlinks{display:none}
.nav.open .nav-in{flex-wrap:wrap}
.nav.open .navlinks{display:flex;flex-direction:column;gap:2px;order:3;flex-basis:100%;
padding:8px 0 4px;border-top:2px solid var(--ink);margin-top:6px}
.nav.open .navlinks a{font-size:1rem;padding:12px 10px;border-radius:var(--r-sm)}
/* hero: photo straight under the buttons */
.hero-grid{display:flex;flex-direction:column;gap:0}
.hero-grid > div:first-child{display:contents}
.hero-grid > div:first-child > *:nth-child(-n+4){order:1}
.hero-grid .herobox{order:2;margin-top:22px;box-shadow:var(--lift)}
.hero-grid .herobox .photo{aspect-ratio:4/3}
.hero-grid > div:first-child > *:nth-child(n+5){order:3}
.hero .firstrun{max-width:none}
}
@media(max-width:420px){
.bandrow{grid-template-columns:1fr auto;gap:5px 10px}
.bandrow .lab{grid-column:1;grid-row:1}
.bandrow .amt{grid-column:2;grid-row:1}
.bandrow .bandtrack{grid-column:1 / -1;grid-row:2}
}
/* ===========================================================================
* 24 September 2026, second pass.
* ========================================================================= */
/* Cycle icons are drawn SVG now. */
.ring .node .dot{color:var(--deep)}
.ring .node .dot svg{display:block}
.rl .ic{color:var(--deep);display:inline-flex}
.rl .ic svg{width:22px;height:22px}
/* The fifty spots as a seedling tray: ten by five plugs of loam. A booked
* spot sprouts. */
.tray{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;background:var(--soil);
padding:6px;border-radius:10px;border:2px solid var(--ink);max-width:380px}
.tray i{display:block;aspect-ratio:1/1;border-radius:4px;background:#5A4332;
box-shadow:inset 0 2px 3px rgba(0,0,0,.55)}
.tray i.on{background:#5A4332 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21v-8' stroke='%239FD08F' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M12 13c0-4-3-6-7-6 0 4 3 6 7 6zM12 12c0-3 2.4-5 6.2-5 0 3.4-2.5 5-6.2 5z' fill='%239FD08F'/%3E%3C/svg%3E") center/80% no-repeat}
/* Readability: the three spots the checker flagged. */
.logo em{color:#2E7D46}
.vari .tag{color:var(--ink)}
.chipbtn em{opacity:1}
/* Logo: typed name by default, the stacked mark when body.use-logomark. */
.logo .logomark{display:none;height:40px;width:auto}
body.use-logomark .logo .logomark{display:block}
body.use-logomark .logo .logotype{display:none}
.foot .footmark{display:none;height:84px;width:auto;margin-bottom:14px}
body.use-logomark .foot .footmark{display:block}
body.use-logomark #footBrand{display:none}
@media (max-width:720px){ .logo .logomark{height:36px} }
/* Where your seedlings grow: a photo band, no second brand. Striped slots
* are waiting on photos of the tunnels, greenhouse and trays. */
.grown-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:auto auto;gap:14px}
.gg{margin:0;display:flex;flex-direction:column;gap:8px}
.gg-a{grid-row:1 / span 2}
/* The tall one. A real ratio rather than height:100%, because the parent's
* height comes from the grid row and the row's height comes from this —
* circular, and the browser resolves it by falling back to 4:3. 3/4 matches
* the crop, so nothing is lost to object-fit. */
.gg-d{grid-column:2 / span 2}
/* height:auto matters — the width/height attributes on the ![]()
land as a
* presentational height, and an explicit height makes the browser ignore
* aspect-ratio entirely. Without this the greenhouse shot rendered 1050px
* tall in a 4:3 slot. Measured 25 September 2026, not eyeballed. */
.gg img,.gg-slot{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;flex:none;
border:2px solid var(--ink);border-radius:var(--r)}
/* These two go AFTER the base rule on purpose. `.gg-a img` and `.gg img` are
* the same specificity — one class, one type — so the later one wins outright.
* The originals only worked because `.gg-a .gg-slot` is two classes and beat
* `.gg-slot`; swapping the spans for real ![]()
tags quietly lost that. */
.gg-a .gg-slot,.gg-a img{aspect-ratio:3/4;flex:none;min-height:320px;height:auto}
.gg-d .gg-slot,.gg-d img{aspect-ratio:16/6}
.gg-slot{display:flex;align-items:flex-end;padding:10px;
background:repeating-linear-gradient(45deg,var(--tint) 0 14px,var(--sunk) 14px 28px)}
.gg-slot span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;background:var(--paper);
border:1px solid var(--ink);padding:3px 7px;color:var(--ink-3)}
.gg figcaption{font-size:13.5px;color:var(--ink-2);line-height:1.4}
.gg figcaption b{display:block;color:var(--ink);font-size:15px}
@media (max-width:820px){
.grown-grid{grid-template-columns:1fr 1fr}
.gg-a{grid-column:1 / -1;grid-row:auto}
.gg-a .gg-slot,.gg-a img{min-height:0;aspect-ratio:16/10;flex:none;height:auto}
.gg-d{grid-column:1 / -1}
}
@media (max-width:480px){ .grown-grid{grid-template-columns:1fr} }
/* Planner, shown working: an example week instead of a screenshot of an
* empty planner. Everything is marked "Example". Days to pick come from
* DAYS_TO_PICK in config.js, counted from the 12 October send. */
.demo-week{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--lift);
padding:18px;display:flex;flex-direction:column;gap:12px}
.dw-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dw-head b{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:22px;font-weight:800}
.dw-head span:last-child{font-size:13px;color:var(--ink-3)}
.dw-tag{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;background:var(--marigold);
border:1.5px solid var(--ink);border-radius:99px;padding:2px 9px;align-self:center}
.dw-rows,.dw-meals{list-style:none;margin:0;padding:0}
.dw-rows{display:flex;flex-direction:column}
.dw-row{display:grid;grid-template-columns:minmax(120px,1fr) 1.2fr auto;gap:12px;align-items:center;
padding:8px 0;border-top:1px solid var(--rule-2)}
.dw-plant{display:flex;flex-direction:column;line-height:1.2}
.dw-plant b{font-size:14.5px}
.dw-plant span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.dw-bar{height:10px;border-radius:99px;background:var(--sunk);border:1.5px solid var(--ink);overflow:hidden}
.dw-bar i{display:block;height:100%;background:var(--deep-bright)}
.dw-row.is-ready .dw-bar i{background:var(--deep)}
.dw-when{font-size:12.5px;font-weight:700;white-space:nowrap;color:var(--ink-2)}
.dw-row.is-ready .dw-when{background:var(--deep);color:#F1F5EE;border-radius:99px;padding:3px 9px}
.dw-sub{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--deep);margin-top:4px}
.dw-meals{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:560px){ .dw-meals{grid-template-columns:1fr} .dw-meal{display:grid;grid-template-columns:96px 1fr;align-items:center} }
.dw-meal{border:1.5px solid var(--ink);border-radius:var(--r-sm);overflow:hidden;background:var(--paper)}
.dw-meal img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.dw-mt{display:flex;flex-direction:column;gap:2px;padding:8px 10px}
.dw-mt b{font-size:13.5px;line-height:1.2}
.dw-mt span{font-size:12px;color:var(--ink-3)}
.dw-list{font-size:13px;color:var(--ink-2);background:var(--sunk);border-radius:var(--r-sm);padding:10px 12px}
/* ===========================================================================
* THE BOX GRID — how many of each variety in which box.
* Added 2 October 2026, Lisa's ask: "a grid on whats in each box with a tick
* system". Numbers come from OCTOBER_BOX.items[].qty, so this table and the
* order it produces can never say different things.
*
* Five columns do not fit a phone, so the table scrolls sideways with the
* variety column pinned, rather than squashing the ticks into nothing.
* ========================================================================= */
.bgkey{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;
margin:0 0 16px;font-size:12.5px;color:var(--ink-3)}
.bgkey>span{display:inline-flex;align-items:center;gap:7px}
.bgscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}
.boxgrid{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
border:2px solid var(--ink);border-radius:var(--r);overflow:hidden}
.boxgrid thead th{background:var(--deep);color:#fff;padding:14px 10px;font-size:13px;
font-weight:700;text-align:center;vertical-align:bottom;line-height:1.25}
.boxgrid thead th:first-child{text-align:left;padding-left:18px;width:36%}
.boxgrid thead th .sz{display:block;font-family:'Bricolage Grotesque',Figtree,sans-serif;
font-weight:800;font-size:17px;margin-bottom:2px}
.boxgrid thead th .pr{display:block;font-size:11.5px;opacity:.72;font-weight:600;margin-top:3px}
.boxgrid thead th.lead-col{background:var(--lime)}
.boxgrid tbody td{padding:10px;border-bottom:1px solid rgba(11,32,22,.12);
text-align:center;font-size:15px}
.boxgrid tbody td:first-child{text-align:left;padding-left:18px;font-size:14.5px}
.boxgrid tbody tr:last-child td{border-bottom:0}
.boxgrid tbody tr.grp td{background:var(--paper);font-weight:800;font-size:11.5px;
letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
padding:9px 10px 9px 18px;text-align:left}
.boxgrid td.lead-col{background:rgba(199,122,74,.07)}
.boxgrid tfoot td{padding:13px 10px;text-align:center;font-weight:800;font-size:14px;
background:var(--paper);border-top:2px solid var(--ink)}
.boxgrid tfoot td:first-child{text-align:left;padding-left:18px;font-size:13px;
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.bgv{font-weight:600}
.bgpot{display:inline-block;margin-left:7px;font-size:10px;letter-spacing:.09em;
text-transform:uppercase;font-weight:800;color:var(--lime);border:1.5px solid var(--lime);
border-radius:99px;padding:1px 6px;white-space:nowrap}
.bgtick{color:var(--deep);font-weight:800;font-size:17px}
.bgqty{display:inline-block;min-width:22px;height:22px;line-height:20px;border-radius:99px;
background:var(--deep);color:#fff;font-size:12.5px;font-weight:800}
.bgnone{color:#C9CFC9}
.bgnote{display:none;font-size:12px;color:var(--ink-3);margin:9px 0 0;text-align:center}
@media(max-width:760px){
.boxgrid{min-width:620px}
.boxgrid thead th:first-child,.boxgrid tbody td:first-child,.boxgrid tfoot td:first-child{
position:sticky;left:0;z-index:2;background:var(--surface)}
.boxgrid thead th:first-child{background:var(--deep)}
.boxgrid tbody tr.grp td:first-child,.boxgrid tfoot td:first-child{background:var(--paper)}
.bgnote{display:block}
}
/* The footer social row. Rendered only when a handle is set in BRAND.social. */
.footsocial{display:flex;gap:16px;margin-top:12px}
.footsocial a{font-weight:700;font-size:.86rem;text-decoration:none;
border-bottom:2px solid transparent}
.footsocial a:hover,.footsocial a:focus-visible{border-bottom-color:var(--lime)}
.footsocial:empty{display:none}
/* --- the Recipes tab, 15 October 2026 ------------------------------------
* The household row and the opened recipe. Cards, chips, lists and the
* stepper are the planner's own classes, reused rather than redrawn. */
.kk .house{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;background:var(--kk-panel);
border:1px solid var(--kk-hair);border-radius:var(--r);padding:13px 16px;margin:0 0 16px}
.kk .house .lbl{font-family:var(--kk-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
color:var(--kk-mute);font-weight:600}
.kk .house .saved{font-size:13px;color:var(--kk-ink-2)}
.kk .house .saved b{color:var(--kk-accent-dk);font-weight:600}
.kk .search{border:1px solid var(--kk-hair-2);border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;
min-width:160px;background:var(--kk-panel);color:var(--kk-ink)}
.kk .search::placeholder{color:var(--kk-mute)}
.kk .meal .standin{position:absolute;bottom:8px;right:9px;background:rgba(255,255,255,.9);color:var(--kk-mute);
font-family:var(--kk-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:999px}
.kk .detail{background:var(--kk-panel);border:1px solid var(--kk-hair);border-radius:var(--r);overflow:hidden;margin-top:26px}
.kk .detail .top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:720px){.kk .detail .top{grid-template-columns:1fr}}
.kk .detail .hero{aspect-ratio:3/2;background:var(--kk-sunk);position:relative;max-width:100%}
.kk .detail .hero img{width:100%;height:100%;object-fit:cover;display:block}
.kk .detail .hero .standin{position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.9);color:var(--kk-mute);
font-family:var(--kk-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:999px}
.kk .detail .head{padding:20px 22px;display:flex;flex-direction:column;gap:11px}
.kk .detail .head h2{font-size:23px;line-height:1.15}
.kk .detail .facts{display:flex;flex-wrap:wrap;gap:5px 14px;font-family:var(--kk-mono);font-size:12px;color:var(--kk-mute)}
.kk .detail .facts b{color:var(--kk-accent-dk);font-weight:600}
.kk .detail .serves{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.kk .detail .serves .note{font-size:12.5px}
.kk .detail .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.kk .detail .lists{padding:20px 22px;border-top:1px solid var(--kk-hair);margin-top:0;align-items:start}
.kk .detail .list li .text{font-size:11.5px;color:var(--kk-mute);display:block}
.kk .detail .method{padding:20px 22px;border-top:1px solid var(--kk-hair)}
.kk .detail .method h4{font-size:13px;font-weight:700;margin:0 0 10px}
.kk .detail .method ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;max-width:62ch;font-size:14.5px}
.kk .detail .source{padding:13px 22px;border-top:1px solid var(--kk-hair);font-size:12.5px;color:var(--kk-mute);
display:flex;flex-wrap:wrap;gap:6px 18px}
.kk .detail .source a{color:var(--kk-accent-dk)}
.kk .detail .close{border:0;background:none;font:inherit;font-size:12px;color:var(--kk-mute);cursor:pointer;
text-decoration:underline;padding:0;margin-left:auto}