/* Heavensburg Farm — styles.
   Colours are taken from the farm's own sign: barn red, sunflower gold,
   the blue of the banner, and field green. */

/* "Modern Heirloom Farm" palette — deep farmhouse green on warm cream, harvest
   gold kept for buttons, rules and small marks rather than whole surfaces.
   Cream, never pure white: it reads warm instead of corporate. */
:root {
  /* ── THE FARM'S OWN COLOURS ──────────────────────────────────────────────
     Measured, not chosen: k-means over their logo (tools/restore_logo.py
     output), full breakdown in out/brand_palette.json. Their sign is a
     vintage farm-sign palette — bark-brown outlines, sign yellow, banner
     blue, barn red on hay gold — and the site had the browns and golds but
     none of the blue, yellow or true red, which is why it read as generic
     artisanal rather than as *them*. Percentages are each colour's share of
     the logo artwork. */
  --sign-bark:    #4a341a;   /* 13.9% — the outline around every shape */
  --sign-brown:   #654b2c;   /* 12.4% */
  --sign-cream:   #e8e3df;   /* 11.7% — the dog and the hen */
  --sign-ink:     #1c1816;   /*  9.9% — deepest outline */
  --sign-hay:     #d19e40;   /*  8.7% — hay bales, wheat field */
  --sign-blue:    #037fb9;   /*  7.1% — the banner */
  --sign-blue-d:  #174a86;   /*  6.4% — the banner's shadow side */
  --sign-yellow:  #f8e915;   /*  6.3% — the lettering */
  --sign-olive:   #937937;   /*  4.9% */
  --sign-red:     #b82d2f;   /*  4.3% — the barn and the tractor */
  --sign-deep:    #381911;   /*  1.9% */

  --barn:   #8a4d3b;   /* barn brick */
  --barn-d: #6d3a2b;
  --gold:   #c89b52;   /* harvest gold */
  --gold-d: #9d7735;
  --field:  #263d2e;   /* deep farmhouse green — the primary brand colour */
  --field-d:#1a2b20;
  --sage:   #d9ded2;
  --sky:    #a8c0cc;
  --sky-2:  #d3dfe2;
  --blue:   #3c5a63;
  --bark:   #292721;   /* charcoal brown */

  --cream:  #f4efe4;
  --paper:  #fbf8f1;
  --ink:    #292721;
  --ink-2:  #605c50;
  --line:   #e0d9c9;
  --shadow: 0 1px 2px rgba(59,43,32,.06), 0 8px 24px rgba(59,43,32,.07);
  --shadow-lift: 0 2px 4px rgba(59,43,32,.08), 0 14px 36px rgba(59,43,32,.12);

  /* The brief's pairing, self-hosted (site/fonts.css) so no visitor request
     ever leaves for Google. System stacks stay as the fallback. */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --r: 14px;
  --r-sm: 9px;
  --maxw: 1140px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cream: #14160f;
    --paper: #1d2018;
    --ink:   #efe9db;
    --ink-2: #b2ab98;
    --line:  #333a2d;
    --sage:  #2b3428;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 14px 36px rgba(0,0,0,.5);
    --barn: #c07a5f;
    --gold: #d8b06a;
    --field: #7d9b7f;
    --field-d: #5d7a60;
    --sky: #3f5a63;
    --sky-2: #2c4048;
  }
}

* { box-sizing: border-box; }

/* ───────── the paper cut-out backdrop (backdrop.js) ─────────
   Fixed behind everything: the sheet stays put while the page scrolls over it,
   so the food framing the edges never drifts under a paragraph. */
.page-backdrop {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
  --bd-paper: #efe7d5;   /* the sheet */
  --bd-wall:  #d9caa8;   /* its cut edge, seen inside every window */
  --bd-shade: #6d5b3c;   /* the shadow that edge casts on the photo below */
  --bd-warm:  #c9a86a;   /* a wash over the photos so they share one light */
}
/* Warm enough that photographs from several sources read as one picture, but
   no more. The first pass took saturate down to .68 with a sepia wash on top
   and the whole page went monotone — the farm's own produce is the most
   colourful thing on the site and it was being drained to make it match. Keep
   the unifying warmth, give the colour back. */
.bd-photo { filter: saturate(.95) contrast(1.02) brightness(1.02) sepia(.05); }
@media (prefers-color-scheme: dark) {
  .page-backdrop {
    --bd-paper: #28241c; --bd-wall: #4b392b; --bd-shade: #0d0b08; --bd-warm: #a6783b;
  }
  /* Dark mode used to turn every photo into a muddy green silhouette. Keep the
     paper dark enough for type, but let the food's reds, purples and golds be
     visible as the actual texture of the page. */
  .bd-photo { filter: saturate(1.08) brightness(.84) contrast(1.06) sepia(.04); }
}
.page-backdrop svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Content rides above the sheet. */
main { position: relative; }
.band > .wrap { position: relative; z-index: 1; }
@media (prefers-color-scheme: dark) {
  .page-backdrop {
    --bd-paper: #28241c; --bd-hole: #34291d; --bd-edge: #5a4228;
    --bd-carrot: #8f532a; --bd-beet: #5e2d3c; --bd-bread: #8a6c42;
    --bd-nest: #6f6046;  --bd-lettuce: #46613a; --bd-onion: #8a7455;
    --bd-squash: #8a6330; --bd-jar: #444a3f;   --bd-egg-d: #9a917d;
    --bd-box: #6f5636;   --bd-box-2: #5c4729;
    --bd-hole: #2e2418;  --bd-soil: #2a2015;   --bd-soil-2: #221a11;
    --bd-clod: #392c1d;  --bd-clod-2: #453626; --bd-straw: #8a7442;
    --bd-spruce: #22331d; --bd-glass: #5c6866; --bd-post: #5e4a30;
  }
}
/* Captain asked for this "like a texture" — so it sits back. At full strength
   the geometry is right but a paragraph can land on a beet, and the reading
   surface has to win. Narrow screens have no margin for it at all. */
.page-backdrop { opacity: .84; }
@media (max-width: 900px) { .page-backdrop { opacity: .46; } }

/* The sheet runs the whole page, so every section that is not a photographic
   band lets it through. band-alt only tints rather than covering. */
.band { background: transparent; }
.band-alt { background: color-mix(in srgb, var(--sage) 45%, transparent); }
.site-header { background: color-mix(in srgb, var(--cream) 82%, transparent); }

/* .btn sets display:inline-flex, which would otherwise beat the browser's
   default [hidden] rule and leave hidden buttons on screen. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  /* A faint linen tooth so large cream areas read as paper, not as a blank div. */
  background:
    radial-gradient(ellipse 48rem 34rem at 8% 18%, color-mix(in srgb, var(--sign-blue) 8%, transparent), transparent 72%),
    radial-gradient(ellipse 42rem 34rem at 92% 64%, color-mix(in srgb, var(--sign-red) 7%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.014) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.014) 0 1px, transparent 1px 3px),
    var(--cream);
}
@media (prefers-color-scheme: dark) {
  body {
    background:
      radial-gradient(ellipse 42rem 30rem at 8% 18%, color-mix(in srgb, var(--sign-blue) 12%, transparent), transparent 72%),
      radial-gradient(ellipse 38rem 32rem at 92% 64%, color-mix(in srgb, var(--sign-hay) 9%, transparent), transparent 70%),
      repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
      repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
      var(--cream);
  }
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--barn); }

.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:not(:focus) {
  position: fixed; top: .5rem; left: .5rem; z-index: 100;
  width: auto; height: auto; margin: 0; padding: .6rem 1rem;
  overflow: visible; clip: auto; white-space: nowrap; border-radius: var(--r-sm);
  background: var(--barn); color: #fff; opacity: 0; pointer-events: none;
}
.skip:focus {
  position: fixed; top: .5rem; left: .5rem; z-index: 100;
  background: var(--barn); color: #fff; padding: .6rem 1rem; border-radius: var(--r-sm);
}
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px;
}

/* ───────── header ───────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; }
.brand-mark { display: block; flex: none; line-height: 0; }
.brand-mark svg { border-radius: 50%; box-shadow: 0 0 0 2px var(--gold); display: block; }
/* The farm's real logo, which is a wide illustrated crest and not a round
   badge — so none of the circle-and-gold-ring treatment above applies to it.
   Sized by height so it always matches the header line regardless of the
   source file's dimensions, and the width follows the artwork.

   The crest carries its own "Heavensburg Farm" banner, unreadable at this
   size, which is fine: at 44px it reads as a picture and the legible name is
   the text set beside it. */
.brand-logo { display: block; flex: none; height: 44px; width: auto; }
@media (max-width: 540px) { .brand-logo { height: 36px; } }
.brand-text { display: flex; flex-direction: column; }
.brand-text b { font-family: var(--serif); font-size: 1.08rem; line-height: 1.1; }
.brand-text small { color: var(--ink-2); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.site-nav { margin-left: auto; display: flex; gap: 1.4rem; font-size: .93rem; }
.site-nav a { color: var(--ink-2); text-decoration: none; padding: .3rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--barn); border-bottom-color: var(--gold); }
.header-cta { margin-left: 1.2rem; }
.brand-text small { white-space: nowrap; }
/* Scoped to .site-header so it outranks `.btn { display: inline-flex }`, which
   sits later in this file and would otherwise win on equal specificity. */
@media (max-width: 980px) { .site-nav { display: none; } .header-cta { margin-left: auto; } }
@media (max-width: 560px) {
  .site-header .header-cta { display: none; }
  .brand-text b { font-size: 1rem; }
}

/* ───────── two-tone display headings ─────────
   A small italic line above a large letterspaced word. Learned from Sundog
   Organic Farm, drawn with the fonts we already have rather than a webfont —
   the page must stay self-contained and load with nothing external. */
.dual { margin: 0 0 .3em; }
.dual em {
  display: block; font-style: italic; font-family: var(--serif);
  font-size: clamp(.95rem, 1.5vw, 1.15rem); letter-spacing: .26em;
  color: var(--gold-d); font-weight: 400; margin-left: .3em; margin-bottom: .1em;
}
.dual span {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: .07em;
  text-transform: uppercase; line-height: 1.05;
}

/* ── the section heading as their sign's ribbon ────────────────────────────
   Sized to its own text, not to the page. A full-width ribbon was tried first
   and dominates the section it is supposed to introduce — at that scale the
   blue variant reads as a fairground hoarding rather than a farm sign. The
   warm hay carries the ordinary headings; blue is kept back for the moments
   that should feel like an occasion.

   The notched ends are a clip-path on a wrapper so the border can follow the
   notch. Colour stays on solid fills: no gradient appears anywhere on their
   sign, and adding one here would be the single clearest tell that the site
   was decorated to look like the brand rather than built from it. */
.band-head .dual span,
.feature-inner .dual span {
  display: inline-block;
  background: var(--sign-hay);
  color: var(--sign-bark);
  padding: .2em .85em .26em;
  border: 4px solid var(--sign-bark);
  /* Not a rectangle. Asymmetric radii on both axes give a hand-cut edge that
     no two headings share, which is the point — a rigid box reads as a
     component, and everything on their sign is drawn by a person. The slight
     rotation is the same idea: a label stuck on slightly crooked. */
  border-radius: 44% 56% 38% 62% / 56% 40% 60% 44%;
  box-shadow: 0 5px 0 var(--sign-bark);
  transform: rotate(-1.1deg);
}
.band:nth-of-type(even) .dual span {
  border-radius: 58% 42% 60% 40% / 42% 58% 44% 56%;
  transform: rotate(.9deg);
}
/* One occasion each: the page's first heading and the markets band. The
   lettering here is the logo's own pairing — sign yellow on banner blue. */
.feature-hero .dual span,
.feature-market .dual span {
  background: var(--sign-blue);
  color: var(--sign-yellow);
  text-shadow: 0 2px 0 var(--sign-bark);
}

.dual-lg span { font-size: clamp(2.4rem, 6.4vw, 4.6rem); }
.dual-lg em { font-size: clamp(1rem, 2vw, 1.4rem); }
@media (prefers-color-scheme: dark) { .dual em { color: var(--gold); } }

/* ───────── full-bleed feature bands ─────────
   Each band shows a photo when the family has supplied one. Until then it
   renders as a deep field gradient with an illustrated horizon, so a missing
   photo reads as a designed band and never as an empty box. */
.feature {
  position: relative; overflow: hidden; color: #fff;
  display: flex; align-items: center;
  padding: clamp(4rem, 11vw, 8rem) 0;
}
.feature-media { position: absolute; inset: 0; z-index: 0; }

/* ── illustrated scenes (scenes.js) ──
   Palette lives here so the drawings follow light and dark mode. */
.feature-media svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.feature-media.has-photo svg { display: none; }
/* Golden hour, not midday. The drawings are pitched dark and warm on purpose:
   white type has to sit on them, and a picture with contrast built in needs
   only a light scrim. Crushing a bright scene with a heavy overlay passes a
   luminance check and leaves unreadable mud — the palette does the work. */
.feature-media {
  --sc-sky-top: #27414f;  --sc-sky-low: #c89b52;
  --sc-far:     #1a2b20;
  --sc-field:   #37543c;  --sc-field-2: #263d2e;  --sc-field-3: #1a2b20;
  --sc-barn:    #8a4d3b;  --sc-barn-2:  #6d3a2b;
  --sc-silo:    #a8aca3;  --sc-silo-2:  #767b70;
  --sc-cream:   #f4efe4;  --sc-dark:    #1c1610;
  --sc-gold:    #c89b52;  --sc-seed:    #4e3018;
  --sc-stem:    #37543c;  --sc-leaf:    #4d7048;
  --sc-bale:    #cdae72;  --sc-bale-2:  #9c8350;
  --sc-metal:   #6f736e;  --sc-tyre:    #241f1b;
  --sc-post:    #8f6f47;  --sc-post-2:  #614a2e;
  --sc-wood:    #7c5b39;  --sc-wood-2:  #5f462b;  --sc-wood-3: #6b4f31;
  --sc-crate:   #966d44;  --sc-crate-2: #855f3a;
  --sc-tomato:  #c44228;  --sc-jam:     #7a2b52;
  --sc-awning:  #8a4d3b;  --sc-awning-2:#6d3a2b;
  --sc-cloth:   #2c3740;  --sc-cloth-2: #3a4750;
  --sc-bread:   #c2925a;  --sc-bread-2: #8e6538;
  --sc-sign-a:  #cc4f79;  --sc-sign-b:  #dfa326;  --sc-sign-c: #379a93;
  --sc-sign-d:  #68a03c;  --sc-sign-e:  #5892c4;  --sc-sign-f: #ab5cb3;
}
@media (prefers-color-scheme: dark) {
  .feature-media {
    --sc-sky-top: #16242c;  --sc-sky-low: #7a5f35;
    --sc-far:     #16210f;
    --sc-field:   #32471f;  --sc-field-2: #263818;  --sc-field-3: #18240f;
    --sc-silo:    #75796f;  --sc-silo-2:  #53574e;
    --sc-cream:   #cfc0a4;
    --sc-bale:    #9d8558;  --sc-bale-2:  #74613d;
  }
}
/* A flat wash behind the drawing, so there is never a white flash before the
   SVG paints. It must NOT apply when a photograph is in use: ::before is
   painted above the element's own background-image, so a solid fill here
   covers the photo completely — which is exactly what it did on first deploy,
   leaving a flat gold band where the farm should be. */
.feature-media:not(.has-photo)::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--sc-sky-low);
}
.feature-media.has-photo { background-size: cover; background-position: center; }

/* The scrim. It must sit ABOVE the drawing, not below it — an inserted <svg>
   is a real child element and paints over ::before, so a scrim built there is
   invisible. Measured luminance behind the headings was 189 (white on a bright
   sky) until this moved to ::after with a z-index. */
.feature-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* A pool of shade under the words plus a light overall wash, rather than one
     flat sheet across the whole band. A flat scrim dark enough for the type
     also flattens the drawing into mud — this keeps the animals and the barn
     legible while the copy still has something to sit on. */
  background:
    radial-gradient(78% 105% at 20% 46%, rgba(16,12,8,.88) 0%, rgba(16,12,8,.55) 42%, transparent 72%),
    linear-gradient(180deg, rgba(16,12,8,.34) 0%, rgba(16,12,8,.14) 55%, rgba(16,12,8,.30) 100%);
}
/* Right-aligned bands need the dark end on the right, or the copy lands on the
   brightest part of the picture. The scrim follows the text. */
.feature:has(.feature-inner-right) .feature-media::after {
  background: linear-gradient(260deg, rgba(18,14,10,.76) 0%, rgba(18,14,10,.40) 52%, rgba(18,14,10,.10) 100%);
}
@media (max-width: 760px) {
  /* Text goes left-aligned and full width here, so the scrim runs top to
     bottom and stays heavy where the heading lands. */
  .feature .feature-media::after {
    background: linear-gradient(180deg, rgba(18,14,10,.74) 0%, rgba(18,14,10,.60) 45%, rgba(18,14,10,.80) 100%);
  }
  /* A photograph needs more than a drawing does: the drawings are pitched dark
     by design, a real picture is whatever it is. Measured luminance behind the
     share heading was 153 on a phone — white type on a bright sky — with the
     scrim above. */
  .feature .feature-media.has-photo::after {
    background: linear-gradient(180deg, rgba(14,11,7,.86) 0%, rgba(14,11,7,.74) 45%, rgba(14,11,7,.88) 100%);
  }
}

/* The preserves shelf source is 960×400. Do not enlarge it to fill a modern
   desktop monitor: the resulting blur makes a real farm photograph look like
   a bad crop. On wide screens it sits at native width against a dark field;
   on phones it scales down to the viewport width and keeps its detail. */
@media (min-width: 761px) {
  .feature-share .feature-media.has-photo {
    background-color: #261c14;
    background-size: min(960px, 100%) auto;
    background-repeat: no-repeat;
    background-position: left center;
  }
  .feature-share .feature-media.has-photo::after {
    background: linear-gradient(90deg, rgba(18,14,10,.08) 0%, rgba(18,14,10,.12) 38%, rgba(18,14,10,.72) 63%, rgba(18,14,10,.96) 100%);
  }
}
@media (max-width: 760px) {
  .feature-share .feature-media.has-photo {
    background-color: #261c14;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
  }
  .feature-share .feature-media.has-photo::after {
    background: linear-gradient(180deg, rgba(18,14,10,.08) 0%, rgba(18,14,10,.54) 35%, rgba(18,14,10,.94) 100%);
  }
}

.feature-inner { position: relative; z-index: 1; max-width: 100%; }
.feature-inner > * { max-width: 42rem; }
.feature-inner-right { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.feature-inner-right > * { margin-left: auto; }
@media (max-width: 760px) {
  .feature-inner-right { align-items: flex-start; text-align: left; }
  .feature-inner-right > * { margin-left: 0; }
}
.feature .dual em { color: var(--gold); }
/* White is the fallback for a heading sitting bare on a photograph. Where the
   heading is a sign ribbon it carries its own lettering colour — the logo's
   own pairing, yellow on the banner blue. This rule and the ribbon's are at
   equal specificity, so the ribbon's has to come after it, not before: source
   order is what decided it, and the yellow was silently losing. */
.feature .dual span { color: #fff; }

/* No block of colour on the photographic bands. A filled panel over a
   photograph hides the thing the visitor came to look at and, at hero size,
   reads as a slab rather than as signwriting. Their sign gets its legibility
   from the bark outline drawn around each letter, not from a background — so
   do that instead: yellow lettering, outlined, straight onto the field. */
.feature-hero .dual span,
.feature-market .dual span {
  background: none; border: 0; box-shadow: none; padding: 0; transform: none;
  color: var(--sign-yellow);
  text-shadow:
    -3px -3px 0 var(--sign-bark),  3px -3px 0 var(--sign-bark),
    -3px  3px 0 var(--sign-bark),  3px  3px 0 var(--sign-bark),
     0   -4px 0 var(--sign-bark),  0    4px 0 var(--sign-bark),
    -4px  0   0 var(--sign-bark),  4px  0   0 var(--sign-bark),
     0    7px 10px rgba(0,0,0,.45);
}
.feature-share .dual span { color: var(--sign-bark); }
.feature-eyebrow {
  font-size: .76rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.82); font-weight: 600; margin-bottom: 1.1rem;
}
.feature-lede { font-size: clamp(1rem, 1.5vw, 1.14rem); color: rgba(255,255,255,.9); }
.feature-price { font-family: var(--serif); font-size: 1.2rem; color: rgba(255,255,255,.92); }
.feature-price b { font-size: 1.9rem; color: var(--gold); }
.feature-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }
.feature-inner-right .feature-actions { justify-content: flex-end; }
@media (max-width: 760px) { .feature-inner-right .feature-actions { justify-content: flex-start; } }

/* Each band gets a low sun somewhere in it, so the half without text reads as
   evening light on a field rather than as flat colour waiting for a photo. */
/* ───────── hero: offer above the fold ─────────
   Copy left, both share options right. The price is on the first screen —
   a farm share is the product, not a thing to discover after scrolling. */
.hero-offer {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; width: min(100% - 2.5rem, var(--maxw));
}
@media (max-width: 940px) { .hero-offer { grid-template-columns: 1fr; gap: 2rem; } }
.hero-offer-copy > * { max-width: 34rem; }

.cat-strip {
  list-style: none; display: flex; flex-wrap: wrap; gap: .45rem;
  padding: 1.3rem 0 0; margin: 1.3rem 0 0; border-top: 1px solid rgba(255,255,255,.25);
}
/* The category chips over the hero photograph. Translucent, so the field shows
   through — solid cream was a row of heavy white lozenges sitting on top of
   the photograph rather than in it.
   Tinted DARK rather than light, which is the part that matters: a pale
   translucent pill takes its legibility from whatever happens to be behind it
   and drifts as the photograph changes, while a dark tint only ever deepens
   what is behind it, so the cream lettering holds over anything. */
.cat-strip li {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--sign-cream); padding: .32rem .8rem; border-radius: 999px;
  background: color-mix(in srgb, var(--sign-bark) 58%, transparent);
  border: 2px solid color-mix(in srgb, var(--sign-cream) 55%, transparent);
  backdrop-filter: blur(2px);
  text-shadow: 0 1px 2px rgba(28,24,22,.8);
}

.hero-plans { display: grid; gap: .9rem; }
@media (min-width: 560px) and (max-width: 940px) { .hero-plans { grid-template-columns: 1fr 1fr; } }
.hero-plan {
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.25rem 1.35rem; color: var(--ink); box-shadow: var(--shadow-lift);
}
.hero-plan h2 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 .1rem; }
.hero-plan-cadence { color: var(--ink-2); font-size: .85rem; margin: 0 0 .7rem; }
.hero-plan-price { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .35rem; }
.hero-plan-price b { font-family: var(--serif); font-size: 2.1rem; color: var(--barn); line-height: 1; }
.hero-plan-price span { color: var(--ink-2); font-size: .85rem; }
.hero-plan-each {
  font-size: .85rem; color: var(--ink-2); margin: 0 0 1rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--line);
}

.feature-hero { min-height: min(84vh, 720px); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  z-index: 1; color: rgba(255,255,255,.75); line-height: 0;
  animation: nudge 2.4s ease-in-out infinite;
}
.scroll-cue:hover { color: #fff; }
@keyframes nudge { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* markets, rendered on a photo band */
.market-list .market { border-bottom-color: rgba(255,255,255,.22); }
.market-list .market b { color: #fff; }
.market-list .market span { color: rgba(255,255,255,.78); }
.market-list .market .when { color: var(--gold); font-weight: 600; }
.market-list .micro { color: rgba(255,255,255,.7); }

/* ───────── hero (legacy card layout, kept for reference) ───────── */
.hero {
  padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  background:
    radial-gradient(1100px 460px at 88% -12%, color-mix(in srgb, var(--gold) 24%, transparent), transparent 62%),
    radial-gradient(760px 400px at 4% 8%, color-mix(in srgb, var(--field) 15%, transparent), transparent 60%);
}
.hero-inner { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } }

.eyebrow {
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--barn); font-weight: 700; margin-bottom: 1rem;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent); flex: none; }
.kicker {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--field-d); font-weight: 700; margin-bottom: .5rem;
}
@media (prefers-color-scheme: dark) { .kicker { color: var(--field); } }

.lede { font-size: 1.11rem; color: var(--ink-2); max-width: 58ch; }
.hero-copy h1 { margin-bottom: .5em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.hero-facts {
  list-style: none; padding: 1.5rem 0 0; margin: 1.75rem 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1.75rem;
}
.hero-facts li { font-size: .87rem; color: var(--ink-2); max-width: 17ch; line-height: 1.35; }
.hero-facts b {
  display: block; font-family: var(--serif); font-size: 1.85rem;
  color: var(--barn); line-height: 1; margin-bottom: .18rem;
}

.hero-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lift); position: relative; overflow: hidden;
}
.hero-scene { line-height: 0; border-bottom: 3px solid var(--gold); }
.hero-scene svg { width: 100%; height: 172px; display: block; }
.hero-card-body { padding: 1.5rem 1.6rem 1.6rem; }
.hero-card h2 { font-size: 1.3rem; }
.price { font-family: var(--serif); color: var(--ink-2); margin-bottom: 1rem; }
.price span { display: block; font-size: 2.4rem; color: var(--barn); font-weight: 600; line-height: 1; }

.tick { list-style: none; padding: 0; margin: 0 0 1.3rem; }
.tick li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; font-size: .95rem; }
.tick li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--field);
}

/* ───────── buttons ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: .96rem; font-weight: 600; text-decoration: none;
  padding: .72rem 1.25rem; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
/* ── the sign idiom ────────────────────────────────────────────────────────
   Their logo is a painted farm sign: every shape carries a thick bark-brown
   outline and sits on a hard shadow, with no gradients anywhere. Buttons get
   the same treatment because they appear on every screen, so this is what
   makes the page read as *their* sign rather than as a tasteful farm website
   that could belong to anyone. The shadow is a solid offset, not a blur —
   a blur is a photograph of a button; a painted sign has an edge. */
.btn-primary,
.btn-sign {
  background: var(--sign-red); color: #fff;
  border: 3px solid var(--sign-bark);
  box-shadow: 0 3px 0 var(--sign-bark);
}
.btn-primary:hover,
.btn-sign:hover {
  background: color-mix(in srgb, var(--sign-red) 88%, var(--sign-bark));
  box-shadow: 0 4px 0 var(--sign-bark);
}
.btn-primary:active,
.btn-sign:active { transform: translateY(3px); box-shadow: 0 0 0 var(--sign-bark); }

/* The second action, in the lettering yellow off the banner. */
.btn-yellow {
  background: var(--sign-yellow); color: var(--sign-bark);
  border: 3px solid var(--sign-bark);
  box-shadow: 0 3px 0 var(--sign-bark);
}
.btn-yellow:hover { background: color-mix(in srgb, var(--sign-yellow) 90%, var(--sign-hay)); }
.btn-yellow:active { transform: translateY(3px); box-shadow: 0 0 0 var(--sign-bark); }

.btn:active { transform: translateY(1px); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--paper); }
.btn-ghost:hover { border-color: var(--barn); color: var(--barn); }
/* Quiet outlined caps button — the restrained secondary action. */
.btn-outline {
  border-color: currentColor; background: none; color: inherit;
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; border-radius: 2px; padding: .8rem 1.5rem;
}
.btn-outline:hover { background: currentColor; }
.btn-outline:hover > * { color: var(--cream); }
.feature .btn-outline { color: #fff; }
.feature .btn-outline:hover { background: #fff; color: var(--bark); }
.band .btn-outline, .visit-card .btn-outline, .review .btn-outline { color: var(--ink); }
.band .btn-outline:hover, .visit-card .btn-outline:hover, .review .btn-outline:hover { background: var(--ink); color: var(--cream); }
.btn-quiet { background: none; color: var(--ink-2); }
.btn-quiet:hover { color: var(--ink); }
.btn-block { width: 100%; }
.btn-sm { font-size: .86rem; padding: .5rem .95rem; }
.btn-lg { font-size: 1.02rem; padding: .85rem 1.6rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* A hairline field-and-sky divider between the hero and the page proper. */
.rule { height: 4px; background: linear-gradient(90deg, var(--barn), var(--gold) 38%, var(--field) 72%, var(--blue)); opacity: .8; }

/* ───────── bands ───────── */
.band { padding: clamp(3.25rem, 7.5vw, 6rem) 0; }
.band-alt { background: color-mix(in srgb, var(--field) 7%, var(--cream)); }
.band-head { max-width: 62ch; margin-bottom: 2.5rem; }

/* ── the section masthead ──────────────────────────────────────────────────
   A split band head (title + intro + counts) now sits on its own sheet of
   paper rather than floating loose over the backdrop. Two reasons, and the
   second is the one that matters:

   · it gives the words a surface, so the cut-paper sheet can stay as busy and
     as colourful as it now is without ever competing with a sentence;
   · it tells the reader where they are. Previously a section announced itself
     with a title and then ran straight into a grid of cards, and the intro and
     the counts read as debris between the two. A masthead is a place — you
     arrive in "Pantry", you are told what it is and how big it is, and then
     you go through it. */
.band-head-split {
  max-width: none;
  display: grid; gap: 1.4rem 2.4rem;
  grid-template-columns: minmax(15rem, auto) minmax(0, 1fr);
  align-items: start;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.6rem 1.8rem 1.7rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(3px);
}
@media (max-width: 820px) {
  .band-head-split { grid-template-columns: 1fr; padding: 1.2rem 1.2rem 1.4rem; }
}
/* On paper the prose no longer needs the halo it wears out on the open sheet. */
.band-head-split .band-sub,
.band-head-split .micro,
.band-head-split .facts { text-shadow: none; }
.band-sub { color: var(--ink-2); font-size: 1.03rem; margin: 0 0 .8rem; }

/* Prose sits over the cut-paper sheet, and one of the windows crosses the
   middle on purpose — a backdrop that only rings the edges is a frame, which
   was rejected in an earlier round and rightly. So the text has to survive a
   photograph behind it without the backdrop being dimmed back down to the
   monotone it was.
   A soft halo in the paper colour rather than a panel: a filled box would cut
   a hard rectangle through the sheet and undo the whole cut-paper idea, while
   this lifts the words off whatever is behind them and stays invisible over
   plain paper. */
.band-sub,
.band-head-copy .micro,
.facts,
.note { text-shadow: 0 0 8px var(--cream), 0 0 16px var(--cream), 0 0 24px var(--cream); }
@media (prefers-color-scheme: dark) {
  .band-sub, .band-head-copy .micro, .facts, .note {
    text-shadow: 0 0 8px var(--paper), 0 0 16px var(--paper), 0 0 24px var(--paper);
  }
}

/* Heading left, copy right — the quiet editorial layout between photo bands. */
.band-head-split {
  max-width: none; display: grid; gap: clamp(1rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start;
}
@media (max-width: 800px) { .band-head-split { grid-template-columns: 1fr; } }
.band-head-copy { max-width: 60ch; }

/* Counts as a row of cells with rules between them, not three numbers with
   their captions loose beside them. The number and the thing it counts belong
   to each other, and at a glance the eye should get "106 things · 2 markets ·
   6 months" without reading a word. */
.facts {
  list-style: none; padding: 1.1rem 0 0; margin: 1.1rem 0 0;
  border-top: 1px solid var(--line);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
}
.facts li {
  font-size: .8rem; color: var(--ink-2); line-height: 1.3;
  padding: 0 1.1rem; border-left: 1px solid var(--line);
}
.facts li:first-child { padding-left: 0; border-left: 0; }
.facts b {
  display: block; font-family: var(--serif); font-size: 2rem; font-weight: 600;
  color: var(--sign-red); line-height: 1; margin-bottom: .25rem;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .facts { grid-auto-flow: row; grid-auto-columns: auto; gap: .8rem; }
  .facts li { padding: 0; border-left: 0; }
}
.note { color: var(--ink-2); font-size: .9rem; margin-top: 1.5rem; max-width: 68ch; }
.micro { color: var(--ink-2); font-size: .82rem; }

/* ───────── the drawn cast (art.js) ─────────
   Animals live in the band scenes; the still lifes sit on the pantry cards. */
.feature-media, .cat-art {
  --an-goat: #6b4a33;   --an-goat-2: #3d2a1d;  --an-goat-3: #efe3d2;
  --an-horn: #d8c9a8;   --an-hoof:   #3d2a1d;  --an-eye:    #241a12;
  --an-dog:  #f4ecdd;   --an-dog-2:  #ddd0ba;  --an-nose:   #3a2c22;
  --an-hen:  #c96a3a;   --an-hen-2:  #a84f28;  --an-comb:   #cc3a2c;
  --an-beak: #e8a72c;
  --an-pig:  #e8a898;   --an-pig-2:  #d08c7c;  --an-pig-3:  #f2c4b6;
  --an-duck: #f0e6d2;   --an-duck-2: #d9cbb0;
  --an-rabbit: #b09a80; --an-rabbit-2: #d8c9b4;
}

.cat-art {
  --pv-shadow: rgba(60,42,26,.13);
  --pv-board: #b98a52;   --pv-board-2: #96693a;
  --pv-roast: #c4715a;   --pv-roast-2: #a8523d;  --pv-bone: #f2e6cf;
  --pv-sausage: #b0553c; --pv-sausage-2: #8e3f2a;
  --pv-bowl: #e8ddc9;    --pv-bowl-2: #cbbb9e;   --pv-bowl-3: #d6c8ac;
  --pv-egg-a: #a9c4d6;   --pv-egg-b: #cfd9ab;    --pv-egg-c: #c99b6b;
  --pv-egg-d: #efe3cd;   --pv-egg-e: #b98b62;
  --pv-carrot: #e07a2c;  --pv-beet: #9c3a63;     --pv-tomato: #cc4230;
  --pv-greens: #4f7a3a;  --pv-greens-2: #6a9c3f;
  --pv-bread: #d9a55f;   --pv-bread-2: #a9773a;
  --pv-bun: #e0aa63;     --pv-bun-2: #c98c46;    --pv-icing: #f7ece0;
  --pv-pie: #d9a55f;     --pv-pie-2: #c08c48;    --pv-pie-3: #b8763c;
  --pv-frost: #8fc0da;
  --pv-jar: rgba(214,232,228,.55); --pv-lid: #9aa39c;  --pv-label: #f4e7cf;
  --pv-jam: #a63a55;     --pv-pickle: #7f9c4a;   --pv-pickle-2: #5f7d33;
  --pv-honey: #e8a72c;
}
@media (prefers-color-scheme: dark) {
  .cat-art { --pv-shadow: rgba(0,0,0,.3); --pv-jar: rgba(180,205,200,.22); }
}

/* ───────── catalog ───────── */
/* Columns, not grid: the categories hold 2 to 32 items each, so grid rows
   left large dead gaps beside the short cards. Columns pack them tight. */
/* Grid, not `columns`. Multi-column re-balances its content whenever anything
   inside changes height, so opening one card silently dealt every other card
   into a different column — Relishes & Jams jumped from the top right to the
   middle of the page as you clicked it. Nothing had moved in the data; the
   layout simply reflowed, and that is indistinguishable from the page
   rearranging itself under you.
   A grid cell is fixed. Opening a card grows its own row and leaves a gap
   beside it, which is the honest trade: a little whitespace while something is
   open costs far less than every card changing place. */
.cat-grid {
  display: grid; gap: 1.1rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.cat-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 0 0 1.3rem; box-shadow: var(--shadow);
  overflow: hidden;
  border-top: 5px solid var(--accent, var(--gold));
}
.cat-card > summary { list-style: none; cursor: pointer; }
.cat-card > summary::-webkit-details-marker { display: none; }
/* The +/– is absolutely positioned and the header reserves room for it with
   padding-right. That only holds if the header's contents can actually be
   squeezed into what is left: `.cat-head` is a flex container and its h3 is a
   flex item, and a flex item defaults to `min-width: auto`, meaning it refuses
   to shrink below its content and simply overflows the padding instead. That
   is why the control sat on the count — measured at 9px *past* the header edge
   on Produce, against 48px of reserved space.
   `min-width: 0` lets it shrink, which is what makes the reservation real. */
/* Padding is not the lever, and raising it further is wasted motion: the
   control is absolutely positioned at `right: 1.2rem` and is ~12px wide, so it
   sits over anything whose right edge lands within ~31px of the header's,
   whatever the padding says. Measured with 62px of padding, "Pickles &
   Ferments" still ended 18px from the edge — the padding grew and the gap did
   not move.
   The numeral pill did the real work here: nine cards went from seven
   intruding (one overflowing 9px past the edge) to three sitting close and
   none overflowing. Closing the last of it means making the control a flex
   sibling instead of an absolute one, which is a change to the card component
   another seat is actively editing. */
/* The open/close control is a flex ITEM, not an absolutely positioned mark.
   As an absolute it was outside the layout, so it overlapped whatever the
   heading happened to reach — reserving space with padding-right did not help,
   because a flex item defaults to min-width:auto and simply overflowed the
   padding. Measured with 62px reserved, the worst card still put its count 18px
   from the edge, under the control. In the flow it cannot collide at all:
   `margin-left: auto` pins it right, and the title shrinks to make room.
   Round, outlined and filled, so it reads as a control worth pressing rather
   than as a stray plus sign. */
/* art | title | count | control, as four columns of one flex row. The count
   used to live inside the h3, so on a longer title it overflowed the heading's
   box and landed under the control — which is why raising padding and forcing
   nowrap both failed to move it. Siblings cannot overlap. */
.cat-card > .cat-summary .cat-head > h3 { min-width: 0; flex: 1; margin: 0; }
.cat-card > .cat-summary .cat-head > .count { flex: 0 0 auto; }
.cat-card > .cat-summary .cat-head::after {
  content: '+';
  flex: 0 0 auto; margin-left: auto; align-self: center;
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  font-size: 1.05rem; line-height: 1; font-weight: 700;
  color: var(--sign-bark);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  border: 2px solid color-mix(in srgb, var(--sign-bark) 34%, transparent);
  border-radius: 999px;
  transition: background .12s ease, border-color .12s ease;
}
.cat-card > .cat-summary:hover .cat-head::after,
.cat-card > .cat-summary:focus-visible .cat-head::after {
  background: var(--paper); border-color: var(--sign-bark);
}
.cat-card[open] > .cat-summary .cat-head::after { content: '–'; }
/* A real photograph of the category, cut round and set into the header like a
   pressed medallion — the bark ring and the inner shadow are the same two
   tricks that make the backdrop's windows read as cut paper rather than pasted
   shapes, so the card art belongs to the same object as the page behind it. */
.cat-art .cat-photo {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--sign-bark) 62%, transparent),
    0 0 0 6px color-mix(in srgb, var(--paper) 70%, transparent),
    inset 0 3px 7px rgba(40,28,16,.42),
    0 3px 7px rgba(40,28,16,.22);
}

/* The still life sits in a wash of the category's own colour — this is the
   part that makes the page feel like a farm stand rather than a spreadsheet. */
.cat-head {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.3rem 1.1rem;
  background:
    radial-gradient(120% 130% at 82% 10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 68%),
    color-mix(in srgb, var(--accent) 11%, transparent);
}
.cat-art { flex: none; width: 82px; height: 82px; }
.cat-art svg { width: 100%; height: 100%; display: block; }
.cat-head h3 { margin: 0; font-size: 1.3rem; }
/* Just the number, in a fixed-width pill. It used to read "12 THINGS", which
   wrapped to two lines on the cards with two-line titles and slid underneath
   the +/– control — the collision Captain saw. A numeral cannot wrap, so the
   space reserved for the control stays reserved. The word survives for anyone
   using a screen reader, in aria-label on the same element. */
.cat-head .count {
  display: inline-grid; place-items: center;
  min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem;
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sign-bark);
  background: color-mix(in srgb, var(--accent, var(--gold)) 26%, var(--paper));
  border: 2px solid color-mix(in srgb, var(--accent, var(--gold)) 55%, transparent);
  border-radius: 999px;
}
.cat-summary > .cat-blurb { padding: .85rem 1.3rem 0; }
.cat-card > .cat-items { padding-inline: 1.3rem; }
.cat-card h3 { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .3rem; }
.cat-card h3 .count { font-family: var(--sans); font-size: .74rem; font-weight: 600; color: var(--ink-2); letter-spacing: .04em; }
/* ── the surfaces that sit on the sheet ────────────────────────────────────
   Everything above the backdrop was flat cream, which read as a stack of plain
   panels laid over a rich, textured page — the one place the site still looked
   like a template rather than like their sign.

   Three layers, all cheap and all painted rather than downloaded:
   · a fibre tooth running both ways, so the panel reads as a piece of the same
     paper the backdrop is cut from rather than as a white box on top of it;
   · a bloom of the card's own accent from the top-left corner, which is what
     makes Produce green, Meat red and Eggs blue *as surfaces* instead of only
     in a 5px rule along the top edge;
   · a bark-tinted hairline instead of the neutral grey one, because every
     shape on their sign is outlined in that brown.

   Kept faint on purpose: this is a reading surface, and the last time colour
   went up on this page a paragraph ended up on top of a duck. */
.cat-card,
.band-head-split,
.hero-plan,
.visit-card,
.plan-card {
  background-image:
    radial-gradient(115% 85% at 10% 0%,
      color-mix(in srgb, var(--accent, var(--gold)) 14%, transparent), transparent 62%),
    repeating-linear-gradient(90deg, rgba(74,52,26,.032) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg,  rgba(74,52,26,.022) 0 1px, transparent 1px 5px);
  border-color: color-mix(in srgb, var(--sign-bark) 22%, var(--line));
}
@media (prefers-color-scheme: dark) {
  .cat-card, .band-head-split, .hero-plan, .visit-card, .plan-card {
    background-image:
      radial-gradient(115% 85% at 10% 0%,
        color-mix(in srgb, var(--accent, var(--gold)) 20%, transparent), transparent 62%),
      repeating-linear-gradient(90deg, rgba(255,248,230,.028) 0 1px, transparent 1px 4px),
      repeating-linear-gradient(0deg,  rgba(255,248,230,.020) 0 1px, transparent 1px 5px);
  }
}

.cat-blurb { color: var(--ink-2); font-size: .9rem; margin-bottom: .85rem; }
.cat-items { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.cat-items { padding-top: .2rem; }
.cat-items li {
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  font-size: .83rem; padding: .32rem .62rem; border-radius: .65rem;
  background: color-mix(in srgb, var(--accent, var(--field)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, var(--field)) 28%, transparent);
}
.cat-items .item-name { flex: 1 1 12rem; }
.cat-items .item-price { color: var(--barn); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.cat-items li.is-seasonal {
  background: color-mix(in srgb, var(--gold) 20%, transparent);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
}
.chip { font-size: .75rem; padding: .12rem .5rem; border-radius: 999px; }
.chip-seasonal { background: color-mix(in srgb, var(--gold) 25%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); }

/* ───────── CSA explainer + steps + plans ───────── */
.csa-explainer {
  display: grid; grid-template-columns: minmax(12rem, .72fr) minmax(0, 1.28fr);
  gap: 1rem 2rem; margin: 0 0 2.5rem; padding: 1.5rem;
  background: color-mix(in srgb, var(--gold) 12%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line));
  border-left: 5px solid var(--gold); border-radius: var(--r); box-shadow: var(--shadow);
}
.csa-kicker {
  margin: 0 0 .25rem; color: var(--gold-d); font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.csa-heading h3 { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.85rem); }
.csa-copy p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.csa-copy h4 { margin: 1rem 0 .45rem; font-family: var(--sans); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-d); }
.csa-process { display: grid; gap: .45rem; margin: 0; padding-left: 1.25rem; color: var(--ink-2); font-size: .88rem; line-height: 1.45; }
.csa-process li::marker { color: var(--gold-d); font-weight: 700; }
.csa-process b { color: var(--ink); }
.csa-benefits {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.csa-benefits div { display: grid; gap: .15rem; }
.csa-benefits b { font-family: var(--serif); font-size: 1.05rem; }
.csa-benefits span { color: var(--ink-2); font-size: .84rem; line-height: 1.4; }
@media (max-width: 680px) {
  .csa-explainer { grid-template-columns: 1fr; gap: .85rem; padding: 1.2rem; }
  .csa-benefits { grid-column: auto; grid-template-columns: 1fr; }
}
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 2.5rem; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.steps li { counter-increment: s; position: relative; padding: 1rem 1.1rem 1rem 3.1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); font-size: .93rem; color: var(--ink-2); }
.steps li b { color: var(--ink); display: block; }
.steps li::before {
  content: counter(s); position: absolute; left: 1rem; top: 1rem;
  width: 26px; height: 26px; border-radius: 50%; background: var(--barn); color: #fff;
  display: grid; place-items: center; font-size: .82rem; font-weight: 700; font-family: var(--sans);
}

.plan-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.plan-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; box-shadow: var(--shadow); }
.plan-card h3 { font-size: 1.35rem; margin-bottom: .15rem; }
.plan-cadence { color: var(--ink-2); font-size: .88rem; margin-bottom: 1rem; }
.plan-figure { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .35rem; }
.plan-figure b { font-family: var(--serif); font-size: 2.15rem; color: var(--barn); line-height: 1; }
.plan-figure span { color: var(--ink-2); font-size: .9rem; }
.plan-total { font-size: .88rem; color: var(--ink-2); padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.plan-pitch { font-size: .93rem; }
.plan-ex { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.plan-ex li { display: flex; justify-content: space-between; gap: 1rem; padding: .32rem 0; border-bottom: 1px dashed var(--line); }
.plan-ex li:last-child { border-bottom: 0; }
.plan-ex span:last-child { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-ex-head { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; margin: 1.1rem 0 .35rem; }

/* ───────── builder ───────── */
.builder { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 1.75rem; align-items: start; }
@media (max-width: 980px) { .builder { grid-template-columns: 1fr; } }
.builder-main { display: grid; gap: 1.25rem; min-width: 0; }

.step-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; margin: 0; box-shadow: var(--shadow); }
.step-card legend {
  font-family: var(--serif); font-size: 1.22rem; font-weight: 600;
  display: flex; align-items: center; gap: .6rem; padding: 0 .5rem 0 0;
}
.step-n {
  width: 27px; height: 27px; border-radius: 50%; background: var(--gold); color: var(--bark);
  display: grid; place-items: center; font-family: var(--sans); font-size: .82rem; font-weight: 700; flex: none;
}
.opt { font-family: var(--sans); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.field-help { color: var(--ink-2); font-size: .9rem; margin: .7rem 0 1rem; max-width: 60ch; }

/* radio / checkbox cards */
.choice-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.choice-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.opt-card { position: relative; display: block; cursor: pointer; }
.opt-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt-card .box {
  display: block; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 1rem 1.1rem; height: 100%; transition: border-color .12s, background .12s;
}
.opt-card .box b { display: block; font-family: var(--serif); font-size: 1.1rem; }
.opt-card .box small { display: block; color: var(--ink-2); font-size: .84rem; margin-top: .15rem; }
.opt-card .box .amt { display: block; margin-top: .5rem; font-weight: 700; color: var(--barn); }
.opt-card input:checked + .box { border-color: var(--barn); background: color-mix(in srgb, var(--barn) 7%, transparent); }
.opt-card input:focus-visible + .box { outline: 3px solid var(--gold); outline-offset: 2px; }
.opt-card:hover .box { border-color: color-mix(in srgb, var(--barn) 50%, var(--line)); }

.pill { position: relative; display: inline-block; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill .box { display: block; border: 1.5px solid var(--line); border-radius: 999px; padding: .5rem 1.05rem; font-size: .92rem; transition: border-color .12s, background .12s, color .12s; }
.pill input:checked + .box { border-color: var(--barn); background: var(--barn); color: #fff; }
.pill input:focus-visible + .box { outline: 3px solid var(--gold); outline-offset: 2px; }
.pill:hover .box { border-color: var(--barn); }

/* pickers */
.picker-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.search-wrap { flex: 1 1 240px; }
.counter { margin: 0; font-size: .84rem; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.counter.is-full { color: var(--barn); }

input[type=search], input[type=text], input[type=tel], input[type=email], select, textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: .6rem .8rem;
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--ink-2) 75%, transparent); }
textarea { resize: vertical; }

.picker { max-height: 330px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: .85rem; background: var(--cream); }
.picker-group + .picker-group { margin-top: 1rem; }
.picker-group h4 {
  margin: 0 0 .5rem; font-family: var(--sans); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 700;
}
.picker-items { display: flex; flex-wrap: wrap; gap: .4rem; }
.picker .pill .box { font-size: .86rem; padding: .38rem .8rem; background: var(--paper); }
.picker .pill input:checked + .box { background: var(--barn); color: #fff; border-color: var(--barn); }
.picker .pill input:disabled + .box { opacity: .38; cursor: not-allowed; }
.picker .pill:has(input:disabled) { cursor: not-allowed; }
.picker-empty { color: var(--ink-2); font-size: .9rem; padding: .5rem; margin: 0; }
.fav-mode .pill input:checked + .box { background: var(--field); border-color: var(--field); }

/* fields */
.field-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: block; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field > span { display: block; font-size: .84rem; font-weight: 600; margin-bottom: .35rem; }
.req { color: var(--barn); }
.field-note { display: block; margin-top: .35rem; font-size: .8rem; color: var(--ink-2); line-height: 1.45; }

/* "We kept what you filled in last time." Quiet — it is a reassurance, not an
   alert, and it sits above a form the visitor is already partway into. */
.draft-note {
  margin: 0 0 1.1rem; padding: .7rem .9rem;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  font-size: .9rem; color: var(--ink-2);
}
.btn-link {
  background: none; border: 0; padding: 0; margin-left: .4rem;
  font: inherit; color: var(--barn); text-decoration: underline;
  cursor: pointer;
}
.btn-link:hover { color: var(--sign-red); }

/* ───────── the list ─────────
   Sits right under the builder, so it reads as the quieter alternative to the
   thing above it rather than competing with it. Outlined button, not the barn
   red primary: this is the second choice on the page and should look like it. */
.notify {
  margin-top: 2.5rem; padding: 1.6rem 1.8rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--r);
  display: grid; gap: 1.2rem 2.5rem; align-items: start;
}
@media (min-width: 780px) { .notify { grid-template-columns: 1fr 1fr; } }
.notify h3 { margin: 0 0 .4rem; }
.notify-copy p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.notify-form { display: grid; gap: .6rem; }
.notify-form .field input {
  width: 100%; padding: .65rem .8rem; font: inherit;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.notify-status { margin: 0; font-size: .9rem; min-height: 1.4em; }
.notify-status.is-good { color: var(--field); font-weight: 600; }
.notify-status.is-bad { color: var(--sign-red); }
/* The spam trap uses the existing .hp rule further down this file. */
.field.is-bad input, .field.is-bad textarea { border-color: var(--barn); background: color-mix(in srgb, var(--barn) 6%, var(--cream)); }

/* summary */
.summary { position: sticky; top: 84px; }
@media (max-width: 980px) { .summary { position: static; } }
.summary-inner { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; box-shadow: var(--shadow-lift); }
.summary-inner h3 { font-size: 1.2rem; margin-bottom: .9rem; }
.sum-row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.sum-row dt { color: var(--ink-2); margin: 0; }
.sum-row dd { margin: 0; text-align: right; font-weight: 600; }
.sum-list { margin: 0; padding: 0; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 .3rem; }
.sum-total b { font-family: var(--serif); font-size: 1.8rem; color: var(--barn); }
.sum-note { color: var(--ink-2); font-size: .84rem; margin: 0 0 1rem; }
.sum-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .35rem 0 0; padding: 0; list-style: none; }
.sum-tags li { font-size: .78rem; padding: .16rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--barn) 12%, transparent); }
.sum-tags.is-fav li { background: color-mix(in srgb, var(--field) 16%, transparent); }
.summary-actions { margin-top: 1.1rem; }

/* ───────── visit ───────── */
.visit-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.visit-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; box-shadow: var(--shadow); }
.visit-card p:last-child { margin-bottom: 0; }
.big-contact { font-family: var(--serif); font-size: 1.32rem; line-height: 1.3; }
.big-contact a { text-decoration: none; }
.big-contact a:hover { text-decoration: underline; }
.postal { font-family: var(--sans); font-size: .84rem; color: var(--ink-2); letter-spacing: .1em; }
.link-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.link-row .btn { font-size: .88rem; padding: .55rem 1rem; }
.market { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.market:last-of-type { border-bottom: 0; }
.market b { display: block; font-family: var(--serif); font-size: 1.05rem; }
.market span { display: block; font-size: .88rem; color: var(--ink-2); }
.market .when { color: var(--ink); font-weight: 600; }

/* ───────── footer ───────── */
.site-footer {
  border-top: 4px solid var(--gold);
  padding: clamp(2.25rem, 5vw, 3.25rem) 0 2rem;
  background: var(--bark); color: #f3e9da;
}
@media (prefers-color-scheme: dark) { .site-footer { background: #120f0c; } }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.5fr 1fr 1fr 1fr; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; } }
.footer-brand .brand-mark svg { border-radius: 50%; box-shadow: 0 0 0 2px var(--gold); display: block; margin-bottom: .7rem; }
.footer-name { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 .35rem; }
.footer-brand .micro { color: #bfae99; max-width: 34ch; margin: 0; }
/* The photo credit is a licence condition, not fine print — it inherits
   .micro, whose colour is meant for the cream page and is nearly invisible on
   the dark footer. Same tone as the rest of the footer body text. */
.footer-credits { color: #bfae99; margin: 1.2rem 0 0; }
.footer-credits a { color: #e0cfb4; }
.footer-col h4 {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin: .3rem 0 .8rem; font-weight: 700;
}
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { font-size: .92rem; margin-bottom: .45rem; color: #d8ccbb; }
.footer-list li.micro { color: #a8998a; }
.footer-list a { color: #f3e9da; text-decoration: none; border-bottom: 1px solid rgba(243,233,218,.28); }
.footer-list a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.footer-legal {
  margin: 2.25rem 0 0; padding-top: 1.25rem;
  border-top: 1px solid rgba(243,233,218,.16); color: #bfae99;
}
.footer-legal a { color: #e8dccb; }

/* photos — only rendered once the family lists some in farm.js */
/* 320px, not 240px: at this wrap width 240 gives four columns, and six photos
   in four columns is a row of four and an orphaned pair. Three columns lays the
   six out as a clean 2x3, and a wider tile flatters a 4:3 photo besides. */
.footer-logo { display: block; width: min(260px, 70%); height: auto; margin: 0 0 .7rem; }

.photo-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.photo-grid figure { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); background: var(--paper); border: 1px solid var(--line); }
.photo-grid img { width: 100%; height: 240px; object-fit: cover; display: block; }
.photo-grid figcaption { font-size: .85rem; color: var(--ink-2); padding: .7rem .9rem; }

/* spam trap — off-screen, never focusable by tab order */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Keep the notify honeypot in the document without creating an off-viewport
   interactive target for accessibility tooling. It remains untabbable and
   programmatically fillable by simple bots. */
#notify .hp { left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ───────── review dialog ───────── */
.review {
  border: 1px solid var(--line); border-radius: var(--r); padding: 0;
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lift);
  width: min(100% - 2rem, 620px); max-height: 88vh;
}
.review::backdrop { background: rgba(30, 22, 16, .55); backdrop-filter: blur(2px); }
.review-inner { padding: 1.6rem; display: flex; flex-direction: column; gap: .85rem; max-height: 88vh; }
.review-inner h2 { margin: 0; font-size: 1.45rem; }
.review-inner .field-help { margin: 0; }
#reviewText { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; line-height: 1.55; flex: 1; min-height: 200px; }
/* The member has to say they have read the order before they can send it —
   the farm plants to the orders they hold, so this is not a formality. */
.review-confirm {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: .9rem 0 .2rem; padding: .75rem .85rem;
  background: var(--cream); border: 1px solid var(--line, #e3dccb);
  border-radius: .6rem; cursor: pointer; font-size: .95rem; font-weight: 600;
}
.review-confirm input { margin: .15rem 0 0; width: 1.1rem; height: 1.1rem; accent-color: var(--field); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.review-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.review-status { margin: 0; font-size: .88rem; font-weight: 600; min-height: 1.2em; }
.review-status.is-good { color: var(--field-d); }
.review-status.is-bad { color: var(--barn); }
@media (prefers-color-scheme: dark) { .review-status.is-good { color: var(--field); } }
+.mobile-nav { display: none; position: relative; }
.mobile-nav > summary {
  list-style: none; cursor: pointer; padding: .48rem .72rem; border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink-2); font-size: .82rem; font-weight: 700;
}
.mobile-nav > summary::-webkit-details-marker { display: none; }
.mobile-nav-links {
  position: absolute; right: 0; top: calc(100% + .55rem); z-index: 50; min-width: 210px;
  display: grid; gap: .15rem; padding: .5rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-lift);
}
.mobile-nav-links a { padding: .6rem .7rem; color: var(--ink); text-decoration: none; border-radius: .45rem; }
.mobile-nav-links a:hover { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--barn); }
/* Scoped to .site-header so it outranks `.btn { display: inline-flex }`, which
   sits later in this file and would otherwise win on equal specificity. */
@media (max-width: 980px) {
  .site-nav { display: none; }
  .mobile-nav { display: block; margin-left: auto; }
  .header-cta { margin-left: 0; }
}
@media (max-width: 560px) {
  .site-header .header-cta { display: none; }
  .header-inner { gap: .75rem; }
  .brand-text small { display: none; }
  .brand-text b { font-size: 1rem; }
}

/* ───────── two-tone display headings ─────────

/* ───────── routed pages ───────── */
.page-intro {
  position: relative; z-index: 1;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(60% 120% at 90% 10%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%),
    color-mix(in srgb, var(--sage) 38%, var(--cream));
  border-bottom: 1px solid var(--line);
}
.page-intro .wrap { max-width: 58rem; }
.page-intro .dual { margin-bottom: .9rem; }
.page-intro .dual em { color: var(--gold-d); }
.page-intro .dual span { color: var(--ink); }
.page-intro-copy { max-width: 64ch; color: var(--ink-2); font-size: 1.05rem; }
.page-kicker {
  margin: 0 0 .45rem; color: var(--barn); font-size: .76rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.route-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.3rem; }
.home-wayfinder { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.home-wayfinder .band-head { margin-bottom: 1.5rem; }
.destination-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.destination-card {
  display: flex; flex-direction: column; min-height: 180px; padding: 1.25rem;
  color: inherit; text-decoration: none; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.destination-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow-lift); }
.destination-card .route-icon { font-size: 1.55rem; margin-bottom: .7rem; }
.destination-card h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.destination-card p { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.45; }
.destination-card .route-go { margin-top: auto; padding-top: 1rem; color: var(--barn); font-size: .82rem; font-weight: 700; }
.route-note { margin: 1.5rem 0 0; padding: 1rem 1.15rem; border-left: 4px solid var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--paper)); color: var(--ink-2); }
.route-note b { color: var(--ink); }
.wizard-shell { display: grid; gap: 1.25rem; }
/* The step strip sits on the photographic backdrop, and the backdrop is busy
   exactly where it lands. Two things were being lost: the not-yet-reached steps
   are deliberately dimmed to .52, which over a photo of raspberries stops
   reading as "later step" and starts reading as "smudge"; and the save note
   under it had no backing at all, so "Step 1 of 4 · Saved for this session" was
   sitting straight on the collage.

   Backing the whole strip once, rather than giving each control its own opaque
   patch — the controls keep their own quiet styling, and the strip reads as one
   piece of paper laid on the sheet, which is the language the rest of the page
   already uses. */
.wizard-topline {
  display: grid; gap: .75rem;
  position: relative; z-index: 1;
  padding: .85rem .95rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.wizard-progress { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; padding: 0; margin: 0; }
.wizard-progress li { min-width: 0; }
.wizard-progress button {
  width: 100%; display: flex; align-items: center; gap: .45rem; padding: .55rem .6rem;
  color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; text-align: left; font: inherit; font-size: .78rem;
}
.wizard-progress button b {
  display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem;
  border-radius: 50%; background: color-mix(in srgb, var(--ink-2) 12%, var(--paper)); color: var(--ink-2); font-size: .78rem;
}
.wizard-progress button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wizard-progress button:disabled { opacity: .52; cursor: not-allowed; }
.wizard-progress button.is-current { border-color: var(--barn); background: color-mix(in srgb, var(--barn) 8%, var(--paper)); color: var(--ink); }
.wizard-progress button.is-current b { background: var(--barn); color: #fff; }
.wizard-progress button.is-complete b { background: var(--gold); color: var(--bark); }
.wizard-save-note { margin: 0; color: var(--ink-2); font-size: .78rem; }
.wizard-save-note .btn { margin-left: .35rem; padding: .2rem .45rem; font-size: .72rem; }
.wizard-panel { display: grid; gap: 1.15rem; }
.wizard-panel-head { max-width: 62ch; }
.wizard-panel-head h2 { margin: 0 0 .45rem; font-size: clamp(1.55rem, 3vw, 2.1rem); }
.wizard-panel-head p:last-child { color: var(--ink-2); margin-bottom: 0; }
.wizard-welcome {
  padding: clamp(1.35rem, 3vw, 2rem); background: color-mix(in srgb, var(--gold) 12%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--gold) 46%, var(--line)); border-radius: var(--r); box-shadow: var(--shadow);
}
.wizard-welcome h2 { margin: 0 0 .55rem; font-size: clamp(1.65rem, 3vw, 2.25rem); }
.wizard-welcome > p:not(.page-kicker) { max-width: 66ch; color: var(--ink-2); font-size: 1rem; }
.wizard-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1.35rem 0; }
.wizard-facts div { display: grid; gap: .1rem; padding: .85rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); }
.wizard-facts b { font-family: var(--serif); font-size: 1.18rem; color: var(--barn); }
.wizard-facts span { color: var(--ink-2); font-size: .8rem; line-height: 1.35; }
.wizard-welcome-note { margin: 0; padding: .8rem .9rem; border-left: 4px solid var(--field); color: var(--ink-2); background: color-mix(in srgb, var(--field) 10%, transparent); font-size: .88rem; }
.wizard-welcome-note b { color: var(--ink); }
.wizard-review-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .85rem; padding: 1.2rem; background: color-mix(in srgb, var(--field) 11%, var(--paper)); border: 1px solid color-mix(in srgb, var(--field) 42%, var(--line)); border-radius: var(--r); }
.wizard-review-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--field); color: #fff; font-weight: 700; }
.wizard-review-card h3 { margin: 0 0 .3rem; font-family: var(--serif); font-size: 1.2rem; }
.wizard-review-card p { margin: 0; color: var(--ink-2); font-size: .9rem; }
.wizard-nav { display: flex; justify-content: space-between; gap: .75rem; padding-top: .25rem; }
.wizard-nav-end { justify-content: flex-end; }
.wizard-summary-save { margin: 1rem 0 0; padding: .65rem .75rem; border-radius: var(--r-sm); background: color-mix(in srgb, var(--gold) 13%, transparent); color: var(--ink-2); font-size: .78rem; }
@media (max-width: 600px) {
  .wizard-progress { gap: .3rem; }
  .wizard-progress button { justify-content: center; padding: .42rem .25rem; }
  .wizard-progress button span { font-size: .64rem; }
  .wizard-progress button b { width: 1.5rem; height: 1.5rem; }
  .wizard-facts { grid-template-columns: 1fr; }
  .wizard-nav .btn { font-size: .82rem; padding-inline: .7rem; }
}

@media print {
  .site-header, .site-nav, .hero, .band-head, .summary-actions, .btn { display: none !important; }
  body { background: #fff; }
}


@media print {
  .site-header, .site-nav, .hero, .band-head, .summary-actions, .btn { display: none !important; }
  body { background: #fff; }
}

/* ─────────────────── market strip ───────────────────
   A slim bar above the hero, shown only when there is a market on or one
   coming up. It sits INSIDE the page rather than floating over it — Captain's
   no-rip-away rule: nothing on this site covers what somebody is reading, and
   nothing moves the hero out from under a thumb that is already on its way to
   a button. On a quiet week the element is `hidden` and takes no space at all. */
.market-strip {
  background: var(--field);
  color: var(--paper);
  border-bottom: 3px solid var(--gold);
}
.market-strip-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
  padding: 14px 0;
}
.market-now {
  margin: 0;
  font: 600 17px/1.35 var(--serif);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.market-now b { font-weight: 700; }
.market-when {
  font: 400 13.5px/1.4 var(--sans);
  opacity: .82;
}
.market-sub {
  margin: 0;
  font-size: 13.5px;
  opacity: .85;
  flex: 1 1 auto;
}
.market-acts {
  margin: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/* The ghost button is styled for a cream page; on the green strip it needs its
   own light-on-dark treatment or it disappears into the background. */
.market-strip .btn-ghost {
  background: transparent;
  border-color: rgba(251, 248, 241, .45);
  color: var(--paper);
}
.market-strip .btn-ghost:hover { background: rgba(251, 248, 241, .12); }

/* The live dot. Real state, not decoration — it is only ever rendered when the
   family have actually tapped Start Market. */
.market-now i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #a7e0b0;
  flex: 0 0 auto;
  animation: market-pulse 2s ease-in-out infinite;
}
@keyframes market-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) {
  .market-now i { animation: none; }
}

@media (max-width: 720px) {
  .market-strip-in { padding: 13px 0; gap: 8px; }
  .market-now { font-size: 16px; }
  /* Full-width targets on a phone — this is read one-handed, walking. */
  .market-acts { width: 100%; }
  .market-acts .btn { flex: 1 1 auto; text-align: center; }
}