/* ==========================================================================
   Petal & Bean Cafe — cinematic 3D scroll
   Art direction locked to the generated hero frame:
   espresso-brown ground, blush-pink accent, warm 3200K key, volumetric haze.
   ========================================================================== */

:root {
  --ink:        #0a0706;
  --ink-2:      #140d09;
  --ink-3:      #1e1410;
  --cream:      #f6ecdd;
  --cream-dim:  #cbbaa6;
  --blush:      #edb4ad;
  --blush-soft: #f7d6d1;
  --gold:       #c9a15f;
  /* Was #8a6d3f at 4.15:1 against --ink, which fails WCAG AA for the 9-11px
     uppercase labels it is used on. #a8854f clears 4.5:1. */
  --gold-dim:   #a8854f;

  --key:        #ffdcae;              /* the 3200K key light */
  --haze:       rgba(255, 214, 170, .07);

  --serif: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --gut: clamp(1.25rem, 4vw, 5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--ink);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* `clip` contains horizontal overflow WITHOUT creating a scroll container.
     `overflow-x: hidden` here (or on body) would break position:sticky. */
  overflow-x: clip;
}

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: clamp(.95rem, .35vw + .85rem, 1.05rem);
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--blush); color: var(--ink); }

/* --- film grain + vignette over everything ------------------------------- */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 900;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: var(--grain-url);
  background-size: 180px 180px;
  animation: grainShift 1.1s steps(3) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-3%, 2%); }
  66%  { transform: translate(2%, -3%); }
  100% { transform: translate(0, 0); }
}
.vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 899;
  background: radial-gradient(ellipse 120% 85% at 50% 45%,
              transparent 35%, rgba(0,0,0,.5) 78%, rgba(0,0,0,.82) 100%);
}

/* --- scroll progress ----------------------------------------------------- */
.progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 100%;
  z-index: 950;
  background: transparent;
}
.progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-dim), var(--blush), var(--key));
  box-shadow: 0 0 14px var(--blush);
}

/* --- nav ----------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 800;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--gut);
  transition: background .5s var(--ease), backdrop-filter .5s var(--ease), padding .5s var(--ease);
}
.nav.solid {
  background: rgba(10, 7, 6, .72);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);   /* iOS Safari needs the prefix */
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid rgba(237, 180, 173, .1);
  padding-top: .8rem; padding-bottom: .8rem;
}
.brand {
  font-family: var(--serif);
  font-size: 1.18rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
}
.brand em { font-style: normal; color: var(--blush); }
.nav-links { display: flex; gap: 1.6rem; align-items: center; }
.nav-links a {
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream-dim);
  transition: color .3s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--blush); }
.nav-cta {
  border: 1px solid rgba(237,180,173,.35);
  padding: .55rem 1.1rem;
  border-radius: 100px;
  color: var(--cream) !important;
}
.nav-cta:hover { background: var(--blush); color: var(--ink) !important; border-color: var(--blush); }
@media (max-width: 860px) { .nav-links a:not(.nav-cta) { display: none; } }

/* ==========================================================================
   SCENE SCAFFOLD — each scene pins while scroll drives its camera
   ========================================================================== */
.scene { position: relative; }
.scene .stage {
  position: sticky; top: 0;
  /* svh, not vh/dvh: on iOS the URL bar makes `vh` overflow and `dvh` resize
     mid-scroll, which makes a pinned section visibly jump. `svh` is the stable
     one for anything sticky. */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
/* Generated clip used as a scene backdrop. Sits under everything, fades in only
   once it can actually paint a frame, so a missing file is invisible. */
.scene-bed {
  position: absolute;
  top: -6%; left: -6%;
  width: 112%; height: 112%;
  max-width: none;               /* opt out of the global video reset */
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 1.6s var(--ease);
}
.scene-bed.on { opacity: .55; }
.bed-scrim {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 20%, rgba(6,4,3,.72) 78%),
    linear-gradient(180deg, rgba(6,4,3,.55) 0%, transparent 30%, rgba(6,4,3,.65) 100%);
}

.scene-label {
  position: absolute; left: var(--gut); bottom: 2.2rem;
  z-index: 40;
  display: flex; align-items: baseline; gap: .8rem;
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--cream-dim);
}
.scene-label b {
  font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0;
  color: var(--blush); font-weight: 400;
}

/* ---------- SCENE 1 · HERO ORBIT ---------------------------------------- */
#s-orbit .stage { background: radial-gradient(ellipse at 62% 40%, #241610 0%, var(--ink) 62%); }

.orbit-rig {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
/* Overscan generously: the rig's rotateY swings each edge back in Z, and the
   projected plane pulls inside the stage. At -8% that exposed a sliver of the
   screen-blended keylight at the right edge. */
.orbit-plate {
  position: absolute; inset: -20%;
  transform-style: preserve-3d;
  background-size: cover;
  background-position: center;
  will-change: transform, opacity;
}
/* Responsive hero still. The 4K source is 24MB, so the browser is given a size
   ladder and picks one; a phone never downloads the desktop file. src is set by
   JS via a data-attribute swap so only one file is ever fetched. */
.orbit-plate.img { background-image: url('../assets/hero-1600.jpg'); }
@media (min-width: 1100px) { .orbit-plate.img { background-image: url('../assets/hero-2400.jpg'); } }
@media (max-width: 620px)  { .orbit-plate.img { background-image: url('../assets/hero-1000.jpg'); } }

/* Portrait phones get the dedicated 9:16 art instead of a hard-cropped
   landscape frame, which is what made it look soft and badly framed. */
@media (orientation: portrait) and (max-width: 820px) {
  .orbit-plate.img { background-image: url('../assets/hero-portrait-900.jpg'); }
}
@media (orientation: portrait) and (max-width: 820px) and (min-resolution: 2dppx) {
  .orbit-plate.img { background-image: url('../assets/hero-portrait-1400.jpg'); }
}
/* <video> is a REPLACED element: with left+right both set and width:auto, the
   used width falls back to the intrinsic video width and `right` is dropped,
   leaving an uncovered strip. Replaced boxes need explicit dimensions, so
   anchor top/left only and size to 100% + the two 20% overscans. */
.orbit-vid {
  position: absolute;
  top: -20%; left: -20%;
  width: 140%; height: 140%;
  /* the global `video { max-width:100% }` reset clamps this to the stage width
     and silently kills the overscan — opt out explicitly */
  max-width: none;
  object-fit: cover;
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 1.4s var(--ease);
}
.orbit-vid.on { opacity: 1; }

/* Legibility scrim — the hero copy sits over the cup without it. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 20;
  pointer-events: none;
  background:
    linear-gradient(96deg,
      rgba(8,5,4,.90) 0%, rgba(8,5,4,.74) 26%,
      rgba(8,5,4,.34) 50%, transparent 72%),
    linear-gradient(0deg, rgba(8,5,4,.80) 0%, rgba(8,5,4,.22) 26%, transparent 46%);
}

/* warm key light bloom, matching the hero's upper-right rake */
.keylight {
  position: absolute; inset: 0; z-index: 12;
  pointer-events: none;
  background: radial-gradient(circle at 78% 12%,
              rgba(255,220,174,.30) 0%, rgba(255,220,174,.10) 22%, transparent 52%);
  mix-blend-mode: screen;
  will-change: opacity, transform;
}
.hazelayer {
  position: absolute; inset: 0; z-index: 11;
  pointer-events: none;
  background: linear-gradient(200deg, transparent 40%, var(--haze) 62%, transparent 80%);
  will-change: transform, opacity;
}

.hero-copy {
  position: absolute; z-index: 30;
  left: var(--gut); bottom: clamp(4.5rem, 12vh, 9rem);
  max-width: min(46rem, 74vw);
  will-change: transform, opacity;
}
.eyebrow {
  display: flex; align-items: center; gap: .85rem;
  font-size: .63rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: ''; width: clamp(1.5rem, 5vw, 3.4rem); height: 1px;
  background: linear-gradient(90deg, transparent, var(--blush));
}
h1.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.9rem, 9.5vw, 9rem);
  line-height: .92;
  letter-spacing: -.02em;
  color: var(--cream);
  text-shadow: 0 0 70px rgba(0,0,0,.6);
}
h1.hero-title span { display: block; }
h1.hero-title .amp {
  font-style: italic;
  color: var(--blush);
  font-size: .72em;
  padding-left: .1em;
}
.hero-sub {
  margin-top: 1.6rem;
  max-width: 34rem;
  color: var(--cream-dim);
  font-size: clamp(.92rem, .4vw + .82rem, 1.08rem);
}
.hero-meta {
  margin-top: 2rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-dim);
}
.hero-meta b { color: var(--gold); font-weight: 500; }

.scrollcue {
  position: absolute; z-index: 30;
  right: var(--gut); bottom: 2.6rem;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--cream-dim);
}
.scrollcue i {
  width: 1px; height: 3.6rem;
  background: linear-gradient(180deg, var(--blush), transparent);
  animation: cue 2.1s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cue { 0%,100% { transform: scaleY(.25); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- SCENE 2 · MACRO FLY-THROUGH -------------------------------- */
#s-macro .stage { background: radial-gradient(ellipse at 50% 50%, #1b1109 0%, #060403 70%); }
.tunnel {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.slab {
  position: absolute; top: 50%; left: 50%;
  /* Perspective shrinks these to ~0.6–0.9x, so the base is oversized to land
     at a cinematic on-screen size. */
  width: clamp(21rem, 58vw, 44rem);
  aspect-ratio: 16 / 10;
  margin: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,.85), 0 0 0 1px rgba(237,180,173,.14);
}
.slab img { width: 100%; height: 100%; object-fit: cover; }
.slab figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.6rem .95rem .8rem;
  background: linear-gradient(transparent, rgba(6,4,3,.94));
  display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem;
}
.slab .sn {
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.15;
  color: var(--cream);
}
.slab .sp {
  font-size: .72rem; letter-spacing: .08em; color: var(--gold);
  white-space: nowrap;
}
.macro-copy {
  position: absolute; z-index: 40;
  left: 50%; top: clamp(3.5rem, 11vh, 7rem);
  transform: translateX(-50%);
  text-align: center; width: min(40rem, 86vw);
  will-change: transform, opacity;
}
.macro-copy h2, .assy-copy h2, .atmo-copy h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 5.2vw, 4.2rem);
  line-height: 1.02; letter-spacing: -.015em;
  color: var(--cream);
}
.macro-copy h2 em, .assy-copy h2 em, .atmo-copy h2 em {
  font-style: italic; color: var(--blush);
}
.macro-copy p { margin-top: .9rem; color: var(--cream-dim); font-size: .95rem; }

/* ---------- SCENE 3 · EXPLODED ASSEMBLY -------------------------------- */
#s-assembly .stage {
  background:
    radial-gradient(ellipse at 26% 46%, rgba(255,220,174,.09) 0%, transparent 46%),
    linear-gradient(160deg, #170f0b 0%, #070504 78%);
}
.assy-rig {
  position: absolute; left: 62%; top: 50%;
  width: min(30rem, 46vw); height: 1px;
  transform-style: preserve-3d;
  will-change: transform;
}
.layer {
  position: absolute; left: 50%; top: 0;
  width: 100%;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.layer .disc {
  position: relative;
  z-index: 1;                 /* see .layer .tag - keeps the label on top */
  /* tall enough for the photographic crop to actually read as food */
  height: clamp(3rem, 6.4vw, 4.5rem);
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(175deg,
      hsl(var(--h) 46% 44%) 0%, hsl(var(--h) 40% 27%) 58%, hsl(var(--h) 34% 16%) 100%);
  box-shadow:
      inset 0 2px 0 hsl(var(--h) 62% 68% / .5),
      inset 0 -8px 22px rgba(0,0,0,.6),
      0 24px 44px rgba(0,0,0,.62);
  border: 1px solid hsl(var(--h) 40% 58% / .22);
}
.layer .disc::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 62% 130% at 76% -18%, rgba(255,220,174,.5), transparent 62%);
  mix-blend-mode: screen;
  pointer-events: none;
}
/* Sampling the real dish photography: drop the gradient fill so the photograph
   reads on its own, and grade it into the scene's warm key light. */
.layer .disc.cropped {
  background-color: hsl(var(--h) 26% 9%);
  background-repeat: no-repeat;
  filter: saturate(1.04) contrast(1.08) brightness(.96);
  box-shadow:
      inset 0 1px 0 hsl(var(--h) 62% 74% / .38),
      inset 0 -10px 26px rgba(0,0,0,.5),
      0 26px 48px rgba(0,0,0,.66);
}
.layer .disc.cropped::after {
  background: radial-gradient(ellipse 70% 150% at 78% -25%, rgba(255,220,174,.38), transparent 60%);
}
/* Real generated ingredient art, once it loads.
   The source is square with the food centred on a dark plinth. `cover` into an
   8:1 pill fits by HEIGHT, so the full image width shows — including the dark
   margins, which read as black gaps at the ends of the disc. Scaling up crops
   those margins out horizontally so the disc is food edge to edge. */
.layer .disc .ing {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  object-position: center 52%;
  transform: scale(1.62);
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.layer .disc.shot .ing { opacity: 1; }
/* with real art the gradient becomes a rim, not the surface */
.layer .disc.shot {
  background: hsl(var(--h) 30% 10%);
  box-shadow:
      inset 0 1px 0 hsl(var(--h) 62% 72% / .4),
      0 26px 48px rgba(0,0,0,.66);
}

/* labels stay quiet until the piece has actually landed */
.layer .tag, .layer .lead { opacity: 0; transition: opacity .5s var(--ease); }
.layer.seated .tag, .layer.seated .lead { opacity: 1; }
/* z-index, not translateZ. `.tag` and the `.ing` image inside `.disc` are both
   positioned with z-index:auto, so they paint in DOM order — and `.disc` comes
   after `.tag`, which put the photo on top of the label. A 3D translateZ did
   not save it because `.disc`'s overflow:hidden flattens its subtree. */
.layer .tag {
  position: absolute; top: 50%; right: calc(100% + clamp(1rem, 2.6vw, 2.4rem));
  transform: translateY(-50%);
  text-align: right; white-space: nowrap;
  z-index: 3;
}
.layer .tag .lt {
  font-family: var(--serif); font-size: clamp(.95rem, 1.5vw, 1.32rem);
  color: var(--cream); line-height: 1.1;
}
.layer .tag .ls {
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-dim); margin-top: .18rem;
}
.layer .lead {
  position: absolute; top: 50%; right: calc(100% + .5rem);
  width: clamp(.6rem, 1.8vw, 1.7rem); height: 1px;
  background: linear-gradient(270deg, var(--blush), transparent);
}
/* --shift is written by the camera loop; the centring stays here so each
   breakpoint can choose its own anchor. */
.assy-copy {
  position: absolute; z-index: 40;
  left: var(--gut); top: 50%;
  transform: translateY(calc(-50% + var(--shift, 0px)));
  max-width: min(24rem, 34vw);
  will-change: transform, opacity;
}
.assy-copy p { margin-top: 1rem; color: var(--cream-dim); font-size: .92rem; }
.assy-price {
  margin-top: 1.6rem;
  font-family: var(--serif); font-size: 2.4rem; color: var(--gold);
}
.assy-price small {
  display: block; font-family: var(--sans); font-size: .6rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--cream-dim);
  margin-top: .3rem;
}
.assy-tally {
  margin-top: 1.5rem;
  display: flex; align-items: baseline; gap: .55rem;
}
.assy-tally b {
  font-family: var(--serif); font-weight: 400; font-size: 1.9rem;
  color: var(--blush); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.assy-tally span {
  font-size: .56rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream-dim);
}
@media (max-width: 880px) {
  /* `left: 50%` centred the rig's LEFT EDGE, not the rig, pushing the stack ~83%
     across a 390px screen with a quarter of every disc clipped by the stage's
     overflow:hidden. A centring transform is not an option here because the
     camera loop rewrites .assy-rig's transform every frame, so use auto margins
     with both inline offsets zeroed instead. */
  .assy-rig {
    left: 0; right: 0; margin-inline: auto;
    width: min(24rem, 74vw);
    /* Push the stack into the lower two-thirds. At top:50% the 512px layer
       spread straddled the middle of the screen and ran straight through the
       top-anchored copy, making both unreadable. */
    top: 66%;
  }
  .assy-copy {
    left: var(--gut); right: var(--gut); top: 5%;
    /* Top-anchored here, so drop the -50%. Possible only because the camera loop
       now writes --shift instead of the whole transform. */
    transform: translateY(var(--shift, 0px));
    max-width: none; text-align: center;
  }
  /* The full component list is the scene's own labelling and is repeated in the
     menu; on a handset it costs four lines that the stack then collides with. */
  .assy-copy p { display: none; }
  .assy-copy .eyebrow { justify-content: center; }
  .assy-price { margin-top: .9rem; font-size: 2rem; }
  .assy-tally { justify-content: center; margin-top: .9rem; }
  /* Beside-the-disc labels cannot work against a centred rig: the rotateZ sweep
     slides the upper layers sideways and there is no usable gutter. Ride the
     label on its own disc instead. translateZ lifts it above .disc, which is a
     later sibling inside the same preserve-3d context, so z-index alone would
     not win. */
  /* Riding the label on its own disc means cream text over bright food - a
     text-shadow alone was not enough over the yellows and greens. Give it a
     dark plate so it is legible on every layer. */
  .layer .tag {
    right: auto; left: .55rem;
    max-width: calc(100% - 1.1rem);
    text-align: left;
    transform: translateY(-50%) translateZ(2px);
    background: rgba(8, 5, 4, .62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: .22rem .55rem;
    border-radius: 100px;
    border: 1px solid rgba(237, 180, 173, .16);
  }
  .layer .tag .lt {
    font-size: .8rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
  }
  .layer .lead { display: none; }
}

/* ---------- SCENE 4 · ATMOSPHERE --------------------------------------- */
#s-atmo .stage { background: linear-gradient(180deg, #070504 0%, #1a100c 55%, #0b0706 100%); }
/* <canvas> is a REPLACED element, so `inset: 0` alone does NOT size it — with
   width:auto the used width falls back to the intrinsic (attribute) width and
   `right`/`bottom` are dropped. The resize handler then read clientWidth back
   from the attribute it had just written and doubled the canvas on every
   resize, reaching 20721x10257 (~850MB of GPU memory). Explicit 100% breaks
   the loop by making layout size independent of the attribute. */
#petals {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  max-width: none;
  z-index: 5;
}
.atmo-glow {
  position: absolute; inset: 0; z-index: 4;
  background:
    radial-gradient(circle at 20% 22%, rgba(255,220,174,.16), transparent 42%),
    radial-gradient(circle at 82% 74%, rgba(237,180,173,.13), transparent 46%);
  will-change: transform;
}
.atmo-copy {
  position: absolute; z-index: 30; inset: 0;
  display: grid; place-content: center;
  text-align: center; padding: 0 var(--gut);
  will-change: transform, opacity;
}
.atmo-copy .eyebrow { justify-content: center; }
.atmo-copy .eyebrow::after {
  content: ''; width: clamp(1.5rem, 5vw, 3.4rem); height: 1px;
  background: linear-gradient(270deg, transparent, var(--blush));
}
.atmo-copy p.lede {
  margin: 1.4rem auto 0; max-width: 34rem;
  color: var(--cream-dim); font-size: clamp(.95rem, .4vw + .85rem, 1.1rem);
}
.atmo-facts {
  margin-top: 3rem;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1px;
  background: rgba(237,180,173,.14);
  border: 1px solid rgba(237,180,173,.14);
  border-radius: 4px; overflow: hidden;
}
.atmo-facts div {
  background: rgba(10,7,6,.6);
  padding: 1.15rem clamp(1.1rem, 3vw, 2.4rem);
  min-width: 9rem;
}
.atmo-facts b {
  display: block; font-family: var(--serif); font-size: 1.42rem;
  color: var(--blush); font-weight: 400;
}
.atmo-facts span {
  font-size: .58rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--cream-dim);
}

/* ==========================================================================
   MENU
   ========================================================================== */
.menu-wrap {
  position: relative; z-index: 50;
  background: linear-gradient(180deg, #0b0706 0%, #120c09 100%);
  padding: clamp(4.5rem, 12vh, 9rem) 0 clamp(3rem, 8vh, 6rem);
  border-top: 1px solid rgba(237,180,173,.12);
}
.menu-head { padding: 0 var(--gut); text-align: center; }
.menu-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 4.6rem); line-height: 1.02;
  color: var(--cream);
}
.menu-head h2 em { font-style: italic; color: var(--blush); }
.menu-head p { margin: 1rem auto 0; max-width: 32rem; color: var(--cream-dim); font-size: .95rem; }

/* Sticky category rail. `top: 0` parked it directly underneath the fixed nav,
   which is opaque once scrolled — the whole rail was invisible. Offset by the
   nav's height so it stops just below it. */
.rail {
  position: sticky;
  top: var(--nav-h, 3.4rem);
  z-index: 60;
  margin: clamp(2rem, 5vh, 3.4rem) 0 0;
  background: rgba(10,7,6,.86);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(237,180,173,.1);
  border-bottom: 1px solid rgba(237,180,173,.1);
}
.rail-inner {
  display: flex; gap: .4rem;
  padding: .7rem var(--gut);
  overflow-x: auto;
  scrollbar-width: none;
}
.rail-inner::-webkit-scrollbar { display: none; }
.rail button {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid rgba(237,180,173,.2);
  color: var(--cream-dim);
  font-family: var(--sans);
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .5rem .95rem;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .3s var(--ease);
}
.rail button:hover { color: var(--cream); border-color: var(--blush); }
.rail button.on { background: var(--blush); border-color: var(--blush); color: var(--ink); }
.rail button i { font-style: normal; opacity: .55; margin-left: .4rem; }

.cats { padding: 0 var(--gut); }
.cat { padding: clamp(2.6rem, 7vh, 5rem) 0 0; }
.cat-head {
  display: flex; align-items: baseline; gap: 1rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(237,180,173,.14);
  margin-bottom: 1.8rem;
}
.cat-head h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  color: var(--cream);
}
.cat-head .ct {
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-dim);
}
.cat-head .cc {
  margin-left: auto;
  font-size: .6rem; letter-spacing: .2em; color: var(--cream-dim);
  white-space: nowrap;
}

.items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: 1px;
  background: rgba(237,180,173,.1);
  border: 1px solid rgba(237,180,173,.1);
  border-radius: 4px;
  overflow: hidden;
}
.item {
  position: relative;
  background: rgba(10,7,6,.72);
  padding: 1.15rem 1.2rem;
  display: flex; flex-direction: column; gap: .4rem;
  transition: background .35s var(--ease);
  opacity: 0;
  transform: translateY(14px);
}
.item.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease), background .35s; }
.item:hover { background: rgba(30,20,16,.95); }
.item.has-img { padding: 0; }
.item .shot {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-3);
}
.item .shot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) contrast(1.06) brightness(.94);
  transition: transform .8s var(--ease), filter .5s;
}
.item:hover .shot img { transform: scale(1.055); filter: saturate(1.05) contrast(1.1) brightness(1); }
.item .body { padding: 1.05rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; }

/* Items awaiting photography get a deliberate editorial treatment — a serif
   initial watermark — so the grid reads as designed rather than half-finished.
   Replaced automatically the moment a real or generated photo lands. */
.item:not(.has-img) { position: relative; overflow: hidden; }
.item:not(.has-img)::before {
  content: attr(data-initial);
  position: absolute; right: .5rem; bottom: -.9rem;
  font-family: var(--serif); font-size: 5.4rem; line-height: 1;
  color: var(--blush);
  opacity: .055;
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.item:not(.has-img):hover::before { opacity: .1; transform: translateY(-3px); }
.item .top { display: flex; align-items: baseline; gap: .8rem; }
.item .nm {
  font-family: var(--serif); font-size: 1.06rem; line-height: 1.2;
  color: var(--cream);
}
.item .pr {
  margin-left: auto; white-space: nowrap;
  font-size: .82rem; color: var(--gold); letter-spacing: .02em;
}
.item .ds { font-size: .8rem; line-height: 1.55; color: var(--cream-dim); }
.badges { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .15rem; }
.badge {
  font-size: .53rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: 2px;
  border: 1px solid currentColor;
}
.badge.sig  { color: var(--gold); }
.badge.veg  { color: #8fbf7a; }
.badge.vgn  { color: #7ac0a8; }

/* ==========================================================================
   VISIT / FOOTER
   ========================================================================== */
.visit {
  position: relative; z-index: 50;
  background: var(--ink);
  padding: clamp(4rem, 11vh, 8rem) var(--gut);
  border-top: 1px solid rgba(237,180,173,.12);
}
.visit-grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  max-width: 78rem; margin: 0 auto;
}
.vcard h4 {
  font-size: .6rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-dim); font-weight: 500;
  margin-bottom: .9rem;
}
.vcard p, .vcard a { font-size: .95rem; color: var(--cream-dim); line-height: 1.7; }
.vcard a:hover { color: var(--blush); }
.vcard strong { color: var(--cream); font-weight: 500; }

.foot {
  padding: 2rem var(--gut) 2.6rem;
  border-top: 1px solid rgba(237,180,173,.1);
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem;
  align-items: center; justify-content: space-between;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  /* #6b5b4e measured 3.09:1 on --ink and failed AA outright at this size. */
  color: #9c8a7a;
  background: var(--ink);
  position: relative; z-index: 50;
}

/* ==========================================================================
   ON THE PASS — kitchen ticker
   ========================================================================== */
.pass {
  position: relative; z-index: 50;
  background: var(--ink-2);
  border-top: 1px solid rgba(237,180,173,.12);
  border-bottom: 1px solid rgba(237,180,173,.12);
  overflow: hidden;
  padding: .85rem 0;
}
.pass-track {
  display: flex; gap: 2.6rem;
  width: max-content;
  animation: passRoll 42s linear infinite;
}
.pass-track span {
  font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--cream-dim); white-space: nowrap;
}
@keyframes passRoll { to { transform: translateX(-50%); } }
.pass:hover .pass-track { animation-play-state: paused; }

/* ==========================================================================
   ORDER STUDIO
   ========================================================================== */
.studio {
  position: relative; z-index: 50;
  background: linear-gradient(180deg, #0b0706 0%, #150e0a 55%, #0b0706 100%);
  padding: clamp(4rem, 11vh, 8rem) var(--gut);
  border-top: 1px solid rgba(237,180,173,.12);
}
.studio-head { text-align: center; max-width: 44rem; margin: 0 auto; }
.studio-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 5.6vw, 4.2rem); line-height: 1.03; color: var(--cream);
}
.studio-head h2 em { font-style: italic; color: var(--blush); }
.studio-head p { margin-top: 1rem; color: var(--cream-dim); font-size: .97rem; }

.studio-grid {
  margin: clamp(2.4rem, 6vh, 4rem) auto 0;
  max-width: 78rem;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  background: rgba(237,180,173,.12);
  border: 1px solid rgba(237,180,173,.12);
  border-radius: 5px; overflow: hidden;
}
.panel {
  background: rgba(10,7,6,.78);
  padding: clamp(1.3rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: 1rem;
}
.panel.wide { grid-column: 1 / -1; }
.panel h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--cream);
}
.panel > p.sub { color: var(--cream-dim); font-size: .85rem; margin-top: -.55rem; }
.step {
  font-size: .56rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-dim); margin-bottom: -.4rem;
}

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips.scroll { max-height: 11.5rem; overflow-y: auto; padding-right: .3rem; }
.chips.scroll::-webkit-scrollbar { width: 4px; }
.chips.scroll::-webkit-scrollbar-thumb { background: rgba(237,180,173,.28); border-radius: 4px; }
.chip {
  display: inline-flex; align-items: baseline; gap: .4rem;
  background: transparent;
  border: 1px solid rgba(237,180,173,.2);
  color: var(--cream-dim);
  font-family: var(--sans); font-size: .74rem;
  padding: .45rem .72rem; border-radius: 100px;
  cursor: pointer; text-align: left;
  transition: all .25s var(--ease);
}
.chip i { font-style: normal; font-size: .66rem; color: var(--gold-dim); }
.chip b { font-style: normal; font-weight: 400; color: var(--blush); margin-right: .1rem; }
.chip:hover { color: var(--cream); border-color: rgba(237,180,173,.5); }
.chip.on {
  background: var(--blush); border-color: var(--blush); color: var(--ink);
}
.chip.on i { color: rgba(10,7,6,.66); }
.chip.on b { color: var(--ink); }

/* readout */
.readout {
  margin-top: auto;
  display: flex; align-items: center; gap: .9rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(237,180,173,.14);
}
.readout .big {
  font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  color: var(--gold); line-height: 1;
}
.readout .say { font-size: .8rem; color: var(--cream-dim); flex: 1; }
.readout .say.warn { color: var(--blush); }
.mini {
  background: transparent; cursor: pointer;
  border: 1px solid rgba(237,180,173,.36);
  color: var(--cream);
  font-family: var(--sans); font-size: .64rem;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .6rem 1rem; border-radius: 100px;
  white-space: nowrap;
  transition: all .28s var(--ease);
}
.mini:hover { background: var(--blush); border-color: var(--blush); color: var(--ink); }
.mini.ok { background: #7ac0a8; border-color: #7ac0a8; color: var(--ink); }

/* picks (mood + weather results) */
.picks { display: flex; flex-direction: column; gap: .45rem; }
.pick {
  display: flex; align-items: center; gap: .8rem;
  width: 100%; text-align: left; cursor: pointer;
  background: rgba(30,20,16,.6);
  border: 1px solid rgba(237,180,173,.14);
  border-radius: 3px; padding: .55rem .7rem;
  transition: all .28s var(--ease);
}
.pick:hover { background: rgba(45,29,23,.9); border-color: rgba(237,180,173,.4); }
.pk-shot { flex: 0 0 auto; width: 3.1rem; height: 2.4rem; border-radius: 2px; overflow: hidden; }
.pk-shot img { width: 100%; height: 100%; object-fit: cover; }
.pk-b { flex: 1; min-width: 0; }
.pk-n { display: block; font-family: var(--serif); font-size: .97rem; color: var(--cream); }
.pk-d {
  display: block; font-size: .7rem; color: var(--cream-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pk-p { text-align: right; font-size: .8rem; color: var(--gold); white-space: nowrap; }
.pk-p i {
  display: block; font-style: normal; font-size: .54rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--cream-dim);
}
.hint { font-size: .82rem; color: var(--cream-dim); }

/* weather */
.wx-head { display: flex; align-items: center; gap: .9rem; }
.wx-t {
  font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 3.6rem);
  color: var(--blush); line-height: .9;
}
.wx-m b { display: block; font-weight: 400; color: var(--cream); font-size: .95rem; }
.wx-m i {
  font-style: normal; font-size: .56rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cream-dim);
}
.wx-line { font-size: .84rem; color: var(--cream-dim); }
.wx-picks { display: flex; flex-direction: column; gap: .45rem; }

/* group round */
.round-in {
  display: flex; align-items: center; gap: .7rem;
}
.round-in input {
  width: 5.5rem;
  background: rgba(30,20,16,.8);
  border: 1px solid rgba(237,180,173,.24);
  color: var(--cream);
  font-family: var(--serif); font-size: 1.4rem;
  padding: .45rem .7rem; border-radius: 3px;
  text-align: center;
}
.round-in input:focus { outline: none; border-color: var(--blush); }
.round-in label {
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-dim);
}
.round-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(6.6rem, 1fr));
  gap: 1px; background: rgba(237,180,173,.12);
  border: 1px solid rgba(237,180,173,.12); border-radius: 3px; overflow: hidden;
}
.round-grid div { background: rgba(10,7,6,.7); padding: .75rem .6rem; }
.round-grid div.hi { background: rgba(237,180,173,.1); }
.round-grid b {
  display: block; font-family: var(--serif); font-size: 1.25rem;
  color: var(--blush); font-weight: 400;
}
.round-grid div.hi b { color: var(--gold); }
.round-grid span {
  font-size: .52rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream-dim);
}

/* ==========================================================================
   ORDER TRAY
   ========================================================================== */
.tray-fab {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 870;
  display: flex; align-items: center; gap: .55rem;
  background: rgba(10,7,6,.9);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(237,180,173,.3);
  color: var(--cream);
  font-family: var(--sans); font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase;
  padding: .8rem 1.1rem; border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
  transition: all .3s var(--ease);
}
.tray-fab:hover { border-color: var(--blush); }
.tray-fab.has { background: var(--blush); color: var(--ink); border-color: var(--blush); }
.tray-fab span.n {
  display: grid; place-items: center;
  min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem;
  border-radius: 100px;
  background: rgba(237,180,173,.2); color: var(--cream);
  font-size: .68rem; letter-spacing: 0;
}
.tray-fab.has span.n { background: rgba(10,7,6,.86); color: var(--blush); }
.tray-fab.bump { animation: fabBump .45s var(--ease); }
@keyframes fabBump { 0%,100%{transform:scale(1)} 40%{transform:scale(1.1)} }

.tray-panel {
  position: fixed; right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + 3.6rem);
  z-index: 871;
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(30rem, 66vh);
  display: flex; flex-direction: column;
  background: rgba(12,8,7,.97);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(237,180,173,.24);
  border-radius: 5px;
  box-shadow: 0 30px 70px rgba(0,0,0,.75);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.tray-panel.open { opacity: 1; visibility: visible; transform: none; }
.tray-top {
  display: flex; align-items: center; gap: .6rem;
  padding: .95rem 1rem;
  border-bottom: 1px solid rgba(237,180,173,.14);
}
.tray-top h4 {
  flex: 1; font-family: var(--serif); font-weight: 400;
  font-size: 1.05rem; color: var(--cream);
}
.tray-top button {
  background: transparent; border: 0; cursor: pointer;
  color: var(--cream-dim); font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase;
}
.tray-top button:hover { color: var(--blush); }
.tray-body { flex: 1; overflow-y: auto; padding: .7rem 1rem; }
.tray-body::-webkit-scrollbar { width: 4px; }
.tray-body::-webkit-scrollbar-thumb { background: rgba(237,180,173,.26); border-radius: 4px; }
.tray-empty { font-size: .82rem; color: var(--cream-dim); padding: .8rem 0; }
.tray-line {
  display: flex; align-items: baseline; gap: .55rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(237,180,173,.08);
  font-size: .84rem;
}
.tl-q { color: var(--gold); font-size: .74rem; }
.tl-n { flex: 1; color: var(--cream); }
.tl-n i {
  display: block; font-style: normal; font-size: .62rem; color: var(--cream-dim);
}
.tl-p { color: var(--gold); white-space: nowrap; }
.tl-x {
  background: transparent; border: 1px solid rgba(237,180,173,.24);
  color: var(--cream-dim); cursor: pointer;
  width: 1.3rem; height: 1.3rem; border-radius: 100px;
  display: grid; place-items: center; font-size: .8rem; line-height: 1;
}
.tl-x:hover { border-color: var(--blush); color: var(--blush); }
.tray-foot {
  padding: .9rem 1rem 1rem;
  border-top: 1px solid rgba(237,180,173,.16);
  display: flex; flex-direction: column; gap: .6rem;
}
.tray-sum {
  display: flex; align-items: baseline; justify-content: space-between;
}
.tray-sum span {
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream-dim);
}
.tray-sum b {
  font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--gold);
}
.tray-acts { display: flex; gap: .4rem; }
.tray-acts .mini { flex: 1; text-align: center; }

/* ==========================================================================
   STATUS + FAQ + STATS
   ========================================================================== */
.status {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream-dim);
}
.status b { color: var(--cream); font-weight: 500; }
.dot {
  width: .5rem; height: .5rem; border-radius: 100px;
  background: #6b5b4e; flex: 0 0 auto;
}
.dot.open { background: #7ac0a8; box-shadow: 0 0 0 4px rgba(122,192,168,.16); animation: pulse 2.4s infinite; }
.dot.shut { background: #c96f6f; box-shadow: 0 0 0 4px rgba(201,111,111,.14); }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(122,192,168,0); } }

.stats {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 45%), 1fr));
  max-width: 62rem; margin: clamp(2rem, 5vh, 3rem) auto 0;
  background: rgba(237,180,173,.12);
  border: 1px solid rgba(237,180,173,.12);
  border-radius: 4px; overflow: hidden;
}
.stats div { background: rgba(10,7,6,.7); padding: 1.3rem 1rem; text-align: center; }
.stats b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.5rem); color: var(--blush);
}
.stats span {
  font-size: .55rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream-dim);
}

.faq-wrap {
  position: relative; z-index: 50;
  background: var(--ink); padding: clamp(3.5rem, 9vh, 7rem) var(--gut);
  border-top: 1px solid rgba(237,180,173,.12);
}
.faq { max-width: 52rem; margin: clamp(2rem, 5vh, 3rem) auto 0; }
.qa { border-bottom: 1px solid rgba(237,180,173,.14); }
.qa .q {
  width: 100%; display: flex; align-items: center; gap: 1rem;
  background: transparent; border: 0; cursor: pointer;
  padding: 1.15rem 0; text-align: left;
  font-family: var(--serif); font-size: clamp(1rem, 2vw, 1.22rem);
  color: var(--cream);
}
.qa .q:hover { color: var(--blush); }
.qa .q i {
  margin-left: auto; flex: 0 0 auto;
  position: relative; width: .8rem; height: .8rem;
}
.qa .q i::before, .qa .q i::after {
  content: ''; position: absolute; background: var(--blush);
  transition: transform .3s var(--ease);
}
.qa .q i::before { inset: 45% 0 45% 0; }
.qa .q i::after  { inset: 0 45% 0 45%; }
.qa .q[aria-expanded="true"] i::after { transform: scaleY(0); }
.qa .a p {
  padding: 0 0 1.25rem; max-width: 44rem;
  color: var(--cream-dim); font-size: .92rem;
}

.diet-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  max-width: 78rem; margin: 1.6rem auto 0;
  justify-content: center;
}
.diet-bar .lbl {
  font-size: .56rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-dim);
}
#dietCount {
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream-dim);
}

/* ==========================================================================
   GALLERY (real photos)
   ========================================================================== */
.gal {
  position: relative; z-index: 50;
  background: var(--ink-2);
  padding: clamp(3.5rem, 9vh, 7rem) 0;
  border-top: 1px solid rgba(237,180,173,.12);
}
.gal-head { text-align: center; padding: 0 var(--gut); }
.gal-strip {
  display: flex; gap: 1px; margin-top: clamp(1.8rem, 4vh, 2.8rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: .4rem;
}
.gal-strip::-webkit-scrollbar { height: 4px; }
.gal-strip::-webkit-scrollbar-thumb { background: rgba(237,180,173,.26); }
.gal-strip figure {
  flex: 0 0 auto; scroll-snap-align: center;
  width: clamp(13rem, 30vw, 22rem);
  position: relative; overflow: hidden;
}
.gal-strip img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(.92) contrast(1.05) brightness(.9);
  transition: transform .9s var(--ease), filter .5s;
}
.gal-strip figure:hover img { transform: scale(1.06); filter: saturate(1.05) brightness(1); }
.gal-strip figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.4rem .8rem .7rem;
  background: linear-gradient(transparent, rgba(6,4,3,.94));
  font-family: var(--serif); font-size: .92rem; color: var(--cream);
  display: flex; justify-content: space-between; align-items: flex-end; gap: .5rem;
}
.gal-strip figcaption b { font-weight: 400; font-family: var(--sans); font-size: .74rem; color: var(--gold); }

/* ==========================================================================
   PHONE PASS
   The site was built desktop-first; this section is what makes it hold up on a
   handset. Grouped here rather than scattered so it is auditable.
   ========================================================================== */
@media (max-width: 820px) {

  /* Nav overflowed the viewport at 390px: the brand wordmark plus the CTA came
     to more than the padded content width, and space-between pushed the CTA off
     the right edge. Tighten both and let the brand shrink first. */
  .nav { gap: .5rem; padding-left: 1rem; padding-right: 1rem; }
  .brand { font-size: .95rem; letter-spacing: .18em; min-width: 0; }
  .nav-links { flex: 0 0 auto; }
  .nav-cta { padding: .6rem .8rem; font-size: .6rem; letter-spacing: .12em; }

  /* Notched iPhones: keep the fixed nav clear of the status bar and the tray
     clear of the home indicator. */
  .nav { padding-top: calc(.8rem + env(safe-area-inset-top)); }
  .tray-fab { bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom)); }
  .tray-panel { bottom: calc(clamp(1rem, 3vw, 2rem) + 3.6rem + env(safe-area-inset-bottom)); }

  /* The portrait hero is composed with its dark negative space at the TOP and
     the cup/slice at the bottom. Bottom-anchored copy therefore landed right on
     the brightest flowers and the eyebrow became unreadable. Anchor to the top
     instead, which is both legible and what the art was composed for. */
  .hero-copy {
    left: 1rem; right: 1rem;
    top: calc(4.4rem + env(safe-area-inset-top));
    bottom: auto;
    max-width: none;
  }
  h1.hero-title {
    /* two lines, not three - three pushed the copy down into the flowers */
    font-size: clamp(2.9rem, 14vw, 4.6rem);
    line-height: .96;
  }
  /* Collapse "Petal" and "&" onto one line so the wordmark is two lines rather
     than three. Both must go inline - leaving "Petal" as a block would keep the
     ampersand on its own line regardless. */
  h1.hero-title span:first-child,
  h1.hero-title .amp {
    display: inline;
  }
  h1.hero-title .amp { font-size: .62em; padding-left: .06em; }
  .eyebrow { margin-bottom: .9rem; font-size: .58rem; letter-spacing: .2em; }
  .hero-sub { font-size: .92rem; max-width: 22rem; margin-top: 1rem; }
  .hero-meta { gap: .4rem 1rem; font-size: .58rem; margin-top: 1.2rem; }

  /* Scrim has to actually cover the copy zone. The previous version faded out
     by 46% - exactly where the text sat - so it did nothing for legibility. */
  .hero-scrim {
    background:
      linear-gradient(180deg,
        rgba(8,5,4,.94) 0%, rgba(8,5,4,.86) 28%,
        rgba(8,5,4,.62) 45%, rgba(8,5,4,.22) 62%, transparent 75%),
      linear-gradient(0deg, rgba(8,5,4,.72) 0%, transparent 24%);
  }

  /* Scene labels and the scroll cue crowd a small screen. */
  .scrollcue { display: none; }
  .scene-label { bottom: 1.1rem; font-size: .55rem; }
  .scene-label b { font-size: 1.15rem; }

  /* Studio panels: stack, and let the long chip lists breathe. */
  .chips.scroll { max-height: 9rem; }
  .readout { flex-wrap: wrap; gap: .6rem; }
  .readout .say { flex: 1 1 100%; order: 3; }

  /* Assembly labels sat on top of the discs at this width. */
  .assy-rig { width: min(19rem, 66vw); }
  .layer .tag .lt { font-size: .92rem; }
  .layer .tag .ls { display: none; }

  /* Tray must not cover the whole screen. */
  .tray-panel { max-height: 58vh; }
  .tray-fab { font-size: .58rem; padding: .7rem .95rem; }

  /* Menu grid to a single column so descriptions stay readable. */
  .items { grid-template-columns: 1fr; }

  /* Big serif watermark was bleeding out of narrow cards. */
  .item:not(.has-img)::before { font-size: 4rem; right: .3rem; }
}

/* Very small handsets (iPhone SE and similar). */
@media (max-width: 380px) {
  h1.hero-title { font-size: clamp(2.7rem, 15vw, 4rem); }
  .atmo-facts div { min-width: 7rem; padding: .9rem .8rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* Touch devices: hover-only affordances never trigger, so make the resting
   state the good-looking one and drop transforms that cost paint. */
@media (hover: none) {
  .item .shot img { filter: saturate(.98) contrast(1.06) brightness(.97); }
  .gal-strip figure:hover img { transform: none; }
  .item:not(.has-img):hover::before { transform: none; }

  /* Every interactive control to a 44px minimum height. The studio chips were
     32px, the nav CTA 37px - both under the comfortable-tap threshold and
     genuinely fiddly on a phone. */
  .chip, .mini, .rail button {
    min-height: 44px;
    padding-top: .5rem; padding-bottom: .5rem;
  }
  .nav-cta { min-height: 44px; display: inline-flex; align-items: center; }
  .tl-x { width: 2rem; height: 2rem; }
  .qa .q { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .tray-top button { min-height: 44px; padding: 0 .5rem; }
  /* Stop iOS from flashing a grey box on every tap. */
  a, button, .chip, .pick { -webkit-tap-highlight-color: rgba(237,180,173,.18); }
}

/* iOS renders fixed full-screen blend layers expensively and it shows up as
   scroll jank. Lighten them on touch hardware. */
@media (hover: none) and (pointer: coarse) {
  .grain { opacity: .28; animation: none; }
  .vignette {
    background: radial-gradient(ellipse 130% 90% at 50% 45%,
                transparent 45%, rgba(0,0,0,.45) 82%, rgba(0,0,0,.7) 100%);
  }
}

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain { animation: none; }
  .scrollcue { display: none; }
  .pass-track { animation: none; }
  .dot.open { animation: none; }
  .item { opacity: 1; transform: none; }

  /* Un-pinning the stage is not enough on its own: the scene heights are inline
     on index.html (190vh / 340vh / 380vh / 280vh) for the scroll choreography.
     Left alone, each section keeps its full pin length while the stage shrinks
     to one screen, leaving thousands of pixels of dead black between sections.
     An author !important here does outrank a normal-origin inline style. */
  .scene { height: auto !important; }
  .scene .stage {
    position: relative;
    height: auto;
    min-height: 100svh;      /* svh, not vh: vh is the LARGE viewport on iOS */
  }

  /* Static, readable end-states. The camera loop is disabled in JS under RM, so
     these have to stand on their own. */
  .hero-copy, .macro-copy, .assy-copy, .atmo-copy { opacity: 1 !important; transform: none !important; }
  .assy-copy { position: static; margin: 0 auto; max-width: 34rem; text-align: center; }
  .layer .tag, .layer .lead { opacity: 1; }
  .scene-bed { opacity: .4; }
  #petals { display: none; }

  /* The 3D rigs read as a flat stack rather than a camera move. Layers are
     absolutely positioned and normally placed by the JS camera, so without a
     static fallback they would all pile up at one point. */
  .assy-rig {
    position: relative; left: auto; top: auto; height: auto;
    margin: 2.5rem auto; width: min(26rem, 82vw);
    transform: none !important;
  }
  .layer {
    position: relative; left: auto; top: auto;
    margin-bottom: .55rem;
    opacity: 1 !important;
    transform: none !important;
  }
  .layer .tag {
    position: static; transform: none;
    text-align: left; white-space: normal;
    margin-bottom: .3rem;
  }
  .layer .lead { display: none; }
  .tunnel, .slab { display: none; }

  /* The macro scene's whole point is the fly-through; with the planes gone,
     collapse it so it is not a tall empty section. */
  #s-macro { display: none; }
}

/* ==========================================================================
   FLOWER PRE-ORDER
   Same ink/cream/blush palette and serif-display rhythm as the rest of the
   page, so the florist half reads as part of the shop rather than bolted on.
   ========================================================================== */
.blooms {
  padding: clamp(4rem, 9vw, 8rem) var(--gut);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(237,180,173,.10), transparent 60%),
    var(--ink-2);
  border-top: 1px solid rgba(246,236,221,.07);
}
.blooms-head { max-width: 46rem; margin: 0 0 clamp(2rem,4vw,3.25rem); }
.blooms-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 5.2vw, 3.9rem); line-height: 1.04;
  letter-spacing: -.015em; color: var(--cream); margin: 0 0 .7rem;
}
.blooms-head h2 em { font-style: italic; color: var(--blush); }
.blooms-head p { color: var(--cream-dim); font-size: clamp(.95rem,1.6vw,1.06rem); line-height: 1.65; margin: 0; max-width: 40rem; }

.blooms-grid {
  display: grid; gap: clamp(.7rem, 1.4vw, 1.05rem);
  grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 19vw, 200px), 1fr));
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.bloom {
  position: relative; border: 0; padding: 0; cursor: pointer; text-align: left;
  background: var(--ink-3); border-radius: 14px; overflow: hidden;
  outline: 1px solid rgba(246,236,221,.08); outline-offset: -1px;
  transition: transform .45s var(--ease), outline-color .3s, box-shadow .45s var(--ease);
}
.bloom:hover { transform: translateY(-4px); outline-color: rgba(237,180,173,.4);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.9); }
.bloom[aria-pressed="true"] {
  outline: 2px solid var(--blush); outline-offset: -2px;
  box-shadow: 0 0 0 4px rgba(237,180,173,.14), 0 18px 40px -22px rgba(0,0,0,.9);
}
.bloom-shot { aspect-ratio: 1; overflow: hidden; background: var(--ink); }
.bloom-shot img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--ease); }
.bloom:hover .bloom-shot img { transform: scale(1.06); }
.bloom-cap { padding: .7rem .8rem .85rem; }
.bloom-cap b { display: block; font-family: var(--sans); font-weight: 600;
  font-size: .93rem; color: var(--cream); letter-spacing: -.005em; }
.bloom-cap span { display: block; margin-top: .18rem; font-size: .74rem;
  line-height: 1.45; color: var(--cream-dim); opacity: .82; }
.bloom-tick {
  position: absolute; top: .6rem; right: .6rem; width: 26px; height: 26px;
  border-radius: 50%; background: var(--blush); color: var(--ink);
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
  opacity: 0; transform: scale(.6); transition: .3s var(--ease);
}
.bloom[aria-pressed="true"] .bloom-tick { opacity: 1; transform: scale(1); }

/* ---- the form ---- */
.bloom-form {
  background: var(--ink-3); border-radius: 18px;
  outline: 1px solid rgba(246,236,221,.09); outline-offset: -1px;
  max-width: 54rem; overflow: hidden;
}
.bf-head { padding: clamp(1.1rem,2.4vw,1.6rem) clamp(1.1rem,2.6vw,1.8rem);
  border-bottom: 1px solid rgba(246,236,221,.08); background: rgba(246,236,221,.02); }
.bf-head h3 { margin: 0 0 .3rem; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.25rem,2.6vw,1.7rem); color: var(--cream); }
.bf-sum { margin: 0; font-size: .87rem; color: var(--blush); line-height: 1.55; }
.bf-body { padding: clamp(1.1rem,2.6vw,1.8rem); display: grid; gap: 1.15rem; }
.bf-row { display: grid; gap: .45rem; }
.bf-2 { grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 560px) { .bf-2 { grid-template-columns: 1fr; } }
.bf-l { font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dim); }
.bf-l i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .7; }
.bf-i {
  width: 100%; font-family: var(--sans); font-size: .95rem; color: var(--cream);
  background: rgba(10,7,6,.55); border: 1px solid rgba(246,236,221,.14);
  border-radius: 10px; padding: .72rem .85rem; transition: border-color .25s, background .25s;
}
.bf-i:focus { outline: none; border-color: var(--blush); background: rgba(10,7,6,.8); }
.bf-i::placeholder { color: var(--cream-dim); opacity: .5; }
textarea.bf-i { resize: vertical; min-height: 3.2rem; line-height: 1.55; }
select.bf-i { appearance: none;
  background-image: linear-gradient(45deg,transparent 50%,var(--cream-dim) 50%),
                    linear-gradient(135deg,var(--cream-dim) 50%,transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
.bf-i[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8) sepia(.3); cursor: pointer; }
.bf-err { font-size: .76rem; color: var(--blush); }

.bloom-form .chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.bf-chip {
  font-family: var(--sans); font-size: .84rem; color: var(--cream);
  background: rgba(246,236,221,.05); border: 1px solid rgba(246,236,221,.14);
  border-radius: 999px; padding: .5rem .95rem; cursor: pointer;
  transition: .25s var(--ease);
}
.bf-chip i { font-style: normal; opacity: .62; margin-left: .35rem; font-size: .8em; }
.bf-chip:hover { border-color: rgba(237,180,173,.5); transform: translateY(-1px); }
.bf-chip[aria-pressed="true"] { background: var(--blush); border-color: var(--blush); color: var(--ink); font-weight: 600; }
.bf-chip[aria-pressed="true"] i { opacity: .75; }

.bf-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-top: .3rem; }
.bf-total { display: flex; align-items: baseline; gap: .6rem; }
.bf-total span { font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dim); }
.bf-total b { font-family: var(--serif); font-size: clamp(1.5rem,3.4vw,2.1rem);
  font-weight: 400; color: var(--blush); }
.bf-send {
  font-family: var(--sans); font-size: .9rem; font-weight: 600; color: var(--ink);
  background: var(--blush); border: 0; border-radius: 999px;
  padding: .82rem 1.6rem; cursor: pointer; transition: .25s var(--ease);
}
.bf-send:hover { background: var(--blush-soft); transform: translateY(-2px); }
.bf-send:active { transform: scale(.97); }
.bf-send[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.bf-note { margin: 0; font-size: .78rem; line-height: 1.6; color: var(--cream-dim); opacity: .78; }
.bf-note.ok { color: var(--blush); opacity: 1; }

/* ---- flower grid: tighter cells, 31 varieties, drawer panel ------------- */
.blooms-grid { grid-template-columns: repeat(auto-fill, minmax(clamp(112px,13vw,158px),1fr)); }
.bloom-cap { padding: .55rem .6rem .7rem; }
.bloom-cap b { font-size: .84rem; line-height: 1.25; }
.bloom-priced { display:block; margin-top:.15rem; font-style:normal; font-size:.7rem;
  color: var(--gold); letter-spacing:.02em; }
.bloom-hero { outline-color: rgba(237,180,173,.34); }

.bloom-panel { position: relative; grid-column: 1 / -1; margin: .2rem 0 .4rem;
  background: var(--ink-3); border-radius: 16px; overflow: hidden;
  outline: 1px solid rgba(237,180,173,.28); outline-offset: -1px;
  animation: bpIn .4s var(--ease); }
@keyframes bpIn { from { opacity:0; transform: translateY(-8px) } to { opacity:1; transform:none } }
.bp-close { position:absolute; top:.55rem; right:.7rem; z-index:2; background:rgba(10,7,6,.55);
  border:1px solid rgba(246,236,221,.18); color:var(--cream); width:32px; height:32px;
  border-radius:50%; font-size:1.15rem; line-height:1; cursor:pointer; }
.bp-close:hover { background: var(--blush); color: var(--ink); }
.bp-top { display:grid; grid-template-columns: minmax(140px,220px) 1fr; gap: clamp(1rem,2.4vw,1.8rem);
  padding: clamp(1rem,2.4vw,1.6rem); border-bottom:1px solid rgba(246,236,221,.08); }
@media (max-width:620px){ .bp-top { grid-template-columns:1fr; } }
.bp-shot { border-radius:12px; overflow:hidden; aspect-ratio:1; background:var(--ink); }
.bp-shot img { width:100%; height:100%; object-fit:cover; }
.bp-intro h3 { margin:0 0 .35rem; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--cream); }
.bp-intro > p { margin:0 0 1rem; color:var(--cream-dim); font-size:.92rem; line-height:1.6; }
.bp-var { margin-bottom:.85rem; }
.bp-var .bf-l { display:block; margin-bottom:.4rem; }
.bp-note { display:block; margin-top:.4rem; font-size:.72rem; line-height:1.5;
  color:var(--cream-dim); opacity:.7; }
.bf-chip.sm { font-size:.78rem; padding:.4rem .78rem; }
.bp-body { padding: clamp(1rem,2.4vw,1.6rem); display:grid; gap:1.05rem; }
#bpPriceNote { font-style:normal; text-transform:none; letter-spacing:0; opacity:.65; margin-left:.4rem; }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery2 { padding: clamp(3.5rem,8vw,7rem) var(--gut); background: var(--ink-2);
  border-top:1px solid rgba(246,236,221,.07); }
.g2-head { max-width:44rem; margin:0 0 clamp(1.8rem,3.5vw,2.8rem); }
.g2-head h2 { font-family:var(--serif); font-weight:400; font-size:clamp(2rem,5vw,3.6rem);
  color:var(--cream); margin:0 0 .6rem; letter-spacing:-.015em; }
.g2-head h2 em { font-style:italic; color:var(--blush); }
.g2-head p { color:var(--cream-dim); margin:0; font-size:1rem; }
.g2-grid { display:grid; gap:clamp(.6rem,1.2vw,1rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.g2 { position:relative; margin:0; border-radius:14px; overflow:hidden; cursor:zoom-in;
  background:var(--ink); aspect-ratio:5/4;
  outline:1px solid rgba(246,236,221,.08); outline-offset:-1px; }
.g2-big { grid-column:span 2; }
@media (max-width:700px){ .g2-big { grid-column:span 1; } }
.g2 img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease); }
.g2:hover img { transform:scale(1.05); }
.g2 figcaption { position:absolute; inset:auto 0 0 0; padding:1.1rem 1rem .9rem;
  background:linear-gradient(0deg, rgba(10,7,6,.92), transparent);
  transform:translateY(.4rem); opacity:.92; transition:.4s var(--ease); }
.g2:hover figcaption { transform:none; opacity:1; }
.g2 figcaption b { display:block; font-family:var(--serif); font-weight:400;
  font-size:1.15rem; color:var(--cream); }
.g2 figcaption span { display:block; margin-top:.15rem; font-size:.78rem;
  color:var(--cream-dim); }
.g2-open { aspect-ratio:auto; cursor:zoom-out; }
.g2-open img { height:auto; }

/* ==========================================================================
   FULL BREAKFAST — EXPLODED SCROLL SCENE
   ========================================================================== */
.xplode { height: 320vh; padding:0; background:var(--ink); position:relative; }
.xp-sticky { position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center;
  gap:clamp(1rem,3vw,3rem); padding:0 var(--gut); }
@media (max-width:900px){
  .xp-sticky { grid-template-columns:1fr; grid-template-rows:1fr auto; gap:.5rem;
    padding-bottom:1.5rem; }
  .xp-legend { display:none !important; }
}
.xp-stage { position:relative; height:min(78vh,720px); display:grid; place-items:center;
  perspective:1400px; }
.xp-stage img { max-height:100%; max-width:100%; object-fit:contain; border-radius:12px;
  will-change:transform; transform-origin:50% 60%;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.6)); }
.xp-shade { position:absolute; inset:0; pointer-events:none; opacity:.1;
  background:radial-gradient(60% 50% at 50% 42%, transparent 40%, rgba(10,7,6,.85) 100%); }
.xp-copy { position:relative; z-index:2; }
.xp-eyebrow { font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-dim); display:block; margin-bottom:.7rem; }
.xp-copy h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,4.6vw,3.4rem);
  line-height:1.05; color:var(--cream); margin:0 0 .8rem; letter-spacing:-.015em; }
#xpLine { font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,2.4vw,1.6rem);
  color:var(--blush); margin:0 0 1.2rem; min-height:1.4em; }
.xp-rail { height:2px; background:rgba(246,236,221,.14); border-radius:2px; overflow:hidden;
  max-width:22rem; }
.xp-rail i { display:block; height:100%; width:0; background:var(--blush); }
.xp-legend { position:absolute; right:var(--gut); top:50%; transform:translateY(-50%);
  list-style:none; margin:0; padding:0; display:grid; gap:.32rem; max-width:15rem; z-index:3; }
.xp-legend li { opacity:.26; transition:.45s var(--ease); transform:translateX(6px); }
.xp-legend li.past { opacity:.42; }
.xp-legend li.on { opacity:1; transform:none; }
.xp-legend li b { display:block; font-family:var(--sans); font-weight:600; font-size:.84rem;
  color:var(--cream); }
.xp-legend li.on b { color:var(--blush); }
.xp-legend li span { display:block; font-size:.72rem; color:var(--cream-dim); line-height:1.4; }
@media (prefers-reduced-motion:reduce){ .xplode{height:auto;} .xp-sticky{position:static;height:auto;padding:3rem var(--gut);} }
.gal .g2-grid { margin: 0 var(--gut) clamp(1.6rem,3vw,2.4rem); }
.gal-sub { margin: 0 var(--gut) .9rem; font-family: var(--sans); font-size: .72rem;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dim); }
.bf-btns { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.bf-copy { font-family:var(--sans); font-size:.86rem; font-weight:600; color:var(--cream);
  background:transparent; border:1.5px solid rgba(246,236,221,.28); border-radius:999px;
  padding:.78rem 1.3rem; cursor:pointer; transition:.25s var(--ease); }
.bf-copy:hover { border-color:var(--blush); color:var(--blush); }
.bf-copy.done { background:var(--blush); border-color:var(--blush); color:var(--ink); }

/* ---- bouquets ---- */
.bq-head { font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-dim); margin:0 0 .8rem; }
.blooms-grid + .bq-head, .bq-row + .bq-head { margin-top:2.2rem; }
.bq-row { display:grid; gap:clamp(.7rem,1.4vw,1.1rem); margin-bottom:.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.bq { position:relative; border:0; padding:0; text-align:left; cursor:pointer; overflow:hidden;
  border-radius:16px; background:var(--ink-3); outline:1px solid rgba(246,236,221,.1);
  outline-offset:-1px; transition:transform .4s var(--ease), outline-color .3s; }
.bq:hover { transform:translateY(-5px); outline-color:rgba(237,180,173,.45); }
.bq-shot { aspect-ratio:1; overflow:hidden; background:var(--ink); }
.bq-shot img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.bq:hover .bq-shot img { transform:scale(1.06); }
.bq-cap { padding:.9rem 1rem 1.1rem; }
.bq-cap b { display:block; font-family:var(--serif); font-weight:400; font-size:1.3rem; color:var(--cream); }
.bq-cap .bq-p { display:inline-block; margin-top:.2rem; font-family:var(--sans); font-weight:600;
  font-size:.9rem; color:var(--blush); }
.bq-cap span { display:block; margin-top:.35rem; font-size:.8rem; line-height:1.55; color:var(--cream-dim); }

/* ---- social / order ---- */
.social { padding:clamp(3.5rem,8vw,6rem) var(--gut); background:var(--ink-2);
  border-top:1px solid rgba(246,236,221,.07); }
.wrap-s { max-width:1180px; margin:0 auto; }
.soc-eyebrow { font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-dim); }
.social h2 { font-family:var(--serif); font-weight:400; font-size:clamp(2rem,5vw,3.4rem);
  color:var(--cream); margin:.5rem 0 2rem; letter-spacing:-.015em; }
.social h2 em { font-style:italic; color:var(--blush); }
.soc-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); }
.soc-card { display:block; padding:1.6rem; border-radius:16px; background:var(--ink-3);
  outline:1px solid rgba(246,236,221,.1); outline-offset:-1px; transition:.35s var(--ease); }
.soc-card:hover { transform:translateY(-5px); outline-color:var(--blush);
  box-shadow:0 22px 44px -24px rgba(0,0,0,.8); }
.soc-ic { width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  margin-bottom:1rem; color:var(--ink); }
.soc-ig .soc-ic { background:linear-gradient(135deg,#f0b657,#c95d80,#8a3ab9); color:#fff; }
.soc-ue .soc-ic { background:#06c167; color:#fff; }
.soc-ph .soc-ic { background:var(--blush); }
.soc-card b { display:block; font-family:var(--serif); font-weight:400; font-size:1.25rem; color:var(--cream); }
.soc-card span { display:block; margin-top:.4rem; font-size:.86rem; line-height:1.6; color:var(--cream-dim); }
.soc-card i { display:inline-block; margin-top:.9rem; font-style:normal; font-family:var(--sans);
  font-size:.8rem; font-weight:600; color:var(--blush); }

/* ---- mobile: give small text links a proper 44px tap area (iOS HIG) ---- */
@media (max-width: 720px) {
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  #credits .cr-l a, .cr-l a, .bf-note a, .ig-note a,
  footer a, .visit a[href^="http"], .visit a[href^="tel"] {
    display: inline-block; padding: .55rem 0; min-height: 44px; line-height: 1.9;
  }
  /* the flower drawer sits full-bleed on a phone so the form isn't cramped */
  .bloom-panel { margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1);
    border-radius: 0; }
  .bp-top { grid-template-columns: 1fr; }
  .bq-cap b { font-size: 1.15rem; }
}
.xp-stage .xp-media { max-height:100%; max-width:100%; object-fit:contain; border-radius:12px;
  will-change:transform; transform-origin:50% 60%;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.6)); }

/* ---- email card + Instagram wall ---- */
.soc-em { display:block; margin-top:1rem; padding:1.5rem 1.6rem; border-radius:16px;
  background:linear-gradient(135deg, rgba(237,180,173,.14), rgba(201,161,95,.08));
  outline:1px solid rgba(237,180,173,.3); outline-offset:-1px; transition:.3s var(--ease); }
.soc-em:hover { outline-color:var(--blush); transform:translateY(-3px); }
.soc-em-l { font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-dim); }
.soc-em b { display:block; margin:.35rem 0 .3rem; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.2rem,3.4vw,1.9rem); color:var(--blush); word-break:break-word; }
.soc-em-s { display:block; font-size:.85rem; color:var(--cream-dim); line-height:1.6; }

.ig-wall-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin:2.4rem 0 .9rem; }
.ig-wall-link { font-family:var(--sans); font-size:.85rem; font-weight:600; color:var(--blush); }
.ig-wall { display:grid; gap:.5rem; grid-template-columns:repeat(4,1fr); }
@media (max-width:760px){ .ig-wall { grid-template-columns:repeat(2,1fr); } }
.igw { position:relative; display:block; aspect-ratio:1; border-radius:12px; overflow:hidden;
  background:var(--ink); }
.igw img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.igw:hover img { transform:scale(1.08); }
.igw-o { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  gap:.4rem; padding:.8rem; color:#fff; opacity:0; transition:opacity .35s;
  background:linear-gradient(0deg, rgba(10,7,6,.86), rgba(10,7,6,.15) 60%, transparent); }
.igw:hover .igw-o, .igw:focus-visible .igw-o { opacity:1; }
.igw-o b { font-family:var(--sans); font-weight:600; font-size:.76rem; line-height:1.4; }

/* ---- reading progress ---- */
.read-bar { position:fixed; top:0; left:0; right:0; height:3px; z-index:200;
  background:linear-gradient(90deg, var(--blush), var(--gold));
  transform:scaleX(0); transform-origin:0 50%; will-change:transform; pointer-events:none; }

/* ---- menu search ---- */
.menu-find { position:relative; max-width:34rem; margin:0 auto 2rem; }
.menu-find input { width:100%; font-family:var(--sans); font-size:.95rem; color:var(--cream);
  background:rgba(10,7,6,.5); border:1px solid rgba(246,236,221,.16); border-radius:999px;
  padding:.85rem 5.5rem .85rem 1.3rem; transition:border-color .25s, background .25s; }
.menu-find input:focus { outline:none; border-color:var(--blush); background:rgba(10,7,6,.8); }
.menu-find input::placeholder { color:var(--cream-dim); opacity:.55; }
.mf-count { position:absolute; right:1.3rem; top:50%; transform:translateY(-50%);
  font-family:var(--mono,monospace); font-size:.72rem; color:var(--blush); pointer-events:none; }

/* ---- open / closed pill ---- */
.open-pill { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--sans);
  font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:999px; margin-left:.4rem; white-space:nowrap; }
.open-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.open-pill.is-open { color:#7bd88f; background:rgba(123,216,143,.13); border:1px solid rgba(123,216,143,.3); }
.open-pill.is-shut { color:var(--cream-dim); background:rgba(246,236,221,.07); border:1px solid rgba(246,236,221,.16); }
@media (max-width:880px){ .open-pill { display:none; } }
@media (max-width: 720px) {
  .ig-wall-link { display:inline-block; min-height:44px; line-height:44px; }
}