/* Halesnax look A, "Sketch to shelf": her hand-drawn shot plans, wiped into the finished packs. Loaded only when A is the shown look (the page's e2Styles).
   The shared base is e2-halesnax.css (palette tokens, bands, --hs-display, --hs-spring, .hs-eyebrow). Markup: e2/halesnax/hero-a.njk and sig-a.njk; behaviour: e2-halesnax-a.js.
   Every animation is gated: the script adds .is-armed (the hidden start) and .is-play (the run) only when motion is allowed, so no JS or reduced motion shows the finished state. */

.bx-halesnax { --hsa-paper: #f4efe4; --hsa-pen: #df796b; }
[hidden].hsa__pack, [hidden].hsa__trio, [hidden].hsa__sel { display: none !important; }

/* ================= Hero: her plan draws itself in ================= */
.hsah { min-height: 0; background: var(--hsa-paper); color: var(--bx-deep); font-family: var(--bx-font); isolation: isolate; overflow: hidden; padding-block: clamp(48px, 6vw, 88px); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--bx-maroon) 14%, transparent); }
/* a faint drafting grid, fading out toward the edges, so the cream reads as a plan sheet */
.hsah::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, color-mix(in srgb, var(--bx-maroon) 7%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--bx-maroon) 7%, transparent) 1px, transparent 1px);
  background-size: 36px 36px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 62% 50%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 70% 80% at 62% 50%, #000 20%, transparent 78%); }
.hsah__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.hsah__copy { display: grid; justify-items: start; gap: 18px; }
.hsah__h { margin: 0; font-family: var(--hs-display); font-weight: 400; font-size: clamp(38px, 5vw, 76px); line-height: .96; letter-spacing: .01em; text-transform: uppercase; color: var(--bx-deep); }
.hsah__p { margin: 0; max-width: 38ch; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.65; color: color-mix(in srgb, var(--bx-deep) 86%, transparent); }
.hsah__replay { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px 0 16px; border: 1.5px solid var(--bx-deep); border-radius: 999px; background: transparent; color: var(--bx-deep); font: 600 14px/1 var(--bx-font); cursor: pointer; transition: background-color .2s ease, transform .25s var(--ease-out); }
.hsah__replay:hover { background: color-mix(in srgb, var(--bx-deep) 9%, transparent); }
.hsah__replay:active { transform: scale(.97); }
.hsah__replay svg { width: 18px; height: 18px; }
.hsah__replay:focus-visible, .hsa__chip:focus-visible { outline: 3px solid var(--bx-red); outline-offset: 3px; }

.hsah__stage { position: relative; width: 100%; aspect-ratio: 1.5; container-type: inline-size; }
.hsah__sheet, .hsah__front { position: absolute; margin: 0; }
.hsah__sheet { left: 0; top: 3%; z-index: 1; width: 54%; transform: rotate(-2.5deg); }
.hsah__front { right: 0; bottom: 0; z-index: 2; width: 52%; transform: rotate(2.2deg); }
.hsah__tag { position: absolute; left: 14px; top: -13px; z-index: 4; padding: 5px 12px; border-radius: 999px; background: var(--bx-deep); color: var(--bx-cream); font: 600 11px/1.3 var(--bx-font); letter-spacing: .14em; text-transform: uppercase; }
.hsah__front .hsah__tag { left: auto; right: 14px; }
.hsah__paper, .hsah__front img { display: block; border-radius: 6px; background: #fff; box-shadow: 0 1px 0 rgba(111, 33, 20, .1), 0 28px 44px -22px rgba(111, 33, 20, .55); }
.hsah__paper { position: relative; aspect-ratio: 435 / 434; overflow: hidden; }
.hsah__base { display: block; width: 100%; height: 100%; }
.hsah__red { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: var(--clip); transform-origin: var(--ox) var(--oy); }
.hsah__front img { width: 100%; height: auto; }

.hsah__objs { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hsah__o { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: auto; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); rotate: var(--r); filter: drop-shadow(0 10px 10px rgba(111, 33, 20, .28)); }
.hsah__o:nth-child(1) { --x: 50%; --y: 1%; --s: 12%; --r: -14deg; }
.hsah__o:nth-child(2) { --x: 44%; --y: 61%; --s: 13%; --r: 22deg; }
.hsah__o:nth-child(3) { --x: 41%; --y: 93%; --s: 15%; --r: -30deg; }
.hsah__o:nth-child(4) { --x: 96%; --y: 6%; --s: 12%; --r: 12deg; }
.hsah__o:nth-child(5) { --x: 4%; --y: 94%; --s: 13%; --r: 28deg; }

/* The run: the sketch sweeps in, her notes pop group by group (--n of them), then the front slides in and the ingredients drift. */
.hsah.is-armed .hsah__sheet, .hsah.is-armed .hsah__front, .hsah.is-armed .hsah__red, .hsah.is-armed .hsah__o { opacity: 0; }
.hsah.is-armed .hsah__base { -webkit-mask-image: linear-gradient(135deg, #000 0 47%, transparent 53% 100%); mask-image: linear-gradient(135deg, #000 0 47%, transparent 53% 100%); -webkit-mask-size: 300% 300%; mask-size: 300% 300%; -webkit-mask-position: 75% 75%; mask-position: 75% 75%; }
.hsah.is-play .hsah__sheet { animation: hsah-sheet .8s var(--ease-out) both; }
.hsah.is-play .hsah__base { animation: hsah-sweep 1.5s cubic-bezier(.55, .1, .3, 1) .5s both; }
.hsah.is-play .hsah__red { animation: hsah-note .6s var(--hs-spring) calc(2.0s + var(--i) * .16s) both; }
.hsah.is-play .hsah__front { animation: hsah-front 1.05s var(--hs-spring) calc(1.9s + var(--n) * .16s) both; }
.hsah.is-play .hsah__o { animation: hsah-drop .95s var(--hs-spring) calc(2.8s + var(--n) * .16s + var(--i) * .14s) both, hsah-bob 6.5s ease-in-out calc(3.8s + var(--n) * .16s + var(--i) * .5s) infinite; }
@keyframes hsah-sheet { from { opacity: 0; transform: translateY(22px) rotate(-6deg); } to { opacity: 1; transform: rotate(-2.5deg); } }
@keyframes hsah-sweep { from { -webkit-mask-position: 75% 75%; mask-position: 75% 75%; } to { -webkit-mask-position: 16% 16%; mask-position: 16% 16%; } }
@keyframes hsah-note { from { opacity: 0; transform: scale(.8) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hsah-front { from { opacity: 0; transform: translateX(16%) rotate(9deg); } to { opacity: 1; transform: rotate(2.2deg); } }
@keyframes hsah-drop { from { opacity: 0; translate: 0 -90%; scale: .35; rotate: -150deg; } to { opacity: 1; translate: 0 0; scale: 1; rotate: var(--r); } }
@keyframes hsah-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9%; } }

@media (max-width: 900px) {
  .hsah__in { grid-template-columns: minmax(0, 1fr); }
  .hsah__stage { aspect-ratio: 1.04; }
  .hsah__sheet { width: 64%; top: 4%; }
  .hsah__front { width: 61%; }
  .hsah__o:nth-child(1) { --x: 88%; --y: 7%; --s: 18%; } .hsah__o:nth-child(2) { --x: 73%; --y: 17%; --s: 14%; }
  .hsah__o:nth-child(3) { --x: 27%; --y: 91%; --s: 17%; } .hsah__o:nth-child(4) { --x: 7%; --y: 79%; --s: 14%; } .hsah__o:nth-child(5) { --x: 93%; --y: 22%; --s: 12%; }
}
@media (prefers-reduced-motion: reduce) {
  .hsah *, .hsah *::before { animation: none !important; }
  .hsah__replay { display: none; }
}

/* ================= Signature: Plan to shot ================= */
.hsa { grid-template-columns: minmax(0, 1fr); background: var(--bx-deep); color: var(--bx-cream); font-family: var(--bx-font); }
.hsa .hs-eyebrow::before { background: var(--bx-yellow); }
.hsa__in { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.hsa__head { grid-column: 1 / -1; display: grid; justify-items: start; gap: 14px; }
.hsa__h { margin: 0; font-family: var(--hs-display); font-weight: 400; font-size: clamp(44px, 7vw, 96px); line-height: .94; letter-spacing: .01em; text-transform: uppercase; color: var(--bx-yellow); }
.hsa__lede { margin: 0; max-width: 62ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; color: color-mix(in srgb, var(--bx-cream) 92%, transparent); }

/* the chips, grouped by family */
.hsa__pick { display: grid; gap: 26px; min-width: 0; }
.hsa__fam { min-width: 0; }
.hsa__famt { margin: 0 0 10px; font: 600 12px/1.2 var(--bx-font); letter-spacing: .16em; text-transform: uppercase; color: var(--bx-yellow); }
.hsa__chips { display: flex; flex-direction: column; gap: 8px; }
.hsa__chip { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 16px 8px 12px; border: 1.5px solid color-mix(in srgb, var(--bx-cream) 40%, transparent); border-radius: 999px; background: transparent; color: var(--bx-cream); font: 500 14px/1.25 var(--bx-font); text-align: left; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, transform .3s var(--hs-spring); }
.hsa__chip:hover { border-color: var(--bx-cream); }
.hsa__chip:active { transform: scale(.97); }
.hsa__chip[aria-pressed="true"] { border-color: var(--bx-cream); border-width: 2px; padding: 7.5px 15.5px 7.5px 11.5px; background: color-mix(in srgb, var(--bx-cream) 14%, transparent); font-weight: 600; }
.hsa__chip:focus-visible { outline-color: var(--bx-yellow); }
.hsa__dot { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--bx-deep), 0 0 0 3.5px color-mix(in srgb, var(--bx-cream) 70%, transparent); transition: transform .35s var(--hs-spring); }
.hsa__chip[aria-pressed="true"] .hsa__dot { transform: scale(1.25); }

/* the stage: plan on the left, shot on the right */
.hsa__main { display: grid; gap: 22px; min-width: 0; }
.hsa__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 2vw, 28px); }
.hsa__panel { position: relative; margin: 0; aspect-ratio: 1; }
.hsa__tag { position: absolute; left: 14px; top: -13px; z-index: 4; padding: 5px 12px; border-radius: 999px; background: var(--bx-yellow); color: var(--bx-deep); font: 600 11px/1.3 var(--bx-font); letter-spacing: .14em; text-transform: uppercase; }
.hsa__sheet { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 28px 44px -22px rgba(0, 0, 0, .65); }
.hsa__base { display: block; width: 100%; height: 100%; }
.hsa__reds { position: absolute; inset: 0; }
.hsa__red { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: var(--clip); transform-origin: var(--ox) var(--oy); opacity: 0; transform: scale(.88); transition: opacity .25s ease-out, transform .5s var(--hs-spring); }
.hsa__red.is-on { opacity: 1; transform: none; }

.hsa__plate { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 8px; background: color-mix(in srgb, var(--sku) 30%, var(--bx-cream)); box-shadow: 0 28px 44px -22px rgba(0, 0, 0, .65); transition: background-color .5s ease; }
.hsa__ground { position: absolute; left: 22%; right: 22%; bottom: 7%; height: 5%; border-radius: 50%; background: rgba(60, 20, 10, .3); filter: blur(9px); }
/* "comes into focus": the plan slider writes --p (0 to 1) on the stage */
.hsa__pack, .hsa__trio { position: absolute; filter: blur(calc((1 - var(--p)) * 10px)); opacity: calc(.45 + .55 * var(--p)); }
.hsa__pack { left: 8%; top: 7%; width: 84%; height: 86%; object-fit: contain; transform: scale(calc(.9 + .1 * var(--p))); transform-origin: 50% 80%; }
.hsa__trio { left: 3%; right: 3%; top: 50%; aspect-ratio: 1400 / 748; transform: translateY(-50%) scale(calc(.9 + .1 * var(--p))); }
.hsa__trio img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hsa__tdim { filter: grayscale(.9) brightness(1.1); opacity: .4; }
.hsa__tlit { opacity: 0; transition: opacity .35s ease; }
.hsa__trio[data-sel="0"] .hsa__tlit[data-box="0"], .hsa__trio[data-sel="1"] .hsa__tlit[data-box="1"], .hsa__trio[data-sel="2"] .hsa__tlit[data-box="2"] { opacity: 1; }

.hsa__objs { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hsa__obj { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: auto; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); rotate: var(--r); filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .4)); animation: hsa-tumble .95s var(--hs-spring) calc(var(--i) * .09s) both; }
/* the slots for up to five ingredients: across the seam between plan and shot, and the stage's corners */
.hsa__obj:nth-child(1) { --x: 50%; --y: 93%; --s: 16%; --r: 20deg; }
.hsa__obj:nth-child(2) { --x: 97%; --y: 8%; --s: 13%; --r: 30deg; }
.hsa__obj:nth-child(3) { --x: 98%; --y: 88%; --s: 13%; --r: 10deg; }
.hsa__obj:nth-child(4) { --x: 36%; --y: 99%; --s: 12%; --r: -25deg; }
.hsa__obj:nth-child(5) { --x: 76%; --y: -2%; --s: 11%; --r: -12deg; }
@keyframes hsa-tumble { from { opacity: 0; translate: 0 -120%; scale: .35; rotate: -170deg; } to { opacity: 1; translate: 0 0; scale: 1; rotate: var(--r); } }

.hsa__sel { margin: 0; font-size: 15px; line-height: 1.5; color: var(--bx-cream); }
.hsa__ctl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; }
.hsa__end { font: 600 12px/1 var(--bx-font); letter-spacing: .16em; text-transform: uppercase; color: var(--bx-yellow); }
.hsa__count { grid-column: 1 / -1; justify-self: center; font-size: 14px; line-height: 1.4; color: color-mix(in srgb, var(--bx-cream) 90%, transparent); font-variant-numeric: tabular-nums; }
.hsa__count b { font-weight: 700; color: var(--bx-yellow); }
.hsa__range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; --fill: 100%; }
.hsa__range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--bx-yellow) var(--fill), color-mix(in srgb, var(--bx-cream) 28%, transparent) var(--fill)); }
.hsa__range::-moz-range-track { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--bx-cream) 28%, transparent); }
.hsa__range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--bx-yellow); }
.hsa__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; border: 4px solid var(--bx-yellow); background: var(--bx-cream); box-shadow: 0 4px 12px rgba(0, 0, 0, .45); transition: transform .25s var(--hs-spring); }
.hsa__range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--bx-yellow); background: var(--bx-cream); box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
.hsa__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.hsa__range:focus-visible { outline: none; }
.hsa__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--bx-maroon), 0 0 0 7px var(--bx-yellow); }
.hsa__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--bx-maroon), 0 0 0 7px var(--bx-yellow); }
.hsa__ing { margin: 0; display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--bx-cream) 22%, transparent); }
.hsa__ingt { font: 600 12px/1.2 var(--bx-font); letter-spacing: .16em; text-transform: uppercase; color: var(--bx-yellow); }
.hsa__ingl { font-size: 16px; line-height: 1.6; font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--bx-cream); }

@media (max-width: 900px) {
  .hsa__in { grid-template-columns: minmax(0, 1fr); }
  .hsa__fam { display: grid; gap: 0; }
  .hsa__chips { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  /* one scrolling row of chips per family keeps the ten choices short, so the chips and the stage fit on one phone screen */
  .hsa__pick { gap: 14px; }
  .hsa__chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--pad) * -1); padding: 6px var(--pad) 10px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--bx-cream) 35%, transparent) transparent; }
  .hsa__chip { flex: none; scroll-snap-align: start; }
  .hsa__stage { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hsa__panel--shot { aspect-ratio: 1.5; }
  .hsa__pack { left: 10%; width: 80%; }
  .hsa__obj:nth-child(1) { --x: 87%; --y: 4%; --s: 20%; } .hsa__obj:nth-child(2) { --x: 13%; --y: 53%; --s: 20%; } .hsa__obj:nth-child(3) { --x: 88%; --y: 53%; --s: 18%; }
  .hsa__obj:nth-child(4) { --x: 9%; --y: 96%; --s: 17%; } .hsa__obj:nth-child(5) { --x: 89%; --y: 94%; --s: 18%; }
}
@media (prefers-reduced-motion: reduce) {
  .hsa__obj { animation: none; }
  .hsa__red, .hsa__tlit, .hsa__plate, .hsa__chip, .hsa__dot { transition: none; }
}