/*
  Emily Peck · PlantPalate site styles.
  Order: tokens, base, shared pieces, then one block per page section (top to bottom),
  then scroll effects and the reduced-motion fallback.
  To change a color or font everywhere, edit the tokens in :root.
*/

/* ---------- Tokens (the Peach look, chosen Oct 21) ---------- */
:root {
  --bg: #fdf5ee;        /* cream: page ground */
  --peach: #f6d9c6;     /* peach: hero, meals, pantry and work grounds */
  --ink: #20372a;       /* body text and headings */
  --soft: #4c5a51;      /* secondary text, 6.4:1 on cream, 5.3:1 on peach */
  --line: #ecd9cb;
  --eyebrow: #2f5a3c;   /* small labels */
  --accent: #3d6b45;    /* the italic "for real life." */
  --btn: #2f5a3c;       /* buttons, green bands, footer */
  --hover: #1f3d2a;
  --pop: #e0652b;       /* orange: shapes, rules and photo blocks only, never text */
  --footer-ink: #f8e6da;
  --focus: #20372a;
  --focus-halo: #fdf5ee;
  --white: #fff;

  --font-body: "Figtree", system-ui, sans-serif;
  --font-display: "Newsreader", Georgia, serif;

  --page-width: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-space: clamp(70px, 9vw, 120px);
  --header-height: 69px;
  --radius: 18px;

  /* cut-out shapes along the hero and pantry edges */
  --edge: clamp(110px, 15vw, 250px);
  --side: calc(max(var(--gutter), (100vw - var(--page-width)) / 2 + var(--gutter)) - 6px);

  color-scheme: light;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
section { padding-block: var(--section-space); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 5px var(--focus-halo); border-radius: 4px; }
[hidden] { display: none !important; }

.wrap { max-width: var(--page-width); margin: 0 auto; padding-inline: var(--gutter); }
.serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }

/* ---------- Shared pieces ---------- */
.eyebrow { display: block; font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--eyebrow); font-weight: 600; }
.small { font-size: 15px; color: var(--soft); }

/* Text Emily still has to write or confirm. Remove the class when the text is final. */
.todo { background: #f3e3bd; padding: 0 0.2em; border-radius: 2px; }

.btn {
  display: inline-flex;
  align-items: center;
  background: var(--btn);
  color: var(--bg);
  text-decoration: none;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.2;
  padding: 13px 22px;
  border-radius: 999px;
  transition: background 0.2s;
}
.btn:hover { background: var(--hover); }
.btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--bg); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px 14px; }

.text-link { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.text-link:hover { color: var(--accent); }

.logo { flex: none; width: 44px; height: 44px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Header (sticky) ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px -20px rgba(32, 55, 42, 0.5);
  transition: background-color 0.3s, box-shadow 0.3s;
}
/* while the header sits over a peach scene (js/scroll-effects.js adds .is-tinted) it is peach too, with no edge */
header.is-tinted { background: var(--peach); box-shadow: none; backdrop-filter: none; }
/* exactly --header-height tall, so the sticky sections and in-page jumps line up with its bottom edge */
header .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 12px; min-height: var(--header-height); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.1; }
.brand small { display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
header nav { display: flex; align-items: center; gap: 24px; font-size: 15px; }
header nav a:not(.btn) { text-decoration: none; padding-block: 8px; }
header nav a:not(.btn):hover { color: var(--accent); }
header .btn { padding: 9px 16px; font-size: 14px; white-space: nowrap; }
/* The two order buttons stay in the top bar at every width where they fit, and never move or hide.
   From 1060px down the bar uses slightly smaller text and gaps. Under 1000px the section links move into the
   Menu button (js/mobile-menu.js), leaving room for the buttons.
   Under 660px even the buttons don't fit next to the name and Menu, so they show under the headline instead
   (.hero-ctas) and in the Menu panel. */
@media (max-width: 1060px) { header nav { gap: 16px; font-size: 14px; } }
@media (max-width: 999px) {
  header nav { gap: 10px; margin-right: 96px; }   /* room for the fixed Menu button */
  header nav a:not(.btn) { display: none; }
}
@media (max-width: 760px) {
  .brand { gap: 8px; }
  .brand .logo { width: 38px; height: 38px; }
}
@media (max-width: 659px) { header nav { display: none; } }

/* ---------- Mobile menu (built by js/mobile-menu.js) ---------- */
.menu-button {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font: 600 14px/1 var(--font-body);
  cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.45);
}
.menu-button .bars { display: grid; gap: 4px; }
.menu-button .bars span { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* centered by the auto margins below, which drop to 0 when the menu is taller than the screen */
  overflow-y: auto;                /* short screens (a phone held sideways): the menu scrolls instead of cutting off */
  overscroll-behavior: contain;
  padding: calc(70px + env(safe-area-inset-top, 0px)) clamp(24px, 8vw, 90px) calc(40px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.menu-panel.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s, visibility 0s; }
.menu-panel ul { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: clamp(6px, 1.4vh, 14px); }
.menu-panel ul a { font-family: var(--font-display); font-size: clamp(40px, 8vw, 76px); line-height: 1.05; text-decoration: none; }
.menu-panel ul a:hover { color: var(--accent); }
.menu-panel .menu-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: clamp(24px, 5vh, 46px); margin-bottom: auto; }
.menu-panel .menu-close { position: fixed; z-index: 1; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; min-height: 44px; padding: 10px 16px; border: 1.5px solid currentColor; border-radius: 999px; background: var(--bg); color: inherit; font: 600 14px/1 var(--font-body); cursor: pointer; }
body.menu-open { overflow: hidden; }
/* shapes scattered in the menu's empty space (built and fitted in js/mobile-menu.js); sizes and images are shared with
   the phone shapes below */
.menu-shapes { position: absolute; inset: 0; pointer-events: none; }
.menu-shapes span { position: absolute; left: var(--x); top: var(--y); rotate: var(--r, 0deg); height: calc(var(--h) * 1.25); background: center / contain no-repeat; }

/* ---------- Cut-out shapes in the side margins (js/edge-shapes.js). Every shape is whole: sized to the margin,
   below the top of its section, and left out if it would run past the bottom. Shown only where the margin is at
   least 90px wide (windows 1272px and up); on narrower screens a margin would only fit slivers. ---------- */
.edge-shapes { position: absolute; inset: 0; z-index: 0; display: none; pointer-events: none; }
@media (min-width: 1272px) { .js .edge-shapes { display: block; } }
.edge-side { --sw: min(var(--edge), var(--side)); position: absolute; top: 0; bottom: 0; width: var(--sw); }
.edge-side.left { left: 0; }
.edge-side.right { right: 0; }
.edge-shape {
  position: absolute;
  top: calc(var(--sw) * var(--y) / 300);
  width: calc(var(--sw) * var(--w) / 300);
  height: calc(var(--sw) * var(--h) / 300);
  background: center / contain no-repeat;
}
.left .edge-shape { left: calc(var(--sw) * var(--x) / 300); }
.right .edge-shape { right: calc(var(--sw) * var(--x) / 300); transform: scaleX(-1); }   /* the right side is the left mirrored */
.edge-shape.leaf { background-image: url(../img/shapes/leaf.svg); }
.edge-shape.dot { background-image: url(../img/shapes/dot.svg); }
.edge-shape.petal { background-image: url(../img/shapes/petal.svg); }
.edge-shape.fruit { background-image: url(../img/shapes/fruit.svg); }
.edge-shape.disc { background-image: url(../img/shapes/disc.svg); }
.edge-shape.frond { background-image: url(../img/shapes/frond.svg); }
.edge-shape.curl { background-image: url(../img/shapes/curl.svg); }
.edge-shape.half { background-image: url(../img/shapes/half.svg); }
.edge-shape.bud { background-image: url(../img/shapes/bud.svg); }

/* ---------- Phone-only shapes. Phones have no side margins for the shapes above, so a few of the same shapes sit in space
   that is already empty: beside the hero headline, in the empty band at the top or bottom of a few sections, and beside
   the granola jar. They add no height and never cover text or get cut. Hidden on wider screens.
   Each group is a small box; every shape in it has its own spot and tilt (--x, --y, --r, set in index.html), so the
   groups look scattered like the desktop shapes instead of lined up. ---------- */
.phone-shapes { display: none; }
.phone-shapes span { position: absolute; left: var(--x); top: var(--y); rotate: var(--r, 0deg); height: calc(var(--h) * var(--k, 1)); background: center / contain no-repeat; }
:is(.phone-shapes, .menu-shapes) .leaf { --h: 54px; aspect-ratio: 187.46 / 237.46; background-image: url(../img/shapes/leaf.svg); }
:is(.phone-shapes, .menu-shapes) .dot { --h: 9px; aspect-ratio: 1; background-image: url(../img/shapes/dot.svg); }
:is(.phone-shapes, .menu-shapes) .petal { --h: 30px; aspect-ratio: 83.4 / 102.49; background-image: url(../img/shapes/petal.svg); }
:is(.phone-shapes, .menu-shapes) .fruit { --h: 38px; aspect-ratio: 1; background-image: url(../img/shapes/fruit.svg); }
:is(.phone-shapes, .menu-shapes) .disc { --h: 34px; aspect-ratio: 155 / 154.89; background-image: url(../img/shapes/disc.svg); }
:is(.phone-shapes, .menu-shapes) .frond { --h: 46px; aspect-ratio: 94.88 / 159.59; background-image: url(../img/shapes/frond.svg); }
:is(.phone-shapes, .menu-shapes) .curl { --h: 28px; aspect-ratio: 58.2 / 66.26; background-image: url(../img/shapes/curl.svg); }
:is(.phone-shapes, .menu-shapes) .half { --h: 24px; aspect-ratio: 104.18 / 76.69; background-image: url(../img/shapes/half.svg); }
:is(.phone-shapes, .menu-shapes) .bud { --h: 26px; aspect-ratio: 61.14 / 64.19; background-image: url(../img/shapes/bud.svg); }
.shape-corner { --k: 1.2; }
.shape-corner .leaf { --h: 48px; }   /* stays inside the 70px band */
@media (max-width: 659px) {
  .about, .food, .work { position: relative; }
  /* the section's empty top or bottom band (its padding), at the side gutter */
  .shape-corner { display: block; position: absolute; width: var(--w); height: var(--section-space); pointer-events: none; }
  .shape-corner.top { top: 0; }
  .shape-corner.bottom { bottom: 0; }
  .shape-corner.left { left: var(--gutter); }
  .shape-corner.right { right: var(--gutter); }
  /* the open corner right of the jar, ending above the bag (even when the bag drifts up while scrolling) */
  .shape-corner.by-jar { top: 6%; right: 0; width: calc(30% - 12px); height: 105px; }
}
/* the headline is two short lines up to here, with room beside it; the cluster gets its own column, so if the text
   ever needs more room (bigger text settings) the headline wraps instead of running under the shapes */
@media (max-width: 499px) {
  .hero-intro > div:first-child { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; }
  .hero-intro > div:first-child > :not(h1, .shape-cluster) { grid-column: 1 / -1; }
  .shape-cluster { display: block; position: relative; width: 84px; height: 72px; align-self: center; }
}

/* ---------- Hero: text on the peach, the whole photo under it.
   With JavaScript and motion on, the section pins while you scroll: the text moves up like normal scrolling and the photo
   grows from its uncropped size to fill the screen. Only clip-path and transform change, so nothing else on the page moves.
   --p is scroll progress and --g how far the photo has grown. The photo sizes (--sx, --iw and so on) come from js/scroll-effects.js
   (data-grow). Once full, it stays full (data-latch) and the extra scroll room is removed (.is-collapsed).
   Without JavaScript, with reduced motion, or on portrait or very short screens, the text and the whole photo simply sit
   in place. ---------- */
.photo-reveal {
  --in-side: max(var(--gutter), (100vw - var(--page-width)) / 2 + var(--gutter));
  position: relative;
  padding: 0;
}
.photo-reveal .pin {
  position: relative;
  padding-bottom: clamp(24px, 5vh, 56px);
  overflow: hidden;
  background: var(--peach);
}
.hero-intro {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 18px 40px;
  padding: clamp(20px, 5vh, 52px) var(--in-side) clamp(18px, 3.5vh, 32px);
}
.hero-intro .eyebrow { margin: 0 0 10px; }
/* sized by window height too, so on short laptop windows the photo starts bigger */
.hero-intro h1 { margin: 0; font-size: clamp(32px, min(3.9vw, 7.5vh), 58px); line-height: 1.02; font-weight: 350; letter-spacing: -0.02em; text-wrap: balance; }
.hero-intro h1 em { color: var(--accent); font-style: italic; }
.hero-intro .hero-line { margin: 10px 0 0; font-family: var(--font-display); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.25; }
.hero-intro .ctas { gap: 10px 12px; }
.hero-ctas { display: none; }   /* the top bar has these buttons; on phones they show here instead */
@media (max-width: 659px) { .hero-ctas { display: flex; } }
.photo-frame { position: relative; padding-inline: var(--in-side); }
.photo-frame img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 24px; }

/* growing version: landscape windows tall enough for it. On portrait screens (phones, tablets held upright) the whole
   photo is only as tall as the screen is wide, so it would sit above an empty band; there it simply stays in place. */
@media (orientation: landscape) and (min-height: 420px) {
  /* --g: how far the photo has grown, 0 to 1. It takes about 1.2 screens of scrolling, starts and ends gently
     (half straight, half smoothstep), and is full a little before the section unpins. */
  .js:not(.reduced-motion) .photo-reveal {
    --u: min(1, var(--p, 0) / 0.85);
    --g: calc(0.5 * var(--u) + 0.5 * var(--u) * var(--u) * (3 - 2 * var(--u)));
    height: 240vh;
  }
  .js:not(.reduced-motion) .photo-reveal .pin { position: sticky; top: var(--header-height); height: calc(100svh - var(--header-height)); padding: 0; }
  /* the text rides on the photo's top edge, so the two never overlap and no gap opens between them */
  .js:not(.reduced-motion) .hero-intro { position: absolute; inset: 0 0 auto; transform: translateY(calc(var(--sy, 0px) * var(--g) * -1)); }
  .js:not(.reduced-motion) .photo-frame {
    position: absolute;
    inset: 0;
    padding: 0;
    clip-path: inset(
      calc(var(--sy) * (1 - var(--g))) calc(var(--sr) * (1 - var(--g)))
      calc(var(--sb) * (1 - var(--g))) calc(var(--sx) * (1 - var(--g)))
      round calc(24px * (1 - var(--g)))
    );
  }
  .js:not(.reduced-motion) .photo-frame img {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--iw);
    max-width: none;
    border-radius: 0;
    transform-origin: 0 0;
    transform:
      translate(calc(var(--sx) + (var(--ex) - var(--sx)) * var(--g)), calc(var(--sy) + (var(--ey) - var(--sy)) * var(--g)))
      scale(calc(var(--s0) + (1 - var(--s0)) * var(--g)));
  }
  /* full and scrolled past: the text sits above the full-width photo, with no extra scroll room */
  .js:not(.reduced-motion) .photo-reveal.is-collapsed { height: auto; }
  .js:not(.reduced-motion) .is-collapsed .pin { position: relative; top: 0; height: auto; }
  .js:not(.reduced-motion) .is-collapsed .hero-intro { position: relative; transform: none; }
  .js:not(.reduced-motion) .is-collapsed .photo-frame { position: relative; height: calc(100svh - var(--header-height)); }
}
@media (max-width: 999px) { .loc { display: none; } }
@media (max-width: 900px) { .hero-intro { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 760px) {
  .hero-intro { gap: 16px; padding-top: 20px; padding-bottom: 18px; }
  .hero-intro h1 { font-size: clamp(30px, 8.6vw, 40px); }
  .hero-intro .hero-line { margin-top: 8px; font-size: 18px; }
  .hero-intro .btn { padding: 11px 16px; font-size: 14.5px; }
}

/* ---------- About ---------- */
.about .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.about-photos { position: relative; padding-bottom: 18%; }
.about-photos .main-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; border-radius: var(--radius); box-shadow: 16px 16px 0 var(--pop); }
/* snapshot straightens as the section scrolls past */
.about-photos figure {
  position: absolute;
  right: -6%;
  bottom: 0;
  width: 58%;
  margin: 0;
  padding: 10px 10px 34px;
  background: var(--white);
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.35);
  transform: rotate(calc(-7deg + var(--p, 0) * 7deg));
}
.about-photos figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about-photos figcaption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 13px; color: var(--soft); }
.about h2 { margin: 12px 0 10px; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; }
.about .lede { margin: 0 0 22px; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; color: var(--accent); font-style: italic; }
.about p { max-width: 58ch; margin: 0 0 16px; }
@media (max-width: 820px) { .about .wrap { grid-template-columns: 1fr; } .about-photos { max-width: 440px; } .about-photos figure { right: 0; } }
/* the accent sits whole in the right margin, scaled down if the margin is narrower; hidden where it would be slivers */
@media (min-width: 1272px) {
  .about { background-image: url(../img/acc-a-peach-right.svg); background-position: right 0 top 70px; background-size: min(208px, var(--side)) auto; background-repeat: no-repeat; }
}

/* ---------- Eat my food (CookUnity) ---------- */
.food { background: var(--peach); }
.food-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 70px); align-items: start; margin-bottom: clamp(40px, 6vw, 70px); }
.food h2 { margin: 10px 0 0; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; }
.food-head p { max-width: 54ch; margin: 0 0 14px; }
.dishes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 36px) clamp(14px, 2vw, 24px); }
.dish img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; background: var(--white); }
.dish h3 { margin: 14px 0 4px; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.1; }
.food .cta { margin-top: clamp(40px, 6vw, 60px); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.food .cta p { margin: 0; }
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(20px, 3vw, 44px); margin-top: clamp(40px, 6vw, 64px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line); }
.reviews figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.reviews blockquote { margin: 0; }
.reviews blockquote p { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 1.9vw, 25px); line-height: 1.3; }
.reviews figcaption { font-size: 13.5px; color: var(--soft); }
@media (max-width: 760px) {
  .food-head { grid-template-columns: 1fr; }
  .dishes { grid-template-columns: 1fr 1fr; }
  .dish h3 { font-size: 20px; min-height: 2.2em; }
  .reviews { grid-template-columns: 1fr; }
}

/* ---------- Food + health: photo stays beside the three steps (no pinning, works at any size or zoom) ---------- */
.health .wrap { display: grid; grid-template-columns: 5fr 6fr; gap: 48px clamp(32px, 6vw, 80px); align-items: start; }
.health-photo { position: sticky; top: calc(var(--header-height) + 24px); margin: 0; }
.health-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 35%; border-radius: var(--radius); box-shadow: 16px 16px 0 var(--pop); }
.health h2 { margin: 10px 0 28px; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; }
.steps { display: grid; gap: 40px; }
.step { border-top: 1px solid var(--line); padding-top: 22px; }
.step h3 { margin: 6px 0 10px; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.15; }
.step p { max-width: 56ch; margin: 0 0 12px; }
.step .ctas { margin-top: 16px; }
@media (max-width: 820px) {
  .health .wrap { grid-template-columns: 1fr; }
  .health-photo { position: static; max-width: 520px; }
  .health-photo img { aspect-ratio: 4 / 3; }
  .step h3 { font-size: 24px; }
}

/* ---------- Food, climate + community: dark green band ---------- */
.climate {
  --ink: #fbf3ec;
  --soft: #eadbcf;
  --line: rgba(246, 217, 198, 0.3);
  --eyebrow: #f6d9c6;
  --accent: #f6d9c6;
  --focus: #fbf3ec;
  --focus-halo: #2f5a3c;
  background: var(--btn);
  color: var(--ink);
  border-top: 4px solid var(--pop);
}
.climate-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(32px, 6vw, 90px); align-items: start; }
.climate h2 { margin: 12px 0 0; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; }
.climate-head p { max-width: 54ch; margin: 0 0 14px; }
.events { display: grid; grid-template-columns: 1fr 1fr; gap: 28px clamp(24px, 4vw, 56px); margin-top: clamp(36px, 5vw, 56px); padding: 0; list-style: none; }
.event { border-top: 1px solid var(--ink); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.event h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; }
.event p { margin: 0; color: var(--soft); max-width: 54ch; }
.event .links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 6px; }
.event .links a { padding-block: 6px; }
.event .links .text-link:hover { color: #fff; }
/* both photos share one peach block behind them, kept inside the page grid */
.climate-photos { position: relative; display: grid; grid-template-columns: 1fr 2fr; gap: 12px; margin-top: clamp(36px, 5vw, 56px); padding: 0 16px 16px 0; }
.climate-photos::before { content: ""; position: absolute; inset: 16px 0 0 16px; background: var(--peach); border-radius: var(--radius); }
.climate-photos img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.climate-photos img:first-child { aspect-ratio: 2 / 3; }
.climate-photos img:last-child { aspect-ratio: 4 / 3; }
@media (max-width: 820px) {
  .climate-head, .events { grid-template-columns: 1fr; }
}

/* ---------- Pantry ---------- */
.pantry { position: relative; background: var(--peach); }
.pantry > .wrap { position: relative; }
.pantry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.pantry-imgs { position: relative; height: min(560px, 110vw); }
.pantry-imgs img { position: absolute; object-fit: cover; background: var(--white); border-radius: var(--radius); }
.pantry-imgs .jar { left: 0; top: 0; width: 70%; aspect-ratio: 4 / 5; object-position: 42% 50%; transform: translateY(calc((var(--p, 0) - 0.5) * -40px)); }
.pantry-imgs .bag { right: 0; bottom: 0; width: 46%; aspect-ratio: 3 / 4; border: 1px solid var(--line); transform: translateY(calc((var(--p, 0) - 0.5) * 60px)); }
.pantry h2 { margin: 10px 0 12px; font-size: clamp(40px, 5vw, 64px); line-height: 1; }
.pantry-sub { margin: 0 0 18px; max-width: 48ch; }
.price { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; margin: 0 0 14px; }
.pantry .mail-line { margin: 10px 0 0; font-size: 15px; color: var(--soft); }
.pantry .delivery { margin: 14px 0 0; font-size: 15px; color: var(--soft); }
.ingredients { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; color: var(--soft); max-width: 60ch; }
.ingredients b { color: var(--ink); }
@media (max-width: 820px) { .pantry-grid { grid-template-columns: 1fr; } }

/* ---------- From my kitchen ---------- */
.kitchen .wrap { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.kitchen h2 { margin: 12px 0 16px; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; }
.kitchen p { max-width: 48ch; }
.kitchen .soon { font-weight: 600; color: var(--eyebrow); }
.kitchen-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kitchen-photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 820px) { .kitchen .wrap { grid-template-columns: 1fr; } }

/* ---------- Work with me ---------- */
.work { background-color: var(--peach); }
/* the accent sits whole in the left margin, scaled down if the margin is narrower; hidden where it would be slivers */
@media (min-width: 1272px) {
  .work { background-image: url(../img/acc-a-peach-left.svg); background-position: left 0 bottom 50px; background-size: min(249px, var(--side)) auto; background-repeat: no-repeat; }
}
.work h2 { max-width: 16ch; margin: 12px 0 26px; font-size: clamp(40px, 5.2vw, 70px); line-height: 1; letter-spacing: -0.02em; }
.work-cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.work-intro p { margin: 0 0 16px; max-width: 52ch; }
.work-intro .ctas { margin-top: 22px; align-items: center; }
.work-intro .mail { font-size: 15px; color: var(--soft); }
/* offerings: one row per kind of work; tap a row to read more */
.offers { border-top: 1px solid var(--ink); counter-reset: work; }
.offers details { border-bottom: 1px solid var(--line); }
.offers summary {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-block: 16px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
}
.offers summary::-webkit-details-marker { display: none; }
.offers summary::before { content: counter(work, decimal-leading-zero); counter-increment: work; flex: none; width: 2ch; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.1em; color: var(--eyebrow); }
.offers summary::after { content: "+"; margin-left: auto; font-family: var(--font-body); font-size: 22px; line-height: 1; color: var(--eyebrow); transition: transform 0.2s; }
.offers details[open] summary::after { transform: rotate(45deg); }
.offers details p { margin: 0 0 18px calc(2ch + 18px); max-width: 52ch; color: var(--soft); font-size: 16px; }
@media (max-width: 820px) { .work-cols { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
footer {
  --focus: #f8e6da;
  --focus-halo: #2f5a3c;
  padding-block: 40px;
  background: var(--btn);
  color: var(--footer-ink);
  border-top: 4px solid var(--pop);
}
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
footer .brand b { color: var(--bg); }
footer .brand small { color: var(--footer-ink); }
footer ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 0; padding: 0; font-size: 15px; }
footer a { display: inline-block; padding-block: 8px; }
footer .text-link:hover { color: #fff; }

/* ---------- Fade-in on scroll (js/scroll-effects.js adds .is-visible). Without JavaScript everything just shows. ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s ease; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Reduced motion: everything still and in place ---------- */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.reduced-motion .about-photos figure { transform: rotate(-3deg); }
.reduced-motion .pantry-imgs :is(.jar, .bag) { transform: none; }
.reduced-motion [data-reveal] { transition: none; }
.reduced-motion header nav .btn { transition: none; }