/* ============================================================
   Hart Seed Co. — Design System
   Tokens + shared site chrome (utility bar, header, buttons,
   badges, footer). Linked by every page so brand values live
   in exactly one place.

   Token values are from the Claude Design handoff
   ("Hart Seed Co. — Marketing Landing Page"). Warm neutrals
   only: no pure white, no cold greys, brown-cast shadows.

   Label typeface is Montserrat (swapped from the handoff's Oswald per
   client preference) — only weights 500/600 are used anywhere.
   ============================================================ */

/* ---- Fonts ------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Montserrat:wght@500;600&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---- Brand core ---------------------------------------- */
  --hart-red: #A8131A;
  --hart-red-deep: #87090F;
  --hart-red-bright: #C4262C;

  --garden-green: #2E5A34;
  --garden-green-deep: #1F3F24;
  --sage: #6E8C5A;

  --harvest-gold: #D69A2D;
  --harvest-gold-deep: #B47C18;

  /* ---- Parchment / neutrals (warm) ----------------------- */
  --parchment: #F7EFDF;
  --parchment-deep: #EFE4CD;
  --cream: #FFFBF2;
  --ink: #271F18;
  --bark: #5A4A38;
  --stone: #8B7B66;
  --line: #E2D4BC;
  --line-strong: #CDB994;
  --soil: #3A2E22;

  /* ---- Semantic feedback --------------------------------- */
  --positive: #2E7D43;
  --warning: #C9871F;
  --danger: #B42318;
  --info: #2B6F8C;

  /* ---- Semantic aliases ---------------------------------- */
  --bg-page: var(--parchment);
  --bg-sunken: var(--parchment-deep);
  --surface-card: var(--cream);
  --surface-dark: var(--soil);

  --text-strong: var(--ink);
  --text-body: #3B3026;
  --text-muted: var(--bark);
  --text-faint: var(--stone);
  --text-on-red: #FFF6E8;
  --text-on-dark: #F2E7D2;

  --border-subtle: var(--line);
  --border-strong: var(--line-strong);

  --accent: var(--hart-red);
  --accent-hover: var(--hart-red-deep);
  --accent-contrast: #FFF6E8;
  --focus-ring: color-mix(in oklab, var(--hart-red) 55%, white);

  /* ---- Type ---------------------------------------------- */
  --font-display: 'Zilla Slab', Georgia, 'Times New Roman', serif;
  --font-label: 'Montserrat', 'Arial Narrow', sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tracking-eyebrow: 0.16em;
  --tracking-label: 0.04em;
  --measure: 64ch;

  /* ---- Layout -------------------------------------------- */
  --container-lg: 1140px;
  --container-xl: 1320px;
  --section-y: clamp(48px, 6vw, 96px);
  --gutter: clamp(20px, 5vw, 56px);

  /* ---- Shape / depth / motion ---------------------------- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border-stitch: 2px solid var(--ink);

  --shadow-xs: 0 1px 2px rgba(58, 46, 34, 0.10);
  --shadow-sm: 0 2px 6px rgba(58, 46, 34, 0.10);
  --shadow-md: 0 6px 18px rgba(58, 46, 34, 0.12);
  --shadow-lg: 0 16px 40px rgba(58, 46, 34, 0.16);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ---- Base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  margin: 0 0 0.4em;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
img { max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
::selection { background: color-mix(in oklab, var(--harvest-gold) 40%, white); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ---- Buttons ---------------------------------------------- */
.hart-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-label); font-weight: 600; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.08em; line-height: 1;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.hart-btn:active { transform: scale(0.98); }
.hart-btn--sm { padding: 8px 16px; font-size: 0.74rem; gap: 6px; }
.hart-btn--lg { padding: 16px 32px; font-size: 0.95rem; gap: 10px; }

.hart-btn--primary { background: var(--hart-red); color: var(--accent-contrast); box-shadow: var(--shadow-sm); }
.hart-btn--primary:hover { background: var(--hart-red-deep); color: var(--accent-contrast); }

.hart-btn--secondary { background: var(--cream); color: var(--hart-red); border-color: var(--hart-red); }
.hart-btn--secondary:hover { background: var(--hart-red); color: var(--accent-contrast); }

.hart-btn--green { background: var(--garden-green); color: var(--text-on-dark); box-shadow: var(--shadow-sm); }
.hart-btn--green:hover { background: var(--garden-green-deep); color: var(--text-on-dark); }

.hart-btn--ghost { background: transparent; color: var(--text-strong); }
.hart-btn--ghost:hover { background: color-mix(in oklab, var(--hart-red) 8%, transparent); }

/* The signature seed-packet outline. */
.hart-btn--stitch { background: var(--harvest-gold); color: var(--ink); border: 2px solid var(--ink); }
.hart-btn--stitch:hover { background: var(--harvest-gold-deep); color: var(--ink); }

/* On the red retailer band the secondary button inverts. */
.hart-btn--on-red { background: transparent; color: #FFF6E8; border-color: rgba(255, 246, 232, 0.6); }
.hart-btn--on-red:hover { background: rgba(255, 246, 232, 0.12); color: #FFF6E8; }

/* ---- Badge ------------------------------------------------ */
.hart-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-label); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.08em; line-height: 1;
  border-radius: var(--radius-xs);
  background: color-mix(in oklab, var(--hart-red) 12%, var(--cream));
  color: var(--hart-red-deep);
}
.hart-badge--gold { background: color-mix(in oklab, var(--harvest-gold) 22%, var(--cream)); color: var(--harvest-gold-deep); }
.hart-badge--green { background: color-mix(in oklab, var(--garden-green) 14%, var(--cream)); color: var(--garden-green-deep); }
.hart-badge--neutral { background: var(--parchment-deep); color: var(--bark); }

/* ---- Utility bar ------------------------------------------ */
.hart-utility {
  background: var(--garden-green); color: var(--text-on-dark);
  font-family: var(--font-label); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: flex; justify-content: center; gap: 22px; flex-wrap: wrap;
  padding: 8px 16px; text-align: center;
}
.hart-utility .sep { opacity: 0.5; }
.hart-utility a { color: #fff; font-weight: 600; text-decoration: none; }

/* ---- Header ----------------------------------------------- */
.hart-header {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 24px;
  background: color-mix(in oklab, var(--bg-page) 88%, transparent);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
/* The flex item is the wrapping anchor, not the <img> — so the anchor is what
   has to refuse to shrink. Pinning only the image lets the anchor collapse and
   squeeze the mark out of aspect ratio. width:auto keeps the ratio regardless. */
.hart-header__brand { flex-shrink: 0; display: flex; align-items: center; }
.hart-header__logo { height: 48px; width: auto; display: block; }
.hart-header__cta { flex-shrink: 0; }
.hart-nav {
  display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin-left: auto;
  font-family: var(--font-label); font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.hart-nav a { color: var(--text-strong); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.hart-nav a:hover { color: var(--hart-red); }
.hart-nav a.hart-btn { color: var(--accent-contrast); }
.hart-nav a[aria-current="page"] { color: var(--hart-red); }

/* On phones the chrome was eating ~65% of the screen before any content, so the
   utility bar collapses to a single line.

   The header goes to two rows: brand + CTA up top, then the links as a
   full-width scrolling rail beneath. One row cannot work — the five links need
   ~460px next to a logo and a button — and cramming them shrank the logo and
   cut the last link mid-word under the CTA. Two rows keeps every link legible
   and still needs no hamburger or JS. */
@media (max-width: 800px) {
  .hart-utility { gap: 10px; padding: 6px 12px; font-size: 11px; flex-wrap: nowrap; }
  /* Keep the phone number and the heritage line; drop the least-load-bearing. */
  .hart-utility > span:first-child,
  .hart-utility > .sep:first-of-type { display: none; }

  .hart-header { padding: 10px 14px; gap: 8px 12px; flex-wrap: wrap; }
  .hart-header__logo { height: 38px; }
  .hart-header__cta { margin-left: auto; padding: 9px 14px; font-size: 0.72rem; }
  .hart-nav {
    order: 3; flex: 1 0 100%; margin-left: 0;
    flex-wrap: nowrap; overflow-x: auto; gap: 18px; font-size: 12px;
    padding-bottom: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hart-nav::-webkit-scrollbar { display: none; }
  .hart-nav a { flex-shrink: 0; }
}

/* The link rail only actually overflows on phone widths; fade its trailing edge
   there so it reads as scrollable rather than clipped. Above this the five
   links fit outright and a fade would just dim the last one for no reason. */
@media (max-width: 520px) {
  .hart-nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}

/* ---- Footer ----------------------------------------------- */
.hart-footer {
  background: var(--soil); color: #C9BCA4;
  padding: clamp(28px, 5vw, 48px) var(--gutter);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px; font-size: 14px;
}
.hart-footer p { margin: 8px 0 0; line-height: 1.7; }
.hart-footer__blurb { margin: 0; line-height: 1.65; }
.hart-footer__logo { height: 44px; margin-bottom: 12px; }
.hart-footer strong {
  color: var(--text-on-dark); font-family: var(--font-label);
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 12.5px; font-weight: 600;
}
.hart-footer a { color: #C9BCA4; text-decoration: none; }
.hart-footer a:hover { color: var(--harvest-gold); text-decoration: underline; }
.hart-footer a.gold { color: var(--harvest-gold); }
.hart-copyright {
  background: var(--soil); text-align: center;
  font-size: 12px; color: #8B7B66; padding: 0 20px 20px;
}

/* ---- Skip link -------------------------------------------- */
.hart-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--hart-red); color: var(--accent-contrast);
  padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0;
  font-family: var(--font-label); text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 0.8rem; text-decoration: none;
}
.hart-skip:focus { left: 0; }