/* Longfill mixing scenes */
.mix-scene { display: grid; grid-template-columns: minmax(280px, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.mix-svg { position: sticky; top: calc(var(--header-h, 120px) + 16px); display: grid; place-items: center; padding: 8px 0; }
.mix-scene-svg { width: min(100%, 420px); height: auto; overflow: visible; }
.svg-display { font-family: var(--display); font-weight: 900; text-transform: uppercase; }
.svg-body { font-family: var(--body); }
.svg-label { font-family: var(--body); text-transform: uppercase; }
.svg-sign { font-family: var(--sign); }
.mix-readout { transition: fill .3s; }
.mix-readout.lit, .mix-ready.lit { fill: #FFE9DC; filter: drop-shadow(0 0 4px rgba(255,255,255,.9)) drop-shadow(0 0 10px #FF2D3F) drop-shadow(0 0 22px rgba(255,45,63,.6)); }
.mix-ticks .tick line { transition: stroke .3s; }
.mix-ticks .tick text { transition: fill .3s; }
.mix-ticks .tick.lit line { stroke: #FF2D3F; filter: drop-shadow(0 0 4px #FF2D3F); }
.mix-ticks .tick.lit text { fill: #FFE9DC; }
.mix-steps { list-style: none; display: flex; flex-direction: column; gap: clamp(40px, 8vh, 110px); padding: 10px 0 40px; }
.mix-step { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; opacity: .4; transition: opacity .4s; }
.mix-step.is-on { opacity: 1; }
.mix-step .k { font-family: var(--sign); font-size: 2.4rem; line-height: .9; color: var(--core); text-shadow: var(--glow-xs); min-width: 1.2em; }
.mix-step h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin-bottom: .3rem; }
.mix-step p { margin: 0; color: var(--cream-2); max-width: 46ch; font-size: var(--fs-sm); }
.mix-step .ml { font-family: var(--display); font-weight: 900; font-size: 1.1em; color: var(--brass); }
.mix-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.mix-refs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--s4); }
.mix-refs .ref { width: 92px; height: 92px; border-radius: var(--r-md); background: var(--paper); display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line-2); }
.mix-refs .ref img { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.mix-refs small { display: block; width: 100%; color: var(--muted); font-size: var(--fs-xs); }
.recipe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: var(--s5); }
.recipe .plaque b { font-size: 1.2rem; }
.recipe .plaque .big { font-family: var(--sign); font-size: 2rem; color: var(--core); text-shadow: var(--glow-xs); line-height: 1; }
@media (max-width: 900px) {
  .mix-scene { grid-template-columns: 1fr; }
  .mix-svg { position: static; }
  .mix-scene-svg { width: min(100%, 360px); }
  .recipe { grid-template-columns: 1fr; }
}

/* Homepage size switcher: one caption list per size, the inactive ones stay hidden whatever display the list gets */
.mix-steps[hidden] { display: none !important; }
.mix-scene:has(> .mix-sizes) { row-gap: 22px; }   /* the switcher row sits close to the scene, not a full column gap away */
.mix-sizes { grid-column: 1 / -1; display: inline-flex; gap: 4px; padding: 5px; width: max-content; max-width: 100%; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(16,10,11,.72); }
.mix-size { font-family: var(--sign); font-size: 1.15rem; line-height: 1; min-height: 44px; padding: 0 20px; border-radius: 999px; color: var(--muted); transition: color .2s, background .2s, box-shadow .2s, text-shadow .2s; }
.mix-size:hover { color: var(--cream-2); }
.mix-size[aria-pressed="true"] { color: var(--core); background: rgba(255,45,63,.16); box-shadow: inset 0 0 0 1px var(--neon), 0 0 14px rgba(255,45,63,.35); text-shadow: var(--glow-xs); }
.mix-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Desktop pin (data-desktop="pin", homepage): the whole scene holds still in the middle of the screen while it plays,
   so the captions are a compact stack beside the bottle instead of a long list that scrolls past it */
@media (min-width: 901px) {
  .mix-desk-pin { align-items: center; }
  .mix-desk-pin .mix-svg { position: static; padding: 0; }
  .mix-desk-pin .mix-scene-svg { width: auto; max-width: 100%; height: min(548px, calc(100vh - var(--head-h, 120px) - 150px)); }
  .mix-desk-pin .mix-steps { gap: clamp(16px, 3vh, 32px); padding: 4px 0 18px; }
  .mix-desk-frame { display: flex; flex-direction: column; justify-content: center; height: calc(100vh - var(--head-h, 120px) - 24px); min-height: 0; overflow: hidden; box-sizing: border-box; padding-top: 8px; padding-bottom: 8px; }
  .mix-desk-frame > * { transform: translateY(var(--pin-shift, 0px)); }
  .mix-desk-frame > .sign { flex: none; margin-bottom: 14px; font-size: clamp(2.8rem, 4.3vw, 4.8rem); }
  .mix-desk-frame > .night-section-head { flex: none; margin-bottom: 16px; }
  .mix-desk-frame > .night-section-head h2 { font-size: clamp(2.4rem, 4.2vw, 4.5rem); }
  /* The homepage scene gets one definite remaining-height stage. Absolute zones prevent the
     grid's intrinsic SVG ratio from pushing the bottle below the pinned viewport. */
  .mix-desk-frame > .mix-desk-pin { position: relative; display: block; flex: 1 1 auto; width: 100%; min-height: 0; overflow: hidden; }
  .mix-desk-frame .mix-desk-pin .mix-sizes { position: absolute; z-index: 2; top: 0; left: 0; }
  .mix-desk-frame .mix-desk-pin .mix-svg { position: absolute; top: 60px; right: 54%; bottom: 0; left: 0; min-height: 0; height: auto; overflow: hidden; }
  .mix-desk-frame .mix-desk-pin .mix-scene-svg { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; }
  .mix-desk-frame .mix-desk-pin > div:last-child { position: absolute; top: 60px; right: 0; bottom: 0; left: 50%; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .mix-desk-frame .mix-desk-pin .mix-steps { flex: 1 1 auto; min-height: 0; gap: clamp(8px, 1.5vh, 18px); padding-bottom: 8px; }
  .mix-desk-frame .mix-desk-pin .mix-step { gap: 12px; }
  .mix-desk-frame .mix-desk-pin .mix-step h3 { font-size: clamp(1.05rem, 1.8vw, 1.55rem); }
  .mix-desk-frame .mix-desk-pin .mix-step p { font-size: clamp(.72rem, 1vw, var(--fs-sm)); line-height: 1.3; }
  .mix-desk-frame .mix-desk-pin .mix-actions { flex: none; margin-top: 4px; }
}

/* Phones (below 900px): mix-scene.js pins the scene under the header and swaps the captions in one slot.
   --head-h is set by the engine from the sticky header's height; --pin-bottom is set by pages with a sticky buy bar. */
@media (max-width: 900px) {
  /* the box is as tall as the large viewport (nothing peeks under it whichever way the toolbar is), and the bottom padding keeps
     the content inside the small viewport and above the buy bar; both units are constant, so nothing re-lays-out while scrolling */
  .mix-mobile { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - var(--head-h, 64px)); padding: 6px 0 calc(12px + var(--pin-bottom, 0px)); box-sizing: border-box; }
  @supports (height: 100lvh) { .mix-mobile { height: calc(100lvh - var(--head-h, 64px)); padding-bottom: calc(100lvh - 100svh + 12px + var(--pin-bottom, 0px)); } }
  .mix-mobile .mix-svg { position: static; flex: 1 1 auto; min-height: 0; padding: 0; }
  .mix-mobile .mix-scene-svg { height: 100%; width: auto; max-width: 100%; }
  .mix-mobile .mix-steps { display: grid; padding: 0; gap: 0; min-height: 128px; }
  .mix-mobile .mix-step { grid-area: 1 / 1; opacity: 0; transition: opacity .35s; }
  .mix-mobile .mix-step.is-on { opacity: 1; }
  .mix-mobile .mix-step h3 { font-size: 1.2rem; }
  .mix-mobile .mix-actions { margin: 0; }
  .mix-mobile .mix-sizes { align-self: center; flex: none; gap: 2px; padding: 3px; }
  .mix-mobile .mix-size { min-height: 34px; padding: 0 12px; font-size: .9rem; }
  /* two actions (Play, Shop) share one row on a phone so the bottle keeps its height */
  .mix-mobile .mix-actions { flex-wrap: nowrap; gap: 8px; }
  .mix-mobile .mix-actions .btn { min-width: 0; padding: 0 12px; font-size: .72rem; letter-spacing: .06em; white-space: nowrap; justify-content: center; }
  .mix-mobile .mix-actions [data-mix-shop] { flex: 1 1 auto; }
  .mix-mobile-frame { display: flex; flex-direction: column; height: calc(100vh - var(--head-h, 64px)); min-height: 0; overflow: hidden; box-sizing: border-box; padding-top: 6px; padding-bottom: 8px; }
  @supports (height: 100lvh) { .mix-mobile-frame { height: calc(100lvh - var(--head-h, 64px)); padding-bottom: calc(100lvh - 100svh + 8px); } }
  .mix-mobile-frame > .sign { flex: none; margin-bottom: 8px; font-size: clamp(2.15rem, 11vw, 3.1rem); }
  .mix-mobile-frame > .sign small { margin-bottom: 5px; font-size: .62rem; }
  .mix-mobile-frame > .night-section-head { flex: none; display: block; margin-bottom: 7px; }
  .mix-mobile-frame > .night-section-head h2 { font-size: clamp(1.8rem, 8vw, 2.45rem); line-height: .94; }
  .mix-mobile-frame > .mix-mobile { flex: 1 1 auto; height: auto; min-height: 0; padding-top: 0; padding-bottom: 0; }
  .mix-mobile-frame .mix-mobile .mix-svg { flex-grow: 1.7; min-height: clamp(190px, 30vh, 286px); }
  .mix-mobile-frame .mix-mobile .mix-steps { min-height: 96px; }
  .mix-mobile-frame .mix-mobile > div:last-child { padding-top: 10px; }
  .mix-mobile-frame .mix-mobile .mix-step { gap: 12px; }
  .mix-mobile-frame .mix-mobile .mix-step h3 { font-size: 1.05rem; }
  .mix-mobile-frame .mix-mobile .mix-step p { font-size: .75rem; line-height: 1.3; }
}