/* yummybee.ai home, round 5: one scene. Honey stands beside a phone that holds the whole way down; each
   beat of the story swaps the screen and her pose. Founder brief 2026-11-02: growyouraura.com look, simple,
   to the point, no flying Honey, no motion; Honey present through the scroll, the mascot, not a section. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/BricolageGrotesque-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

:root {
  --bg: #0a0a0a;          /* the lockups' ground, so Honey's masters sit flush */
  --surface: #17130e;     /* one tone step up: the band card, the open answer */
  --ink: #fff8ed;
  --muted: #c9bfae;       /* 11:1 on --bg */
  --meta: #a39885;        /* 6.9:1 on --bg */
  --nectar: #ffbf00;
  --on-nectar: #1e170d;
  --device: #1c1915;
  --font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  --step-head: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  --step-display: clamp(3rem, 1rem + 4.2vw, 4.5rem);
  --bar: 4.75rem;
  --margin: clamp(1.25rem, 5vw, 4rem);
  --section: clamp(6rem, 4rem + 8vw, 11rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable both-edges; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: clip; margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.55 var(--font-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
::selection { background: var(--nectar); color: var(--on-nectar); }
:focus-visible { outline: 2px solid var(--nectar); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--margin); }
.skip { position: absolute; left: var(--margin); top: -4rem; z-index: 20; padding: 0.6rem 1rem; background: var(--nectar); color: var(--on-nectar); font-weight: 700; }
.skip:focus { top: calc(var(--bar) + 0.5rem); }

.display, .head, h3 { font-family: var(--font-display); font-weight: 800; color: var(--ink); text-wrap: balance; }
.display { font-size: var(--step-display); line-height: 0.95; letter-spacing: -0.04em; }
.display span { display: block; white-space: nowrap; }
.head { font-size: var(--step-head); line-height: 1; letter-spacing: -0.03em; }
.lead { font-size: var(--step-lead); line-height: 1.4; color: var(--muted); max-width: 32ch; text-wrap: pretty; }

/* ---------- bar ---------- */
.bar { position: sticky; top: 0; z-index: 10; background: var(--bg); }
.bar__in { display: flex; align-items: center; gap: 2rem; min-height: var(--bar); }
.bar__mark img { width: clamp(6.5rem, 9vw, 8.25rem); }
.bar__nav { margin-left: auto; display: flex; gap: clamp(1.25rem, 2.6vw, 2.75rem); color: var(--muted); }
.bar__nav a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; transition: color 180ms ease; }
.pill { display: inline-flex; align-items: center; min-height: 2.875rem; padding: 0 1.4rem; border-radius: 999px; background: var(--nectar); color: var(--on-nectar); font-weight: 700; text-decoration: none; transition: transform 140ms var(--ease-out); }
.pill:active, .store:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .bar__nav a:hover { color: var(--ink); } }

/* ---------- the device: a plain rounded iPhone around a real capture ---------- */
.device { position: relative; aspect-ratio: 804 / 1748; padding: 2.4%; border-radius: 13% / 6%; background: var(--device); /* taste-skill-ignore: founder-pinned Aura look, the phone floats over the page */ box-shadow: inset 0 0 0 1px rgba(255, 248, 237, 0.1), 0 2.5rem 5rem -1.5rem rgba(0, 0, 0, 0.75); }
.device > img { width: 100%; height: 100%; object-fit: cover; border-radius: 11% / 5.1%; }

/* ---------- the story: copy passes on the left, the scene holds on the right ---------- */
.story { overflow-x: clip; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.story__copy { padding-bottom: 0; }
.beat.beat--hero { min-height: calc(100svh - var(--bar)); display: flex; flex-direction: column; justify-content: center; gap: 2rem; padding-block: 2rem 4rem; }
.hero__lead { max-width: 34ch; font-size: var(--step-lead); line-height: 1.4; color: var(--muted); }
.hero__lead strong { color: var(--ink); font-weight: 600; }
.hero__lead .name { color: var(--nectar); font-weight: 600; }   /* her name in Nectar, founder 2026-11-03 */
.store-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.25rem; }
.store { display: inline-block; transition: transform 140ms var(--ease-out); }
.store img { height: 3.5rem; width: auto; }
.store-row__note { display: inline-flex; align-items: center; gap: 1rem; color: var(--muted); }
.store-row__note::before { content: ""; width: 3px; height: 1.6rem; border-radius: 2px; background: var(--nectar); }

.story__head { padding-top: 2rem; }
.beats { display: grid; }
.beat { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.75rem; min-height: 52svh; }
.beats .beat:last-child { min-height: calc(100svh - var(--bar)); }
.beat__store { margin-top: 1.25rem; }
.beat h3 { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem); line-height: 1.05; letter-spacing: -0.025em; }
.beat p { color: var(--muted); font-size: var(--step-lead); line-height: 1.4; max-width: 30ch; text-wrap: pretty; }
.js .beats .beat { opacity: 0.72; transition: opacity 240ms ease; }
.js .beats .beat.is-active { opacity: 1; }
.beat__media { display: none; }

.story__stage { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); display: flex; align-items: center; justify-content: flex-end; }
.stage { position: relative; display: flex; align-items: flex-end; height: min(64svh, 33rem, 36vw); translate: 1.25rem 0; }   /* 33rem: the scene (1.05 x its height, plus the nudge) never outgrows its column at the 80rem wrap */   /* her frame has clear air on its right; the visible edge meets the margin */
.stage::before { content: ""; position: absolute; inset: -14% -18% -10% -22%; z-index: -1; /* taste-skill-ignore: founder-pinned Aura look, the warm glow behind the scene */ background: radial-gradient(closest-side, rgba(255, 191, 0, 0.36), rgba(255, 191, 0, 0.1) 55%, transparent 76%); filter: blur(30px); }
.stage__phone { height: 100%; width: auto; }
.stage__phone > img { position: absolute; inset: 2.4%; width: 95.2%; height: 95.2%; opacity: 0; transition: opacity 450ms ease; }
.stage__honey { position: relative; height: 100%; aspect-ratio: 680 / 1024; margin-left: -11%; z-index: 1; }
.stage__honey > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 450ms ease; }
.stage__phone > img.is-on, .stage__honey > img.is-on { opacity: 1; }
.stage__honey > img[src*="point"], .beat__honey[src*="point"] { translate: -6% 4%; }   /* her fingertip lands on the map, not the status bar */

/* ---------- questions ---------- */
.questions { margin-top: var(--section); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2rem clamp(2rem, 6vw, 6rem); padding-block: var(--section) 0; align-items: start; }
.questions__list { display: grid; gap: 0.5rem; }
.questions details { border-radius: 18px; background: transparent; transition: background-color 200ms ease; }
.questions details[open] { background: var(--surface); }
.questions summary { border-radius: 18px; list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 4rem; padding: 0.75rem 1.25rem; font-weight: 600; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-25%); transition: transform 200ms var(--ease-out); }
.questions details[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.questions details p { padding: 0 1.25rem 1.25rem; color: var(--muted); max-width: 52ch; }

/* ---------- close ---------- */
.close { display: grid; justify-items: center; text-align: center; gap: 1.5rem; padding-block: var(--section); }
.close__lockup { width: min(100%, 34rem); margin-bottom: 0.5rem; mix-blend-mode: lighten; }
.close__h { font-size: clamp(2.75rem, 1.4rem + 5vw, 5.5rem); }
.close .lead { max-width: 30ch; }

/* ---------- footer ---------- */
.foot { padding-block: 0 2.5rem; color: var(--meta); font-size: var(--step-small); }
.foot__note { padding-block: 0 1rem; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 2rem; }
.foot__links { display: flex; gap: 1.5rem; }
.foot__links a { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- narrow: the scene is released; every beat carries its own phone and Honey ---------- */
@media (max-width: 960px) {
  .story { display: block; }
  .story__stage { display: none; }
  .beat.beat--hero { min-height: 0; padding-block: 1.5rem 0; }
  .beat { min-height: 0; padding-block: 2.25rem; }
  .js .beats .beat { opacity: 1; }
  .beat__media { position: relative; display: flex; align-items: flex-end; justify-content: flex-start; height: min(70vw, 34rem); margin-block: 0.75rem 0.5rem; overflow: clip; padding-top: 2%; }
  .beats .beat h3 { order: -1; }
  .beats .beat p { order: 1; }
  .beat__store { order: 2; }
  .beat--hero .beat__media { margin-top: 1.5rem; }
  .beat__media .device { height: 100%; width: auto; }
  .beat__honey { height: 100%; width: auto; margin-left: -11%; position: relative; z-index: 1; }
  .beat__media::before { content: ""; position: absolute; inset: -10% -14% -8% -18%; z-index: -1; /* taste-skill-ignore: the same warm glow */ background: radial-gradient(closest-side, rgba(255, 191, 0, 0.3), rgba(255, 191, 0, 0.08) 55%, transparent 76%); filter: blur(24px); }
  .questions { grid-template-columns: 1fr; }
}


/* ---------- phone ---------- */
@media (max-width: 600px) {
  .pill { display: none; }
  .bar__in { gap: 1rem; }
  .bar__nav { gap: 1rem; font-size: 0.9375rem; }
  .display { font-size: 11.6vw; }
  .lead, .hero__lead, .questions details p, .beat p { max-width: none; }
  .beat__media { height: min(93vw, 26rem); }
  .beat__honey { margin-left: -24%; }
  .foot__row { flex-direction: column; align-items: flex-start; }
}