/* ============================================================
   CRÈME & CRUMBLES — HOMEPAGE
   Tokens
   ============================================================ */
:root{
  --cream:      #F8F5EF;
  --soft-white: #FCFBF8;
  --linen:      #EFE8DC;
  --brown:      #5B4631;
  --sage:       #8FA07A;
  --olive:      #75855F;
  --olive-hover:#66744F;

  --brown-70: rgba(91, 70, 49, .70);
  --brown-16: rgba(91, 70, 49, .16);
  --brown-10: rgba(91, 70, 49, .10);

  --serif:  'Playfair Display', "Times New Roman", serif;
  --sans:   "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --script:'Playfair Display', Georgia, serif;

  --max:   1440px;
  --inner: 1240px;
  --pad:   clamp(22px, 5vw, 80px);

  --section-y: clamp(64px, 9vw, 144px);
  --header-h:  72px;

  /* Single dial for the hero readability fade. Set to 0 to remove entirely. */
  --hero-fade: .94;

  /* ---- Ken Burns: the site-wide hero animation standard ----
     Reuse by putting class="kenburns" on any hero <img>. */
  --kb-duration: 24s;
  --kb-zoom:     1.08;
  --kb-pan-x:    1.1%;
  --kb-pan-y:    0.5%;
}/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }html{ -webkit-text-size-adjust:100%; }body{
  margin:0;
  background:var(--cream);
  color:var(--brown);
  font-family:var(--sans);
  font-size:clamp(16px, 1.15vw, 19px);
  line-height:1.7;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}body.is-locked{ overflow:hidden; }img{ display:block; max-width:100%; height:auto; }h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:500; color:var(--brown); }p{ margin:0; }a{ color:var(--olive-hover); }:focus-visible{
  outline:2px solid var(--olive);
  outline-offset:3px;
  border-radius:1px;
}.shell{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--pad);
}.skip-link{
  position:absolute; left:50%; top:8px; transform:translate(-50%, -160%);
  z-index:200;
  background:var(--cream); color:var(--brown);
  border:1px solid var(--olive);
  padding:10px 18px;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  transition:transform .18s ease;
}.skip-link:focus{ transform:translate(-50%, 0); }/* Shared type utilities */
.eyebrow{
  font-family:var(--sans);
  font-size:clamp(11px, 1vw, 13px);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brown);
}/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 30px;
  border-radius:0;
  border:1px solid transparent;
  font-family:var(--sans);
  font-size:clamp(12px, .95vw, 14px);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  line-height:1;
  cursor:pointer;
  transition:background-color .28s ease, color .28s ease,
             border-color .28s ease, transform .28s ease;
}.btn:hover{ transform:translateY(-1px); }.btn:active{ transform:translateY(0); }.btn--primary{
  background:var(--olive);
  color:var(--cream);
  border-color:var(--olive);
}.btn--primary:hover{ background:var(--olive-hover); border-color:var(--olive-hover); }

@media (prefers-reduced-motion:reduce){.btn:hover, .btn:active{ transform:none; }
}/* ============================================================
   Header
   ============================================================ */
.header{
  position:relative;
  z-index:60;
  background:var(--soft-white);
  border-bottom:1px solid var(--brown-10);
}.header__bar{
  position:relative;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}/* Logo is centred against the full viewport, not between the nav groups */
.header__logo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  line-height:0;
}.header__logo img{
  width:clamp(190px, 30vw, 340px);
  height:auto;
}.nav{ display:none; }.nav__list{
  display:flex;
  align-items:center;
  gap:clamp(20px, 2.6vw, 46px);
  margin:0; padding:0; list-style:none;
}.nav__link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:clamp(12px, .95vw, 14px);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--brown);
  white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}.nav__link:hover{ color:var(--olive-hover); border-bottom-color:var(--sage); }.nav__link[aria-current="page"]{ border-bottom-color:var(--olive); }.icon-btn{
  font-family:var(--sans);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  padding:0;
  background:none;
  border:0;
  color:var(--brown);
  cursor:pointer;
  transition:color .2s ease;
}.icon-btn:hover{ color:var(--olive-hover); }.icon-btn svg{ width:22px; height:22px; }.burger{ display:inline-flex; }.burger span{
  position:relative;
  display:block;
  width:20px; height:1px;
  background:currentColor;
}.burger span::before,
.burger span::after{
  content:"";
  position:absolute; left:0;
  width:20px; height:1px;
  background:currentColor;
  transition:transform .24s ease, opacity .18s ease;
}.burger span::before{ top:-6px; }.burger span::after{ top:6px; }.burger[aria-expanded="true"] span{ background:transparent; }.burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }.burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }/* Mobile menu panel */
.menu{
  position:fixed;
  inset:var(--header-h) 0 0 0;
  z-index:55;
  background:var(--cream);
  padding:clamp(28px, 8vw, 56px) var(--pad) 40px;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .24s ease, transform .24s ease, visibility .24s;
}.menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }.menu__list{ margin:0; padding:0; list-style:none; }.menu__list li + li{ border-top:1px solid var(--brown-10); }.menu__link{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:60px;
  font-family:var(--sans);
  font-size:16px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--brown);
}.menu__link[aria-current="page"]{ color:var(--olive-hover); }.menu__link svg{ width:19px; height:19px; }/* ============================================================
   Hero — mobile-first editorial stack
   ============================================================ */
.hero{ position:relative; background:var(--cream); }

/* Slow diagonal drift while zooming. Alternating direction means the loop
   turns around at zero velocity, so there is never a reset or a jump. */
@keyframes kenburns{from{ transform:scale(1) translate3d(0, 0, 0); }to{ transform:scale(var(--kb-zoom))
                  translate3d(var(--kb-pan-x), calc(var(--kb-pan-y) * -1), 0); }
}.hero__copy{ max-width:var(--inner); margin-inline:auto; }.hero__title{
  font-size:clamp(44px, 12.4vw, 50px);
  line-height:1.0;
  /* the script line's descender must clear the hero's overflow clip */
  padding-bottom:.08em;
  letter-spacing:-0.005em;
  color:var(--brown);
}.hero__title .line-script{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(48px, 13.6vw, 56px);
  line-height:1.06;
  padding-left:.16em;
  margin-top:.02em;
}.hero__support{
  font-size:clamp(16px, 1.15vw, 19px);
  line-height:1.65;
  color:var(--brown);
  max-width:34ch;
}.hero__support span{ display:block; }.hero__actions .btn{ width:100%; }/* ============================================================
   Farmers market
   ============================================================ */
.market{
  background:var(--cream);
  padding-block:var(--section-y);
  text-align:center;
}/* ============================================================
   Footer
   ============================================================ */
.footer__inner{ max-width:var(--inner); margin-inline:auto; }.footer__colophon p{ max-width:44ch; margin-inline:auto; }

/* ============================================================
   Tablet — 768px and up
   ============================================================ */
@media (min-width:768px){:root{ --header-h:80px; }.hero__title{ font-size:clamp(50px, 7.4vw, 68px); }.hero__title .line-script{ font-size:clamp(56px, 8.2vw, 76px); }.hero__support{ max-width:40ch; }.hero__actions .btn{ width:auto; }
}

/* ============================================================
   Desktop — 1024px and up: overlay hero, full navigation
   ============================================================ */
@media (min-width:1024px){:root{ --header-h:96px; }.burger{ display:none; }.menu{ display:none; }.nav{ display:block; }.header__bar{ justify-content:space-between; }.header__nav-right{ display:flex; align-items:center; gap:clamp(20px, 2.6vw, 46px); }/* Hero becomes a single full-bleed frame with copy laid over it */
  .hero{
    height:clamp(680px, 62vw, 760px);
    overflow:hidden;
  }.hero__copy{ width:100%; }.hero__title{
    font-size:clamp(76px, 6.1vw, 88px);
    line-height:1.0;
  }.hero__title .line-script{
    font-size:clamp(82px, 6.7vw, 96px);
    line-height:1.0;
    padding-left:.2em;
  }.hero__support{
    font-size:clamp(17px, 1.2vw, 19px);
    line-height:1.7;
    max-width:31ch;
  }
}

/* Past 1600px the frame gets shallow enough that the cheesecake has to sit
   lower to survive full zoom. */

/* Above 1920px the 760px band is too shallow to hold the whole cheesecake
   at full zoom, so the hero deepens in proportion to the viewport. */
@media (min-width:1921px){.hero{ height:min(42vw, 1080px); }
}

/* ============================================================
   Motion preferences
   ============================================================ */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---- Mobile hero: art directed for the phone, not cropped from desktop ----
   Portrait crop, cheesecake centred with even margins, stand and packaging
   intact, and only the very bottom of the frame dissolving into the page. */
.page-title{
  font-size:clamp(44px, 12.4vw, 52px);
  line-height:1.02;
  letter-spacing:-0.005em;
}.page-title .line-em{
  display:block;
  font-style:italic;
  font-weight:400;
  padding-left:.04em;
}.hero__note .eyebrow{ display:block; }/* ---- Products ---- */
.products{ background:var(--cream); padding-block:var(--section-y); }.card{
  display:flex;
  flex-direction:column;
  background:var(--soft-white);
  border:1px solid var(--brown-10);
  overflow:hidden;
}.col-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:clamp(20px, 2.4vw, 28px);
}.pickup{ text-align:center; }.field{
  width:100%;
  min-height:52px;
  padding:14px 16px;
  background:var(--soft-white);
  border:1px solid var(--brown-16);
  border-radius:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.4;
  color:var(--brown);
  transition:border-color .22s ease, background-color .22s ease;
  appearance:none;
  -webkit-appearance:none;
}.field::placeholder{ color:rgba(91, 70, 49, .62); }.field:hover{ border-color:var(--brown-70); }.field:focus{
  outline:2px solid var(--olive-hover);
  outline-offset:2px;
  border-color:var(--olive-hover);
  background:var(--cream);
}select.field{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(91,70,49,.7) 50%),
    linear-gradient(135deg, rgba(91,70,49,.7) 50%, transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:44px;
}.order-form .btn{ margin-top:6px; width:100%; }/* ---- Closing band ---- */
.closing{
  background:var(--linen);
  padding-block:clamp(46px, 6vw, 76px);
  text-align:center;
}.closing__inner{ max-width:var(--inner); margin-inline:auto; }.closing__script{
  margin-top:14px;
  font-family:var(--serif);
  font-size:clamp(28px, 3.4vw, 42px);
  line-height:1.3;
  color:var(--brown);
}

@media (min-width:768px){.page-title{ font-size:clamp(52px, 7.6vw, 70px); }
}

/* On tablet the three columns do not divide evenly, so the form takes its own
   row rather than sitting half-width beside empty space. */

@media (min-width:1024px){.page-title{ font-size:clamp(72px, 5.6vw, 84px); }.page-title .line-em{ padding-left:.02em; }
}

/* The renamed navigation is much wider, so the full horizontal header only
   appears once there is genuinely room for it. Below that, the menu. */
@media (min-width:1024px) and (max-width:1279.98px){.burger{ display:inline-flex; }.nav{ display:none; }.menu{ display:block; }
}
@media (min-width:1280px){.header__logo img{ width:clamp(190px, 14vw, 240px); }.nav__list{ gap:clamp(12px, 1.15vw, 20px); }.header__nav-right{ gap:clamp(12px, 1.15vw, 20px); }.nav__link{ font-size:12px; letter-spacing:.07em; }
}.feature__day,
.feature__details li{ display:flex; align-items:center; gap:11px; }/* The whole photograph, never cropped: intrinsic ratio, no object-fit. */
.feature__media{
  margin:0;
  line-height:0;
}

/* MOBILE: the booth photo is an editorial image, not a second hero.
   Cream margins either side, reduced height, natural proportions kept. */
@media (max-width:767.98px){
  #page-home .market-feature{ padding-top:clamp(14px, 3.6vw, 20px) !important; }
  #page-home .feature{ gap:clamp(14px, 3.4vw, 20px); }
  #page-home .feature__media{
    margin-inline:clamp(8px, 2.4vw, 14px);
  }
  #page-home .feature__media img{
    width:100%;
    height:auto;
    height:auto;
  }
  #page-home .feature__copy{
    padding-inline:clamp(14px, 4.2vw, 22px);
  }
  #page-home .feature__eyebrow{ margin-top:clamp(14px, 3.6vw, 20px); }
}.feature__media img{ display:block; width:100%; height:auto; }/* One primary action for the page. */
.market-cta{
  max-width:var(--inner);
  margin:clamp(30px, 3.6vw, 46px) auto 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
}.market-cta__btn{ width:auto; }

@media (min-width:768px){.market-cta__btn{ width:auto; min-width:320px; }
}

/* Single-column variant of the feature panel */
.feature--single{ grid-template-columns:1fr; }.feature--single .price{
  margin-top:clamp(18px, 2.4vw, 26px);
  font-family:var(--serif);
  font-size:clamp(40px, 5vw, 62px);
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
  color:var(--olive-hover);
}/* Two information cards, built from the same panel language */
.info-cards{
  max-width:var(--inner);
  margin:clamp(24px, 3vw, 36px) auto 0;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(18px, 2.2vw, 26px);
}.info-card{
  background:var(--soft-white);
  border:1px solid var(--brown-16);
  padding:clamp(26px, 3vw, 38px) clamp(20px, 2.6vw, 32px);
  text-align:center;
}.info-card__date{
  margin-top:clamp(12px, 1.6vw, 16px);
  font-family:var(--serif);
  font-size:clamp(24px, 2.5vw, 32px);
  font-weight:500;
  line-height:1.2;
  letter-spacing:.02em;
}.info-card__note{
  margin-top:10px;
  font-size:clamp(13px, .98vw, 15px);
  line-height:1.6;
  color:rgba(91, 70, 49, .86);
}

@media (min-width:768px){.info-cards{ grid-template-columns:1fr 1fr; }
}.pitch-panel /* A section that follows a hero inherits the fade as its opening gesture, so
   it needs far less top padding than a section that starts cold. (§6, §9) */
.hero + .market,
.hero + .products,
.hero + .reserve{ padding-top:clamp(38px, 3.8vw, 60px); }/* Every column gets symmetric inner padding so its content sits on the true
   optical centre of its own space, not pushed off by a one-sided gutter. (§5) */

:root{
  --img-hero-desktop:url("img/img-441b38eb07.webp");
  --img-hero-home:url("img/img-2d08b6d101.webp");
  --img-hero-portrait:url("img/img-a59eb3eff8.webp");
  --img-hero-main:url("img/img-hero-main.webp");
  --img-seal:url("img/img-6732887404.webp");
  --bot-divider:url("img/img-6209b5c864.webp");
  --img-truck:url("img/img-3014ee45a1.webp");
  --img-hello:url("img/img-3014ee45a1.webp");
  --img-booth:url("img/img-5672110991.webp");
}
/* ---- routing: one document, five pages ---- */
.page{ display:none; }.page.is-active{ display:block; }.build{
  max-width:var(--inner);
  margin:clamp(40px, 5vw, 72px) auto 0;
  text-align:center;
}.build__title{
  font-family:var(--serif);
  font-size:clamp(30px, 3.6vw, 46px);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.2;
}.build__note{
  margin-top:clamp(12px, 1.6vw, 16px);
  font-size:clamp(15px, 1.05vw, 17px);
  line-height:1.6;
  color:rgba(91, 70, 49, .86);
}.shop{
  max-width:var(--inner);
  margin:clamp(30px, 3.6vw, 46px) auto 0;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(26px, 3vw, 40px);
  align-items:start;
}.product-grid{
  margin:0; padding:0; list-style:none;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(20px, 2.4vw, 28px);
}.product{
  background:var(--soft-white);
  border:1px solid var(--brown-16);
  display:grid;
  grid-template-columns:1fr;
  overflow:hidden;
}.product__media{
  aspect-ratio:4 / 3;
  background:var(--linen);
  overflow:hidden;
}.product__media img{ width:100%; height:100%; object-fit:cover; display:block; }.product__body{
  padding:clamp(22px, 2.6vw, 32px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
}.product__name{
  font-family:var(--serif);
  font-size:clamp(20px, 1.8vw, 25px);
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.25;
}.product__line{
  font-size:clamp(14px, 1.02vw, 16px);
  line-height:1.6;
  color:rgba(91, 70, 49, .88);
  max-width:28ch;
}.product__price{
  margin-top:2px;
  font-family:var(--serif);
  font-size:clamp(24px, 2.2vw, 30px);
  font-weight:700;
  color:var(--olive-hover);
  line-height:1.1;
}.product__actions{
  margin-top:clamp(12px, 1.6vw, 18px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:100%;
}/* Quantity stepper */
.qty{
  display:inline-flex;
  align-items:stretch;
  border:1px solid var(--brown-16);
  background:var(--cream);
}.qty__btn{
  width:46px; min-height:46px;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0;
  font-family:var(--sans); font-size:17px; line-height:1;
  color:var(--brown); cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}.qty__btn:hover{ background:rgba(143, 160, 122, .16); color:var(--olive-hover); }.qty__value{
  width:56px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:600; letter-spacing:.06em;
  border-inline:1px solid var(--brown-10);
}.product__actions .btn{ width:100%; }/* Cart */
.cart{
  background:var(--soft-white);
  border:1px solid var(--brown-16);
}.cart__inner{ padding:clamp(22px, 2.6vw, 30px); }.cart__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:clamp(14px, 1.8vw, 18px);
  border-bottom:1px solid var(--brown-10);
}.cart__close{
  font-family:var(--sans);
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer;
  font-size:26px; line-height:1; color:var(--brown);
}.cart__close:hover{ color:var(--olive-hover); }.cart__items{ margin:0; padding:0; list-style:none; }.cart__item{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:14px;
  align-items:center;
  padding:clamp(14px, 1.8vw, 18px) 0;
  border-bottom:1px solid var(--brown-10);
}.cart__thumb{
  width:64px; height:64px;
  border:1px solid var(--brown-10);
  overflow:hidden; background:var(--linen);
}.cart__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }.cart__name{
  font-family:var(--serif);
  font-size:16px; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase;
  line-height:1.3;
}.cart__unit{
  margin-top:3px;
  font-size:13px; letter-spacing:.04em;
  color:rgba(91, 70, 49, .8);
}.cart__row{ margin-top:9px; display:flex; align-items:center; gap:10px; }.cart__row .qty__btn{ width:36px; min-height:36px; font-size:16px; }.cart__row .qty__value{ width:40px; font-size:14px; }.cart__remove{
  font-family:var(--sans);
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer;
  color:rgba(91, 70, 49, .7);
  transition:color .2s ease;
}.cart__remove:hover{ color:var(--olive-hover); }.cart__remove svg{ width:17px; height:17px; }.cart__line{
  font-size:16px; font-weight:600; letter-spacing:.04em; white-space:nowrap;
}.cart__empty{
  padding:clamp(20px, 2.4vw, 26px) 0;
  font-size:16px;
  color:rgba(91, 70, 49, .8);
  text-align:center;
}.cart__total{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px;
  padding:clamp(16px, 2vw, 20px) 0;
  border-bottom:1px solid var(--brown-16);
  font-size:14px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
}.cart__total span:last-child{
  font-family:var(--serif);
  font-size:clamp(24px, 2vw, 28px);
  letter-spacing:.02em;
  text-transform:none;
  color:var(--olive-hover);
}.cart__terms{
  margin:clamp(16px, 2vw, 20px) 0 0;
  padding:0; list-style:none;
  display:flex; flex-direction:column; gap:8px;
  font-size:13px; letter-spacing:.04em;
  color:rgba(91, 70, 49, .86);
  line-height:1.5;
}.cart__terms li{ display:flex; align-items:flex-start; gap:9px; }.cart__terms li .bot{ margin-top:3px; }.cart__note{ margin-top:clamp(18px, 2.2vw, 24px); }.cart__label{
  display:block;
  margin-bottom:9px;
  font-size:12px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--brown);
}.cart__error{
  margin-top:8px;
  font-size:13px;
  color:var(--olive-hover);
}.cart__checkout{ margin-top:clamp(16px, 2vw, 20px); width:100%; }.cart__status{
  margin-top:12px;
  font-size:13px; line-height:1.55;
  color:rgba(91, 70, 49, .86);
  text-align:center;
}.cart__status:empty{ display:none; }/* Mobile order bar + drawer */
.cart-bar{
  font-family:var(--sans);
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:70;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:58px;
  padding:0 clamp(20px, 5vw, 28px);
  background:var(--olive);
  border:0;
  color:var(--cream);
  font-family:var(--sans);
  font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer;
}.cart-bar__total{ font-size:16px; }.cart-scrim{
  position:fixed; inset:0;
  z-index:71;
  background:rgba(74, 57, 40, .34);
  opacity:0;
  transition:opacity .26s ease;
}.cart-scrim.is-open{ opacity:1; }.info-cards--band{ margin-top:clamp(40px, 5vw, 72px); }

@media (max-width:1023.98px){.cart-bar{ display:flex; }.cart-bar[hidden]{ display:none; }.cart{
    position:fixed;
    top:0; right:0; bottom:0;
    width:min(420px, 92vw);
    z-index:72;
    border:0;
    border-left:1px solid var(--brown-16);
    overflow-y:auto;
    transform:translateX(101%);
    transition:transform .3s ease;
  }.cart.is-open{ transform:translateX(0); }.cart__close{ display:inline-flex; }
}

@media (min-width:768px){.product__body{ align-items:flex-start; text-align:left; }.product__actions{ align-items:flex-start; }.product__actions .btn{ width:auto; min-width:220px; }
}

@media (min-width:1024px){.shop{ grid-template-columns:minmax(0, 1fr) minmax(320px, 380px); }.cart{ position:sticky; top:calc(var(--header-h) + 20px); }.cart__inner{ max-height:calc(100vh - var(--header-h) - 60px); overflow-y:auto; }
}

@media (prefers-reduced-motion:reduce){.cart, .cart-scrim{ transition:none; }
}/* ============================================================
   About
   ============================================================ */
.story{
  max-width:var(--inner);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px, 3.4vw, 48px);
  align-items:start;
}.story__title{
  font-family:var(--serif);
  font-size:clamp(30px, 3.2vw, 42px);
  font-weight:500;
  line-height:1.16;
  letter-spacing:.01em;
}.story__copy p{
  margin-top:clamp(14px, 1.8vw, 20px);
  font-size:clamp(15px, 1.08vw, 17px);
  line-height:1.78;
}.story__quote{
  font-family:var(--serif);
  font-size:clamp(26px, 2.6vw, 34px);
  line-height:1.35;
  color:var(--olive-hover);
  margin-top:clamp(18px, 2.2vw, 26px) !important;
}.story__media{
  margin:0;
  border:1px solid var(--brown-10);
  line-height:0;
}.story__photo{
  width:100%;
  aspect-ratio:1400 / 793;
  background-image:var(--img-booth);
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
}.philosophy{
  background:var(--cream);
  padding-block:clamp(52px, 6.5vw, 104px);
}.philosophy__inner{
  max-width:56ch;
  margin-inline:auto;
  text-align:center;
}.philosophy__title{
  font-family:var(--serif);
  font-size:clamp(28px, 3.2vw, 42px);
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.2;
}.philosophy__inner p{
  margin-top:clamp(16px, 2vw, 22px);
  font-size:clamp(16px, 1.15vw, 19px);
  line-height:1.8;
}

@media (min-width:1024px){.story{ grid-template-columns:minmax(0, 0.92fr) minmax(0, 1.08fr); gap:clamp(40px, 4vw, 64px); }.story__media{ position:sticky; top:calc(var(--header-h) + 24px); }
}

/* ============================================================
   Mobile, designed on its own terms
   Not a narrower desktop: less air, fewer accents, faster to the point.
   ============================================================ */
@media (max-width:767.98px){/* Vertical rhythm, roughly 40% tighter than the desktop scale */
  :root{ --section-y:38px; }/* Headlines get room for their descenders */
  .page-title,
  .hero__title{ line-height:1.12; padding-bottom:2px; }/* Photography leads. The card stacks so the full product is visible. */
  .product{ grid-template-columns:1fr; }.product__media{
    aspect-ratio:293 / 203;   /* the photographs' own ratio: nothing is cropped */
    height:auto;
    min-height:0;
  }.product__media img{ object-fit:cover; object-position:center center; }.product__name{ font-size:19px; letter-spacing:.09em; }.product__price{ font-size:23px; margin-top:2px; }.product__actions .btn{ width:100%; min-height:48px; }.qty__btn{ width:44px; min-height:46px; }.qty__value{ width:52px; }/* clearance so the final card can scroll fully above the sticky order bar */
  .shop__products{ padding-bottom:74px; }.product{ scroll-margin-bottom:74px; }.build{ margin-top:26px; }.build__title{ font-size:26px; letter-spacing:.1em; }.build__note{ margin-top:8px; font-size:14px; }.shop{ margin-top:20px; gap:20px; }.product-grid{ gap:14px; }.product__body{
  align-items:center;
  text-align:center;
  padding:18px 18px 20px;
  gap:7px;
}.product__line{
  font-size:14px;
  line-height:1.55;
  max-width:34ch;
}.product__actions{
  margin-top:12px;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
}.info-cards{ margin-top:22px; gap:14px; }.info-cards--band{ margin-top:30px; }.info-card{ padding:22px 18px; }.market-cta{ margin-top:24px; }.story{ gap:22px; }.story__copy p{ margin-top:13px; }.philosophy{ padding-block:38px; }.philosophy__inner p{ margin-top:14px; }.closing{ padding-block:34px; }
}

/* Short phones: the hero cannot be allowed to eat the whole first screen */
@media (max-width:767.98px) and (max-height:720px){.page-title{ font-size:clamp(34px, 9.6vw, 40px); }.build{ margin-top:20px; }.build__title{ font-size:23px; }.build__note{ font-size:13px; }.shop{ margin-top:16px; }.product__media{ min-height:128px; }.product__body{ padding:13px 13px 15px; }.product__name{ font-size:15.5px; }.product__line{ font-size:12.5px; }.product__price{ font-size:19px; }
}

/* Smallest phones still in circulation */
@media (max-width:360px) and (max-height:640px){.build{ margin-top:15px; }.build__note{ margin-top:6px; }.shop{ margin-top:12px; }.product-grid{ gap:11px; }.product__media{ min-height:118px; }.product__body{ padding:11px 11px 13px; }
}/* Cart terms lose their markers; the lines carry themselves */
.cart__terms li{ display:block; }.cart__terms li::before{ content:none; }.booth{ background:var(--cream); padding-block:clamp(40px, 5.4vw, 84px); }.nav__has-sub:hover .nav__sub,
.nav__has-sub:focus-within .nav__sub,
.nav__sub.is-open{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }/* Booth photograph: no frame, soft edges dissolving into the cream page */
/* Ingredients */
.ingredients{ background:var(--cream); padding-block:clamp(48px, 6vw, 96px); }

/* Side-by-side product cards only where the photograph still has room */
@media (min-width:768px) and (max-width:1023.98px){.product__media{ aspect-ratio:293 / 203; }.product__body{ align-items:center; text-align:center; padding:22px 24px 26px; }.product__actions{ align-items:center; }.product__actions .btn{ width:auto; min-width:240px; }.shop__products{ padding-bottom:74px; }.product{
  grid-template-columns:1fr;
  scroll-margin-bottom:74px;
}
}
@media (min-width:1024px){.product{ grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr); align-items:center; }.product__media{ aspect-ratio:293 / 203; height:100%; }
}/* ============================================================
   Global image rule: non-hero photography dissolves into the page
   ============================================================ */
.photo-soft,
.booth__photo,
.story__photo,
.gallery__item,
.story__media{ border:0 !important; }/* ============================================================
   DESIGN SYSTEM v1.0 — approved typographic scale
   One scale, three breakpoints, no other sizes.
   ============================================================ */
:root{ --ds-h1:42px; --ds-h2:32px; --ds-h3:24px; --ds-body:18px; --ds-price:34px; }
@media (min-width:768px){:root{ --ds-h1:52px; --ds-h2:38px; --ds-h3:26px; --ds-body:18px; --ds-price:34px; }
}
@media (min-width:1024px){:root{ --ds-h1:64px; --ds-h2:44px; --ds-h3:28px; --ds-body:20px; --ds-price:40px; }
}.hero__title,
.ingredients__title,
.page-title{ font-size:var(--ds-h1) !important; font-weight:500; line-height:1.1; }.hero__title .line-em,
.hero__title .line-script{ font-size:var(--ds-h1) !important; }.market__title,
.build__title,
.feature__pitch,
.philosophy__title,
.gallery__title,
.booth__title,
.story__title,
.feature__day,
.checklist__title,
.feature__market,
.product__name,
.card__name,
.info-card__date{ font-size:var(--ds-h3) !important; line-height:1.3; }.eyebrow,
.closing__inner .eyebrow{ font-size:16px !important; letter-spacing:.18em !important; }body,
.hero__lede,
.hero__lede p,
.booth__copy,
.story__copy p,
.philosophy__inner p,
.checklist__list,
.product__line,
.card__desc,
.build__note,
.ingredients__lede,
.feature__lede,
.hero__support,
.checklist__lede,
.closing__inner p:not(.closing__script):not(.eyebrow){ font-size:var(--ds-body) !important; line-height:1.7; }.market__details,
.visit__when,
.info-row,
.info-card__note,
.market-cta__note,
.cart__terms,
.social__note,
.pickup__fine,
.footer__link,
.form-note{ font-size:16px !important; }.btn{ font-size:18px !important; font-weight:600 !important; letter-spacing:.12em !important; }.nav__link,
.nav__sublink,
.menu__link,
.menu__sublink{ font-size:16px !important; }.product__price,
.price{ font-size:var(--ds-h3) !important; }/* Three facts, light and separated by hairlines only */
.facts__grid{
  max-width:var(--inner);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(30px, 3.6vw, 44px);
  text-align:center;
}.facts__title{
  margin-top:14px;
  font-size:16px !important;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.4;
}.facts__copy{ margin-top:12px; font-size:var(--ds-body) !important; line-height:1.7; }.facts__item + .facts__item{ padding-top:clamp(24px, 3vw, 36px); }/* Instagram: the whole band is the link */
.follow{
  display:block;
  background:var(--cream);
  padding-block:clamp(48px, 6vw, 88px);
  text-align:center;
  text-decoration:none;
  color:var(--brown);
  transition:background-color .25s ease;
}.follow:hover{ background:rgba(143,160,122,.10); }.follow__icon{ display:inline-flex; color:var(--olive-hover); }.follow__icon svg{ width:26px; height:26px; }.follow__title{
  display:block;
  margin-top:12px;
  font-family:var(--serif);
  font-style:italic;
  font-size:var(--ds-h2) !important;
  line-height:1.25;
}.follow__meta{
  display:block;
  margin-top:14px;
  font-size:16px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(91,70,49,.82);
  line-height:1.7;
}.follow__handle{
  display:inline-block;
  margin-top:12px;
  font-size:var(--ds-body);
  letter-spacing:.05em;
  border-bottom:1px solid var(--brown-16);
}.follow:hover .follow__handle{ border-bottom-color:var(--olive-hover); color:var(--olive-hover); }

@media (min-width:768px){.facts__grid{ grid-template-columns:repeat(2, 1fr); }.facts__item + .facts__item{
    padding-top:0; border-top:0;
    border-left:1px solid var(--brown-10);
    padding-left:clamp(24px, 3vw, 44px);
  }.facts__item{ padding-inline:clamp(0px, 1.4vw, 22px); }
}/* ============================================================
   Ingredients & Allergens
   ============================================================ */
.ing-hero{ background:var(--cream); padding-top:clamp(30px, 4vw, 56px); }.ing-hero__inner{
  max-width:var(--inner);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px, 3.6vw, 52px);
  align-items:center;
}.ing-hero__copy{ text-align:center; }.ing-lede{
  margin-top:clamp(18px, 2.4vw, 26px);
  font-size:var(--ds-body) !important;
  line-height:1.7;
}.ing-hero__photo{
  width:100%;
  aspect-ratio:1536 / 1024;
  background-image:var(--img-hero-desktop);
  background-size:cover;
  background-position:50% 55%;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-composite:intersect;
}.ing-notice{ background:var(--cream); padding-top:clamp(48px, 6vw, 88px); }.ing-notice__panel{
  max-width:var(--inner);
  margin-inline:auto;
  background:var(--linen);
  border-radius:4px;
  padding:clamp(28px, 3.4vw, 48px);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(20px, 2.6vw, 36px);
}.ing-notice__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}.ing-notice__title{ font-size:var(--ds-h2) !important; font-weight:500; line-height:1.2; }.ing-notice__body{ text-align:center; }.ing-notice__body p{
  font-size:var(--ds-body) !important;
  line-height:1.7;
}.ing-notice__body p + p{ margin-top:12px; }.ing-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px; height:64px;
  flex:none;
  color:var(--olive-hover);
}.ing-glyph{ width:30px; height:30px; }.ing-list{ background:var(--cream); padding-block:clamp(48px, 6vw, 88px); }.ing-rows{ max-width:var(--inner); margin-inline:auto; padding:0; list-style:none; }.ing-row{
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  gap:14px;
  padding-block:clamp(28px, 3.4vw, 44px);
  text-align:center;
}.ing-name{ font-family:var(--serif); font-size:var(--ds-h3) !important; font-weight:500; line-height:1.3; }.ing-desc{ font-size:var(--ds-body) !important; line-height:1.7; max-width:46ch; }

@media (min-width:768px){.ing-hero__inner{ grid-template-columns:0.85fr 1.15fr; }.ing-hero__copy{ text-align:left; }.ing-notice__panel{ grid-template-columns:0.8fr 1.2fr; align-items:start; }.ing-notice__head{ flex-direction:row; align-items:center; text-align:left; }.ing-notice__body{ text-align:left; }.ing-row{
    grid-template-columns:64px minmax(140px, 0.5fr) 1fr;
    justify-items:start;
    align-items:center;
    gap:clamp(20px, 2.6vw, 40px);
    text-align:left;
  }
}

/* ============================================================
   Homepage final refinement
   ============================================================ */
/* 3. Header: hamburger, larger centred logo, Instagram */
.header__logo img{ width:clamp(210px, 23vw, 320px) !important; }
@media (min-width:1024px){:root{ --header-h:112px; } }

/* 1. Hero: shorter, so the market section arrives sooner */

/* 5. olive wash behind the event information, dissolving into the photograph */
/* 7. circular seal as a quiet footer signature */

/* 2. the olive wash belongs to the desktop split only; on one column it
   would tint the photograph itself */

/* 1. Ingredients is a mobile-drawer entry only */
/* 3. footer seal, transparent and a little larger */
/* ============================================================
   Global footer — one structure, every page
   ============================================================ */
.footer__inner{ text-align:center; max-width:var(--inner); margin-inline:auto; }/* Footer spacing: tighter, still breathable */
.ing-sub{
  margin-top:clamp(14px, 1.8vw, 20px);
  font-family:var(--serif);
  font-size:var(--ds-h2) !important;
  font-weight:500;
  line-height:1.25;
}.ing-lede{ margin-top:clamp(14px, 1.8vw, 18px) !important; }

/* ============================================================
   Desktop fixes
   ============================================================ */
/* aspect-ratio combined with height:100% let the photo compute a width
   wider than its grid column and slide under the text */
@media (min-width:1024px){.product{ align-items:center; }.product__media{
    aspect-ratio:293 / 203;
    height:auto;
    width:100%;
    min-width:0;
    align-self:center;
    overflow:hidden;
  }.product__media img{ width:100%; height:100%; object-fit:cover; }.product__body{ min-width:0; justify-content:center; padding-block:clamp(12px, 1.1vw, 16px); }
  .product__actions{ margin-top:clamp(16px, 1.5vw, 20px); }
}

/* ============================================================
   PREORDER HERO — one wide editorial composition
   The photograph bleeds to the right edge and its left side is
   masked so it dissolves into the cream page. No panel, no border,
   no vertical seam. The headline sits on the cream side.
   ============================================================ */
.hero-po{
  position:relative;
  display:flex;
  align-items:center;
  min-height:clamp(320px, 40vw, 470px);
  padding:clamp(28px, 4vw, 56px) 0;
  background:var(--cream);
  overflow:hidden;
}
.hero-po__media{
  position:absolute;
  inset:0 0 0 auto;
  width:min(78%, 1180px);
  margin:0;
  pointer-events:none;
}
.hero-po__img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:60% 50%;
  display:block;
  opacity:0;
  animation:
    heroFadeIn 2.2s cubic-bezier(.22,.61,.36,1) both,
    heroKenBurns 16s ease-in-out infinite alternate;
  will-change:opacity, transform;
  transform-origin:60% 50%;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 16%, #000 42%, #000 100%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 16%, #000 42%, #000 100%);
}
.hero-po__content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--inner);
  margin-inline:auto;
  padding-inline:clamp(18px, 4vw, 48px);
}
.hero-po .hero__title{ margin:0; max-width:12ch; }

/* MOBILE: art-directed separately — photograph above, headline beneath,
   so the type never competes with the busy market scene. */
@media (max-width:767.98px){
  .hero-po{
    display:block;
    min-height:0;
    padding:0 0 clamp(20px, 5vw, 28px);
  }
  .hero-po__media{
    position:relative;
    inset:auto;
    width:100%;
  }
  .hero-po__img{
    height:clamp(230px, 52vw, 300px);
    object-position:58% 50%;
    -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 72%, transparent 100%);
  }
  .hero-po__content{ padding-inline:clamp(18px, 5vw, 26px); margin-top:clamp(6px, 2vw, 12px); }
  .hero-po .hero__title{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  .hero-po__img{ animation:none !important; transform:none !important; opacity:1 !important; }
}

/* Tablet: the same horizontal composition as desktop — photograph left,
   product information right, one card per row. Below 1024 the card was
   inheriting the phone stack at tablet scale, producing a 919px-wide
   product photo and a 4,700px page. */
@media (min-width:768px) and (max-width:1023.98px){
  .product{
    display:grid;
    grid-template-columns:minmax(0, 0.86fr) minmax(0, 1.14fr);
    align-items:center;
    gap:clamp(22px, 3.4vw, 34px);
  }
  .product__media{
    aspect-ratio:293 / 203;
    height:auto;
    width:100%;
    overflow:hidden;
  }
  .product__media img{ width:100%; height:100%; object-fit:cover; }
  .product__body{
    min-width:0;
    padding:clamp(4px, 1.4vw, 12px) clamp(6px, 2vw, 16px);
    text-align:left;
  }
  .product__name{ margin-top:0; }
  .product__line{ margin-top:8px; }
  .product__price{ margin-top:12px; }
  .product__actions{ margin-top:clamp(16px, 2.6vw, 22px); justify-content:flex-start; }
  .product-grid{ gap:clamp(44px, 6vw, 58px); }
}

/* the olive wash was a full-width block with one hard edge; confine it to
   the copy side and feather every edge so it reads as atmosphere */
/* ============================================================
   Farmers Market: one colour field, no floating panel
   ============================================================ */
/* the wash was a second soft rectangle overlapping the photograph's own
   faded edge, which read as a smudge. One band replaces both. */

#page-home .market-feature .feature__media{
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 7%, #000 93%, transparent 100%) !important;
  -webkit-mask-composite:source-in !important;
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 7%, #000 93%, transparent 100%) !important;
          mask-composite:intersect !important;
}
/* ============================================================
   Come See Us — mobile legibility
   ============================================================ */
/* the router focuses the heading on route change; that must not draw a box */
[tabindex="-1"]:focus{ outline:none !important; }

/* the Bites photograph is a real 1.17 frame in a wider card, so it is
   positioned to keep the whole tray in view */
.product-grid .product:nth-child(3) .product__media img{ object-position:50% 46%; }/* the primary fill moves to the palette's deeper olive so the cream label
   clears the contrast floor (3.66:1 -> 4.62:1) */
.btn--primary{ background:var(--olive-hover) !important; border-color:var(--olive-hover) !important; }.btn--primary:hover{ background:#5C6946 !important; border-color:#5C6946 !important; }

/* framing solved for the new hero photograph so the cake survives full zoom */

/* page heroes were sizing to their copy (204px) instead of holding a hero
   proportion, which cropped the photograph to a sliver */
/* the divider belongs to the homepage transition only */
.page:not(#page-home) .vine-divider{ display:none !important; }/* the market photograph carries no frame; its edges dissolve into the page */
.feature__media--bare{
  border:0;
  box-shadow:none;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-composite:intersect;
}

/* ============================================================
   Homepage: hero flows into the market spread
   The hero's cream fade is the only transition; no divider, no card.
   ============================================================ */
.feature__media{ position:relative; }/* a photographic falloff behind the type, not a panel */

/* the market date is a focal point, not a billboard */
/* ============================================================
   One rhythm: every major section breathes by the same amount
   ============================================================ */
:root{ --section-y:clamp(48px, 5.6vw, 88px); }

/* ============================================================
   Navigation: text on desktop, burger below
   ============================================================ */
.nav{ display:none; }
.burger{ display:inline-flex; }
@media (min-width:1024px){
  .nav{ display:flex; }
  .burger{ display:none; }
}

.facts__icon{ display:inline-flex; color:var(--olive-hover); }
.csu-icon{ width:30px; height:30px; }

/* ============================================================
   Typography: Playfair Display (editorial serif) + Montserrat
   Playfair has a taller x-height than Cormorant, so display sizes
   step down slightly to hold the same optical scale.
   ============================================================ */
:root{
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --ds-h1:38px; --ds-h2:29px; --ds-h3:22px;
}
@media (min-width:768px){ :root{ --ds-h1:46px; --ds-h2:34px; --ds-h3:24px; } }
@media (min-width:1024px){ :root{ --ds-h1:56px; --ds-h2:39px; --ds-h3:26px; } }

.hero__title, .page-title, .ing-sub,
h1, h2, h3{ font-family:var(--serif); letter-spacing:-0.005em; }
.hero__title, .page-title{ line-height:1.08; font-weight:500; }
h2, .csu-heading, .ing-notice__title{ font-weight:500; }

/* ============================================================
   HOMEPAGE RHYTHM — one authoritative system
   Three tokens. Spacing sits on the TOP of each seam only, so
   two sections can never stack their padding into a chasm.
   ============================================================ */
:root{
  --space-flush:0px;
  --space-section:56px;
  --space-section-lg:76px;
}
@media (min-width:768px){ :root{ --space-section:68px; --space-section-lg:96px; } }
@media (min-width:1024px){ :root{ --space-section:80px; --space-section-lg:116px; } }

/* every homepage section: padding on top, none on the bottom.
   flow-root stops child margins escaping and re-creating stacked gaps. */
#page-home > section{
  display:flow-root;
  padding-top:var(--space-section);
  padding-bottom:0;
}
/* the hero sits directly under the header and owns no seam */

/* the hero flows straight into the market spread — the cream fade is the seam */
@media (min-width:768px){ #page-home .market-feature{ padding-top:var(--space-flush); } }

/* products and the value strip are the page's major transitions */
#page-home .lineup{ padding-top:clamp(40px, 5.4vw, 78px); }
#page-home .facts{ padding-top:clamp(36px, 4.6vw, 64px); }

.feature{ position:relative; padding:0; gap:clamp(24px, 3vw, 48px); }
@media (min-width:1024px){ .feature{ gap:clamp(34px, 4vw, 64px); } }

/* the footer owns the final seam and its own base */
.footer{ padding-top:var(--space-section); padding-bottom:var(--space-section); background:var(--cream); }
.footer .follow{ padding-block:0 var(--space-section); }
.footer__seal{ margin:0 auto clamp(14px, 1.8vw, 20px); }
.footer__colophon{ margin-top:clamp(18px, 2.2vw, 26px); padding-top:0; gap:5px; }
.footer__tagline{
  margin-top:0;
  /* same family as the rest of the site — the italic cut of Playfair Display */
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  text-transform:none;
}
.facts{ background:transparent; }

/* ============================================================
   Homepage product spread — editorial, no cart controls
   ============================================================ */
.lineup__eyebrow{ text-align:center; display:block; }
.lineup__title{
  margin-top:clamp(10px, 1.4vw, 16px);
  text-align:center;
  font-family:var(--serif);
  font-size:var(--ds-h2);
  font-weight:500;
  line-height:1.2;
}
.lineup__grid{
  max-width:var(--inner);
  margin:clamp(30px, 3.6vw, 52px) auto 0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(30px, 3.4vw, 48px);
}
@media (min-width:768px){ .lineup__grid{ grid-template-columns:repeat(3, 1fr); } }
.lineup__media{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  margin-bottom:clamp(14px, 1.8vw, 20px);
}
.lineup__media img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.lineup__link:hover .lineup__media img{ transform:scale(1.03); }
.lineup__title{
  margin-top:clamp(10px, 1.4vw, 16px);
  text-align:center;
  font-family:var(--serif);
  font-size:var(--ds-h2);
  font-weight:500;
  line-height:1.2;
}
.lineup__blurb{
  display:block;
  margin-top:8px;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.5;
  color:rgba(91, 70, 49, .72);
}
.lineup__name{
  display:block;
  font-size:16px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.4;
}

/* the hero's supporting copy needs air under the headline; the rule that
   used to do this targeted .hero__lede, which this element is not */
.hero__support{
  margin-top:clamp(18px, 3.4vw, 28px);
  max-width:38ch;
}
@media (min-width:1024px){ .hero__support{ margin-top:clamp(24px, 2vw, 32px); } }

/* ============================================================
   FARMERS MARKET — one editorial composition
   Hierarchy by scale and grouping, not by decoration:
     eyebrow (quiet) → date + market (the focal pair)
     → details (one tight block) → supporting line → CTA
   Related lines sit close; only the four groups are separated.
   ============================================================ */
.feature__copy{ text-align:left; }

.feature__eyebrow{
  display:block;
  font-size:12px;
  letter-spacing:.22em;
  color:rgba(91,70,49,.6);
}

/* the focal pair — date and market name read as one unit */

.feature__soldout{
  margin-top:clamp(12px, 1.6vw, 18px);
  font-family:var(--serif);
  font-size:clamp(34px, 7.4vw, 52px);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-0.01em;
  text-transform:uppercase;
}
.feature__script{
  margin-top:clamp(10px, 1.6vw, 16px);
  font-family:'Parisienne', cursive;
  font-size:clamp(26px, 5.2vw, 38px);
  font-weight:400;
  line-height:1.35;
  color:var(--olive-hover);
  padding-bottom:.12em;
}

/* the essentials, tight together */
.feature__details{
  margin-top:clamp(16px, 2.4vw, 22px);
  font-size:13px;
  letter-spacing:.13em;
  line-height:1.75;
  color:rgba(91,70,49,.78);
}

.feature__lede{
  margin-top:clamp(14px, 2vw, 18px);
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(16px, 3.4vw, 18px);
  line-height:1.55;
  color:rgba(91,70,49,.82);
}
.feature__action .btn{
  width:auto;
  display:inline-flex;
  padding-inline:clamp(24px, 5vw, 34px);
  letter-spacing:.14em;
}

/* MOBILE: photograph and information read as one spread */
@media (max-width:1023.98px){
  .feature{ gap:clamp(18px, 3.4vw, 24px); }
  .feature__copy{ padding-inline:2px; }
}

/* DESKTOP: the approved split — photograph leads, information beside it */
@media (min-width:1024px){
  .feature__copy{ padding-right:clamp(8px, 1.6vw, 26px); }

}

/* these override earlier global .eyebrow / .btn / grid rules by specificity */
#page-home .feature__eyebrow{ font-size:12px !important; letter-spacing:.22em !important; }

/* restore the desktop split: photograph leads, information beside it */
@media (min-width:1024px){
  #page-home .feature{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.28fr) minmax(0,0.72fr);
    align-items:center;
    gap:clamp(34px, 4vw, 64px);
  }
}

/* Farmers Market CTA: the label is long, so tracking and padding — not a
   width rule — are what made it span the column. Sized to its text. */
.feature__action .btn{
  width:auto;
  letter-spacing:.08em;
  padding-inline:22px;
}
@media (min-width:1024px){
  .feature__action .btn{ letter-spacing:.12em; padding-inline:30px; }
}

/* ============================================================
   QC fixes
   ============================================================ */
/* 1a. desktop hero crop: the full-frame photograph is pale and airy, so it
   is scaled in to match the density of the mobile crop */

/* 1b. the market copy sits on cream at 1024 where the grid is still stacked;
   deepen it back to full brown so it does not read as pale */
@media (min-width:1024px) and (max-width:1279.98px){

  .feature__details{ color:rgba(91,70,49,.9); }
  .feature__lede{ color:rgba(91,70,49,.92); }
}

/* 3. preorder hero: the headline sits on the photograph, so it needs a
   localized lift behind the text only — not across the whole image */

/* 4. the sticky order bar must not sit over product photography when the
   cart is empty; it appears once there is something in it */
.cart-bar[hidden],
.cart-bar.is-empty{ display:none !important; }

/* ============================================================
   DESKTOP HOMEPAGE HERO — one authoritative implementation
   A split composition: type column and photograph share the
   frame as equals. No veil over the image, no full-bleed crop,
   no horizontal cutoff — the photograph simply ends softly.
   Mobile and the interior page heroes are untouched.
   ============================================================ */

/* the homepage hero photograph — one file, every viewport */

/* ============================================================
   HOMEPAGE HERO — one authoritative implementation
   A real <img> in its own figure, beside its own content block.
   No background-image, overlay, fade, mask, filter or blend.
   ============================================================ */
.page .hero-v2,
#page-home .hero-v2,
.hero-v2{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(24px, 4vw, 40px);
  align-items:center;
  padding:0 0 clamp(32px, 4vw, 56px);
  background:var(--cream);
}
.hero-v2__media{ margin:0; order:2; }
.hero-v2__img{
  display:block;
  width:100%;
  height:clamp(300px, 58vw, 400px);
  object-fit:cover;
  object-position:50% 52%;
  filter:none;
  mix-blend-mode:normal;
}
.hero-v2__content{
  order:1;
  padding-inline:var(--pad, 22px);
  max-width:var(--inner);
  margin-inline:auto;
  width:100%;
}
.hero-v2 .hero__title{ margin:0; }
.hero-v2 .hero__support{ margin-top:clamp(18px, 3.4vw, 26px); max-width:38ch; }

/* Catering opening: one grouped composition rather than four separate
   elements. Small step eyebrow to headline, clear step to the paragraph,
   larger step out to the photograph. Scoped to this page only. */
#page-catering .hero-v2 .hero__title{ margin-top:clamp(10px, 2.4vw, 14px); }
#page-catering .hero-v2 .hero__support{ margin-top:clamp(20px, 4vw, 26px); }
@media (max-width:767.98px){
  #page-catering .hero-v2{ gap:clamp(30px, 7vw, 38px); }

  /* Below the photograph: one cadence for the whole page.
     Requirements group tightly, each next level of information steps out,
     and products separate from each other more than their parts do. */
  #page-catering .catering{ padding-top:clamp(34px, 8vw, 44px); }
  #page-catering .catering__terms{ margin-bottom:0; }
  #page-catering .catering__terms li + li{ margin-top:4px; }
  #page-catering .catering__copy{ margin-top:clamp(26px, 6vw, 34px); }
  #page-catering .catering__action{ margin-top:clamp(28px, 6.5vw, 36px); }

  #page-catering .catering-menu{ padding-top:clamp(44px, 10vw, 56px); }
  #page-catering .catering-menu__grid{ gap:clamp(40px, 9vw, 52px); }
  #page-catering .catering-menu__media{ margin-bottom:clamp(16px, 3.6vw, 20px); }
  #page-catering .catering-menu__note{ margin-top:6px; }
  #page-catering .catering-menu__price{ margin-top:8px; }

  #page-catering .catering-close{ padding-top:clamp(52px, 12vw, 66px); }

}

/* Catering tablet: two products on the first row, the third centred beneath
   at the same card width. Three across made the photographs smaller than on
   a phone (210px vs 346px). */
@media (min-width:768px) and (max-width:1023.98px){
  #page-catering .catering-menu__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:clamp(44px, 6vw, 60px) clamp(30px, 4.4vw, 44px);
    justify-items:center;
  }
  #page-catering .catering-menu__item{ width:100%; max-width:340px; }
  #page-catering .catering-menu__item:nth-child(3){ grid-column:1 / -1; justify-self:center; }
  #page-catering .catering-menu__media{ margin-bottom:clamp(16px, 2.4vw, 20px); }
  #page-catering .catering-menu__note{ margin-top:7px; }
  #page-catering .catering-menu__price{ margin-top:10px; }
}
.hero-v2 .hero__support span{ display:block; }

@media (min-width:1024px){
  .page .hero-v2,
  #page-home .hero-v2,
  .hero-v2{
    grid-template-columns:minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap:clamp(32px, 4vw, 64px);
    padding:clamp(40px, 4.4vw, 72px) clamp(28px, 4vw, 72px) clamp(48px, 5vw, 80px);
  }
  .hero-v2__content{ order:1; padding-inline:0; margin:0; }
  .hero-v2__media{ order:2; }
  .hero-v2__img{ height:clamp(400px, 34vw, 520px); }
  .hero-v2 .hero__support{ margin-top:clamp(24px, 2vw, 32px); max-width:34ch; }
}

/* ============================================================
   Hero entrance + Ken Burns — desktop only
   Two animations on separate properties so neither fights the other:
   opacity runs once with fill:forwards and STAYS at 1; transform loops.
   No overlay, wash or permanent fade is involved.
   ============================================================ */
.hero-v2__media{ overflow:hidden; }

@keyframes heroFadeIn{
  from{ opacity:0; }
  to  { opacity:1; }
}
@keyframes heroKenBurns{
  from{ transform:scale(1)    translate3d(0, 0, 0); }
  to  { transform:scale(1.05) translate3d(-0.8%, -0.5%, 0); }
}

@media (prefers-reduced-motion:reduce){
  .hero-v2__img{ animation:none !important; transform:none !important; opacity:1 !important; }
}

/* ============================================================
   Hero entrance + Ken Burns — .hero-v2__img ONLY
   Deliberately NOT inside a media query: a width gate meant the
   animation detached whenever the viewport dipped below the
   breakpoint (docked DevTools, split screen, small laptops).
   ============================================================ */
.hero-v2__img{
  opacity:0;
  animation:
    heroFadeIn 2.2s cubic-bezier(.22,.61,.36,1) both,
    heroKenBurns 14s ease-in-out infinite alternate;
  will-change:opacity, transform;
  transform-origin:50% 52%;
  backface-visibility:hidden;
}

@media (prefers-reduced-motion:reduce){
  .hero-v2__img{ animation:none !important; transform:none !important; opacity:1 !important; }
}

/* Ingredients & Allergens — reachable from the footer and the preorder page */
.footer__fine-links{ margin-bottom:clamp(16px, 2vw, 22px); }

/* Mobile footer grouping: tight within a group, larger between groups.
   Type, colour, alignment and content are untouched. */
@media (max-width:767.98px){
  .footer .follow{ padding-bottom:34px; }
  .follow__title{ margin-top:16px; }
  .follow__meta{ margin-top:10px; }
  .follow__handle{ margin-top:14px; }

  .footer__fine-links{ margin-top:0; margin-bottom:30px; }
  .footer__seal{ margin:0 auto 22px; }
  .footer__tagline{ margin-top:0; }
  .footer__colophon{ margin-top:30px; }
  .footer__colophon p + p{ margin-top:5px; }
}
.footer__fine{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:16px;
  letter-spacing:.04em;
  text-decoration:none;
  color:var(--brown);
  border-bottom:1px solid var(--brown-16);
  transition:color .22s ease, border-color .22s ease;
}
.footer__fine:hover{ color:var(--olive-hover); border-bottom-color:var(--olive-hover); }

/* ============================================================
   Catering — built from the existing type scale and palette
   ============================================================ */
.catering{ background:var(--cream); padding-top:var(--space-section); }
.catering__inner{ max-width:44ch; margin-inline:auto; text-align:center; }
.catering__terms{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:6px;
  font-size:16px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  line-height:1.6;
}
.catering__copy{
  margin-top:clamp(22px, 3vw, 32px);
  font-size:var(--ds-body); line-height:1.7;
}
.catering__action{ margin-top:clamp(24px, 3vw, 34px); }

.catering-menu{ background:var(--cream); padding-top:var(--space-section-lg); }
.catering-menu__eyebrow{ display:block; text-align:center; }
.catering-menu__title{
  margin-top:clamp(10px, 1.4vw, 16px);
  text-align:center;
  font-family:var(--serif); font-size:var(--ds-h2);
  font-weight:500; line-height:1.2;
}
.catering-menu__grid{
  max-width:var(--inner);
  margin:clamp(30px, 3.6vw, 52px) auto 0;
  padding:0; list-style:none;
  display:grid; grid-template-columns:1fr;
  gap:clamp(30px, 3.4vw, 44px);
  text-align:center;
}
@media (min-width:768px){ .catering-menu__grid{ grid-template-columns:repeat(3, 1fr); } }
.catering-menu__media{
  display:block; width:100%; aspect-ratio:4 / 3;
  overflow:hidden; margin-bottom:clamp(14px, 1.8vw, 20px);
}
.catering-menu__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.catering-menu__name{
  display:block; font-size:16px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.4;
}
.catering-menu__price{
  display:block;
  margin-top:10px;
  font-family:var(--serif);
  font-size:var(--ds-h3);
  line-height:1.3;
  color:var(--olive-hover);
}
.catering-menu__note{
  display:block; margin-top:8px;
  font-size:16px; line-height:1.6; color:rgba(91,70,49,.78);
}

.catering-close{ background:var(--cream); padding-top:var(--space-section-lg); }
.catering-close__inner{ max-width:40ch; margin-inline:auto; text-align:center; }
.catering-close__title{
  font-family:var(--serif); font-size:var(--ds-h2);
  font-weight:500; line-height:1.2;
}
.catering-close__copy{ margin-top:clamp(14px, 2vw, 20px); font-size:var(--ds-body); line-height:1.7; }

/* the catering hero shares the homepage split; its image does not animate */
/* only the homepage hero animates; interior heroes are static */
.hero-v2__img--catering,
.hero-v2__img--page{ animation:none; opacity:1; }


/* ============================================================
   PREORDER HERO — one wide editorial composition
   Real booth photograph bleeds to the right edge; its left edge is
   masked so it dissolves into the cream. A soft greenery layer sits
   behind on the left. No vertical divide, no veil over the photo.
   ============================================================ */
.hero-po{
  position:relative;
  overflow:hidden;
  background:var(--cream);
  min-height:clamp(300px, 44vw, 620px);
  display:flex;
  align-items:center;
}
.hero-po__media{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  z-index:0;
  pointer-events:none;
}
.hero-po__media::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:42%;
  background:url("img/img-hero-greenery.webp") left center / cover no-repeat;
  opacity:.95;
  -webkit-mask-image:
    linear-gradient(to right, #000 0%, rgba(0,0,0,.55) 22%, rgba(0,0,0,.12) 48%, transparent 78%),
    radial-gradient(58% 46% at 32% 50%, transparent 0%, rgba(0,0,0,.35) 58%, #000 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, #000 0%, rgba(0,0,0,.55) 22%, rgba(0,0,0,.12) 48%, transparent 78%),
    radial-gradient(58% 46% at 32% 50%, transparent 0%, rgba(0,0,0,.35) 58%, #000 100%);
  mask-composite:intersect;
}
.hero-po__img{
  position:absolute;
  top:0; right:0; bottom:0;
  width:74%;
  height:100%;
  object-fit:cover;
  object-position:58% 50%;
  opacity:0;
  animation:
    heroFadeIn 2.2s cubic-bezier(.22,.61,.36,1) both,
    heroKenBurns 16s ease-in-out infinite alternate;
  transform-origin:60% 50%;
  will-change:opacity, transform;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, transparent 20%, rgba(0,0,0,.10) 30%, rgba(0,0,0,.45) 44%, rgba(0,0,0,.82) 58%, #000 70%);
          mask-image:linear-gradient(to right, transparent 0%, transparent 20%, rgba(0,0,0,.10) 30%, rgba(0,0,0,.45) 44%, rgba(0,0,0,.82) 58%, #000 70%);
}
.hero-po__content{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--inner);
  margin-inline:auto;
  padding-inline:clamp(20px, 5vw, 64px);
}
/* From 1024 the hero shares the page's 1240px content box with no extra
   inset, so the headline starts on the same left edge as everything below. */
@media (min-width:1024px){
  /* the hero content box mirrors the page grid exactly: the 1240px inner
     width plus its own gutters, so the headline lands on the same left
     edge as every section below at any viewport width. */
  .hero-po__content{
    max-width:calc(var(--inner) + 2 * clamp(20px, 5vw, 64px));
    padding-inline:clamp(20px, 5vw, 64px);
  }
}
.hero-po .hero__title{ margin:0; max-width:12ch; }
.hero-po__content{ padding-right:min(52%, 640px); }

@media (max-width:767.98px){
  .hero-po{ min-height:0; display:block; padding-bottom:clamp(20px, 5vw, 28px); }
  .hero-po__media{ position:relative; inset:auto; height:clamp(240px, 56vw, 320px); }
  .hero-po__media::before{ width:100%; opacity:.7;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 55%, transparent 100%);
            mask-image:linear-gradient(to bottom, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 55%, transparent 100%); }
  .hero-po__img{ width:100%;
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,.45) 88%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,.45) 88%, transparent 100%); }
  .hero-po__content{ padding-top:clamp(20px, 5vw, 26px); }
  .hero-po .hero__title{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  .hero-po__img{ animation:none !important; opacity:1 !important; transform:none !important; }
}


/* ============================================================
   HOME HERO — same design language as the Preorder hero.
   Reuses the .hero-po structure and animation; atmosphere comes
   from the cheesecake photograph itself, not the greenery layer.
   ============================================================ */
.hero-po--home .hero-po__media::before{ content:none; }
.hero-po--home{ min-height:clamp(320px, 46vw, 640px); }
.hero-po__img--home{
  /* the photograph spans the whole hero so its soft left side genuinely sits
     behind the headline. A single long ramp controls how strongly it reads:
     barely present at the far left, full strength on the right. */
  width:100%;
  object-position:62% 50%;
  transform-origin:64% 50%;
  -webkit-mask-image:linear-gradient(to right,
    rgba(0,0,0,.05) 0%, rgba(0,0,0,.08) 12%, rgba(0,0,0,.13) 24%,
    rgba(0,0,0,.22) 34%, rgba(0,0,0,.36) 44%, rgba(0,0,0,.54) 54%,
    rgba(0,0,0,.72) 64%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.97) 86%, #000 100%);
          mask-image:linear-gradient(to right,
    rgba(0,0,0,.05) 0%, rgba(0,0,0,.08) 12%, rgba(0,0,0,.13) 24%,
    rgba(0,0,0,.22) 34%, rgba(0,0,0,.36) 44%, rgba(0,0,0,.54) 54%,
    rgba(0,0,0,.72) 64%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.97) 86%, #000 100%);
}
@media (max-width:767.98px){
  .hero-po--home{ min-height:0; }
  /* the container must take its height from the photograph, otherwise the
     image overflows it and the headline lands on top of the picture */
  .hero-po--home .hero-po__media{ height:auto; }
  .hero-po--home .hero-po__img{ position:relative; height:clamp(300px, 58vw, 400px); }

  /* Mobile art direction: the text uses the full phone width with comfortable
     gutters. The 12ch cap and the block-level spans were forcing the copy into
     a narrow column that wrapped to 7-10 lines. */
  .hero-po--home .hero-po__content{ padding-inline:clamp(20px, 5.5vw, 24px); }
  .hero-po--home .hero__title{ max-width:none; }
  .hero-po--home .hero__support{ max-width:none; margin-top:clamp(16px, 4vw, 22px); }
  .hero-po--home .hero__support span{ display:inline; }
  .hero-po--home .hero__support span + span::before{ content:" "; }
}


/* ============================================================
   CATERING HERO — same treatment as Home: the cheesecake photograph
   spans the hero and dissolves leftward into cream. No greenery layer.
   ============================================================ */
.hero-po--catering .hero-po__media::before{ content:none; }
.hero-po--catering{ min-height:0; }
/* the hero takes its height from the photograph rather than a fixed value,
   so cover has far less to trim. Each breakpoint gets its own proportion. */
.hero-po--catering .hero-po__media{ height:auto; }
.hero-po--catering .hero-po__img{
  position:relative;
  height:auto;
  aspect-ratio:24 / 10;
}
@media (min-width:768px) and (max-width:1023.98px){
  .hero-po--catering .hero-po__img{ aspect-ratio:16 / 10; }
}
@media (min-width:1024px){
  .hero-po--catering .hero-po__img{ aspect-ratio:17 / 10; }
}
@media (min-width:1440px){
  .hero-po--catering .hero-po__img{ aspect-ratio:16.5 / 10; }
}
.hero-po__img--catering{
  width:100%;
  object-position:64% 50%;
  transform-origin:66% 50%;
  -webkit-mask-image:linear-gradient(to right,
    rgba(0,0,0,.05) 0%, rgba(0,0,0,.08) 12%, rgba(0,0,0,.13) 24%,
    rgba(0,0,0,.22) 34%, rgba(0,0,0,.36) 44%, rgba(0,0,0,.54) 54%,
    rgba(0,0,0,.72) 64%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.97) 86%, #000 100%);
          mask-image:linear-gradient(to right,
    rgba(0,0,0,.05) 0%, rgba(0,0,0,.08) 12%, rgba(0,0,0,.13) 24%,
    rgba(0,0,0,.22) 34%, rgba(0,0,0,.36) 44%, rgba(0,0,0,.54) 54%,
    rgba(0,0,0,.72) 64%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.97) 86%, #000 100%);
}
/* 768 sat between the mobile rule and the desktop layout and got neither,
   so the media container kept a fixed height while the image grew past it.
   Including 768 lets the container take its height from the photograph. */
@media (max-width:768px){
  .hero-po--catering{ min-height:0; }
  .hero-po--catering .hero-po__media{ height:auto; position:relative; }
  .hero-po--catering .hero-po__img{ position:relative; height:auto; aspect-ratio:15 / 10; }
  .hero-po--catering .hero-po__content{ padding-inline:clamp(20px, 5.5vw, 24px); }
  .hero-po--catering .hero__title{ max-width:none; }
  .hero-po--catering .hero__support{ max-width:none; }
}


/* ============================================================
   Homepage Farmers Market — two upcoming dates.
   Reuses the existing serif/sans families and cream palette;
   a hairline rule separates the two events, no cards or boxes.
   ============================================================ */
.feature__comesee{
  font-family:var(--serif);
  font-size:clamp(34px, 6.4vw, 52px);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-0.005em;
  text-transform:uppercase;
  margin:0;
}
.market-event{
  margin-top:clamp(22px, 3vw, 32px);
  padding-top:clamp(22px, 3vw, 32px);
  border-top:1px solid rgba(91, 70, 49, .28);
}
.market-event__name{
  display:block;
  font-size:13px;
  letter-spacing:.18em;
  color:rgba(91, 70, 49, .72);
}
.market-event__date{
  margin-top:clamp(6px, 1vw, 10px);
  font-family:var(--serif);
  font-size:clamp(30px, 5.4vw, 44px);
  font-weight:500;
  line-height:1.08;
}
.market-event__time{
  margin-top:clamp(6px, 1vw, 9px);
  font-size:16px;
  letter-spacing:.1em;
  color:rgba(91, 70, 49, .84);
}
.market-event__place{
  margin-top:4px;
  font-size:16px;
  color:rgba(91, 70, 49, .72);
}




/* ============================================================
   COME SEE US — desktop/tablet editorial spread (768px and up)
   55/45 columns, a nearly-square photo frame carrying the real
   booth photograph, and event typography scaled to the mockup.
   Single authoritative block; mobile below 768 is untouched.
   ============================================================ */
@media (min-width:768px){
  #page-home .market-feature{ padding-block:clamp(56px, 6vw, 96px); }

  /* this section is a wide editorial spread and does not use the page's
     1240px shell; ~1300px at 1440 leaves roughly 70px of cream each side */
  #page-home .market-feature .shell{
    max-width:1400px;
    padding-inline:clamp(20px, 2vw, 30px);
  }

  #page-home .feature{
    display:grid;
    grid-template-columns:minmax(0, 55fr) minmax(0, 45fr);
    gap:clamp(28px, 2.6vw, 40px);
    align-items:center;
  }

  /* nearly square, slightly landscape — the dominant visual anchor */
  #page-home .market-feature .feature__media{
    aspect-ratio:1.05 / 1;
    overflow:hidden;
    -webkit-mask-image:none !important;
            mask-image:none !important;
    border-radius:0;
  }
  #page-home .market-feature .feature__media img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:54% 52%;
  }

  #page-home .feature__copy{ align-self:center; }

  #page-home .feature__comesee{
    font-size:clamp(50px, 5.8vw, 84px);
    line-height:1.0;
    white-space:nowrap;
    margin:0;
  }
  #page-home .market-event{
    margin-top:clamp(24px, 2.3vw, 33px);
    padding-top:clamp(24px, 2.3vw, 33px);
  }
  #page-home .market-event__name{ font-size:19px !important; letter-spacing:.2em; }
  #page-home .market-event__date{
    margin-top:clamp(8px, .9vw, 12px);
    font-size:clamp(48px, 5.1vw, 74px);
    line-height:1.0;
  }
  #page-home .market-event__time{
    margin-top:clamp(9px, 1vw, 14px);
    font-size:26px;
    letter-spacing:.12em;
  }
  #page-home .market-event__place{
    margin-top:clamp(6px, .8vw, 11px);
    font-size:23px;
  }
}


/* ============================================================
   COME SEE US — mobile (below 768px)
   Heading above the photograph, then the two events left-aligned.
   display:contents lets the heading sit above the media without
   changing the markup or the locked desktop layout.
   ============================================================ */
@media (max-width:767.98px){
  #page-home .feature{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
  }
  #page-home .feature__copy{ display:contents; }

  #page-home .feature__comesee{
    order:-1;
    text-align:center;
    font-size:clamp(34px, 10.4vw, 48px);
    line-height:1.05;
    white-space:nowrap;
    margin:0 0 clamp(18px, 4.6vw, 24px);
  }
  #page-home .market-feature .feature__media{
    order:0;
    margin-inline:0;
    aspect-ratio:1.45 / 1;
    overflow:hidden;
  }
  #page-home .market-feature .feature__media img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:54% 52%;
  }
  #page-home .market-event{
    order:1;
    margin-inline:clamp(16px, 4.4vw, 22px);
    margin-top:clamp(24px, 6vw, 30px);
    padding-top:clamp(24px, 6vw, 30px);
    text-align:left;
    border-top:1px solid rgba(91, 70, 49, .28);
  }
  #page-home .market-event:first-of-type{ border-top:0; padding-top:0; }
  #page-home .market-event__name{ font-size:14px !important; letter-spacing:.2em; }
  #page-home .market-event__date{
    margin-top:8px;
    font-size:clamp(36px, 11vw, 50px);
    line-height:1.05;
  }
  #page-home .market-event__time{ margin-top:10px; font-size:19px; letter-spacing:.12em; }
  #page-home .market-event__place{ margin-top:6px; font-size:17px; }
}


/* ============================================================
   Mobile Home repair — scoped to the Home hero and the Home
   COME SEE US booth image only. Desktop and the other pages'
   .hero-po heroes are untouched.
   ============================================================ */

@media (max-width:767.98px){
  /* B — #page-home > section{display:flow-root} was outranking
     .hero-po{display:flex}. Scoped to mobile only: at 768+ the Home hero
     keeps the approved behaviour it was signed off with. */
  #page-home .hero-po--home{ display:flex; flex-direction:column; align-items:stretch; }

  /* A — the base .hero-po top padding was written for the Preorder
     composition; the Home hero should meet the header directly */
  #page-home .hero-po--home{ padding-top:0; }

  /* E — restore the approved mobile heading size */
  #page-home .feature__comesee{ font-size:clamp(28px, 8vw, 34px); }

  /* F — clean rectangular booth photo on mobile, as on desktop */
  #page-home .market-feature .feature__media,
  #page-home .market-feature .feature__media--bare{
    -webkit-mask-image:none !important;
            mask-image:none !important;
  }
}

/* Mobile Home hero — integrated editorial composition */
@media (max-width:767.98px){
  #page-home .hero-po--home .hero-po__media{
    position:relative;
    height:300px;
    overflow:hidden;
  }
  #page-home .hero-po--home .hero-po__img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:62% 50%;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,rgba(0,0,0,.86) 80%,rgba(0,0,0,.48) 90%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 72%,rgba(0,0,0,.86) 80%,rgba(0,0,0,.48) 90%,transparent 100%);
  }
  #page-home .hero-po--home .hero-po__content{
    position:relative;
    z-index:2;
    margin-top:-42px;
    padding-top:0;
    padding-bottom:clamp(20px,5vw,26px);
  }
}