/* ============================================================
   NOURISH — Design System tokens & shared components
   ============================================================ */

/* ---- Design tokens ---- */
:root {
  /* Core greens & teals */
  --fern:      #3E8C50;
  --meadow:    #6AB47A;
  --mist:      #A8D4AE;
  --lagoon:    #2A8A88;
  --sea-glass: #72BAB8;

  /* Warm accents */
  --harvest: #E07830;
  --ember:   #C94E2A;
  --honey:   #F2C06A;

  /* Neutrals */
  --soil:    #3D3D35;
  --paper:   #FAF7F1;
  --cream:   #F4EFE3;
  --line:    #E5DFD3;
  --muted:   #8A857A;

  --max:     1280px;

  /* Type scale */
  --serif: "Playfair Display", "Freight Display Pro", Georgia, serif;
  --sans:  "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---- Base resets ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--soil);
  background: var(--paper);
  line-height: 1.55;
  font-size: 17px;
}
img { max-width: 100%; display: block; }
a { color: var(--lagoon); text-decoration: none; }
a:hover { color: var(--fern); }

/* ---- Type styles ---- */
.h-display {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--soil);
  margin: 0;
}
.h-display.xl  { font-size: clamp(48px, 6vw, 84px); }
.h-display.lg  { font-size: clamp(36px, 4.5vw, 60px); }
.h-display.md  { font-size: clamp(28px, 3.2vw, 40px); }

.h-sans {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}
.h-sans.lg { font-size: 32px; }
.h-sans.md { font-size: 22px; }
.h-sans.sm { font-size: 16px; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lagoon);
}
.eyebrow.fern { color: var(--fern); }
.eyebrow.ember { color: var(--ember); }
.eyebrow.honey { color: #b88a30; }
.eyebrow.cream { color: var(--cream); }

p { margin: 0 0 1em; }
p.lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.45;
  color: var(--soil);
}

/* ---- Layout primitives ---- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 32px; }
.row { display: grid; gap: 32px; }

/* ---- Buttons & tags ---- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 2px;
  border: 1.5px solid var(--fern);
  background: var(--fern);
  color: #fff;
  cursor: pointer;
  transition: 0.15s ease;
}
.btn:hover { background: #2f6e3e; border-color: #2f6e3e; color: #fff; }
.btn.outline { background: transparent; color: var(--fern); }
.btn.outline:hover { background: var(--fern); color: #fff; }
.btn.ember { background: var(--ember); border-color: var(--ember); }
.btn.ember:hover { background: #a73d1f; border-color: #a73d1f; }
.btn.cream-outline { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn.cream-outline:hover { background: var(--cream); color: var(--soil); }

.tag {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 2px;
  background: var(--cream);
  color: var(--soil);
}
.tag.fern   { background: var(--fern);    color: #fff; }
.tag.lagoon { background: var(--lagoon);  color: #fff; }
.tag.ember  { background: var(--ember);   color: #fff; }
.tag.honey  { background: var(--honey);   color: var(--soil); }
.tag.harvest{ background: var(--harvest); color: #fff; }
.tag.meadow { background: var(--meadow);  color: #fff; }
.tag.outline-soil { background: transparent; color: var(--soil); border: 1px solid var(--soil); }

/* ---- Site chrome (nav + footer) ---- */
.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  max-width: var(--max); margin-inline: auto;
}
.site-nav .brand { display: flex; align-items: center; gap: 10px; }
.site-nav .brand img { width: 38px; height: 38px; }
.site-nav .brand span {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 26px;
  color: var(--fern);
  letter-spacing: -0.01em;
}
.site-nav nav { display: flex; gap: 28px; align-items: center; }
.site-nav nav a {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soil);
}
.site-nav nav a:hover { color: var(--fern); }
.site-nav nav .pill {
  padding: 9px 16px;
  border: 1.5px solid var(--fern);
  color: var(--fern);
  border-radius: 999px;
}
.site-nav nav .pill:hover { background: var(--fern); color: #fff; }

/* New IA nav (Videos · Learn · Explore · Act · Store + utility right) */
.site-nav nav .primary { font-weight: 600; font-size: 13px; letter-spacing: 0.14em; }
.site-nav nav .util-sep { display: inline-block; width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.site-nav nav .util {
  font-size: 12px; letter-spacing: 0.12em; color: var(--muted); font-weight: 500;
}
.site-nav nav .util:hover { color: var(--soil); }
.site-nav nav .pill.ember-pill {
  background: var(--ember); border-color: var(--ember); color: #fff;
}
.site-nav nav .pill.ember-pill:hover { background: #a73d1f; border-color: #a73d1f; }

.site-footer {
  background: var(--soil);
  color: var(--cream);
}
.site-footer .wrap { padding-block: 64px; }
.site-footer .cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px;
  margin-bottom: 56px;
}
.site-footer h4 {
  font-family: var(--sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--honey); margin: 0 0 18px;
}
.site-footer a { color: var(--cream); font-size: 15px; }
.site-footer a:hover { color: var(--honey); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.site-footer .meta {
  border-top: 1px solid #57574f;
  padding-top: 28px;
  display: flex; justify-content: space-between;
  font-size: 13px; color: #aca89c;
}

/* ---- Image placeholder helpers (Picsum-backed; CSS fallback) ---- */
.photo {
  position: relative;
  background: var(--mist);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.08)); pointer-events: none; }

/* Reusable hero overlay */
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55));
}

/* Section spacing */
.section { padding-block: 96px; }
.section.tight { padding-block: 64px; }

/* Soft band */
.band-cream { background: var(--cream); }
.band-mist  { background: #EBF3EC; }
.band-fern  { background: var(--fern); color: #fff; }
.band-fern .eyebrow { color: var(--honey); }
.band-soil  { background: var(--soil); color: var(--cream); }
.band-soil h2, .band-soil h3, .band-soil .h-display { color: var(--cream); }
.band-lagoon{ background: var(--lagoon); color: #fff; }

/* Cut-out leaf decoration */
.leaf-deco {
  position: absolute;
  pointer-events: none;
  opacity: 0.85;
}

/* ---- Brand logo lockup (real Nourish artwork) ---- */
.site-nav .brand { display: flex; align-items: center; }
.site-nav .brand img.logo-h { height: 48px; display: block; }
/* Override prior 38x38 brand-img rule */
.site-nav .brand img { width: auto; height: 48px; }