/* Nectar & Nosh - Market Red theme, split hero */
@font-face { font-family: 'Aleo'; src: url(../assets/fonts/Aleo-Light.ttf) format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Aleo'; src: url(../assets/fonts/Aleo-Regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Aleo'; src: url(../assets/fonts/Aleo-SemiBold.ttf) format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Aleo'; src: url(../assets/fonts/Aleo-Bold.ttf) format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url(../assets/fonts/PlayfairDisplay-Black.ttf) format('truetype'); font-weight: 900; font-display: swap; }

:root {
  --bg: #f7f0e8;
  --ink: #3c2320;
  --soft: #7a5148;
  --acc: #a82c22;
  --acc-deep: #7e2018;
  --acc-ink: #fff0ea;
  --card: #fffaf4;
  --line: #e6cfc0;
  --nav-h: 64px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 10px); }
/* the logo should return to the true top, not stop under the sticky header */
#top { scroll-margin-top: calc(-1 * (var(--nav-h) + 10px)); }
body {
  font-family: 'Aleo', Georgia, serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acc); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px; }

/* ---------- announcement bar ---------- */
.announce {
  background: var(--acc);
  color: var(--acc-ink);
  font-size: 13.5px;
  letter-spacing: .03em;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 16px; text-align: center;
}
.announce a { color: #ffd9c4; text-decoration: none; font-weight: 600; margin-left: 4px; }
.announce a:hover { text-decoration: underline; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 clamp(16px, 4vw, 44px);
  background: var(--bg);
  transition: box-shadow .3s ease;
}
.nav.solid { box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(60, 35, 32, .06); }
.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink); font-weight: 700; font-size: 19px;
  letter-spacing: .01em; flex: none;
}
/* the badge is taller than the nav: the negative bottom margin keeps its
   layout box at nav height while the artwork hangs over the page below */
.brand img {
  width: 104px; height: 104px;
  margin-bottom: -40px; position: relative; z-index: 1;
  filter: drop-shadow(0 6px 16px rgba(60, 35, 32, .28));
}
.brand span {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 900;
  font-size: 21px; letter-spacing: 0;
}
.links { display: flex; gap: 26px; margin: 0 auto; }
.links a {
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14.5px;
  letter-spacing: .04em; padding: 6px 2px; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.links a:hover { border-bottom-color: var(--acc); }
.links a[aria-current] { border-bottom-color: var(--acc); color: var(--acc); }
.nav-btn {
  flex: none;
  background: var(--acc); color: var(--acc-ink); text-decoration: none;
  font-weight: 600; font-size: 14px; letter-spacing: .04em;
  padding: 9px 22px; border-radius: 999px;
}
.nav-btn:hover { background: var(--acc-deep); }
.nav-cart {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-weight: 600; font-size: 14px; letter-spacing: .04em;
  color: var(--ink); background: transparent; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 18px;
}
.nav-cart:hover { border-color: var(--acc); color: var(--acc); }
.cart-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px;
  background: var(--acc); color: var(--acc-ink); font-size: 12px; line-height: 1;
}

/* ---------- hero slider ---------- */
.hero-slider {
  position: relative;
  height: clamp(500px, 80svh, 840px);
  overflow: hidden;
  background: #2a1c18;
}
.hero-slider .slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-slider .slide.is-active { opacity: 1; }
.hero-slider .slide img, .hero-slider .slide picture { width: 100%; height: 100%; display: block; }
.hero-slider .slide img { object-fit: cover; object-position: center 45%; }
.hero-ov {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: flex-end;
  background: linear-gradient(rgba(40,20,15,0) 34%, rgba(40,20,15,.30) 58%, rgba(40,20,15,.74));
  pointer-events: none;
}
.hero-ov-inner {
  width: 100%; max-width: 1160px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 44px) clamp(44px, 7vh, 84px);
  pointer-events: auto;
}
.hero-eyebrow {
  font-weight: 700; font-size: 13.5px; letter-spacing: .22em; text-transform: uppercase;
  color: #ffe9d2; margin-bottom: 12px;
  text-shadow: 0 1px 4px rgba(40,20,15,.85), 0 2px 14px rgba(40,20,15,.6);
}
.hero-ov h1 {
  font-weight: 700; font-size: clamp(38px, 5.4vw, 68px); line-height: 1.05;
  color: #fff6ee; text-wrap: balance; text-shadow: 0 2px 22px rgba(40,20,15,.55);
}
.hero-ctas { margin-top: 24px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-btn {
  display: inline-block; background: var(--acc); color: var(--acc-ink); text-decoration: none;
  font-weight: 600; font-size: 15.5px; letter-spacing: .04em;
  padding: 14px 32px; border-radius: 999px;
}
.hero-btn:hover { background: var(--acc-deep); }
.hero-link {
  font-weight: 600; font-size: 15.5px; color: #fff6ee; text-decoration: none;
  border-bottom: 2px solid #f0c9a8; padding-bottom: 2px; text-shadow: 0 1px 12px rgba(40,20,15,.5);
}
.hero-link:hover { color: #f0c9a8; }
.dots {
  position: absolute; z-index: 6; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px;
}
.dot {
  width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #fff6ee;
  background: transparent; cursor: pointer; padding: 0;
}
.dot.is-active { background: #fff6ee; }
.dot:focus-visible { outline: 2px solid #f0c9a8; outline-offset: 3px; }

/* entrance choreography */
.hero-ov-inner > * { opacity: 0; transform: translateY(18px); }
body.loaded .hero-ov-inner > * {
  animation: rise .9s cubic-bezier(.2, .65, .25, 1) forwards;
}
body.loaded .hero-ov-inner > *:nth-child(1) { animation-delay: .1s; }
body.loaded .hero-ov-inner > *:nth-child(2) { animation-delay: .22s; }
body.loaded .hero-ov-inner > *:nth-child(3) { animation-delay: .38s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-ov-inner > * { opacity: 1; transform: none; animation: none !important; }
  .hero-slider .slide { transition: none; }
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- shelf ---------- */
.block { max-width: 1100px; margin: 0 auto; padding: 108px 24px 0; }
.block:last-child { padding-bottom: 118px; }

.eyebrow {
  font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 14px;
}
.eyebrow.light { color: #ffd9c4; }
h2, .shelf h1 {
  font-weight: 700; font-size: clamp(32px, 4.8vw, 48px); line-height: 1.1;
  text-wrap: balance; margin-bottom: 30px;
}
.lede { font-size: 19.5px; line-height: 1.6; }
.copy p + p { margin-top: 16px; }

.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: center; }
.split.flip figure { order: 2; }
.split figure img { border-radius: 10px; border: 1px solid var(--line); }

.pricecard {
  margin-top: 26px; background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--acc); border-radius: 8px; padding: 18px 24px;
}
.p-main { font-weight: 700; font-size: 32px; color: var(--acc); line-height: 1.2; }
.p-main span { font-weight: 400; font-size: 16px; color: var(--soft); }
.p-sub { font-weight: 600; font-size: 15.5px; margin-top: 4px; }
.p-fine { font-size: 13.5px; color: var(--soft); margin-top: 6px; }

/* chocolate dark band */
.choc-band { background: #2e1b12; color: #f6e8da; margin-top: 108px; }
.choc-band .choc-inner { padding-top: 84px; padding-bottom: 92px; }
.choc-band h2 { color: #fff3e6; }
.choc-band .copy p { color: #d9bda9; }
.choc-band .copy .lede { color: #f0dccb; }
.choc-band .split figure img { border-color: #4a3123; }
.choc-pull { font-weight: 700; font-size: 24px; color: #f0c9a8 !important; }
.choc-band .fine { font-size: 13.5px; color: #a98b76 !important; margin-top: 14px; }
.choc-band + .block { padding-top: 108px; }

/* misc */
.madeline { margin-top: 18px; font-weight: 600; color: var(--acc); }
.story-btn { margin-top: 22px; }
.signature { font-weight: 700; font-size: 19px; color: var(--acc); margin-top: 18px; }
.maker-grid { grid-template-columns: 1fr 1.35fr; }
.page-top .block:first-child { padding-top: 64px; }

/* pairing cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.card {
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--acc);
  border-radius: 8px; padding: 26px 26px 24px; overflow: hidden;
}
.card-n {
  position: absolute; top: 12px; right: 20px;
  font-weight: 700; font-size: 44px; color: var(--line); line-height: 1;
}
.card h3 { font-weight: 700; font-size: 20px; margin-bottom: 10px; }
.card p { font-size: 15.5px; color: var(--soft); }
.wide img { border-radius: 10px; border: 1px solid var(--line); }
@media (min-width: 761px) {
  .pairings .wide img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 42%; }
}

/* flavor profile */
.section-padding { padding: 108px 24px 0; }
.container { max-width: 1100px; margin: 0 auto; }

.section-header { text-align: center; max-width: 660px; margin: 0 auto 44px; }
.section-title { font-size: clamp(30px, 4.2vw, 42px); margin-bottom: 14px; }
.section-subtitle { font-size: 17px; color: var(--soft); }

.flavor-grid {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
}
.flavor-bars { display: grid; gap: 22px; }
.flavor-item { display: grid; gap: 8px; }
.flavor-label-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-size: 15px; font-weight: 600; line-height: 1.35;
}
.flavor-note { color: var(--soft); font-weight: 400; font-size: 13.5px; text-align: right; }
.flavor-bar-bg { height: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.flavor-bar-fill { height: 100%; background: linear-gradient(90deg, #d4813f, var(--acc)); border-radius: 10px; }

.quote-box {
  background: var(--bg); border-left: 4px solid var(--acc);
  border-radius: 8px; padding: 30px 32px;
}
.quote-text { font-size: 21px; font-style: italic; line-height: 1.5; color: var(--acc); margin-bottom: 16px; }
.quote-author {
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--soft);
}

/* gourmet pairings grid */
.pairings-band { background: rgba(255, 255, 255, .5); padding-bottom: 108px; }
.pairings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }

.pairing-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pairing-card:hover {
  transform: translateY(-5px); border-color: var(--acc);
  box-shadow: 0 8px 24px rgba(60, 35, 32, .12);
}
.pairing-img { width: 100%; height: 200px; object-fit: cover; }
.pairing-content { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; }
.pairing-title { font-weight: 700; font-size: 21px; color: var(--acc); margin-bottom: 8px; line-height: 1.25; }
.pairing-desc { font-size: 15px; color: var(--soft); line-height: 1.55; }

/* the reveal transform must not fight the hover lift */
.pairing-card.reveal { transition: opacity .8s ease, transform .8s ease; }
.pairing-card.reveal.in { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }

/* story */
.story-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; }
.story-fig img { border-radius: 10px; border: 1px solid var(--line); }
.prose { max-width: 66ch; }
.prose p + p { margin-top: 18px; }

/* shop panel */
.shop-panel {
  background: radial-gradient(120% 120% at 50% 0%, #c0392c 0%, var(--acc) 45%, var(--acc-deep) 100%);
  color: var(--acc-ink); border-radius: 14px;
  padding: 64px 48px; text-align: center;
}
.shop-panel h2 { color: #fff8f2; }
.shop-lead { max-width: 54ch; margin: 0 auto; color: #ffd9c9; }
.shop-actions { margin-top: 34px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block; background: #fff8f2; color: var(--acc-deep); text-decoration: none;
  font-weight: 700; font-size: 15.5px; letter-spacing: .04em;
  padding: 14px 32px; border-radius: 999px;
}
.btn:hover { background: #ffe9dc; }
.btn.ghost { background: transparent; border: 1.5px solid #e58d77; color: #ffe4d6; font-weight: 600; }
.btn.ghost:hover { border-color: #fff; color: #fff; background: transparent; }
.btn:focus-visible { outline: 2px solid #fff8f2; outline-offset: 3px; }

/* shop product cards, sit on the red panel */
.shop-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px; max-width: 760px; margin: 34px auto 0;
}
.shop-product {
  background: #fff8f2; color: var(--ink);
  border-radius: 12px; overflow: hidden; text-align: center;
  box-shadow: 0 10px 30px rgba(60, 35, 32, .22);
  display: flex; flex-direction: column;
}
.shop-product img { width: 100%; height: 230px; object-fit: cover; }
/* body grows so the buy buttons line up across cards of unequal copy */
.shop-product-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex-grow: 1; }
.shop-product h3 { font-weight: 700; font-size: 22px; line-height: 1.25; margin-bottom: 6px; }
.shop-price { font-weight: 700; font-size: 27px; color: var(--acc); line-height: 1.2; }
.shop-note { font-size: 14px; color: var(--soft); margin: 6px 0 20px; }
/* auto top margin pins the button to the card foot, so buttons align across cards */
.btn.buy {
  margin-top: auto; background: var(--acc); color: #fff8f2; width: 100%; padding: 15px 28px;
}
.btn.buy:hover { background: var(--acc-deep); }
.btn.buy:focus-visible { outline-color: var(--acc-deep); }
.shop-secondary { margin-top: 30px; }

/* ---------- shop page ---------- */
.shop-intro { max-width: 60ch; margin-bottom: 30px; }
.shop-promos {
  display: inline-block; margin-bottom: 26px; padding: 10px 18px;
  background: var(--card); border: 1px dashed var(--acc);
  border-radius: 999px; color: var(--acc); font-weight: 600; font-size: 14.5px;
}
/* on the shop page the cards sit on cream, not on the red panel */
.shop-grid-page {
  max-width: none; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.shop-grid-page .shop-product {
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(60, 35, 32, .07);
}

/* ---------- cart drawer ---------- */
body.cart-open { overflow: hidden; }
.cart-drawer { position: fixed; inset: 0; z-index: 100; }
.cart-scrim { position: absolute; inset: 0; background: rgba(40, 20, 15, .5); }
.cart-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%); display: flex; flex-direction: column;
  background: var(--bg); box-shadow: -12px 0 40px rgba(60, 35, 32, .25);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--line); flex: none;
}
.cart-head h2 { font-size: 24px; margin: 0; }
.cart-close {
  font-size: 30px; line-height: 1; color: var(--soft);
  background: none; border: 0; cursor: pointer; padding: 0 4px;
}
.cart-close:hover { color: var(--acc); }
.cart-body { padding: 20px 24px 28px; overflow-y: auto; flex: 1; }
.cart-empty { color: var(--soft); }

.cart-rows { list-style: none; }
.cart-row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-row-main { display: flex; justify-content: space-between; gap: 14px; font-weight: 600; }
.cart-row-total { white-space: nowrap; }
.qty { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.qty button {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 16px; line-height: 1; font-family: inherit;
}
.qty button:hover { border-color: var(--acc); color: var(--acc); }
.qty-n { min-width: 20px; text-align: center; font-weight: 700; }
.qty .qty-remove {
  width: auto; height: auto; border: 0; background: none; padding: 0 0 0 6px;
  font-size: 13.5px; color: var(--soft); text-decoration: underline; border-radius: 0;
}
.qty .qty-remove:hover { color: var(--acc); }

.cart-fulfil { border: 0; margin: 22px 0 6px; }
.cart-fulfil legend { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.cart-fulfil label {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); margin-bottom: 8px; font-size: 14px; line-height: 1.45;
}
.cart-fulfil label:has(:checked) { border-color: var(--acc); }
.cart-fulfil input { margin-top: 4px; accent-color: var(--acc); }

.cart-totals { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.cart-line { display: flex; justify-content: space-between; gap: 14px; font-size: 15px; padding: 5px 0; }
.cart-line-discount { color: var(--acc); }
.cart-line-total { font-weight: 700; font-size: 19px; padding-top: 10px; }
.cart-error {
  margin-top: 14px; padding: 11px 14px; border-radius: 8px;
  background: #fbe4e1; color: var(--acc-deep); font-size: 14.5px;
}
.cart-checkout { margin-top: 18px; }
.cart-checkout:disabled { opacity: .65; cursor: default; }
.cart-fine { margin-top: 12px; font-size: 13px; color: var(--soft); text-align: center; }

/* footer */
footer { margin-top: 118px; background: var(--card); border-top: 1px solid var(--line); }
.foot-grid {
  max-width: 1100px; margin: 0 auto; padding: 60px 24px 40px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
}
.foot-brand img { width: 88px; height: 88px; margin-bottom: 16px; }
.foot-brand p { color: var(--soft); font-size: 15.5px; }
.foot-col h4 {
  font-weight: 600; font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 14px;
}
.foot-col a {
  display: block; color: var(--ink); text-decoration: none;
  font-size: 15.5px; padding: 4px 0;
}
.foot-col a:hover { color: var(--acc); }
.foot-legal {
  max-width: 1100px; margin: 0 auto; padding: 18px 24px 30px;
  border-top: 1px solid var(--line);
  color: var(--soft); font-size: 13px; text-align: center;
}

/* ---------- responsive ---------- */
/* Narrow nav, in stages: the "The/Our" prefixes go first, then the wordmark,
   so the five section links always stay on screen. No hamburger, nothing hidden. */
@media (max-width: 860px) {
  .nav { gap: 18px; }
  .links .t { display: none; }
  .links {
    margin: 0 auto;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .links::-webkit-scrollbar { display: none; }
  .links a { padding: 10px 0; }
  /* weight carries the current page where the underline would float below the text */
  .links a[aria-current] { border-bottom-color: transparent; font-weight: 700; }
  .nav-btn { padding: 11px 20px; }
}
@media (max-width: 620px) {
  .nav { gap: 14px; padding: 0 14px; }
  .brand img { width: 76px; height: 76px; margin-bottom: -26px; }
  .brand span { display: none; }
  .links { gap: 16px; }
  .links a { font-size: 13.5px; letter-spacing: .02em; }
  .nav-btn { padding: 11px 15px; font-size: 13.5px; }
}
@media (max-width: 400px) {
  .nav { gap: 10px; }
  .brand img { width: 64px; height: 64px; margin-bottom: -20px; }
  .links { gap: 13px; }
  .links a { font-size: 13px; }
  .nav-btn { padding: 11px 13px; font-size: 13px; }
}
@media (max-width: 359px) {
  .nav { gap: 8px; padding: 0 10px; }
  .links { gap: 10px; }
  .links a { font-size: 12.5px; }
  .nav-btn { padding: 10px 11px; font-size: 12.5px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  /* width must be definite, or min-height drives the WIDTH through aspect-ratio:
     that pushed the document past the viewport on small phones and left half the
     screen blank in landscape */
  .hero-slider { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 88svh; min-height: 440px; }
  .hero-slider .slide img { object-position: center; }
  .hero-ov h1 { font-size: 30px; }
  .hero-eyebrow { font-size: 11.5px; margin-bottom: 8px; }
  .hero-ov-inner { padding-bottom: 54px; }
  .hero-ctas { margin-top: 14px; }
  .hero-btn { padding: 11px 24px; font-size: 14px; }
  .hero-link { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 26px; gap: 30px; }
  .hero-copy h1 { font-size: clamp(38px, 10.5vw, 48px); }
  .split, .split.flip { grid-template-columns: 1fr; gap: 28px; }
  .split.flip figure { order: 0; }
  .cards { grid-template-columns: 1fr; }
  .story-grid { grid-template-columns: 1fr; gap: 28px; }
  .block { padding-top: 84px; }
  .section-padding { padding-top: 84px; }
  .section-header { margin-bottom: 32px; }
  .flavor-grid { grid-template-columns: 1fr; gap: 32px; padding: 28px 22px; }
  .flavor-label-row { flex-direction: column; gap: 2px; }
  .flavor-note { text-align: left; }
  .quote-box { padding: 24px 24px; }
  .quote-text { font-size: 19px; }
  .pairings-band { padding-bottom: 84px; }
  .pairings-grid { grid-template-columns: 1fr; gap: 22px; }
  .pairing-img { height: 180px; }
  .shop-panel { padding: 44px 24px; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
  .announce { font-size: 12.5px; }
}

/* ---------- mobile nav ----------
   Five section links plus Follow and Cart stopped fitting on a phone: the old
   scrolling link row hid items with no affordance. Below 760px the links
   collapse into a panel, and Cart stays in the bar because it is the control
   people are there to use. This block sits last so it wins over the narrow
   tweaks above, which were written for the scrolling row. */
.nav-toggle { display: none; }
.nav-follow-m { display: none; }

@media (max-width: 760px) {
  .nav { gap: 12px; }
  .brand { margin-right: auto; }

  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    flex: none; width: 44px; height: 40px; padding: 0 10px; cursor: pointer;
    background: transparent; border: 1.5px solid var(--line); border-radius: 10px;
  }
  .nav-toggle span {
    display: block; height: 2px; border-radius: 2px; background: var(--ink);
    transition: transform .25s ease, opacity .2s ease;
  }
  .nav.menu-open .nav-toggle { border-color: var(--acc); }
  .nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* the standalone Follow button is replaced by the one inside the panel */
  .nav > .nav-btn { display: none; }

  .links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 6px 18px 18px; overflow: visible;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 34px rgba(60, 35, 32, .16);
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .nav.menu-open .links { display: flex; }
  .links a {
    font-size: 16.5px; letter-spacing: .02em; padding: 15px 2px;
    border-bottom: 1px solid var(--line);
  }
  /* the underline cue does not read in a stacked list, so colour carries it */
  .links a[aria-current] { border-bottom-color: var(--line); color: var(--acc); font-weight: 700; }
  .links .t { display: inline; }

  .nav-follow-m {
    display: block; margin-top: 16px; text-align: center; text-decoration: none;
    background: var(--acc); color: var(--acc-ink);
    font-weight: 600; font-size: 15px; letter-spacing: .04em;
    padding: 14px 22px; border-radius: 999px; border-bottom: 0;
  }
  .nav-cart { padding: 9px 15px; font-size: 13.5px; }
}