/* Better BTTR — flavor page template (Figma frames CHILI / LEMON / GREEN / SMOKE).
   Loaded after bttr.css. Each page picks its accent with a body modifier:
   <body class="flavor flavor--chili"> etc. Everything reads from these custom properties. */

.flavor {
  --accent: #9e000c;        /* page colour (Figma frame fill) */
  --accent-ink: #9e000c;    /* text colour on a white button hover */
  --fg: #fff;               /* text on the accent colour */
  --fg-soft: rgba(255,255,255,.9);
  --line: rgba(255,255,255,.55);
  --veil: rgba(0,0,0,.25);  /* the translucent panels in the design */
  --shade: rgba(0,0,0,.25);
  background: var(--accent); color: var(--fg);
}
.flavor--chili  { --accent: #9e000c; --accent-ink: #9e000c; }
.flavor--citrus { --accent: #ffd54e; --accent-ink: #6b4c00; --fg: #3b2a00; --fg-soft: rgba(59,42,0,.88); --line: rgba(59,42,0,.35); --shade: rgba(120,84,0,.12); }
.flavor--green  { --accent: #8c9a72; --accent-ink: #4d5a37; }
.flavor--smoke  { --accent: #1e1e1e; --accent-ink: #1e1e1e; --shade: rgba(255,255,255,.04); }

/* anything sitting on a photograph stays white whatever the page colour */
.on-photo { --fg: #fff; --fg-soft: rgba(255,255,255,.92); --line: rgba(255,255,255,.6); color: #fff; }

/* ---------- type ---------- */
.flavor h2 { font-size: clamp(26px, 2.6vw, 33px); letter-spacing: .2em; line-height: 1.25; }
.flavor h3 { font-size: clamp(18px, 1.8vw, 22px); letter-spacing: .2em; line-height: 1.35; }
.flavor .kicker { color: var(--fg); letter-spacing: .2em; }
.flavor .body { font-size: 20px; letter-spacing: .08em; line-height: 1.45; color: var(--fg-soft); }
.flavor .rule { background: var(--fg); opacity: .8; width: 116px; }
.flavor .center .rule, .flavor .rule.mid { margin-left: auto; margin-right: auto; }

/* outlined pill buttons from the design (2px white stroke), filling on hover */
.flavor .btn.ghost { border-width: 2px; border-color: var(--fg); color: var(--fg); font-size: clamp(15px, 1.4vw, 18px); min-height: 57px; min-width: min(295px, 100%); }
.flavor .btn.ghost::before { background: var(--fg); }
.flavor .btn.ghost:hover, .flavor .btn.ghost:focus-visible { color: var(--accent-ink); box-shadow: 0 14px 34px rgba(0,0,0,.25); }
.on-photo .btn.ghost:hover, .on-photo .btn.ghost:focus-visible { color: var(--accent-ink); }
.flavor .link-arrow { color: var(--fg); transition: letter-spacing .4s var(--ease), opacity .3s; }
.flavor .link-arrow:hover { letter-spacing: .3em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 30px; }
.center .actions, .f-panel .actions { justify-content: center; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }

/* ---------- hero ---------- */
.f-hero { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(640px, 71vw, 912px);
  display: grid; place-items: center; text-align: center; padding: 40px var(--gutter) 90px; }
.f-hero .bg { position: absolute; inset: -14% 0; z-index: -2; }
.f-hero .bg img { width: 100%; height: 100%; object-fit: cover; }
.f-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,.18), rgba(0,0,0,.05) 60%), linear-gradient(to bottom, rgba(0,0,0,0) 70%, var(--accent)); }
.f-hero .pack { width: min(485px, 78vw); margin: 0 auto 18px; }
.f-hero .pack img { width: 100%; filter: drop-shadow(0 30px 60px rgba(0,0,0,.35)); }
.f-hero h1 { font-size: clamp(27px, 5.1vw, 65px); letter-spacing: .1em; line-height: 1.12; margin: 0 0 14px;
  text-shadow: 0 0 60px rgba(0,0,0,.35), 0 2px 14px rgba(0,0,0,.25); }
.f-hero h1 span { display: block; }
.f-hero .notes { font-size: clamp(17px, 1.6vw, 20px); letter-spacing: .1em; margin: 0 auto 26px; max-width: 680px; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.f-hero .float { position: absolute; z-index: 0; pointer-events: none; }
.f-hero .inner { position: relative; z-index: 1; }
.f-hero .float img { width: 100%; filter: drop-shadow(0 24px 30px rgba(0,0,0,.3)); }
.f-hero .scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  font-family: var(--display); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; }
.f-hero .scroll-cue::after { content: ""; display: block; width: 1px; height: 40px; margin: 10px auto 0; background: currentColor;
  animation: f-cue 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes f-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 640px) { .f-hero .float { display: none; } }

/* ---------- photo section with translucent panel (ingredients / "twist") ---------- */
.f-panel-section { position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 7vw, 80px) var(--gutter); }
.f-panel-section > .bg { position: absolute; inset: -16% 0; z-index: -1; }
.f-panel-section > .bg img { width: 100%; height: 100%; object-fit: cover; }
.f-panel { max-width: 810px; margin: 0 auto; background: var(--veil); border-radius: 30px; text-align: center;
  padding: clamp(36px, 5vw, 56px) clamp(22px, 6vw, 80px); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.f-panel .pack { width: min(351px, 70%); margin: 0 auto 26px; }
.f-panel .pack img { width: 100%; filter: drop-shadow(0 20px 40px rgba(0,0,0,.3)); }
.f-panel .body { max-width: 620px; margin: 0 auto; }

/* ---------- half-and-half splits (reuse .split from bttr.css) ---------- */
.flavor .split { min-height: clamp(520px, 50vw, 640px); }
.flavor .split .copy { padding: clamp(40px, 6vw, 88px) clamp(24px, 6vw, 88px); }
.flavor .split .copy .body { max-width: 520px; }
.flavor .split .media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(0,0,0,.12); pointer-events: none; }
.ings { list-style: none; margin: 8px 0 0; padding: 0; max-width: 485px; border-top: 1px solid var(--line); }
.ings li { border-bottom: 1px solid var(--line); padding: 13px 9px; font-size: 20px; letter-spacing: .08em; transition: padding .4s var(--ease), background .4s; }
.ings li:hover { padding-left: 18px; background: rgba(255,255,255,.06); }

/* ---------- benefits ---------- */
.f-benefits { padding: clamp(64px, 8vw, 110px) 0 clamp(40px, 5vw, 70px); }
.f-benefits .grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; margin: 34px 0 44px; }
.f-benefits ul { list-style: none; margin: 0; padding: 0; font-family: var(--display); font-size: 15px; letter-spacing: .2em; line-height: 3.8; text-transform: uppercase; }
.f-benefits ul:first-child { text-align: right; }
.f-benefits .pack { width: min(351px, 60vw); }
.f-benefits .pack img { width: 100%; filter: drop-shadow(0 24px 50px rgba(0,0,0,.3)); }
.f-benefits .body { max-width: 800px; margin: 0 auto; }
@media (max-width: 820px) {
  .f-benefits .grid { grid-template-columns: 1fr; }
  .f-benefits .pack { margin: 0 auto; order: -1; }
  .f-benefits ul, .f-benefits ul:first-child { text-align: center; line-height: 1.5; }
  .f-benefits li { padding: 9px 0; }
}

/* ---------- recipes ---------- */
.f-recipes { padding: clamp(30px, 4vw, 50px) 0 clamp(60px, 7vw, 90px); }
.f-recipes .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 8px; margin-top: 30px; }
.recipe { margin: 0; text-align: center; }
.recipe .ph { aspect-ratio: 1; overflow: hidden; }
.recipe img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.recipe:hover img { transform: scale(1.07); }
.recipe figcaption { font-family: var(--display); text-transform: uppercase; font-size: clamp(16px, 1.7vw, 22px); letter-spacing: .2em;
  line-height: 1.35; padding: 22px 16px 0; max-width: 400px; margin: 0 auto; }
@media (max-width: 760px) { .f-recipes .row { grid-template-columns: 1fr; gap: 34px; } .recipe .ph { aspect-ratio: 4/3; } }

/* ---------- origin band (reuses .band) ---------- */
.flavor .band { min-height: clamp(240px, 26vw, 330px); }
.flavor .band::after { content: ""; position: absolute; inset: 0; background: var(--veil); z-index: 1; }
.flavor .band h2 { text-shadow: 0 0 22px rgba(0,0,0,.45); margin-bottom: 14px; }

/* ---------- story rows: portrait image + copy ---------- */
.f-stories { padding: clamp(50px, 6vw, 80px) 0 clamp(40px, 5vw, 70px); display: grid; gap: clamp(60px, 7vw, 80px); }
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter); }
.story .frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 30px 70px rgba(0,0,0,.25); }
.story .frame img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; }
.story.flip .frame { order: -1; }
.story .body { max-width: 460px; }
@media (max-width: 760px) {
  .story { grid-template-columns: 1fr; }
  .story .frame, .story.flip .frame { order: -1; aspect-ratio: 5 / 4; }
}

/* ---------- join band ---------- */
.f-join { position: relative; isolation: isolate; overflow: hidden; padding: clamp(70px, 9vw, 115px) var(--gutter); }
.f-join > .bg { position: absolute; inset: -18% 0; z-index: -1; }
.f-join > .bg img { width: 100%; height: 100%; object-fit: cover; }
.f-join::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.2); z-index: -1; }
.f-join .f-panel { max-width: 883px; border-radius: 0; }
.f-join .body { max-width: 760px; }

/* ---------- you may also like ---------- */
.f-more { background: var(--shade); padding: clamp(60px, 7vw, 90px) 0 clamp(70px, 8vw, 110px); }
.f-more .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 204px)); justify-content: center; gap: 30px clamp(30px, 14vw, 186px); margin-top: 40px; }
.f-card { text-decoration: none; color: var(--fg); display: block; }
.f-card .ph { position: relative; aspect-ratio: 202 / 280; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.25); }
.f-card .ph::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.25); transition: opacity .6s var(--ease); }
.f-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.f-card:hover img, .f-card:focus-visible img { transform: scale(1.08); }
.f-card:hover .ph::after, .f-card:focus-visible .ph::after { opacity: 0; }
.f-card h3 { font-size: 18px; letter-spacing: .2em; margin: 18px 0 6px; }
.f-card .go { font-family: var(--display); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
@media (max-width: 700px) { .f-more .cards { grid-template-columns: repeat(auto-fit, minmax(150px, 204px)); gap: 34px 22px; } }

/* ---------- small phones: Julius Sans One is a wide face, so tighten tracking ---------- */
.flavor h1, .flavor h2, .flavor h3 { overflow-wrap: break-word; }
@media (max-width: 480px) {
  .flavor h2 { font-size: 22px; letter-spacing: .12em; }
  .f-hero h1 { letter-spacing: .05em; }
  .flavor .body, .ings li { font-size: 18px; letter-spacing: .04em; }
  .f-benefits ul { font-size: 13px; letter-spacing: .12em; }
  .flavor .btn.ghost { letter-spacing: .14em; padding: 0 22px; }
}

@media (prefers-reduced-motion: reduce) { .f-hero .scroll-cue::after { animation: none; } }

/* actions-mobile: rows of buttons stack and centre on phones */
@media (max-width: 600px) { .actions { flex-direction: column; align-items: center; gap: 12px; } }