/* =========================================================
   Farmer's Table — Homepage v2 ("farmer chic")
   Refined, editorial, restrained.
   Self-contained: imports tokens, redefines components.
   ========================================================= */

@import url("./colors_and_type.css");
/* Besley (roman + italic) and Roboto. Nothing else — Cormorant Garamond was
   removed on 2026-09-10; it was never a brand face. */
@import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,300..900;1,300..900&display=swap');

/* Type families (--font-display / --font-text / --font-italic / --font-ui) and
   all text colours live in colors_and_type.css. This file must not redefine
   them: two disagreeing definitions of the type system is what made a font
   change a two-file edit in the first place. */
:root {
  --rule: rgba(40,33,31,0.18);
  --rule-strong: rgba(40,33,31,0.32);

  /* Text colours (--ink / --ink-muted / --paper-ink / --paper-muted) and the
     text-safe orange live in colors_and_type.css, the source of truth. */
}

/* ===== Resets ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--c-cream);
  color: var(--c-warm-black);
  /* Besley is a Clarendon: sturdier and slightly narrower than Roboto at the
     same size, with more texture per line. It wants a little more size and a
     little more leading to breathe. */
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }

.v2-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; width: 100%; }
.v2-container-narrow { max-width: 920px; margin: 0 auto; padding: 0 32px; width: 100%; }
@media (max-width: 760px) {
  .v2-container, .v2-container-narrow { padding: 0 22px; }
}

/* ===== Tiny eyebrows (restrained) ===== */
.v2-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-autumn-orange-text);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.v2-eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.v2-eyebrow.center { justify-content: center; }
.v2-eyebrow.center::after {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.7;
}
.v2-eyebrow.on-dark { color: var(--c-goldenrod); }

/* ===== Buttons — smaller, finer ===== */
.v2-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 13px 22px 12px;
  background: var(--c-tft-green);
  color: var(--c-paper);
  border-radius: 1px;
  transition: background 200ms, color 200ms, transform 100ms;
  border: 1px solid transparent;
}
.v2-btn:hover { background: var(--c-oxblood); }
.v2-btn:active { transform: translateY(1px); }
.v2-btn .arrow {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0;
  display: inline-block;
  transition: transform 200ms;
}
.v2-btn:hover .arrow { transform: translateX(3px); }
.v2-btn--orange { background: var(--c-autumn-orange); }
.v2-btn--orange:hover { background: var(--c-oxblood); }
.v2-btn--ghost {
  background: transparent;
  color: var(--c-warm-black);
  border-color: var(--c-warm-black);
}
.v2-btn--ghost:hover { background: var(--c-warm-black); color: var(--c-paper); }
.v2-btn--ghost-light {
  background: transparent;
  color: var(--c-paper);
  border-color: rgba(244,236,216,0.6);
}
.v2-btn--ghost-light:hover { background: var(--c-paper); color: var(--c-tft-green); border-color: var(--c-paper); }

.v2-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-tft-green);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--c-autumn-orange);
  padding-bottom: 3px;
  transition: color 200ms, border-color 200ms;
}
.v2-link:hover { color: var(--c-autumn-orange-text); }
.v2-link.on-dark {
  color: var(--c-paper);
  border-bottom-color: var(--c-goldenrod);
}
.v2-link.on-dark:hover { color: var(--c-goldenrod); }

/* ===== Top hairline ribbon ===== */
.v2-ribbon {
  background: var(--c-cream);
  color: var(--c-warm-black);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 9px 16px;
  text-align: center;
}
.v2-ribbon .label {
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 10px;
  /* Autumn orange lands at 3.15:1 on cream, which fails WCAG AA for text
     this size. Oxblood is the brand's own warm dark and clears it at 13.7:1
     without giving up the warmth the orange was there for. */
  color: var(--c-oxblood);
  margin-right: 12px;
}
.v2-ribbon .v2-ribbon-link {
  margin-left: 12px;
  border-bottom: 1px solid var(--c-tft-green);
  padding-bottom: 1px;
  font-family: var(--font-text);
  font-size: 14px;
}
.v2-ribbon .v2-ribbon-link:hover { color: var(--c-autumn-orange-text); border-bottom-color: var(--c-autumn-orange); }
.v2-ribbon .sep {
  margin: 0 10px;
  opacity: 0.4;
}

/* ===== Nav — slimmer, cream ===== */
.v2-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-cream);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: saturate(1.05);
}
.v2-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  gap: 24px;
}
/* The logo file used to carry a 792x612 artboard with the artwork floating
   inside it, so only ~45% of the declared height was ink and the mark read as
   tiny next to the nav links. The viewBox is now tight to the artwork, so this
   height is the height you actually see.
   Raised from 36px at the customer's request (Sept 2026 launch review): at
   36px the wordmark's lower line was hard to read. The bar's vertical padding
   drops to compensate so the sticky nav doesn't grow by the full difference. */
.v2-nav-logo img { height: 54px; width: auto; display: block; }
@media (max-width: 880px) { .v2-nav-logo img { height: 48px; } }
@media (max-width: 420px) { .v2-nav-logo img { height: 42px; } }

/* The logo hangs in a small gingham cloth tied to the bar: flush with the top
   edge, open at the top, with its hem just below the bar's bottom rule and a
   fringe of uneven threads hanging past it, like a farmhouse tablecloth.
   The negative margins cancel the cloth's extra height in the flex row, so
   the bar itself stays exactly as tall as before; only the cloth overflows.
   --tab-drop is how far the hem sits below the bar; --fringe is the length
   of the longest threads below that. */
.v2-nav-logo {
  --tab-pad-x: 18px;
  --tab-pad-top: 16px;
  --tab-drop: 5px;
  --fringe: 11px;
  position: relative;
  z-index: 46; /* above the mobile menu panel (45), within the bar (50) */
  display: block;
  /* 12px is .v2-nav-inner's vertical padding. The cloth starts at the bar's
     top edge and ends --tab-drop below its bottom edge (bar = 12 + logo + 12),
     and the margins give all of that back so the row is only the logo's
     height. */
  margin: -12px 0 calc(-12px - var(--tab-drop));
  padding: var(--tab-pad-top) var(--tab-pad-x) calc(24px + var(--tab-drop) - var(--tab-pad-top));
  /* Gingham: two sets of translucent stripes crossing give the three tones
     of a woven check (plain, single stripe, and the darker squares where they
     cross). A warm stone rather than the traditional red, which fought the
     cream and green palette; faint enough that the logo stays crisp. */
  --gingham: rgba(150, 132, 92, 0.16);
  --gingham-size: 14px;
  background-color: var(--c-paper);
  background-image:
    linear-gradient(90deg, var(--gingham) 50%, transparent 50%),
    linear-gradient(var(--gingham) 50%, transparent 50%);
  background-size: var(--gingham-size) var(--gingham-size);
  background-position: center top;
  border: 1px solid var(--border);
  border-top: 0;
  border-bottom-color: var(--c-stone); /* the hem the fringe hangs from */
  /* drop-shadow, not box-shadow, so the shadow follows the fringe threads
     instead of drawing a rectangle under them. */
  filter: drop-shadow(0 3px 4px rgba(40, 33, 31, 0.14));
}
/* The fringe: a repeating strip of threads in the hem colour, each a slightly
   different length and a hair off vertical so the edge reads as cloth rather
   than as a comb. */
.v2-nav-logo::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: var(--fringe);
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="42" height="11" viewBox="0 0 42 11" fill="none" stroke="%23C9BFA3" stroke-width="1.3" stroke-linecap="round"><path d="M1.5 0 L1.8 7"/><path d="M4.5 0 L4.1 9"/><path d="M7.5 0 L7.7 6"/><path d="M10.5 0 L10.3 8"/><path d="M13.5 0 L14.0 10"/><path d="M16.5 0 L16.2 7"/><path d="M19.5 0 L19.6 8"/><path d="M22.5 0 L22.0 6"/><path d="M25.5 0 L25.8 9"/><path d="M28.5 0 L28.4 7"/><path d="M31.5 0 L31.9 10"/><path d="M34.5 0 L34.2 8"/><path d="M37.5 0 L37.7 6"/><path d="M40.5 0 L40.1 9"/></svg>') left top / auto 100% repeat-x;
  pointer-events: none;
}
.v2-nav-logo:focus-visible {
  outline: 2px solid var(--c-tft-green);
  outline-offset: 2px;
}
@media (max-width: 880px) {
  .v2-nav-logo { --tab-pad-x: 14px; --tab-pad-top: 14px; --tab-drop: 4px; --fringe: 10px; }
}
@media (max-width: 420px) {
  .v2-nav-logo { --tab-pad-x: 12px; --tab-pad-top: 12px; --tab-drop: 3px; --fringe: 9px; }
}
.v2-nav-links {
  display: flex; gap: 30px; align-items: center;
}
.v2-nav-link {
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-warm-black);
  position: relative;
  padding: 4px 0;
  transition: color 200ms;
}
.v2-nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--c-autumn-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms;
}
.v2-nav-link:hover { color: var(--c-tft-green); }
.v2-nav-link:hover::after { transform: scaleX(1); }
/* The nav is now real wayfinding (five destinations, not three anchors on
   one page), so the current page needs to be readable at a glance. The
   underline is the same device as :hover, held permanently. */
.v2-nav-link[aria-current="page"] { color: var(--c-tft-green); font-weight: 700; }
.v2-nav-link[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--c-tft-green);
}
.v2-nav-cta {
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-tft-green);
  border: 1px solid var(--c-tft-green);
  padding: 9px 16px;
  border-radius: 1px;
  transition: background 200ms, color 200ms;
}
.v2-nav-cta:hover { background: var(--c-tft-green); color: var(--c-paper); }
.v2-nav-toggle {
  display: none;
  background: none; border: 0; padding: 6px; margin: -6px;
  cursor: pointer; align-items: center; justify-content: center;
}

/* ---- Mobile navigation --------------------------------------
   The hamburger has been in the markup since the v2 rebuild but was
   never bound to anything, so below 880px the primary nav was simply
   gone. js/nav.js toggles .nav-open on <body>; these rules turn the
   hidden link row into a drop panel under the nav bar.

   The panel sits at 45 - beneath the nav bar itself (50) so the bar
   stays on top and the panel slides out from under it.
   ------------------------------------------------------------ */
@media (max-width: 880px) {
  .v2-nav { position: relative; }
  .v2-nav-toggle { display: inline-flex; color: var(--c-warm-black); }

  .v2-nav-links {
    /* Not display:none - the panel has to be able to animate, and a
       display:none element can't be reached by keyboard users. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;

    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 45;
    background: var(--c-paper);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 22px rgba(40, 33, 31, 0.13);
    padding: 4px 0 8px;

    /* Collapsed state. visibility (not display) keeps it out of the tab
       order while still allowing the transition to run. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 220ms;
  }

  body.nav-open .v2-nav-links {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s, 0s, 0s;
  }

  .v2-nav-links .v2-nav-link {
    padding: 14px 22px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
  }
  .v2-nav-links .v2-nav-link:last-child { border-bottom: 0; }
  /* The sliding underline is a desktop affordance; on a stacked list it
     reads as a stray rule. */
  .v2-nav-links .v2-nav-link::after { content: none; }
  .v2-nav-links .v2-nav-link[aria-current="page"] {
    color: var(--c-tft-green); font-weight: 700;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-nav-links {
    transition: opacity 1ms linear, visibility 0s linear 1ms;
    transform: none;
  }
  body.nav-open .v2-nav-links { transform: none; }
}

/* ===== Hero — editorial split ===== */
.v2-hero {
  background: var(--c-cream);
  position: relative;
  padding: 72px 0 88px;
  border-bottom: 1px solid var(--rule);
}
.v2-hero-grid {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 72px;
  align-items: center;
}
@media (max-width: 920px) {
  .v2-hero-grid { grid-template-columns: 1fr; gap: 48px; }
}
.v2-hero-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}
.v2-hero-eyebrow-row .established {
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--ink-muted);
}
/* Display and body are now the same family, so hierarchy comes from weight and
   size rather than from a change of typeface. Headings take 600 against a 400
   body; anything less reads as emphasis, not as a heading. */
.v2-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 4.9vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--c-tft-green);
  margin: 0 0 28px;
  text-wrap: balance;
}
.v2-hero h1 .accent {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 500;
  color: var(--c-autumn-orange);
}
.v2-hero p.lede {
  font-family: var(--font-text);
  font-size: 19px;
  line-height: 1.62;
  color: var(--ink);
  margin: 0 0 32px;
  max-width: 46ch;
}
.v2-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.v2-hero-meta {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  flex-wrap: wrap;
}
.v2-hero-meta .item {
  display: inline-flex; align-items: center; gap: 8px;
}
.v2-hero-meta .item strong {
  color: var(--c-tft-green);
  font-weight: 700;
  letter-spacing: 0.10em;
}
.v2-hero-meta .item .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-leaf-green);
}

/* Hero image — single ragged photo, no tape, no overlay illustration */
.v2-hero-photo {
  position: relative;
  aspect-ratio: 4/5;
  width: 100%;
  background:
    linear-gradient(180deg, rgba(11,67,36,0.05) 0%, rgba(11,67,36,0.18) 100%),
    url('https://images.unsplash.com/photo-1464226184884-fa280b87c399?w=1200&auto=format&fit=crop&q=85') center/cover;
  filter: url(#rough-edge-soft) saturate(0.82) contrast(1.02);
}
.v2-hero-caption {
  margin-top: 14px;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.v2-hero-caption::before {
  content: "—";
  color: var(--c-autumn-orange);
  font-family: var(--font-body);
}

/* ===== Mission moment — magazine pull-quote ===== */
.v2-mission {
  background: var(--c-cream);
  padding: 96px 0;
  text-align: center;
  position: relative;
  border-bottom: 1px solid var(--rule);
}
.v2-mission .v2-container-narrow {
  position: relative;
}
.v2-mission .marker {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  color: var(--c-autumn-orange-text);
  display: block;
  margin-bottom: 20px;
  letter-spacing: 0.06em;
}
/* Besley italic carries far more ink per character than the Cormorant this
   replaced, so the same words at the same size read as heavy. It needs LESS
   size and a shorter measure, not more. Besley's "0" is wide, so a ch cap
   bites harder here than the same number would in a Garamond: 46ch is
   measured to hold the quote to three or four lines at desktop. */
.v2-mission blockquote {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 2.0vw, 28px);
  line-height: 1.44;
  color: var(--ink);
  margin: 0 auto 28px;
  max-width: 46ch;
  text-wrap: balance;
}
.v2-mission .signoff {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-tft-green);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.v2-mission .signoff::before,
.v2-mission .signoff::after {
  content: ""; width: 28px; height: 1px;
  background: var(--c-tft-green); opacity: 0.5;
}

/* ===== Section heads — restrained ===== */
.v2-section { padding: 96px 0; }
.v2-section--paper { background: var(--c-paper); }
.v2-section--cream { background: var(--c-cream); }
.v2-section--green { background: var(--c-tft-green); color: var(--c-paper); }
@media (max-width: 760px) {
  .v2-section { padding: 72px 0; }
}

.v2-section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 56px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}
.v2-section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.2vw, 43px);
  line-height: 1.06;
  letter-spacing: -0.016em;
  color: var(--c-tft-green);
  margin: 14px 0 0;
  text-wrap: balance;
}
.v2-section-head h2 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 500;
  color: var(--c-autumn-orange);
}
.v2-section-head.on-dark { border-bottom-color: rgba(244,236,216,0.18); }
.v2-section-head.on-dark h2 { color: var(--c-paper); }
@media (max-width: 760px) {
  .v2-section-head { grid-template-columns: 1fr; margin-bottom: 36px; }
}

/* ===== Events — editorial cards (no big photos with rounded boxes) ===== */
.v2-events-grid {
  display: grid;
  /* --n is set by js/home-events.js to the number of cards actually
     rendered. The feed genuinely returns fewer than three some weeks, and
     a fixed 3-up grid leaves an obvious hole where the missing card would
     be. Falls back to 3 if the script never runs. */
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: 56px 40px;
}
/* A lone event stretched to full width turns its photo into a billboard. */
.v2-events-grid[data-count="1"] { max-width: 420px; }
@media (max-width: 980px) {
  .v2-events-grid { grid-template-columns: repeat(min(var(--n, 2), 2), minmax(0, 1fr)); gap: 48px 32px; }
}
@media (max-width: 640px) {
  .v2-events-grid { grid-template-columns: 1fr; gap: 44px; max-width: none; }
}

/* The photo is a second link to the same place as the card's own call to
   action, so it is hidden from assistive tech rather than announced twice. */
.v2-event-media { display: block; text-decoration: none; }

.v2-events-noscript { grid-column: 1 / -1; }

.v2-event {
  display: flex;
  flex-direction: column;
}
/* Live titles vary in length where the hand-written three were tuned to
   match. Push the call to action to the bottom so it lines up across the
   row instead of floating at three different heights. */
.v2-event > .v2-link { margin-top: auto; padding-top: 12px; align-self: flex-start; }
.v2-event .meta { margin-bottom: 0; }
.v2-event-photo {
  position: relative;
  aspect-ratio: 5 / 4;
  width: 100%;
  margin-bottom: 22px;
  background: var(--c-tft-green);
  overflow: hidden;
}
.v2-event-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: url(#rough-edge-soft) saturate(0.85) contrast(1.02);
}
.v2-event-tag {
  position: absolute;
  top: 12px; left: 12px;
  /* Live category names are long ("Farmers Markets & Festivals") where the
     hand-written tags were one word. Cap it against the photo rather than
     letting the chip run past the frame. */
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--c-cream);
  color: var(--c-warm-black);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 5px 10px;
  z-index: 2;
}
.v2-event-date {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  /* Autumn orange is 3.15:1 on cream; at 11px this needed 4.5:1 and failed.
     Oxblood keeps the warmth and clears it at 13.7:1. Same fix as the
     ribbon label. */
  color: var(--c-oxblood);
  margin-bottom: 10px;
}

.v2-event h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.16;
  letter-spacing: -0.008em;
  color: var(--c-tft-green);
  margin: 0 0 10px;
  text-wrap: balance;
}
/* The venue is information a visitor scans for, so it is set in the sans at a
   real muted color. It used to be italic Cormorant at 15px/0.75 opacity, which
   made it indistinguishable from the recurrence line directly beneath it. */
.v2-event .meta {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 0 14px;
}

/* "Every Saturday" — the recurrence, from the feed.
   MUST stay after .v2-event .meta: the cadence element carries BOTH classes and
   both selectors have the same specificity, so this only wins on source order.
   It previously sat above .meta and was therefore completely dead, which is why
   the recurrence rendered identically to the venue. Differentiated by color and
   tracking rather than by size alone, so the two lines never merge again. */
.v2-event .meta--cadence {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-tft-green);
  margin: -8px 0 14px;
}
.v2-event .v2-link { font-size: 11px; }

/* ===== Markets — directory style ===== */
.v2-markets-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 920px) { .v2-markets-grid { grid-template-columns: 1fr; gap: 40px; } }

.v2-markets-aside p {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  color: var(--paper-ink);
  margin: 0 0 28px;
  max-width: 44ch;
}
.v2-markets-stat {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(244,236,216,0.20);
}
.v2-markets-stat:last-child { border-bottom: 1px solid rgba(244,236,216,0.20); }
.v2-markets-stat .num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  color: var(--c-goldenrod);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  min-width: 70px;
}
.v2-markets-stat .label {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
  color: var(--paper-muted);
}

.v2-markets-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.v2-market-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid rgba(244,236,216,0.18);
  cursor: pointer;
  transition: padding-left 200ms;
}
.v2-market-row:last-child { border-bottom: 1px solid rgba(244,236,216,0.18); }
.v2-market-row:hover { padding-left: 8px; }
.v2-market-row .idx {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--c-goldenrod);
}
.v2-market-row .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--c-paper);
  letter-spacing: -0.008em;
}
/* The town is a filter a visitor reads down the column, not an aside. */
.v2-market-row .name .town {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-goldenrod);
  margin-left: 12px;
}
.v2-market-row .day {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-muted);
}

.v2-markets-foot {
  margin-top: 40px;
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
}

/* ===== Newsletter strip — slim ===== */
.v2-newsletter {
  background: var(--c-paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 56px 0;
}
.v2-newsletter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 760px) { .v2-newsletter-grid { grid-template-columns: 1fr; gap: 24px; } }
.v2-newsletter h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  color: var(--c-tft-green);
  margin: 0 0 8px;
  letter-spacing: -0.012em;
}
/* The subhead states what someone is signing up for and how often. That is a
   promise, not an ornament — it reads in the sans at a measured color. */
.v2-newsletter p {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
  max-width: 44ch;
}
.v2-newsletter form {
  display: flex; gap: 8px; align-items: stretch;
}
.v2-newsletter input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 14px;
  background: var(--c-cream);
  border: 1px solid var(--rule-strong);
  border-radius: 1px;
  color: var(--c-warm-black);
  letter-spacing: 0.02em;
}
.v2-newsletter input:focus { outline: 1px solid var(--c-autumn-orange); outline-offset: 1px; }
.v2-newsletter button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--c-tft-green);
  color: var(--c-paper);
  padding: 0 20px;
  border-radius: 1px;
}
.v2-newsletter button:hover { background: var(--c-oxblood); }

/* ===== Sponsors strip — minimal ===== */
.v2-sponsors {
  background: var(--c-cream);
  padding: 80px 0 96px;
  text-align: center;
}
.v2-sponsors h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  color: var(--c-tft-green);
  letter-spacing: -0.012em;
  margin: 14px 0 28px;
}
/* ===== Sponsor list ======================================================
   Set like the donor roll in a printed programme: names only, smaller than
   body text, centred in columns divided by hairlines, and framed above and
   below by the same rule. At 46 names a list has to recede into texture and
   read as one generous whole; it is not 46 things to look at one by one.

   Each name stays on one line on wider screens, so an entry is always a single
   line and the columns keep an even rhythm. */
.v2-sponsor-list {
  list-style: none;
  margin: 0 auto;
  padding: 26px 0;
  max-width: 1000px;
  columns: 3;
  column-gap: 0;
  column-rule: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.v2-sponsor-list li {
  break-inside: avoid;
  padding: 0 20px;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 2;
  color: var(--ink);
  white-space: nowrap;
}
/* The count sits between the heading and the list, in a quieter italic than
   either. Counted from the list by the script, so it
   cannot drift out of date when a sponsor is added. */
.v2-sponsor-count {
  margin: -16px 0 24px;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-muted);
}
/* Phones only (see the 620px block below). */
.v2-sponsor-more { display: none; }
@media (max-width: 900px) {
  .v2-sponsor-list { columns: 2; }
}
@media (max-width: 620px) {
  /* Two columns this narrow wrap half the names, so a phone gets one centred
     column instead, with every name still on one line. */
  .v2-sponsor-list { columns: 1; padding: 18px 0; }
  .v2-sponsor-list li { font-size: 14px; line-height: 1.65; }

  /* One column of 46 names is about 1,500px of scrolling, so a phone shows
     the first twelve and a button for the rest. The class is only added by
     the script, so without it nothing is ever hidden. */
  .v2-sponsor-list.is-collapsible:not(.is-expanded) li:nth-child(n+13) { display: none; }
  .v2-sponsor-more:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    padding: 8px 4px;
    background: none;
    border: 0;
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 15px;
    color: var(--c-tft-green);
    cursor: pointer;
  }
  .v2-sponsor-more::after {
    content: "\2193";
    font-style: normal;
    color: var(--c-autumn-orange-text);
  }
  .v2-sponsor-more[aria-expanded="true"]::after { content: "\2191"; }
  .v2-sponsor-more:focus-visible {
    outline: 2px solid var(--c-tft-green);
    outline-offset: 2px;
  }
}
.v2-sponsors-foot {
  margin-top: 36px;
}

/* ===== Footer — quieter ===== */
.v2-footer {
  background: var(--c-tft-green);
  color: var(--c-paper);
  padding: 72px 0 24px;
}
.v2-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 880px) { .v2-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 540px) { .v2-footer-grid { grid-template-columns: 1fr; } }
/* Logo plus one of the brand's own hand-drawn illustrations, sat on the
   same baseline and knocked out to white together. */
.v2-footer-mark {
  display: flex; align-items: flex-end; gap: 18px;
  margin-bottom: 18px;
}
.v2-footer-brand img {
  /* Tight viewBox, as in the nav; keeps roughly the footer:nav size ratio. */
  height: 64px;
  width: auto;
  /* assets/logos/TFT_logo_white.png is a blank white rectangle - a single
     colour, no artwork - so every footer was rendering an empty box. Use the
     real mark and knock it out to white instead of relying on a second file
     that has to be kept in sync. */
  filter: brightness(0) invert(1);
}
/* tractor-trim.png is cropped tight to the drawing, so it sits on the logo's
   baseline without offsets and can shrink when the four-column footer gets
   narrow (just above 880px) instead of pushing into the Visit column. */
.v2-footer-brand .v2-footer-illust {
  height: auto;
  width: 100px;
  flex: 0 1 auto;
  min-width: 0;
  opacity: 0.85;
}
@media (max-width: 540px) {
  .v2-footer-brand img { height: 56px; }
  .v2-footer-brand .v2-footer-illust { width: 90px; height: auto; }
}
.v2-footer-brand p {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper-ink);
  margin: 0 0 14px;
  max-width: 32ch;
}
.v2-footer-brand address {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 13px;
  line-height: 1.6;
  color: var(--paper-muted);
}
.v2-footer-col h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-goldenrod);
  margin: 4px 0 16px;
}
.v2-footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.v2-footer-col a {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--paper-ink);
  transition: color 200ms;
}
.v2-footer-col a:hover { color: var(--c-goldenrod); }
.v2-footer-meta {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid rgba(244,236,216,0.18);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--paper-muted);
}

/* social */
.v2-social { display: flex; gap: 10px; margin-top: 8px; }
.v2-social a {
  width: 32px; height: 32px;
  border: 1px solid rgba(244,236,216,0.45);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 200ms, border-color 200ms;
}
.v2-social a:hover { background: var(--c-goldenrod); border-color: var(--c-goldenrod); color: var(--c-tft-green); }
.v2-social svg { width: 14px; height: 14px; }

/* ---- Farmers' community button ------------------------------
   The door into the Circle community at community.farmers-table.org.
   Paired with Donate at the far right of the bar so the two read as one
   set of actions: Donate keeps its outline, this one is filled brand
   green, which puts it first in the eye without a second typographic
   voice. Same 12px uppercase letterspacing as Donate, same 1px corner.

   The small line does the audience sorting, so a market-goer knows to
   skip it. Vertical padding is trimmed to 5px because this button
   carries two lines and Donate carries one; the two end up the same
   height, which is the point.

   Three widths: the full label on desktop, "Community" once the nav
   collapses at 880px, and the icon alone under 420px where the bar is
   already carrying the logo, Donate and the hamburger.
   ------------------------------------------------------------ */
.v2-nav-actions { display: flex; align-items: stretch; gap: 10px; flex: none; }
.v2-nav-join {
  display: inline-flex; align-items: center; gap: 9px;
  flex: none;
  background: var(--c-tft-green); color: var(--c-paper);
  border: 1px solid var(--c-tft-green);
  padding: 5px 16px;
  border-radius: 1px;
  text-decoration: none;
  transition: background 200ms, border-color 200ms;
}
.v2-nav-join:hover { background: #0F5B31; border-color: #0F5B31; }
.v2-nav-join:focus-visible { outline: 2px solid var(--c-tft-green); outline-offset: 3px; }
.v2-nav-join-icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.v2-nav-join-text { display: flex; flex-direction: column; gap: 2px; }
.v2-nav-join-label, .v2-nav-join-label-sm {
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  line-height: 1.1; white-space: nowrap;
}
.v2-nav-join-label-sm { display: none; }
.v2-nav-join-sub {
  font-family: var(--font-body); font-weight: 500; font-size: 8.5px;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  color: var(--paper-muted); white-space: nowrap;
}
@media (max-width: 880px) {
  .v2-nav-actions { gap: 8px; }
  .v2-nav-join { padding: 5px 13px; gap: 7px; }
  .v2-nav-join-label { display: none; }
  .v2-nav-join-label-sm { display: block; }
}
@media (max-width: 420px) {
  .v2-nav-join { padding: 8px 9px; gap: 0; }
  .v2-nav-join-text { display: none; }
}