/* ===============================================================
   FarmFusion — site.css
   Palette pinned by brief: white dominant, dark green, gold accent.
   Gold is an accent only — rules, eyebrows, CTA. Never a fill.
   =============================================================== */

:root {
  /* Colour */
  --white:      #FFFFFF;
  --paper:      #F7F9F6;   /* barest green cast, for section alternation */
  --green-900:  #0E2E1A;   /* deepest — hero ground, footer */
  --green-700:  #17452A;   /* headings on white */
  --green-500:  #2A6B41;   /* links, active states */
  --gold:       #B5822A;   /* accent — rules, eyebrows, never button text bg */
  --gold-deep:  #9A6E22;   /* CTA background: 4.5:1 against white text */
  --gold-lift:  #E0B45E;   /* on dark only */
  --ink:        #16241C;   /* body text — green-black, never pure black */
  --muted:      #5C6B60;
  --rule:       #E2E8E0;

  /* Type */
  --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale */
  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.6rem + 3vw, 4.2rem);

  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --measure: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.021em;
  color: var(--green-700);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); letter-spacing: -.012em; }

p { margin: 0 0 1.1em; max-width: var(--measure); }

a { color: var(--green-500); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--gold); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; display: block; }

.wrap { width: min(100% - (var(--gutter) * 2), 1180px); margin-inline: auto; }
.narrow { max-width: 720px; }

/* --- Eyebrow: gold hairline + caps label ---------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gold);
  opacity: .35;
}

/* ===============================================================
   HERO — the signature.
   H1 and copy are server-rendered and paint immediately. The
   produce burst is layered behind and initialises only after
   window.load (§15.3). Below 768px it is a static composition.
   =============================================================== */
.hero {
  /* Single source of truth for the green band. The hero's bottom padding
     is derived from it, so the buttons can never collide with the band
     no matter how short or wide the window gets. */
  --band: clamp(72px, 11vh, 130px);

  position: relative;
  background: var(--white);
  /* Top padding kept tight — the previous value left a dead gap above
     the eyebrow. Bottom clears the green band. */
  padding: clamp(1.25rem, 3vh, 2.25rem) 0 calc(var(--band) + clamp(1.5rem, 3vh, 2.75rem));
  overflow: hidden;
  min-height: min(72vh, 620px);
  display: flex;
  align-items: flex-start;
}

.hero__copy {
  position: relative;
  z-index: 3;
  /* NOT ch: that resolves against this element's 1rem font-size, not the
     h1's clamp, which produced a ~290px column and one word per line. */
  max-width: min(58%, 620px);
}

.hero h1 {
  font-size: clamp(2.1rem, 1.1rem + 2.9vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: var(--gold);
  display: block;
}

.hero__lede {
  font-size: var(--step-1);
  color: var(--muted);
  max-width: 34em;
  line-height: 1.5;
}

/* Stage sits behind the copy on desktop, below it on mobile */
.hero__stage {
  position: absolute;
  /* Negative bottom drops the van onto the band and pushes the burst
     zone higher into the white. Right inset keeps the van clear of the
     viewport edge instead of bleeding off it. */
  inset: 0 3% -7% 38%;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
}
/* contain, not cover — the van was being cropped at the right edge */
.hero__stage svg {
  width: 100%;
  height: 96%;
  display: block;
  object-fit: contain;
}

/* Produce pieces — transform driven by scroll in hero.js */
.produce { transform-box: fill-box; transform-origin: center; will-change: transform; }

/* Van sits on a dark green ground band so the white produce reads */
.hero__ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--band);
  background: var(--green-900);
  z-index: 0;
}
.hero__ground::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  opacity: .5;
}

/* --- Buttons -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-0);
  padding: .78em 1.5em;
  border: 1.5px solid var(--green-700);
  background: var(--green-700);
  color: var(--white);
  text-decoration: none;
  border-radius: 2px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  cursor: pointer;
}
.btn:hover { background: var(--green-900); border-color: var(--green-900); color: var(--white); }

.btn--ghost { background: transparent; color: var(--green-700); }
.btn--ghost:hover { background: var(--green-700); color: var(--white); }

/* Gold CTA with white text.
   The background is a shade deeper than --gold: white on the lighter
   accent gold measures 3.4:1, which fails the 4.5:1 minimum for button
   text. This deeper tone reads as the same colour and measures 4.5:1.
   --gold is unchanged and still used for rules, eyebrows and dots. */
.btn--gold {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--white);
}
.btn--gold:hover {
  background: #85601D;
  border-color: #85601D;
  color: var(--white);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }


/* ===============================================================
   SILOS — the homepage's real job is routing three different
   buyers to three different places in one click (§2.1).
   =============================================================== */
.section { padding: clamp(3.5rem, 9vw, 7rem) 0; }
.section--paper { background: var(--paper); border-block: 1px solid var(--rule); }

.silos {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 2.5rem;
}

.silo {
  background: var(--white);
  padding: 0 0 clamp(1.4rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: background .18s ease;
}
.silo > *:not(.silo__art) {
  padding-inline: clamp(1.5rem, 2.8vw, 2.2rem);
}

/* Illustration band. Uses a real photo when one is set, and a drawn
   scene otherwise, so the card never looks like a placeholder. */
.silo__art {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper);
  margin-bottom: 1.1rem;
}
.silo__art img,
.silo__art svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.silo:hover .silo__art img,
.silo:hover .silo__art svg { transform: scale(1.045); }
.silo:hover { background: var(--paper); color: inherit; }
.silo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.silo:hover::before { transform: scaleX(1); }

.silo__num {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--gold);
  letter-spacing: .1em;
}

/* Hand-drawn accent under the section headings — keeps the page from
   reading as a spreadsheet. */
.squiggle {
  display: block;
  width: 120px;
  height: 10px;
  margin: -.2rem 0 1.2rem;
  color: var(--gold);
}
.silo h3 { margin: 0; }
.silo p { color: var(--muted); font-size: var(--step-0); margin: 0; }
.silo__for {
  margin-top: auto;
  padding-top: 1.4rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--muted);
  border-top: 1px solid var(--rule);
}

/* ===============================================================
   SPEC TABLE — this is the SEO engine (§7.4). Monospace because
   these are figures a buyer checks against a label, not prose.
   =============================================================== */
.spec-table-wrap { overflow-x: auto; margin: 2rem 0; border: 1px solid var(--rule); }
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); min-width: 720px; }
.spec-table th {
  background: var(--green-900);
  color: var(--white);
  font-family: var(--mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: left;
  padding: .8rem 1rem;
  white-space: nowrap;
}
.spec-table td { padding: .78rem 1rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.spec-table tbody tr:nth-child(even) { background: var(--paper); }
.spec-table td.num { font-family: var(--mono); white-space: nowrap; }
.spec-table a { font-weight: 600; text-decoration: none; }
.spec-table a:hover { text-decoration: underline; }

/* --- Seasonal notice (§6) ------------------------------------- */
.notice {
  border-left: 3px solid var(--gold);
  background: var(--paper);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.notice strong { font-family: var(--display); color: var(--green-700); }

/* --- Header / footer ------------------------------------------ */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 50;
}
.masthead__in { display: flex; align-items: center; gap: 1.5rem; padding: .9rem 0; }
.logo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.24rem;
  letter-spacing: -.03em;
  color: var(--green-900);
  text-decoration: none;
  white-space: nowrap;
}
.logo span { color: var(--gold); }
.nav { display: flex; gap: 1.4rem; margin-left: auto; align-items: center; }
.nav a { color: var(--ink); text-decoration: none; font-size: var(--step--1); font-weight: 500; }
.nav a:hover { color: var(--gold); }

.basket-count {
  font-family: var(--mono);
  font-size: .7rem;
  background: var(--gold);
  color: var(--green-900);
  border-radius: 99px;
  padding: .1em .5em;
  margin-left: .35em;
}
.basket-count:empty, .basket-count[hidden] { display: none; }

.footer { background: var(--green-900); color: #C9D6CC; padding: clamp(3rem,7vw,5rem) 0 2rem; }
.footer h4 { font-family: var(--display); color: var(--white); font-size: var(--step-0); margin: 0 0 .8rem; }
.footer a { color: #C9D6CC; text-decoration: none; }
.footer a:hover { color: var(--gold-lift); }
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
.footer__base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: var(--step--1); opacity: .75; }

/* --- Breadcrumbs ---------------------------------------------- */
.crumbs { font-family: var(--mono); font-size: var(--step--1); color: var(--muted); padding: 1.2rem 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs span { opacity: .45; margin: 0 .45em; }

/* ===============================================================
   RESPONSIVE + MOTION
   Below 768px the hero is static — no scroll animation (§15.3.3).
   =============================================================== */
@media (max-width: 1100px) {
  .hero__copy { max-width: min(66%, 540px); }
  .hero__stage { inset: 0 2% -6% 42%; }
}

@media (max-width: 860px) {
  .hero {
    min-height: auto;
    padding: 1.25rem 0 0;
    display: block;
    /* Desktop keeps overflow:hidden. On mobile the produce is thrown high
       above the van and must not be clipped at the hero boundary. */
    overflow: visible;
  }
  .hero__copy { max-width: none; }
  .hero h1 { font-size: clamp(2rem, 1.2rem + 4.2vw, 2.9rem); }
  .hero__stage {
    position: relative;
    inset: auto;
    margin: 1.25rem 0 0;
    /* Height matches the van itself. The burst overflows upward into the
       white above rather than being given a padded box to sit in, which
       is what left dead space under the vehicle. */
    height: 190px;
    width: 100%;
    /* Must stay visible: the mobile burst throws produce well above this
       box, and any clipping here would cut the animation dead. */
    overflow: visible;
    align-items: flex-end;
    z-index: 3;
  }
  .hero__stage svg {
    height: auto;
    width: 118%;
    max-width: none;
    margin-left: -9%;
    overflow: visible;
    /* Crop the viewBox to the vehicle: the produce start positions and
       the van occupy roughly the lower two-thirds of the artwork. */
    aspect-ratio: 760 / 300;
    object-fit: cover;
    object-position: 50% 100%;
  }
  .hero__ground { height: var(--band); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .produce { transform: none !important; }
}