/* ================================================================
   ABINCI: site stylesheet
   Display: Avallon (brush). Text: DM Sans 400 and 600.
   Colour: the brand greens with cream. Kraft brown appears only as
   material (the bowl, the torn paper), never as a UI colour.
   ================================================================ */

@font-face { font-family: 'AvallonAlt'; src: url('/fonts/avallon-alt.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* brand */
  --green-deep: #1A3D1A;
  --green-rich: #2B5C2B;
  --green-mid: #3A7A2A;
  --green-vivid: #4CB34C;
  --green-night: #132D13;
  --cream: #F2F6EE;
  --cream-2: #E8EFDE;
  --white: #FFFFFF;
  /* text */
  --ink: #1A1E18;
  --ink-muted: #4C5A4A;
  --on-green: #F2F6EE;
  --on-green-muted: rgba(242, 246, 238, 0.72);
  --on-green-faint: rgba(242, 246, 238, 0.22);
  --line-dark: rgba(26, 61, 26, 0.16);
  --line-light: rgba(242, 246, 238, 0.16);
  /* type */
  --font-display: 'AvallonAlt', 'DM Sans', sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* shape and rhythm */
  --radius: 4px;
  --gutter: clamp(16px, 4vw, 56px);
  --max-w: 1440px;
  --nav-h: 76px;
  --section-y: clamp(96px, 14vh, 168px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  background: var(--green-deep);
  color: var(--on-green);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, iframe, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--green-vivid); outline-offset: 3px; }
::selection { background: var(--green-vivid); color: var(--green-deep); }

.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding-inline: var(--gutter); }
.narrow { max-width: 860px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 3000; background: var(--cream); color: var(--green-deep); padding: 12px 18px; border-radius: var(--radius); font-weight: 600; }
.skip-link:focus { top: 16px; }

/* ── Atmosphere: one continuous colour field behind the green sections.
   The page script shifts it between section tones as you scroll. ── */
.atmos { position: fixed; inset: 0; z-index: -1; background: var(--green-deep); pointer-events: none; }
[data-tone] { position: relative; }

/* ── Type ── */
.display, .two-tone {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(54px, 7.6vw, 132px);
  line-height: 0.9;
  letter-spacing: 0;
  text-wrap: balance;
}
.two-tone .tt-line { display: block; width: fit-content; max-width: 100%; }
.center .tt-line, .hiw-head .tt-line, .hub-head .tt-line, .newsletter-inner:not(.nl-split) .tt-line { margin-inline: auto; }
.two-tone .tt-accent, .accent { color: var(--green-vivid); }
.on-cream .two-tone .tt-accent, .on-cream .accent { color: var(--green-mid); }
.center { text-align: center; }
.center .two-tone, .two-tone.center { margin-inline: auto; }
.label {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--on-green-muted);
}
.on-cream .label { color: var(--ink-muted); }
.lede { font-size: clamp(18px, 1.5vw, 21px); color: var(--on-green-muted); max-width: 46ch; }
.on-cream .lede { color: var(--ink-muted); }
.center .lede { margin-inline: auto; }

/* ── Buttons and links ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 0 28px;
  border-radius: var(--radius);
  font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.btn::after {
  content: ''; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s var(--ease);
}
.btn:hover::after { transform: translateX(4px); }
.btn.no-arrow::after { display: none; }
.btn-light { background: var(--cream); color: var(--green-deep); }
.btn-light:hover { background: var(--white); }
.btn-dark { background: var(--green-deep); color: var(--cream); }
.btn-dark:hover { background: var(--green-rich); }
.btn-line { border: 1.5px solid var(--line-light); color: var(--on-green); }
.btn-line:hover { border-color: var(--on-green); }
.btn:disabled { opacity: .6; cursor: wait; }

/* ↳ small action links */
.go {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1.5px solid transparent; padding-bottom: 2px;
  transition: border-color .2s var(--ease);
}
.go::before {
  content: ''; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v10h14M14 8l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v10h14M14 8l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.go:hover { border-bottom-color: currentColor; }

/* ── Header: a kraft label for the logo, a dock for the links ── */
#site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1000; pointer-events: none;
  padding-top: env(safe-area-inset-top, 0px);
}
.nav-inner { max-width: var(--max-w); margin: 0 auto; padding-inline: var(--gutter); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.nav-inner > * { pointer-events: auto; }
#site-nav .nav-plate, #site-nav .nav-dock { transition: transform .55s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease); }
#site-nav.tucked:not(.overlay-open) .nav-plate { transform: translateY(calc(-100% - 30px)); }
#site-nav.tucked:not(.overlay-open) .nav-dock { transform: translateY(calc(-100% - 24px)); }

/* the label hangs from the top edge; its bottom is torn like the paper strips */
.nav-plate { --lh: 132px; position: relative; display: block; margin-top: calc(-1 * env(safe-area-inset-top, 0px)); filter: drop-shadow(0 10px 16px rgba(4, 14, 6, .3)); }
.nav-plate::before {
  content: ''; position: absolute; inset: 0; border-radius: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .21 0 0 0 0 .08 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(170deg, #D8B887 0%, #C9A26A 60%, #BE9660 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H200V91L196 93.5 191 91.6 186 95 180 92 174 94.8 169 92.4 162 96 156 93 151 95.6 145 92.2 139 95 133 93.4 127 96.4 121 92.8 115 95.2 109 93 103 96 97 92.6 91 95.4 85 93.2 79 96.2 73 92.8 67 95 61 93.6 55 96.4 49 92.6 43 95.2 37 93 31 96 25 92.8 19 95.4 13 93.2 7 95.8 0 92.6Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H200V91L196 93.5 191 91.6 186 95 180 92 174 94.8 169 92.4 162 96 156 93 151 95.6 145 92.2 139 95 133 93.4 127 96.4 121 92.8 115 95.2 109 93 103 96 97 92.6 91 95.4 85 93.2 79 96.2 73 92.8 67 95 61 93.6 55 96.4 49 92.6 43 95.2 37 93 31 96 25 92.8 19 95.4 13 93.2 7 95.8 0 92.6Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.logo-crop { position: relative; display: block; width: calc(var(--lh) * .802); height: calc(var(--lh) * .364); overflow: hidden; margin: calc(20px + env(safe-area-inset-top, 0px)) 24px 26px; transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.logo-crop img { width: var(--lh); height: var(--lh); max-width: none; margin: calc(var(--lh) * -.308) 0 0 calc(var(--lh) * -.098); transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease); }
.nav-plate:hover .logo-crop { transform: rotate(-2deg); }
.logo-crop { transform-origin: 50% 0; }
#site-nav.scrolled .nav-plate { --lh: 104px; }
#site-nav.scrolled .logo-crop { margin-top: calc(14px + env(safe-area-inset-top, 0px)); margin-bottom: 20px; }

/* the dock: links, pre-order and the menu */
.nav-dock { display: flex; align-items: center; gap: 4px; margin-top: 16px; padding: 5px; background: var(--green-deep); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-light), 0 12px 30px rgba(4, 14, 6, .28); }
.nav-links { display: flex; list-style: none; }
.nav-links a { position: relative; display: block; padding: 10px 14px; font-size: 14px; font-weight: 600; letter-spacing: .03em; color: var(--on-green-muted); transition: color .2s var(--ease); white-space: nowrap; }
.nav-links a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--green-vivid); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--on-green); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-order { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; margin-left: 6px; border-radius: 3px; background: var(--green-vivid); color: var(--green-deep); font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; transition: background-color .2s var(--ease); }
.nav-order:hover { background: #5cc45c; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 14px 0 16px; border-radius: 3px;
  background: var(--cream); color: var(--green-deep); font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  transition: background-color .2s var(--ease);
}
.nav-toggle:hover { background: var(--white); }
.nav-toggle .bars { display: grid; gap: 5px; }
.nav-toggle .bar { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; transition: transform .45s var(--ease); }
.nav-toggle:not(.open):hover .bar:nth-child(2) { transform: scaleX(.6); transform-origin: right; }
.nav-toggle.open .bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle.open .bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
#site-nav.overlay-open .nav-links, #site-nav.overlay-open .nav-order { display: none; }
#site-nav.overlay-open .nav-dock { background-color: transparent; box-shadow: none; }

/* ── Menu: drops like a stall shutter ── */
.nav-overlay {
  position: fixed; inset: 0; z-index: 950; background: var(--green-deep);
  visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path .7s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .7s;
  overflow-y: auto; overscroll-behavior: contain;
}
.nav-overlay.open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1); }
.nav-overlay-inner {
  min-height: 100%; max-width: var(--max-w); margin: 0 auto;
  padding: calc(var(--nav-h) + 72px) var(--gutter) 36px;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 40px clamp(32px, 5vw, 96px);
}
.overlay-links { list-style: none; align-self: center; }
.overlay-links li { overflow: hidden; border-bottom: 1px solid var(--line-light); }
.overlay-links li:first-child { border-top: 1px solid var(--line-light); }
.overlay-links a {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-size: clamp(44px, 6.4vw, 96px); line-height: 1.04; padding: 6px 0;
  transform: translateY(110%); transition: transform .7s var(--ease), color .2s var(--ease), opacity .3s var(--ease), padding .4s var(--ease);
}
.nav-overlay.open .overlay-links a { transform: none; }
.overlay-links li:nth-child(1) a { transition-delay: .28s, 0s, 0s, 0s; }
.overlay-links li:nth-child(2) a { transition-delay: .33s, 0s, 0s, 0s; }
.overlay-links li:nth-child(3) a { transition-delay: .38s, 0s, 0s, 0s; }
.overlay-links li:nth-child(4) a { transition-delay: .43s, 0s, 0s, 0s; }
.overlay-links li:nth-child(5) a { transition-delay: .48s, 0s, 0s, 0s; }
.overlay-links li:nth-child(6) a { transition-delay: .53s, 0s, 0s, 0s; }
@media (hover: hover) {
  .overlay-links:hover a { opacity: .38; }
  .overlay-links a:hover { opacity: 1; padding-left: 18px; }
}
.overlay-links a:hover, .overlay-links a[aria-current="page"], .overlay-cta-link { color: var(--green-vivid); }
.link-arrow svg { width: clamp(24px, 3vw, 40px); height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .35; transition: opacity .2s var(--ease), transform .4s var(--ease); }
.overlay-links a:hover .link-arrow svg { opacity: 1; transform: translate(4px, -4px); }

.overlay-side { align-self: center; display: grid; gap: 28px; justify-items: start; opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.nav-overlay.open .overlay-side { opacity: 1; transform: none; transition-delay: .45s; }
.menu-next { width: 100%; max-width: 420px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--radius); background: var(--green-rich); box-shadow: inset 0 0 0 1px var(--line-light); }
.menu-next-label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-green-muted); }
.menu-next-when { font-family: var(--font-display); font-size: clamp(36px, 3.2vw, 50px); line-height: 1; margin: 14px 0 6px; }
.menu-next-where { color: var(--on-green-muted); margin-bottom: 22px; }
.menu-next-where b { color: var(--green-vivid); font-weight: 600; }
.menu-next .btn { width: 100%; justify-content: space-between; }
.menu-sticker { position: relative; width: min(100%, 300px); margin-left: 18%; }
.menu-sticker .sticker { transform: rotate(-24deg) scale(.86); transition: transform .9s cubic-bezier(.3, 1.5, .5, 1) .5s; }
.nav-overlay.open .menu-sticker .sticker { transform: rotate(-7deg); }
.menu-sticker .bubble { position: absolute; top: -8%; right: 0; }
.overlay-footer { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line-light); display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap; }
.overlay-logo { width: 64px; height: 64px; object-fit: contain; }
.overlay-contact { display: flex; flex-direction: column; gap: 2px; font-size: 15px; margin-right: auto; }
.overlay-contact span { color: var(--on-green-muted); }
.overlay-social, .social-links { display: flex; gap: 10px; }
.social-link { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-light); border-radius: 50%; color: var(--on-green); transition: border-color .2s var(--ease), color .2s var(--ease); }
.social-link:hover { border-color: var(--green-vivid); color: var(--green-vivid); }
.social-link svg { width: 18px; height: 18px; fill: currentColor; }

/* ── Floating pre-order ── */
.float-cta {
  position: fixed; right: max(16px, var(--gutter)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 900;
  display: inline-flex; align-items: center; gap: 18px; min-height: 56px; padding: 0 10px 0 22px;
  background: var(--green-vivid); color: var(--green-deep); border-radius: var(--radius);
  font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 14px 34px rgba(5, 18, 8, .35);
  transform: translateY(160%); transition: transform .4s var(--ease), background-color .2s var(--ease);
}
.float-cta.show { transform: none; }
.float-cta:hover { background: #5cc45c; }
.float-cta-price { font-family: var(--font-display); font-size: 26px; letter-spacing: 0; text-transform: none; background: var(--green-deep); color: var(--cream); border-radius: 2px; padding: 4px 12px 2px; line-height: 1.1; }

/* ── Torn kraft paper between sections ── */
.tear {
  position: relative; z-index: 6; pointer-events: none;
  height: clamp(54px, 7vw, 116px);
  margin: calc(clamp(54px, 7vw, 116px) / -2) -3vw;
  background: url('/img/tear-1.webp') center / 100% 100% no-repeat;
  transform: rotate(-1.4deg);
  filter: drop-shadow(0 8px 10px rgba(4, 14, 6, .28));
}
.tear.tear-b { background-image: url('/img/tear-2.webp'); transform: rotate(1.2deg); }

/* ── Stickers and speech bubbles ── */
.sticker { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(4, 14, 6, .25)); }
.bubble {
  position: relative; z-index: 2; display: inline-block; max-width: 18ch; white-space: nowrap;
  background: var(--cream); color: var(--green-deep);
  font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; line-height: 1.25;
  padding: 12px 18px; border-radius: 18px; transform: rotate(-5deg);
  box-shadow: 0 10px 24px rgba(4, 14, 6, .22);
}
.bubble::after {
  content: ''; position: absolute; left: 22px; bottom: -11px; width: 22px; height: 16px; background: var(--cream);
  clip-path: polygon(0 0, 100% 0, 10% 100%);
}
.bubble.tail-right::after { left: auto; right: 22px; clip-path: polygon(0 0, 100% 0, 90% 100%); }

/* ── Shared page hero for inner pages ── */
.page-hero { position: relative; padding: calc(var(--nav-h) + clamp(56px, 10vh, 120px)) 0 clamp(64px, 10vh, 112px); }
.page-hero-inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px 64px; align-items: end; }
.page-hero h1 { margin-bottom: 24px; }
.page-hero .lede { margin-bottom: 0; }
.page-hero-art { position: relative; justify-self: end; width: min(100%, 380px); }
.page-hero-art .bubble { position: absolute; top: -4%; left: -6%; }
.page-hero-art .sticker { transform: rotate(6deg); }

/* ================================================================
   HOME
   ================================================================ */

/* ── Story: the 3D stall that hands over to the overhead photo ── */
.story { position: relative; height: 380svh; }
.story-stage { position: sticky; top: env(safe-area-inset-top, 0px); height: 100svh; overflow: hidden; background: var(--green-deep); }
.story-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.story-poster, .story-poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-poster img { object-fit: cover; transition: opacity .5s var(--ease); }
.story-bowl { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; color-scheme: dark; background: transparent; }
.story.is-live .story-bowl { opacity: 1; }
.story.is-live .story-poster img { opacity: 0; }
.story-caption { position: absolute; right: var(--gutter); top: calc(var(--nav-h) + 16px); opacity: 0; }
.story-caption span { display: inline-block; background: var(--green-deep); color: var(--on-green); border-radius: var(--radius); padding: 8px 14px; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.story-copy { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; pointer-events: none; }
.story-copy a, .story-copy button { pointer-events: auto; }
.hero-copy {
  position: relative; height: 100svh; flex: none;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + 24px) var(--gutter) clamp(36px, 7vh, 80px);
  max-width: var(--max-w); width: 100%; margin: 0 auto;
}
.hero-h1 { font-family: var(--font-display); font-weight: normal; font-size: clamp(64px, 10.2vw, 172px); line-height: .86; max-width: 8.6em; margin-bottom: clamp(26px, 4vh, 44px); }
.hero-h1 .accent-word { color: var(--green-vivid); white-space: nowrap; }
.hero-underline { position: absolute; overflow: visible; pointer-events: none; }
.hero-underline path { fill: none; stroke: var(--green-vivid); stroke-width: 7; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.hero-underline.drawn path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease) .35s; }
.hero-row { display: flex; align-items: center; gap: 24px 40px; flex-wrap: wrap; }
.hero-next { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; border-left: 2px solid var(--green-vivid); min-height: 56px; justify-content: center; order: 2; }
.hero-next-label { font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--on-green-muted); }
.hero-next-when { font-size: 18px; font-weight: 600; }
.hero-next-left { color: var(--green-vivid); }
/* the dish, as a printed photo taped to the hero */
.hero-card {
  position: absolute; left: var(--gutter); top: calc(var(--nav-h) + clamp(48px, 9vh, 96px)); z-index: 1; width: clamp(170px, min(19vw, 28vh), 290px);
  display: block; padding: 10px 10px 14px; background: var(--cream); color: var(--ink); border-radius: 3px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .06), 0 24px 44px rgba(3, 12, 5, .45);
  transform: rotate(-4deg); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s var(--ease);
}
.hero-card img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 2px; }
.hero-card-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 4px 0; }
.hero-card .dish-name { font-family: var(--font-display); font-size: clamp(22px, 1.9vw, 28px); line-height: 1; color: var(--green-deep); }
.hero-card .dish-price { font-family: var(--font-display); font-size: clamp(22px, 1.9vw, 28px); line-height: 1; color: var(--green-mid); white-space: nowrap; }
.hero-card .dish-sub { display: block; padding: 6px 4px 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.hero-card-tape {
  position: absolute; left: 50%; top: -14px; width: 96px; height: 28px; transform: translateX(-50%) rotate(-3deg); opacity: .92;
  background: linear-gradient(170deg, #D8B887, #C29A63); box-shadow: 0 2px 4px rgba(3, 12, 5, .18);
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0) , repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 4px);
          mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0), repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 4px);
}
@media (hover: hover) { .hero-card:hover { transform: rotate(-1.5deg) translateY(-6px); box-shadow: 0 2px 0 rgba(0, 0, 0, .06), 0 34px 60px rgba(3, 12, 5, .5); } }
.anim .hero-card { animation: card-drop .9s cubic-bezier(.3, 1.35, .5, 1) .7s backwards; }
@keyframes card-drop { from { opacity: 0; transform: translateY(-40px) rotate(-14deg); } to { opacity: 1; transform: rotate(-4deg); } }
.story-spacer { flex: 1 1 auto; }
.promo { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter) 10svh; flex: none; }
.promo-card { width: min(560px, 100%); background: var(--green-deep); border-radius: var(--radius); padding: clamp(28px, 3.4vw, 48px); }
.promo-title { font-family: var(--font-display); font-weight: normal; font-size: clamp(40px, 4.4vw, 68px); line-height: .95; margin-bottom: 18px; }
.promo-text { color: var(--on-green-muted); margin-bottom: 28px; }
.promo-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line-light); }
.promo-price { display: flex; align-items: baseline; gap: 10px; }
.promo-price-amount { font-family: var(--font-display); font-size: clamp(44px, 4vw, 60px); line-height: 1; color: var(--green-vivid); }
.promo-price-unit { font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--on-green-muted); }
/* static story: no WebGL, or reduced motion */
.story.is-static { height: auto; }
.story.is-static .story-stage { position: absolute; inset: 0 0 auto 0; height: 100svh; }
.story.is-static .story-bowl, .story.is-static .story-photo, .story.is-static .story-caption, .story.is-static .story-spacer { display: none; }
.story.is-static .story-copy { position: relative; }
.story.is-static .promo { max-width: none; padding: 0; min-height: 100svh; display: flex; align-items: flex-end; background: var(--green-deep) url('/img/dish-1.webp') center / cover no-repeat; }
.story.is-static .promo-card { margin: 0 var(--gutter) 10svh; }

/* ── Statement: the line lights up word by word as you read down ── */
.statement { padding: var(--section-y) 0; }
.statement-text {
  font-size: clamp(30px, 4.4vw, 68px); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em;
  max-width: 22ch; margin: 0 auto; text-align: center; text-wrap: balance;
}
.statement-text .w { opacity: var(--o, .22); transition: opacity .25s linear; }
.statement-text.long { font-size: clamp(24px, 3vw, 46px); line-height: 1.18; max-width: 32ch; }
.statement-foot { display: flex; justify-content: center; margin-top: 40px; }

/* ── How pre-ordering works: a sticky frame, four chapters ── */
.hiw { position: relative; height: 420svh; }
.hiw-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3vh, 32px); padding: calc(var(--nav-h) + 8px) var(--gutter) 24px; }
.hiw-head { text-align: center; }
.hiw-head .two-tone { font-size: clamp(44px, 5.6vw, 96px); }
.hiw-frame {
  position: relative; width: min(1180px, 100%); height: min(620px, 66svh); margin: 0 auto;
  border: 1.5px solid var(--line-light); border-radius: var(--radius); overflow: hidden;
  background-color: var(--green-night);
  background-image: repeating-linear-gradient(0deg, rgba(242, 246, 238, .028) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .1) 0 1px, transparent 1px 4px);
}
.hiw-scenes { position: absolute; inset: 0; }
.hiw-scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px 24px 24px 38%; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .45s var(--ease), transform .45s var(--ease); will-change: opacity, transform; }   /* own layer: switching chapters is a cheap crossfade */
.hiw-scene.on { opacity: 1; transform: none; }
.hiw-card { background: var(--cream); color: var(--ink); border-radius: var(--radius); padding: clamp(18px, 2.2vw, 32px); width: min(520px, 100%); box-shadow: 0 30px 60px rgba(3, 12, 5, .4); transform: rotate(-1.5deg) scale(var(--fit, 1)); }
.hiw-scene:nth-child(even) .hiw-card { transform: rotate(1.5deg) scale(var(--fit, 1)); }
.hiw-card-title { font-family: var(--font-display); font-size: clamp(30px, 3vw, 44px); line-height: 1; color: var(--green-deep); margin-bottom: 14px; }
.mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: clamp(13px, 1.1vw, 16px); text-align: center; font-variant-numeric: tabular-nums; }
.mini-cal span { padding: 7px 0; border-radius: 3px; color: rgba(26, 30, 24, .45); }
.mini-cal .dn { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--ink-muted); }
.mini-cal .ev { background: var(--green-vivid); color: var(--green-deep); font-weight: 600; }
.mini-cal .sel { background: var(--green-deep); color: var(--cream); font-weight: 600; }
.mini-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.mini-field b { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }
.mini-field i { font-style: normal; display: block; border: 1.5px solid var(--line-dark); background: var(--cream-2); border-radius: 3px; padding: 12px 14px; font-size: 16px; color: rgba(26, 30, 24, .55); }
.mini-field i.filled { color: var(--ink); border-color: var(--green-mid); background: var(--white); }
.mini-pay { display: flex; align-items: center; justify-content: center; min-height: 54px; border-radius: var(--radius); background: var(--green-deep); color: var(--cream); font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 6px 0 12px; }
.mini-note { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--ink-muted); }
.mini-ticket { border: 2px dashed var(--green-vivid); border-radius: var(--radius); padding: 20px; text-align: center; background: var(--white); }
.hiw-card .label { color: var(--ink-muted); }
.mini-ticket .code { display: flex; justify-content: center; gap: 6px; margin: 10px 0 6px; }
.mini-ticket .code i { width: 28px; height: 38px; border-radius: 3px; background: var(--cream-2); border: 1.5px solid var(--line-dark); }
.hiw-sticker { position: absolute; right: 7%; bottom: 8%; width: min(220px, 22%); transform: rotate(8deg); }
.hiw-caption {
  position: absolute; left: 24px; bottom: 24px; width: min(360px, calc(100% - 48px));
  background: var(--green-deep); border: 1px solid var(--line-light); border-radius: var(--radius); padding: 22px 22px 20px;
}
.hiw-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hiw-steps { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
/* arrows: so it is obvious there is more than one step */
.hiw-nav { display: flex; gap: 6px; flex: none; }
.hiw-arrow {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius);
  border: 1.5px solid var(--line-light); color: var(--on-green); background: rgba(242, 246, 238, .04);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease), transform .2s var(--ease);
}
.hiw-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hiw-arrow:hover { border-color: var(--on-green); background: rgba(242, 246, 238, .1); }
.hiw-arrow:active { transform: scale(.94); }
.hiw-arrow:disabled { opacity: .3; cursor: default; border-color: var(--line-light); background: none; }
#hiw-next:not(:disabled) { background: var(--green-vivid); border-color: var(--green-vivid); color: var(--green-deep); }
#hiw-next:not(:disabled):hover { background: #5cc45c; }
@media (hover: none) { .hiw-arrow { width: 42px; height: 42px; } }
.hiw-steps i { height: 3px; background: var(--on-green-faint); border-radius: 2px; overflow: hidden; position: relative; }
.hiw-steps i::after { content: ''; position: absolute; inset: 0; background: var(--green-vivid); transform-origin: left; transform: scaleX(var(--f, 0)); }
.hiw-cap { display: none; }
.hiw-cap.on { display: block; }
.hiw-cap h3 { font-family: var(--font-display); font-weight: normal; font-size: clamp(30px, 2.6vw, 40px); line-height: 1; margin-bottom: 8px; }
.hiw-cap p { color: var(--on-green-muted); font-size: 16px; }
.hiw.is-static { height: auto; }
.hiw.is-static .hiw-stage { position: relative; height: auto; padding-block: var(--section-y); }

/* ── Find us: calendar, event, map ── */
.hub { padding: var(--section-y) 0; }
.hub-head { position: relative; text-align: center; margin-bottom: 56px; }
.hub-head .lede { margin-top: 20px; }
.hub-sticker { position: absolute; right: 2%; top: -40px; width: clamp(140px, 15vw, 230px); }
.hub-sticker .sticker { transform: rotate(9deg); }
.hub-sticker .bubble { position: absolute; left: -46%; top: -12%; }
.dietary-bar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.dietary-bar > span { font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--on-green-muted); margin-right: 6px; }
.diet-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--line-light); border-radius: var(--radius);
  font-size: 15px; font-weight: 600; color: var(--on-green);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.diet-toggle .tick { width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 2px; display: grid; place-items: center; }
.diet-toggle.active { background: var(--cream); border-color: var(--cream); color: var(--green-deep); }
.diet-toggle.active .tick { background: var(--green-deep); border-color: var(--green-deep); }
.diet-toggle.active .tick::after { content: ''; width: 9px; height: 5px; border: 2px solid var(--cream); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.diet-toggle:not(.active):hover { border-color: var(--on-green-muted); }
.hub-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; align-items: start; }
.calendar-panel { background: var(--cream); color: var(--ink); border-radius: var(--radius); padding: clamp(20px, 2.6vw, 36px); }
.cal-month-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cal-month-header h3 { font-family: var(--font-display); font-weight: normal; font-size: clamp(32px, 3vw, 44px); line-height: 1; color: var(--green-deep); }
.cal-nav { width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--line-dark); border-radius: 50%; color: var(--green-deep); transition: border-color .2s var(--ease); }
.cal-nav:hover { border-color: var(--green-deep); }
.cal-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day-name { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); padding: 8px 0; }
.cal-day { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius); font-size: 16px; color: rgba(26, 30, 24, .42); position: relative; font-variant-numeric: tabular-nums; }
.cal-day.empty { visibility: hidden; }
.cal-day.has-event { background: var(--green-vivid); color: var(--green-deep); font-weight: 600; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.cal-day.has-event:hover { background: var(--green-mid); color: var(--cream); }
.cal-day.selected { background: var(--green-deep) !important; color: var(--cream) !important; }
.cal-day.today::after { content: ''; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.event-detail { display: grid; grid-template-columns: 1fr auto; gap: 20px 24px; align-items: start; border: 1.5px solid var(--line-light); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 32px); margin-bottom: 24px; }
.event-detail.is-changing .event-detail-main, .event-detail.is-changing .scarcity { opacity: 0; transform: translateY(6px); }
.event-detail-main, .scarcity { transition: opacity .3s var(--ease), transform .3s var(--ease); }
.event-detail h4 { font-family: var(--font-display); font-weight: normal; font-size: clamp(34px, 3vw, 48px); line-height: 1; margin-bottom: 8px; }
.event-location { color: var(--on-green-muted); font-size: 16px; }
.event-tags { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 14px; font-weight: 600; }
.event-tag { display: inline-flex; align-items: center; gap: 6px; }
.event-tag::before { content: ''; width: 10px; height: 6px; border: 2px solid var(--green-vivid); border-top: 0; border-right: 0; transform: translateY(-2px) rotate(-45deg); }
.scarcity { text-align: right; }
.scarcity-num { display: block; font-family: var(--font-display); font-size: clamp(64px, 6vw, 96px); line-height: .85; color: var(--green-vivid); }
.scarcity-label { font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--on-green-muted); }
.event-detail .btn { grid-column: 1 / -1; justify-self: start; }
.map-panel { border-radius: var(--radius); overflow: hidden; background: var(--green-rich); }
#event-map { width: 100%; height: 300px; border: 0; }
.map-card { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 200px; padding: 28px; background: var(--green-rich); }
.map-card-address { font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.25; max-width: 22ch; }
.event-list { margin-top: 24px; border-top: 1px solid var(--line-light); }
.event-row { width: 100%; display: grid; grid-template-columns: 130px 1fr auto 20px; gap: 16px; align-items: center; text-align: left; padding: 18px 12px; border-bottom: 1px solid var(--line-light); position: relative; transition: background-color .2s var(--ease); }
.event-row:hover { background: rgba(242, 246, 238, .05); }
.event-row.active { background: rgba(242, 246, 238, .08); }
.event-row.active::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--green-vivid); }
.event-row-date { font-weight: 600; color: var(--green-vivid); font-variant-numeric: tabular-nums; }
.event-row-name { font-weight: 600; }
.event-row-left { font-size: 14px; color: var(--on-green-muted); }
.event-row-left.out { text-decoration: line-through; }
.event-row-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .5; }

/* ── Nutrition (cream) ── */
.on-cream { background: var(--cream); color: var(--ink); }
.nutrition { padding: var(--section-y) 0; }
.nutrition-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 64px; }
.nutrition-head .two-tone { color: var(--green-deep); }
.nutri-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); align-items: stretch; margin-bottom: clamp(48px, 7vh, 80px); }

/* anatomy of the bowl: the overhead photo with ingredient callouts */
.anatomy { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--cream-2); }
.anatomy img { width: 100%; height: 100%; aspect-ratio: 1320 / 870; object-fit: cover; }
.callouts { list-style: none; }
.callout { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.callout::before { content: ''; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 2px var(--green-deep), 0 4px 10px rgba(3, 12, 5, .35); }
.callout::after { content: ''; position: absolute; left: 7px; top: -1px; width: 26px; height: 2px; background: var(--cream); }
.callout span {
  position: absolute; left: 33px; top: 0; transform: translateY(-50%); white-space: nowrap;
  background: var(--green-deep); color: var(--cream); border-radius: var(--radius); padding: 6px 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(3, 12, 5, .3);
}
.callout.to-left::after { left: auto; right: 7px; }
.callout.to-left span { left: auto; right: 33px; }

/* the nutrition panel: per bowl, with each nutrient's share of the reference intake */
.label-card { display: flex; flex-direction: column; background: var(--white); border: 1.5px solid var(--green-deep); border-radius: var(--radius); padding: clamp(22px, 2.4vw, 34px); }
.label-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--font-display); font-weight: normal; font-size: clamp(36px, 3.2vw, 52px); line-height: 1; color: var(--green-deep); padding-bottom: 14px; border-bottom: 6px solid var(--green-deep); }
.label-per { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }
.nutri-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.nutri-table tr { border-bottom: 1px solid var(--line-dark); position: relative; outline-offset: -2px; }
.nutri-table th, .nutri-table td { padding: 16px 0; text-align: left; vertical-align: middle; }
.nutri-table th { font-size: 15px; font-weight: 600; color: var(--ink); width: 34%; }
.nutri-table .amt { font-size: clamp(26px, 2.2vw, 34px); font-weight: 600; color: var(--green-deep); letter-spacing: -.01em; width: 30%; white-space: nowrap; }
.nutri-table .amt small { font-size: 14px; font-weight: 600; color: var(--ink-muted); letter-spacing: 0; }
.nutri-table .ri { white-space: nowrap; }
.meter { position: relative; display: inline-block; vertical-align: middle; width: calc(100% - 52px); margin-right: 10px; height: 10px; border-radius: 5px; background: #D5E2CB; overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--green-mid); border-radius: 0 5px 5px 0; transition: width .9s var(--ease); }
.pct { display: inline-block; vertical-align: middle; min-width: 42px; text-align: right; font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.nutri-table tr[data-tip]:hover::after, .nutri-table tr[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% - 6px); z-index: 3;
  background: var(--green-deep); color: var(--cream); font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: var(--radius); white-space: nowrap;
  box-shadow: 0 10px 24px rgba(3, 12, 5, .3);
}
.ri-note { font-size: 13px; color: var(--ink-muted); margin-top: 14px; }
.natural { display: flex; align-items: baseline; gap: 12px; margin-top: auto; padding-top: 22px; border-top: 6px solid var(--green-deep); }
.natural-num { font-size: clamp(34px, 3vw, 46px); font-weight: 600; color: var(--green-mid); letter-spacing: -.02em; line-height: 1; }
.natural-label { font-size: 15px; font-weight: 600; color: var(--ink); }

.facts { display: block; padding-top: clamp(48px, 6vw, 80px); border-top: 1.5px solid var(--green-deep); }
.fact-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fact { padding: 4px clamp(24px, 3vw, 48px); border-left: 1px solid var(--line-dark); }
.fact:first-child { padding-left: 0; border-left: 0; }
.fact:last-child { padding-right: 0; }
.fact svg { width: 40px; height: 40px; margin-bottom: 20px; fill: none; stroke: var(--green-mid); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fact-label { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 10px; }
.fact p { color: var(--ink-muted); font-size: 16px; }

/* ── Newsletter ── */
.newsletter { padding: var(--section-y) 0; }
.newsletter-inner { max-width: 880px; margin: 0 auto; text-align: center; }
.newsletter-inner .lede { margin: 22px auto 40px; }
.newsletter-form { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 0 auto; text-align: left; }
.nl-copy, .newsletter-form { min-width: 0; }
.newsletter-inner.nl-split { max-width: var(--max-w); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px clamp(40px, 7vw, 128px); align-items: center; text-align: left; }
.nl-split .lede { margin: 22px 0 40px; max-width: 34ch; }
.nl-split .newsletter-form { width: 100%; max-width: 560px; margin: 0; justify-self: end; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); background: var(--green-deep); box-shadow: inset 0 0 0 1px var(--line-light); }

/* the coupon: a kraft ticket with a torn-off stub */
.coupon {
  --stub: 82px; position: relative; display: inline-flex; align-items: stretch; min-height: 116px; color: var(--green-deep);
  transform: rotate(-4deg); transform-origin: 20% 50%; filter: drop-shadow(0 14px 22px rgba(4, 14, 6, .35));
}
.coupon-stub, .coupon-main { background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .21 0 0 0 0 .08 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(170deg, #D8B887 0%, #C9A26A 60%, #BE9660 100%); }
.coupon-stub { width: var(--stub); display: grid; place-items: center; border-radius: var(--radius) 0 0 var(--radius);
  -webkit-mask: radial-gradient(circle at 100% 0, transparent 9px, #000 9.5px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 9px, #000 9.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 100% 0, transparent 9px, #000 9.5px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 9px, #000 9.5px) bottom / 100% 51% no-repeat; }
.coupon-stub .logo-crop { --lh: 76px; margin: 0; transform: rotate(-90deg); }
.coupon-main { display: flex; align-items: center; gap: 16px; padding: 16px 28px 16px 24px; border-radius: 0 var(--radius) var(--radius) 0; border-left: 2px dashed rgba(26, 61, 26, .45);
  -webkit-mask: radial-gradient(circle at 0 0, transparent 9px, #000 9.5px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 9px, #000 9.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 0 0, transparent 9px, #000 9.5px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 9px, #000 9.5px) bottom / 100% 51% no-repeat; }
.coupon-amount { font-family: var(--font-display); font-weight: normal; font-size: clamp(56px, 5.4vw, 80px); line-height: .9; }
.coupon-text { max-width: 15ch; font-size: 15px; font-weight: 600; line-height: 1.3; }
@media (hover: hover) { .coupon:hover { animation: wiggle .7s var(--ease); } }
.nl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.newsletter-form input { width: 100%; min-height: 56px; padding: 0 16px; border-radius: var(--radius); background: var(--cream); color: var(--ink); border: 1.5px solid var(--cream); outline: none; font-size: 16px; -webkit-appearance: none; appearance: none; transition: border-color .2s var(--ease); }
.newsletter-form input::placeholder { color: var(--ink-muted); }
.newsletter-form input:focus { border-color: var(--green-vivid); }
.newsletter-form .btn { width: 100%; margin-top: 4px; }
.nl-trap { position: absolute; left: -5000px; }
.nl-status { font-size: 15px; margin-top: 6px; text-align: center; }
.nl-status.err { color: #FFD5CF; }

/* ================================================================
   INNER PAGES
   ================================================================ */

/* About */
.values { padding: var(--section-y) 0; }
.values-list { list-style: none; border-top: 1px solid var(--line-light); margin-top: 56px; }
.values-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px 48px; padding: 36px 0; border-bottom: 1px solid var(--line-light); }
.values-list h3 { font-family: var(--font-display); font-weight: normal; font-size: clamp(40px, 4.4vw, 72px); line-height: .95; }
.values-list p { color: var(--on-green-muted); font-size: clamp(17px, 1.4vw, 20px); align-self: center; }
.dish { padding: var(--section-y) 0; }
.dish-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dish-grid img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.dish-copy h2 { margin-bottom: 28px; color: var(--green-deep); }
.dish-copy p { color: var(--ink-muted); margin-bottom: 18px; max-width: 56ch; }
.ticks { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 28px 0 36px; }
.ticks li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; color: var(--green-deep); }
.ticks svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--green-mid); stroke-width: 2; }
.cta-band { padding: clamp(72px, 10vh, 120px) 0; }
.cta-band-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band .two-tone { font-size: clamp(44px, 5.6vw, 96px); }
.cta-band .lede { margin-top: 16px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* FAQs */
.faq { padding: var(--section-y) 0; }
.faq-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px 64px; padding: 40px 0; border-top: 1px solid var(--line-light); }
.faq-group-head h2 { font-family: var(--font-display); font-weight: normal; font-size: clamp(34px, 3.4vw, 52px); line-height: 1; }
.faq-group-head p { color: var(--on-green-muted); font-size: 16px; margin-top: 10px; }
.faq-item { border-bottom: 1px solid var(--line-light); }
.faq-item:first-child { border-top: 1px solid var(--line-light); }
.faq-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; text-align: left; padding: 22px 0; font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; }
.faq-btn:hover .faq-q { color: var(--green-vivid); }
.faq-icon { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-light); position: relative; transition: transform .35s var(--ease), background-color .2s var(--ease); }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--cream); color: var(--green-deep); border-color: var(--cream); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { color: var(--on-green-muted); padding: 0 56px 24px 0; }
.faq-help { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 56px; padding: 32px; background: var(--green-rich); border-radius: var(--radius); }
.faq-help p { font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; }

/* Pre-order */
.order { padding: clamp(72px, 10vh, 120px) 0 var(--section-y); }
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.form-intro > p { color: var(--ink-muted); margin: 0 0 28px; }
.dish-card { margin: 0 0 32px; background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1.5px solid var(--line-dark); }
.dish-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.dish-card-body { padding: 22px 24px 24px; }
.dish-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.dish-card-name { font-family: var(--font-display); font-weight: normal; font-size: clamp(30px, 2.6vw, 40px); line-height: 1; color: var(--green-deep); }
.dish-card-price { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; line-height: 1; }
.dish-card-amount { font-family: var(--font-display); font-size: clamp(36px, 3.4vw, 46px); color: var(--green-mid); line-height: 1; }
.dish-card-unit { margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }
.dish-card-desc { font-size: 16px; color: var(--ink-muted); margin-bottom: 12px; }
.dish-card-facts { font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--green-mid); }
.how-it-works-flow { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 28px; }
.hiw-step { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; border-radius: var(--radius); background: var(--cream-2); }
.hiw-step svg { width: 22px; height: 22px; fill: none; stroke: var(--green-mid); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hiw-label { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--green-deep); }
.form-trust { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line-dark); }
.trust-item { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--ink-muted); }
.trust-item svg { width: 18px; height: 18px; flex: none; margin-top: 3px; fill: none; stroke: var(--green-mid); stroke-width: 2.4; }
.form-card { background: var(--white); border: 1.5px solid var(--line-dark); border-radius: var(--radius); padding: clamp(22px, 3vw, 44px); min-width: 0; color: var(--ink); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.form-grid > * { min-width: 0; }
.field-group { display: flex; flex-direction: column; gap: 7px; }
.field-group.full { grid-column: 1 / -1; }
.field-group label { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }
.field-group input, .field-group select, .field-group textarea, .discount-row input {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--cream); border: 1.5px solid var(--line-dark); color: var(--ink); font-size: 16px; outline: none;
  -webkit-appearance: none; appearance: none; transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field-group input:focus, .field-group select:focus, .field-group textarea:focus, .discount-row input:focus { border-color: var(--green-mid); background: var(--white); }
.field-group textarea { resize: vertical; min-height: 96px; }
.field-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234C5A4A' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.sms-row { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: var(--cream); border: 1.5px solid var(--line-dark); border-radius: var(--radius); margin-bottom: 20px; }
.sms-row input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--green-mid); }
.sms-row label { font-size: 14px; color: var(--ink-muted); line-height: 1.5; }
.sms-row label strong { display: block; color: var(--ink); font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.discount-box { display: flex; flex-direction: column; gap: 8px; }
.discount-box label { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }
.discount-row { display: flex; gap: 8px; }
.discount-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .04em; }
.discount-row input::placeholder { text-transform: none; letter-spacing: 0; }
.discount-row input.is-applied { border-color: var(--green-vivid); background: #EEF8EE; }
.discount-apply { flex-shrink: 0; padding: 0 20px; border: 1.5px solid var(--green-deep); border-radius: var(--radius); color: var(--green-deep); font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; transition: background-color .2s var(--ease), color .2s var(--ease); }
.discount-apply:hover { background: var(--green-deep); color: var(--cream); }
.discount-apply:disabled { opacity: .6; cursor: wait; }
.discount-msg { margin: 0; font-size: 14px; line-height: 1.5; }
.discount-msg:empty { display: none; }
.discount-msg.ok { color: var(--green-mid); }
.discount-msg.err { color: #B3261E; }
.discount-remove { margin-left: 4px; color: var(--ink-muted); text-decoration: underline; font-size: 14px; }
.price-summary { margin-top: 16px; padding: 14px 16px; background: var(--cream); border: 1.5px solid var(--line-dark); border-radius: var(--radius); font-size: 15px; }
.ps-line { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ps-disc { color: var(--green-mid); }
.ps-total { margin-top: 6px; padding-top: 9px; border-top: 1px solid var(--line-dark); color: var(--ink); font-weight: 600; font-size: 16px; }
.pay-btn { width: 100%; margin-top: 22px; background: var(--green-deep); color: var(--cream); }
.pay-btn:hover { background: var(--green-rich); }
.pay-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--ink-muted); text-align: center; margin: 12px 0 0; }
.form-status { display: none; margin-top: 14px; padding: 12px 16px; border-radius: var(--radius); font-size: 15px; line-height: 1.55; border-left: 3px solid var(--line-dark); }
.form-status.success { display: block; color: var(--green-mid); background: #EEF8EE; border-left-color: var(--green-mid); }
.form-status.error { display: block; color: #B3261E; background: #FDF1F0; border-left-color: #B3261E; }
.order-success { margin-top: 24px; padding: 28px 24px; background: var(--cream); border: 2px dashed var(--green-vivid); border-radius: var(--radius); text-align: center; }
.order-success .os-eyebrow { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--green-deep); margin: 0 0 14px; }
.order-success .os-label { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 6px; }
.order-success .os-ref { font-family: 'Courier New', monospace; font-size: clamp(30px, 8vw, 40px); font-weight: 700; letter-spacing: .08em; color: var(--green-deep); margin: 0 0 14px; line-height: 1.1; }
.order-success .os-detail { font-size: 15px; color: var(--ink); margin: 0 0 12px; }
.order-success .os-note { font-size: 14px; line-height: 1.6; color: var(--ink-muted); margin: 0; }
.order-success .os-again { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--green-mid); }
.order-success .os-disc { color: var(--green-mid); font-size: 14px; margin-top: -6px; }
#preorder-form.is-complete .form-grid, #preorder-form.is-complete .sms-row, #preorder-form.is-complete #pay-area, #preorder-form.is-complete .discount-box, #preorder-form.is-complete .price-summary { display: none; }
#preorder-form.is-complete .order-success { margin-top: 0; }

/* Blog */
.blog { padding: 0 0 var(--section-y); }
.blog-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; margin-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line-light); }
.blog-count { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-green-muted); }
.blog-tools select { min-height: 44px; padding: 0 40px 0 14px; border-radius: var(--radius); background: var(--green-rich) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F2F6EE' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center; border: 1.5px solid var(--line-light); color: var(--on-green); font-size: 14px; font-weight: 600; -webkit-appearance: none; appearance: none; }
.blog-empty { padding: 60px 0; color: var(--on-green-muted); }

/* the cover story: a big picture with a cream card laid over its corner */
.blog-feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; margin-bottom: clamp(96px, 12vw, 168px); }
.feature-pic { display: block; grid-column: 1 / 10; grid-row: 1; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--green-rich); }
.feature-pic img, .entry-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.blog-feature:hover .feature-pic img, .entry-row:hover .entry-pic img { transform: scale(1.045); }
.feature-card {
  grid-column: 7 / 13; grid-row: 1; position: relative; z-index: 1; margin-bottom: -56px;
  display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 3vw, 48px);
  background: var(--cream); color: var(--ink); border-radius: var(--radius); box-shadow: 0 30px 60px rgba(3, 12, 5, .35);
}
.feature-title { font-family: var(--font-display); font-weight: normal; font-size: clamp(40px, 3.8vw, 66px); line-height: .94; color: var(--green-deep); text-wrap: balance; }
.feature-card .entry-meta { color: var(--green-mid); }
.feature-card .entry-excerpt { color: var(--ink-muted); -webkit-line-clamp: 4; }
.feature-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
.feature-author { font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.blog-feature:hover .btn::after { transform: translateX(4px); }

/* every other story: picture left, words right */
.entry-list { display: grid; }
.entry-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(32px, 5vw, 88px); align-items: center; padding: clamp(32px, 4vw, 56px) 0; border-top: 1px solid var(--line-light); }
.entry-list > .entry-row:last-child { border-bottom: 1px solid var(--line-light); }
.entry-pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--green-rich); }
.entry-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--green-vivid); }
.entry-meta span + span::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; margin-right: 12px; vertical-align: middle; }
.entry-title { font-family: var(--font-display); font-weight: normal; font-size: clamp(34px, 3.2vw, 54px); line-height: .95; text-wrap: balance; transition: color .2s var(--ease); }
.entry-row:hover .entry-title { color: var(--green-vivid); }
.entry-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; max-width: 58ch; font-size: 17px; color: var(--on-green-muted); }
.entry-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.entry-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.entry-row:hover .entry-go svg { transform: translateX(5px); }

/* Post: long-form reading */
.reading-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: var(--green-vivid); transform-origin: left; transform: scaleX(var(--p, 0)); z-index: 1100; }
.post { padding: calc(var(--nav-h) + clamp(48px, 8vh, 96px)) 0 var(--section-y); }
.post-back { margin-bottom: 36px; }
.post-date { margin-bottom: 20px; }
.post-title { font-family: var(--font-display); font-weight: normal; font-size: clamp(48px, 6vw, 96px); line-height: .92; margin-bottom: 28px; text-wrap: balance; }
.post-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 18px 0; border-block: 1px solid var(--line-light); margin-bottom: 40px; }
.post-author { font-size: 15px; color: var(--on-green-muted); }
.post-image { position: relative; left: 50%; width: min(1180px, 100vw - 2 * var(--gutter)); max-width: none; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin-bottom: clamp(40px, 6vw, 72px); transform: translateX(-50%); }
.more-stories { padding: 0 0 var(--section-y); }
.more-stories h2 { font-size: clamp(48px, 6vw, 88px); margin-bottom: clamp(28px, 4vw, 48px); }
.share-wrap { position: relative; }
.share-toggle-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-light); border-radius: var(--radius); font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.share-toggle-btn:hover { border-color: var(--on-green); }
.share-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 210px; background: var(--cream); color: var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: 0 16px 40px rgba(3, 12, 5, .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s; }
.share-menu.open { opacity: 1; visibility: visible; transform: none; transition: opacity .18s var(--ease), transform .18s var(--ease); }
.share-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--line-dark); }
.share-item:last-child { border-bottom: 0; }
button.share-item { width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; color: inherit; cursor: pointer; }
.share-item:hover { background: var(--cream-2); }
.share-icon { width: 16px; height: 16px; flex: none; color: var(--green-mid); }
.share-note { padding: 10px 16px 14px; font-size: 13px; color: var(--ink-muted); }
.prose { font-size: 19px; line-height: 1.8; color: rgba(242, 246, 238, .86); }
.prose > * + * { margin-top: 1.1em; }
.prose h1, .prose h2, .prose .prose-title { font-family: var(--font-display); font-weight: normal; color: var(--on-green); line-height: 1; margin-top: 1.6em; }
.prose h1, .prose .prose-title { font-size: clamp(36px, 4vw, 52px); }
.prose .f-avallon { font-family: var(--font-display); font-weight: normal; }   /* the blog editor's Font option */
.prose p.f-avallon, .prose p span.f-avallon { font-size: 1.45em; line-height: 1.25; }
.prose :is(h3, h4, h5, h6).f-avallon { font-size: 30px; line-height: 1.15; }
.prose h2 { font-size: clamp(32px, 3.4vw, 44px); }
.prose h3, .prose h4, .prose h5, .prose h6 { font-family: var(--font-body); font-weight: 600; color: var(--on-green); line-height: 1.3; margin-top: 1.6em; }
.prose h3 { font-size: 22px; }
.prose h4 { font-size: 19px; }
.prose a { color: var(--green-vivid); text-decoration: underline; text-underline-offset: 3px; }
.prose strong, .prose b { color: var(--on-green); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose img { border-radius: var(--radius); }
.prose figure.post-img { margin: 1.6em 0; }   /* images added inside a post from the admin */
.prose figure.post-img img { display: block; width: 100%; height: auto; }
/* posts pasted from Google Docs carry their own fonts and black text: let the site's type win */
.prose [style] { color: inherit !important; background-color: transparent !important; font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; white-space: normal !important; }
.prose > div + div, .prose > p + div { margin-top: 1.1em; }
.prose em, .prose i { font-style: normal; font-weight: 600; }
.post-ad { margin-top: 48px; }
.post-status { padding: 60px 0; text-align: center; color: var(--on-green-muted); }
.post-status .btn { margin-top: 20px; }

/* Legal */
.legal { padding: 0 0 var(--section-y); }
.legal-body { max-width: 760px; }
.legal-body h2 { font-family: var(--font-display); font-weight: normal; font-size: clamp(30px, 3vw, 42px); line-height: 1; margin: 56px 0 16px; padding-top: 28px; border-top: 1px solid var(--line-light); }
.legal-body > div:first-child h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body p, .legal-body li { color: rgba(242, 246, 238, .82); font-size: 17px; }
.legal-body p + p { margin-top: 14px; }
.legal-body ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.legal-body li { position: relative; padding-left: 22px; }
.legal-body li::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--green-vivid); }
.legal-body strong { color: var(--on-green); font-weight: 600; }
.legal-body a { color: var(--green-vivid); text-decoration: underline; text-underline-offset: 3px; }

/* Sitemap and 404 */
.sitemap-list { list-style: none; border-top: 1px solid var(--line-light); margin-top: 8px; }
.sitemap-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-light); font-family: var(--font-display); font-size: clamp(34px, 4vw, 60px); line-height: 1; transition: color .2s var(--ease); }
.sitemap-list a:hover { color: var(--green-vivid); }
.sitemap-list svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .4; }
.lost { min-height: 100svh; display: grid; align-items: center; padding: calc(var(--nav-h) + 40px) 0 80px; }
.lost-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.lost-art { position: relative; width: min(100%, 420px); justify-self: center; }
.lost-art .sticker { transform: rotate(172deg); }
.lost-art .bubble { position: absolute; left: 0; top: -8%; }
.lost-lede { margin-top: 24px; }
.lost .cta-actions { margin-top: 32px; }

/* ── Footer ── */
#footer { position: relative; padding: clamp(80px, 12vh, 140px) 0 0; overflow: hidden; }
.footer-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; align-items: end; padding-bottom: 56px; }
.footer-wave { position: relative; width: min(100%, 360px); }
.footer-wave .sticker { transform: rotate(-9deg); }
.footer-wave .bubble { position: absolute; right: -6%; top: -14%; }
.footer-nav { list-style: none; }
.footer-nav li { border-bottom: 1px solid var(--line-light); }
.footer-nav li:first-child { border-top: 1px solid var(--line-light); }
.footer-nav a { display: block; padding: 8px 0; font-family: var(--font-display); font-size: clamp(36px, 4.4vw, 68px); line-height: 1.05; transition: color .2s var(--ease); }
.footer-nav a:hover { color: var(--green-vivid); }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 40px 0; border-top: 1px solid var(--line-light); }
.footer-col h4 { font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--on-green-muted); margin-bottom: 14px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col a:hover { color: var(--green-vivid); }
.footer-contact { margin-bottom: 16px; }
/* the big logo sits behind the footer, faint */
.footer-logo { position: absolute; left: 50%; bottom: 64px; z-index: -1; width: min(1340px, calc(100% - 2 * var(--gutter))); transform: translateX(-50%); opacity: .07; pointer-events: none; }
.footer-logo img { width: 100%; height: auto; }
#footer .container { position: relative; z-index: 1; }
#footer .footer-cols { padding-bottom: clamp(120px, 16vw, 240px); }
.footer-bottom { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 22px 0 28px; border-top: 1px solid var(--line-light); font-size: 14px; color: var(--on-green-muted); background: var(--green-night); margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.footer-bottom-right { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.footer-bottom-right a:hover, .cookie-link:hover { color: var(--on-green); }
.cookie-link { font-size: 14px; color: var(--on-green-muted); }
.designed-by { color: var(--green-vivid); font-weight: 600; }

/* ── Cookie banner ── */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500; background: var(--green-night); border-top: 1px solid var(--line-light); padding: 20px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px)); }
.cookie-banner-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.cookie-banner-text { font-size: 14px; color: var(--on-green-muted); max-width: 620px; flex: 1 1 320px; }
.cookie-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-banner-actions button { min-height: 44px; padding: 0 18px; border-radius: var(--radius); font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
#cookie-accept-all { background: var(--cream); color: var(--green-deep); }
#cookie-necessary { border: 1.5px solid var(--line-light); }
#cookie-reject { text-decoration: underline; text-underline-offset: 3px; color: var(--on-green-muted); }

/* ================================================================
   MOTION
   site.js gives [data-anim] elements .is-in the first time they show.
   Everything starts hidden only under html.anim, which the head sets
   when motion is allowed, so the page reads fine without scripts.
   ================================================================ */
/* headings are painted on with the brush, line by line */
.anim .two-tone:not(.tt-ready) { opacity: 0; }
.anim [data-anim="brush"] .tt-line { clip-path: inset(-.3em 100% -.45em -.2em); transition: clip-path 1s cubic-bezier(.65, 0, .25, 1); }
.anim [data-anim="brush"] .tt-accent { transition-delay: .28s; }
.anim [data-anim="brush"].is-in .tt-line { clip-path: inset(-.3em -.2em -.45em -.2em); }

/* the bowl photo settles in, then each ingredient is pointed out */
.anim .anatomy[data-anim] img { transform: scale(1.12); }
.anim .anatomy[data-anim].is-in img { transform: none; transition: transform 1.8s var(--ease); }
.anim .anatomy[data-anim] .callout { opacity: 0; transform: scale(.5); }
.anim .anatomy[data-anim].is-in .callout { opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .55s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.6s + var(--i, 0) * .13s); }

/* nutrition bars fill once the panel is on screen */
.anim .label-card[data-anim] .meter i { width: 0; }
.anim .label-card[data-anim].is-in .meter i { width: var(--w, 0%); transition-delay: calc(.25s + var(--i, 0) * .12s); }

/* fact icons draw themselves */
.anim [data-anim="draw"] svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim [data-anim="draw"].is-in svg path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease) calc(.15s + var(--i, 0) * .2s); }

/* story pictures are uncovered from the top down */
.anim [data-anim="unveil"] :is(.feature-pic, .entry-pic) { clip-path: inset(0 0 100% 0); }
.anim [data-anim="unveil"].is-in :is(.feature-pic, .entry-pic) { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
.anim [data-anim="unveil"]:not(.is-in) img { transform: scale(1.15); }

/* the coupon swings into place */
.anim .coupon[data-anim] { opacity: 0; transform: rotate(-18deg) translate(-30px, 50px); }
.anim .coupon[data-anim].is-in { opacity: 1; transform: rotate(-4deg); transition: transform 1.1s cubic-bezier(.3, 1.45, .5, 1) .35s, opacity .35s var(--ease) .35s; }

@keyframes wiggle { 0%, 100% { rotate: 0deg; } 30% { rotate: -5deg; } 65% { rotate: 3deg; } }
/* stickers give a little when touched */
@media (hover: hover) { .sticker:hover { animation: wiggle .7s var(--ease); } }

/* page to page: a green shutter drops over the page, then lifts on the next one (like the menu) */
.page-shutter { position: fixed; inset: 0; z-index: 990; background: var(--green-deep); clip-path: inset(0 0 100% 0); visibility: hidden; pointer-events: none; }
.page-shutter.down { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .6s cubic-bezier(.7, 0, .2, 1); pointer-events: auto; }
html.shutter-in .page-shutter { visibility: visible; clip-path: inset(0 0 0 0); }
html.shutter-in body::before { content: ''; position: fixed; inset: 0; z-index: 989; background: var(--green-deep); }
.page-shutter.up { visibility: visible; clip-path: inset(0 0 100% 0); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .feature-pic { grid-column: 1 / 11; }
  .feature-card { grid-column: 6 / 13; }
}
@media (max-width: 1024px) {
  .hub-grid, .nutri-grid, .form-layout, .dish-grid { grid-template-columns: 1fr; }
  /* picture on top, caption underneath: they never overlap, whatever the screen */
  .hiw-stage { justify-content: flex-start; padding-bottom: 96px; }
  /* every caption sits in the same cell, so the box keeps the height of the longest one */
  .hiw-caption { display: grid; }
  .hiw-cap, .hiw-cap.on { display: block; grid-row: 2; grid-column: 1; visibility: hidden; opacity: 0; transition: none; }   /* the old text goes at once, so two never show together */
  .hiw-cap.on { visibility: visible; opacity: 1; animation: cap-in .35s var(--ease); }
  .hiw-frame { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: auto; max-height: 760px; }
  .hiw-scenes { position: relative; inset: auto; flex: 1 1 auto; min-height: 120px; }
  .hiw-scene { padding: 18px; place-content: center; }
  .hiw-caption { position: relative; left: auto; bottom: auto; width: auto; margin: 0 12px 12px; }
  .hiw-sticker { display: none; }
  .faq-group { grid-template-columns: 1fr; }
  .newsletter-inner.nl-split { grid-template-columns: minmax(0, 1fr); }
  .nl-split .newsletter-form { justify-self: start; }
}
@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  body { font-size: 17px; }
  .nav-plate, #site-nav.scrolled .nav-plate { --lh: 96px; }
  .logo-crop, #site-nav.scrolled .logo-crop { margin: calc(14px + env(safe-area-inset-top, 0px)) 16px 19px; }
  .nav-dock { margin-top: 12px; }
  .nav-order { min-height: 42px; padding: 0 12px; margin-left: 0; }
  .nav-menu-label { display: none; }
  .nav-toggle { width: 42px; padding: 0; justify-content: center; }
  .nav-overlay-inner { grid-template-columns: 1fr; grid-template-rows: auto; padding-top: calc(var(--nav-h) + 48px); gap: 32px; }
  .menu-sticker { display: none; }
  .menu-next { max-width: none; }
  .nl-split .newsletter-form { justify-self: stretch; max-width: none; padding: 18px; }
  .newsletter-inner.nl-split, .nl-split .nl-copy { text-align: center; justify-items: center; }
  .nl-split .lede { margin-inline: auto; }
  .nl-split .tt-line { margin-inline: auto; }
  .nl-split .coupon { transform-origin: 50% 50%; }
  .nl-split .lede { margin-bottom: 32px; }
  .coupon { --stub: 56px; min-height: 92px; max-width: calc(100% - 12px); }
  .coupon-main { min-width: 0; padding: 12px 16px 12px 14px; gap: 10px; }
  .coupon-amount { font-size: clamp(40px, 13vw, 60px); }
  .coupon-text { min-width: 0; font-size: 14px; }
  .coupon-stub .logo-crop { --lh: 58px; }
  .story { height: 360svh; }
  .hero-copy { padding-bottom: 28px; }
  .hero-h1 { font-size: clamp(56px, 17vw, 96px); margin-bottom: 22px; }
  .hero-row { flex-direction: column; align-items: stretch; gap: 18px; }
  .hero-row .btn { width: 100%; }
  .hero-next { order: 0; }
  .hero-next-sep { display: none; }
  .hero-next-left { display: block; }
  .hero-card { top: calc(var(--nav-h) + 26px); left: auto; right: 14px; width: 132px; padding: 6px 6px 8px; transform: rotate(4deg); }
  @keyframes card-drop { from { opacity: 0; transform: translateY(-40px) rotate(14deg); } to { opacity: 1; transform: rotate(4deg); } }
  .hero-card-cap { padding: 7px 2px 0; }
  .hero-card .dish-name, .hero-card .dish-price { font-size: 15px; }
  .hero-card .dish-sub { display: none; }
  .hero-card-tape { width: 58px; height: 18px; top: -9px; }
  .promo { padding-bottom: 96px; }
  .hiw { height: 400svh; }
  .hiw-stage { padding-bottom: 96px; }
  .hiw-stage { gap: 14px; padding-top: calc(var(--nav-h) + 12px); }
  .hiw-head .two-tone { font-size: clamp(36px, min(12vw, 7svh), 64px); }
  .hiw-scene { padding: 14px; }
  .hiw-card { padding: 18px; }
  .hiw-caption { padding: 16px 16px 14px; margin: 0 8px 8px; }
  .hiw-cap h3 { font-size: clamp(24px, 4svh, 32px); }
  .hiw-cap p { font-size: 15px; line-height: 1.5; }
  .hiw-card-title { font-size: 28px; }
  .hub-head { margin-bottom: 36px; }
  .hub-sticker { position: relative; right: auto; top: auto; margin: 32px auto 0; width: 150px; }
  .hub-sticker .bubble { left: auto; right: 78%; top: -18%; }
  .event-detail { grid-template-columns: 1fr; }
  .scarcity { text-align: left; display: flex; align-items: baseline; gap: 12px; }
  .event-detail .btn { width: 100%; }
  .event-row { grid-template-columns: 1fr auto; padding: 16px 8px; }
  .event-row-name { grid-column: 1; grid-row: 2; font-size: 15px; }
  .event-row-left { grid-column: 2; grid-row: 1 / span 2; }
  .event-row-arrow { display: none; }
  .nutrition-head, .page-hero-inner, .lost-inner { grid-template-columns: 1fr; }
  .page-hero-art { justify-self: start; width: 200px; margin-top: 8px; }
  .fact-list { grid-template-columns: 1fr; }
  .fact, .fact:first-child, .fact:last-child { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line-dark); }
  .fact:first-child { border-top: 0; padding-top: 0; }
  /* phones: labels sit above their dot, so none run off the photo's edge */
  .callout::before { width: 12px; height: 12px; left: -6px; top: -6px; }
  .callout::after, .callout.to-left::after { left: -1px; right: auto; top: -17px; width: 2px; height: 11px; }
  .callout span, .callout.to-left span { font-size: 10.5px; padding: 4px 7px; left: 0; right: auto; top: -17px; transform: translate(-50%, -100%); box-shadow: 0 4px 12px rgba(3, 12, 5, .3); }
  .nutri-table th { width: 38%; font-size: 14px; }
  .nl-row, .form-grid { grid-template-columns: 1fr; }
  .values-list li { grid-template-columns: 1fr; padding: 28px 0; }
  .how-it-works-flow { grid-template-columns: 1fr 1fr; }
  .blog-feature { display: block; margin-bottom: 72px; }
  .feature-pic { aspect-ratio: 4 / 3; }
  .feature-card { margin: -48px 12px 0; padding: 24px 20px; gap: 14px; }
  .entry-row { grid-template-columns: 1fr; gap: 18px; padding: 28px 0; }
  .faq-a p { padding-right: 0; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-wave { width: 220px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-cols .footer-col:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .float-cta { left: 12px; right: 12px; justify-content: space-between; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions button { flex: 1 1 auto; }
}

/* very short screens (phones on their side): picture and caption side by side */
@media (max-height: 520px) and (min-width: 560px) {
  .hiw-stage { gap: 8px; padding: calc(var(--nav-h) + 4px) var(--gutter) 84px; }
  .hiw-head .two-tone { font-size: clamp(28px, 8svh, 40px); }
  .hiw-head .two-tone .tt-line { display: inline; }
  .hiw-frame { display: flex; flex-direction: row; flex: 1 1 auto; height: auto; min-height: 0; max-height: none; }
  .hiw-scenes { position: relative; inset: auto; flex: 1 1 55%; min-height: 0; }
  .hiw-scene { padding: 12px; place-content: center; }
  .hiw-caption { position: relative; left: auto; bottom: auto; width: auto; flex: 0 0 42%; align-self: center; margin: 8px; }
}

@keyframes cap-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .hero-underline path { stroke-dashoffset: 0; }
  .statement-text .w { opacity: 1; }
}