/* ============================================================
   home.css — "Neon Tube", the front page only.

   Loads after neon.css, which owns the tokens, the tube treatment
   and everything shared with the rest of the site. This file is the
   front page's own sections: hero, iced teas, BOLT, kava, magnolia,
   locator, club.
   ============================================================ */

/* ---------- hero ------------------------------------------------ */
.lh-neon .hero{background:radial-gradient(90% 70% at 50% 26%,#1E0A34 0%,var(--n-bg) 70%);}
/* the aurora becomes the glow the sign throws on the wall */
.lh-neon .aur{filter:blur(90px);opacity:.42;}
/* the dot matrix becomes the wall itself */
.lh-neon .dots{opacity:1;background-image:var(--n-wall);background-size:auto;-webkit-mask:none;mask:none;}
/* the rings become lit neon hoops. --g1/--g2 are set by app.js when a chip
   is picked, so the tubing still changes colour with the can. */
.lh-neon .rings{right:14%;width:660px;}
.lh-neon .rings i{border-width:2px;
  border-color:color-mix(in srgb,var(--g1) 62%,transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--g1) 48%,transparent),
             inset 0 0 16px color-mix(in srgb,var(--g1) 26%,transparent);
  transition:border-color .7s ease,box-shadow .7s ease;}
.lh-neon .rings i:nth-child(2),.lh-neon .rings i:nth-child(4){
  border-color:color-mix(in srgb,var(--g2) 46%,transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--g2) 36%,transparent),
             inset 0 0 16px color-mix(in srgb,var(--g2) 20%,transparent);}
.lh-neon .rings i:nth-child(3){border-color:rgba(123,61,245,.34);box-shadow:0 0 16px rgba(123,61,245,.3);}
.lh-neon .hero .palm.p1{color:#FFB8DA;opacity:.075;}
.lh-neon .hero .palm.p2{color:#8FE9E9;opacity:.06;}

.lh-neon .kicker{font-family:var(--n-head);color:var(--n-teal);letter-spacing:.26em;font-size:12.5px;
  border:0;background:none;padding:0;backdrop-filter:none;
  animation:n-buzz 4.4s ease-in-out infinite;}
/* The sign has to sit on two lines and neither may wrap: "Open late"
   at the old 124px measured 698px against a 558px column. The text
   column takes a little more of the grid and the type comes down. */
.lh-neon .hero-in{grid-template-columns:1.12fr .88fr;}
.lh-neon .hero h1{
  font-size:clamp(44px,7.4vw,100px);margin-top:14px;text-shadow:none;
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:3px var(--n-pink);
  filter:drop-shadow(0 0 6px var(--n-pink)) drop-shadow(0 0 22px rgba(255,77,157,.85))
         drop-shadow(0 0 52px rgba(255,77,157,.5));
  animation:n-flick 6s ease-in-out infinite;}
.lh-neon .hero h1 .l2{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:3px var(--n-teal);
  filter:drop-shadow(0 0 6px var(--n-teal)) drop-shadow(0 0 22px rgba(62,214,214,.85));}
.lh-neon .lede{color:var(--n-mist);}

/* the can stands in a lit arch instead of a blurred disc */
.lh-neon .stage::after{
  content:"";width:min(430px,92%);height:min(430px,92%);border-radius:999px 999px 0 0;
  background:none;filter:none;transform:translateY(9%);
  border:3px solid color-mix(in srgb,var(--g1) 92%,transparent);border-bottom:0;
  box-shadow:0 0 10px color-mix(in srgb,var(--g1) 90%,transparent),
             0 0 34px color-mix(in srgb,var(--g1) 62%,transparent),
             inset 0 0 26px color-mix(in srgb,var(--g1) 40%,transparent);
  transition:border-color .7s ease,box-shadow .7s ease;
  animation:n-buzz 4.4s ease-in-out infinite;}
.lh-neon #heroCan{filter:drop-shadow(0 0 40px color-mix(in srgb,var(--g1) 45%,transparent))
  drop-shadow(0 26px 34px rgba(0,0,0,.72));}
.lh-neon .fruit{filter:drop-shadow(0 0 14px rgba(255,211,77,.45));}
.lh-neon .picker .pl{font-family:var(--n-head);color:var(--n-teal);letter-spacing:.22em;}
.lh-neon .chip{border-color:rgba(255,255,255,.3);}
.lh-neon .chip[aria-pressed="true"]{box-shadow:0 0 0 3px rgba(255,255,255,.16),0 0 28px currentColor;}

/* ---------- fact strip ------------------------------------------ */
.lh-neon .strip{background:var(--n-bg2);border-block:1px solid rgba(255,77,157,.18);}
.lh-neon .strip .v{color:var(--n-cream);}
.lh-neon .strip .v b{background:linear-gradient(95deg,var(--n-pink),var(--n-teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.lh-neon .strip .s{color:var(--n-mist2);}

/* ---------- BLOCK A — the iced teas, lit from inside ------------- */
/* The intro and the three cans are one section, so the intro's
   background has to hand off to the panels without a seam: this
   gradient ends on #1E0C3A and .terp starts on it. */
.lh-neon .blockA{background:linear-gradient(180deg,var(--n-bg) 0%,#170B2E 52%,#1E0C3A 100%);color:var(--n-mist);}
/* daylight props off: the room is dark now. The surf band went with
   them — a purple stripe across the middle was the thing making the
   intro read as its own separate section. */
.lh-neon .sun,.lh-neon .rays,.lh-neon .caustic,.lh-neon .glint,
.lh-neon .clouds,.lh-neon .waves{display:none;}
/* the floating fruit and the fizz are what Bryan liked, so they stay — lit */
.lh-neon .driftfruit svg{opacity:.5;filter:drop-shadow(0 0 12px rgba(255,211,77,.55));}
.lh-neon .fizz i{background:rgba(255,211,77,.22);border-color:rgba(255,211,77,.7);
  box-shadow:0 0 10px rgba(255,211,77,.45);}
.lh-neon .blockA .palm.pa{color:#FF4D9D;opacity:.1;}
.lh-neon .blockA .palm.pb{color:#3ED6D6;opacity:.09;}
.lh-neon .blockA::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--n-wall);}
/* centred, and the sign comes down: at 84px it was carrying a third
   of the row on its own with dead space to the right of it */
.lh-neon .blockA .wrap section{text-align:center;padding-block:76px 44px;}
.lh-neon .blockA .sub{margin-inline:auto;}
.lh-neon .blockA .eyebrow{font-family:var(--n-head);color:var(--n-teal);letter-spacing:.26em;}
.lh-neon .blockA h2{color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;
  -webkit-text-stroke:3px var(--n-pink);
  filter:drop-shadow(0 0 6px var(--n-pink)) drop-shadow(0 0 22px rgba(255,77,157,.8));
  animation:n-flick 6s ease-in-out infinite;font-size:clamp(34px,4.9vw,62px);}
.lh-neon .blockA h2 .l2{display:block;-webkit-text-stroke-color:var(--n-teal);
  filter:drop-shadow(0 0 6px var(--n-teal)) drop-shadow(0 0 22px rgba(62,214,214,.8));}
.lh-neon .blockA .sub{color:var(--n-mist);}
.lh-neon .adv{margin-top:30px;}
.lh-neon .adv .q{font-family:var(--n-head);color:var(--n-cream);}
.lh-neon .advrow{margin-inline:auto;}
.lh-neon .advbtn{justify-content:center;text-align:left;}
.lh-neon .advbtn{background:rgba(26,10,46,.72);border:1.5px solid rgba(255,77,157,.32);color:var(--n-mist);
  box-shadow:inset 0 0 22px rgba(255,77,157,.1);}
.lh-neon .advbtn .n{font-family:var(--n-head);color:var(--n-yellow);}
.lh-neon .advbtn:hover{background:rgba(43,17,96,.8);border-color:var(--n-pink);
  box-shadow:0 0 26px rgba(255,77,157,.34);}
.lh-neon .advbtn[aria-pressed="true"]{background:rgba(43,17,96,.9);border-color:var(--n-pink);color:var(--n-cream);
  box-shadow:0 0 0 2px rgba(255,77,157,.35),0 0 34px rgba(255,77,157,.45);}
.lh-neon .advbtn:focus-visible{outline-color:var(--n-pink);}

/* ---------- the three flavour panels ---------------------------- */
.lh-neon .terp{background:linear-gradient(180deg,#1E0C3A 0%,#12072A 46%,#0C0520 100%);padding-top:40px;}
.lh-neon .terp+.terp{box-shadow:inset 1px 0 0 rgba(255,255,255,.06);}
/* the disc becomes a lit halo instead of a flat colour field */
.lh-neon .terp .disc{
  background:radial-gradient(circle at 50% 46%,
    color-mix(in srgb,var(--acc) 62%,transparent) 0%,
    color-mix(in srgb,var(--acc) 26%,transparent) 46%,
    transparent 70%);
  filter:blur(2px);}
.lh-neon .terp .can img{filter:drop-shadow(0 0 34px color-mix(in srgb,var(--acc) 55%,transparent))
  drop-shadow(0 24px 30px rgba(0,0,0,.7));}
.lh-neon .terp h3{color:var(--acc);text-shadow:0 0 22px color-mix(in srgb,var(--acc) 65%,transparent);}
.lh-neon .terp .k{font-family:var(--n-head);color:var(--n-teal);}
.lh-neon .terp .tag{color:var(--n-mist);}
/* the bullets became a photo, and the photo is a print: a slightly
   tilted polaroid with a blank one behind it. Hover straightens the
   top print and slides the back one further out. */
.lh-neon .terp .life{position:relative;margin:26px auto 0;width:min(100%,258px);}
.lh-neon .terp .life::before{content:"";position:absolute;inset:0;border-radius:4px;
  background:#F1E9D8;transform:rotate(6deg) translate(9px,7px);
  box-shadow:0 16px 30px rgba(0,0,0,.5);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);}
.lh-neon .terp .pola{position:relative;display:block;background:#FFF6E4;
  padding:11px 11px 34px;border-radius:4px;transform:rotate(-3.5deg);transform-origin:50% 92%;
  box-shadow:0 20px 38px rgba(0,0,0,.6),0 0 26px color-mix(in srgb,var(--acc) 24%,transparent);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease;}
.lh-neon .terp .pola img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;}
/* the three prints do not land at the same angle */
.lh-neon .terp:nth-child(2) .pola{transform:rotate(2.6deg);}
.lh-neon .terp:nth-child(2) .life::before{transform:rotate(-5deg) translate(-9px,7px);}
.lh-neon .terp:nth-child(3) .pola{transform:rotate(-2deg);}
.lh-neon .terp:hover .pola,.lh-neon .terp.sel .pola{transform:rotate(0deg) translateY(-8px);
  box-shadow:0 26px 44px rgba(0,0,0,.65),0 0 36px color-mix(in srgb,var(--acc) 42%,transparent);}
.lh-neon .terp:hover .life::before,.lh-neon .terp.sel .life::before{
  transform:rotate(10deg) translate(19px,9px);}
.lh-neon .terp:nth-child(2):hover .life::before,.lh-neon .terp:nth-child(2).sel .life::before{
  transform:rotate(-9deg) translate(-19px,9px);}
@media (prefers-reduced-motion:reduce){
  .lh-neon .terp .pola,.lh-neon .terp .life::before{transition:none;}
}
.lh-neon .terp .btn{background:var(--acc);color:#140420;
  box-shadow:0 0 22px color-mix(in srgb,var(--acc) 55%,transparent);}
.lh-neon .terp .btn:hover{box-shadow:0 0 38px color-mix(in srgb,var(--acc) 80%,transparent);}
.lh-neon .terps::after{background:linear-gradient(180deg,transparent,rgba(5,4,10,.5) 56%,#05040A);}

/* ---------- BLOCK B — BOLT -------------------------------------- */
/* The intro was left-aligned in a 1180 wrap, so most of the row was
   empty, and 86px of section padding under it pushed the split away
   as if it were a different section. Centred, tightened, and the
   background carries down into the split instead of stopping. */
.lh-neon .blockB .wrap section{text-align:center;padding-block:72px 0;}
.lh-neon .blockB .sub{margin-inline:auto;}
.lh-neon .blockB .charge{margin:26px auto 0;}
.lh-neon .blockB .charge .lbl{justify-content:center;gap:26px;}
.lh-neon .split{margin-top:26px;}
/* the diagonal halves used to start on a hard horizontal line; this
   fades the section's own dark down into them */
.lh-neon .split::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;z-index:6;
  pointer-events:none;background:linear-gradient(180deg,#05040A 0%,rgba(5,4,10,0) 100%);}
.lh-neon .blockB .eyebrow{font-family:var(--n-head);letter-spacing:.26em;color:var(--n-pink);}
.lh-neon .blockB h2{color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;
  -webkit-text-stroke:3px var(--n-pink);font-size:clamp(38px,5.6vw,76px);
  filter:drop-shadow(0 0 6px var(--n-pink)) drop-shadow(0 0 24px rgba(255,77,157,.85))
         drop-shadow(0 0 60px rgba(255,77,157,.45));
  animation:n-flick 6s ease-in-out infinite;}
.lh-neon .blockB h2 .l2{display:block;background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-stroke-color:var(--n-teal);
  filter:drop-shadow(0 0 6px var(--n-teal)) drop-shadow(0 0 24px rgba(62,214,214,.85));}
.lh-neon .halfin h3{font-family:var(--n-head);}
.lh-neon .half.L .halfin .shop{background:var(--n-yellow);color:#2B0A1A;box-shadow:0 0 24px rgba(255,211,77,.55);}
.lh-neon .half.R .halfin .shop{background:var(--n-teal2);color:#07282C;box-shadow:0 0 24px rgba(62,214,214,.55);}

/* ---- lightning ------------------------------------------------- */
/* A real channel is a filled, tapering shape with forks, a white-hot
   core and a coloured halo — not a constant-width zigzag. The paths
   come from bolt_gen.py; everything below is the light. */
.lh-neon .strike{opacity:0;}
.lh-neon .strike svg{height:124%;top:-12%;overflow:visible;}
.lh-neon .strike path{fill:currentColor;stroke:none;}
.lh-neon .strike .blt{transform-origin:50% 0;}
.lh-neon .half.L .strike{color:#FFF0EC;
  filter:drop-shadow(0 0 4px #FFD2C2) drop-shadow(0 0 14px #FF5A3B)
         drop-shadow(0 0 44px rgba(255,59,59,.9)) drop-shadow(0 0 110px rgba(255,59,59,.6));}
.lh-neon .half.R .strike{color:#EDFCFF;
  filter:drop-shadow(0 0 4px #C6F2FF) drop-shadow(0 0 14px #35D6FF)
         drop-shadow(0 0 44px rgba(53,214,255,.9)) drop-shadow(0 0 110px rgba(53,214,255,.6));}
.lh-neon .strike .b-fork{opacity:.85;}
/* it strikes on its own every few seconds, and constantly while hovered */
.lh-neon .half .strike{animation:n-strike 8.5s linear infinite;}
.lh-neon .half.R .strike{animation-delay:-4.2s;}
.lh-neon .half:hover .strike{animation:n-strike 1.9s linear infinite;}
.lh-neon .half .flash{animation:n-flash 8.5s linear infinite;}
.lh-neon .half.R .flash{animation-delay:-4.2s;}
.lh-neon .half:hover .flash{animation:n-flash 1.9s linear infinite;}
.lh-neon .half .strike .blt{animation:n-jit 8.5s linear infinite;}
.lh-neon .half.R .strike .blt{animation-delay:-4.2s;}
.lh-neon .half:hover .strike .blt{animation:n-jit 1.9s linear infinite;}
/* leader, main stroke, two return strokes, afterglow */
@keyframes n-strike{
  0%{opacity:0}
  0.6%{opacity:.45}
  1.2%{opacity:1}
  2.4%{opacity:.12}
  3.2%{opacity:1}
  4.6%{opacity:.3}
  5.4%{opacity:.9}
  7.5%{opacity:0}
  10%{opacity:.42}
  11%{opacity:0}
  100%{opacity:0}}
@keyframes n-flash{
  0%{opacity:0}
  1.2%{opacity:.5}
  2.4%{opacity:.08}
  3.2%{opacity:.62}
  6%{opacity:.14}
  9%{opacity:0}
  100%{opacity:0}}
/* the channel never lands in exactly the same place twice */
@keyframes n-jit{
  0%,2.3%{transform:none}
  2.4%,4.5%{transform:translateX(-7px) scaleX(-1) translateX(-7px)}
  4.6%,100%{transform:translateX(5px) scaleY(1.02)}}
.lh-neon .half.L .flash{background:radial-gradient(58% 76% at 26% 34%,rgba(255,110,80,.6),transparent 70%);}
.lh-neon .half.R .flash{background:radial-gradient(58% 76% at 74% 34%,rgba(53,214,255,.6),transparent 70%);}
.lh-neon .charge .track i{background:linear-gradient(90deg,var(--n-teal),var(--n-purple),var(--n-pink));
  box-shadow:0 0 18px rgba(255,77,157,.7);}

/* ---------- KAVA ------------------------------------------------ */
.lh-neon .kava{background:linear-gradient(180deg,#0B0518,#160A2C 60%,#0B0518);}
.lh-neon .kava::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--n-wall);}
.lh-neon .kava .palm.pk{color:var(--n-pink);opacity:.12;}
.lh-neon .kava .palm.pk2{color:var(--n-teal);opacity:.1;}
.lh-neon .kava .htitle{color:var(--n-cream);}
.lh-neon .kava .htitle em{color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:3px var(--n-pink);
  filter:drop-shadow(0 0 6px var(--n-pink)) drop-shadow(0 0 22px rgba(255,77,157,.8));}
.lh-neon .kava .swoosh path{stroke:var(--n-pink);filter:drop-shadow(0 0 8px rgba(255,77,157,.8));}
.lh-neon .kitem :is(h3,h4){font-family:var(--n-head);color:var(--n-teal);letter-spacing:.04em;}
.lh-neon .kitem p{color:var(--n-mist2);}
.lh-neon .kicon{border-color:var(--n-teal);
  box-shadow:0 0 16px rgba(62,214,214,.4),inset 0 0 16px rgba(62,214,214,.18);}
.lh-neon .kicon svg{stroke:var(--n-teal);}
.lh-neon .kitem:hover .kicon{background:rgba(62,214,214,.12);box-shadow:0 0 30px rgba(62,214,214,.7);}
.lh-neon .kitem .txt::after{background:var(--n-pink);box-shadow:0 0 8px rgba(255,77,157,.8);}
.lh-neon .kitem .txt::before{background:var(--n-pink);box-shadow:0 0 8px rgba(255,77,157,.9);}
.lh-neon .dial{border-color:rgba(255,77,157,.45);box-shadow:0 0 22px rgba(255,77,157,.25);}
.lh-neon .dial::before{background:repeating-conic-gradient(from 0deg,rgba(255,77,157,.75) 0deg 0.5deg,transparent 0.5deg 4deg);}
.lh-neon .kcan img{filter:drop-shadow(0 0 40px rgba(255,77,157,.45)) drop-shadow(0 26px 32px rgba(0,0,0,.7));}
.lh-neon .kavafoot{border-top-color:rgba(255,77,157,.25);}

/* ---------- MAGNOLIA -------------------------------------------- */
/* The section used to be a hard-edged teal panel sitting inside a
   darker one: a seam across the top where kava ended, and a second
   vertical seam down the middle of the grid. Now one wash runs the
   whole width, opening from the kava dark above and closing into the
   locator dark below, with the teal as a soft light on the left
   rather than a block with edges. */
.lh-neon .mag{background:
  radial-gradient(80% 70% at 22% 52%,rgba(24,86,110,.55),transparent 68%),
  linear-gradient(180deg,#0B0518 0%,#0C1E2A 26%,#0D2433 52%,#0A1622 78%,#0B0518 100%);}
.lh-neon .mag .palm.pm{color:var(--n-teal);opacity:.1;}
.lh-neon .magleft{background:linear-gradient(100deg,rgba(18,62,80,.62) 0%,rgba(12,34,46,.34) 58%,rgba(12,34,46,0) 100%);}
.lh-neon .maggrid{align-items:center;}
/* the magnolia shot is a print too, leaning the other way from the
   three in the tea row so the page does not repeat itself. Same
   wrapper/print pair as .terp .life, sized for this column. */
.lh-neon .magphoto{align-self:center;min-height:0;border-radius:0;overflow:visible;
  border:0;box-shadow:none;background:none;display:flex;justify-content:center;
  padding-inline:18px;}
.lh-neon .magphoto .life{position:relative;width:min(100%,320px);}
.lh-neon .magphoto .life::before{content:"";position:absolute;inset:0;border-radius:4px;
  background:#F1E9D8;transform:rotate(-6deg) translate(-11px,8px);
  box-shadow:0 16px 30px rgba(0,0,0,.5);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);}
.lh-neon .magphoto .pola{position:relative;display:block;background:#FFF6E4;
  padding:12px 12px 38px;border-radius:4px;transform:rotate(3.2deg);transform-origin:50% 92%;
  box-shadow:0 20px 38px rgba(0,0,0,.6),0 0 28px rgba(62,214,214,.26);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease;}
.lh-neon .magphoto .pola img{display:block;width:100%;height:auto;min-height:0;
  aspect-ratio:1/1;object-fit:cover;object-position:50% 50%;}
.lh-neon .magphoto:hover .pola{transform:rotate(0deg) translateY(-8px);
  box-shadow:0 26px 44px rgba(0,0,0,.65),0 0 40px rgba(62,214,214,.45);}
.lh-neon .magphoto:hover .life::before{transform:rotate(-10deg) translate(-21px,10px);}
@media (prefers-reduced-motion:reduce){
  .lh-neon .magphoto .pola,.lh-neon .magphoto .life::before{transition:none;}
}
@media(max-width:600px){
  .lh-neon .magphoto .life{width:min(100%,280px);}
}
.lh-neon .ingball{box-shadow:0 0 20px rgba(62,214,214,.28);}
.lh-neon .ing :is(h3,h4){font-family:var(--n-head);color:var(--n-cream);}
.lh-neon .ing :is(h3,h4) b{color:var(--n-teal2);}
.lh-neon .ing p{color:var(--n-mist2);}
.lh-neon .magright .fk{color:var(--n-pink);}
.lh-neon .magright h2{color:var(--n-cream);font-size:clamp(40px,6.2vw,74px);}
.lh-neon .magright h2 em{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:3px var(--n-teal);
  filter:drop-shadow(0 0 6px var(--n-teal)) drop-shadow(0 0 22px rgba(62,214,214,.8));}
.lh-neon .magrule{background:linear-gradient(90deg,var(--n-teal),var(--n-pink));
  box-shadow:0 0 12px rgba(62,214,214,.5);}
.lh-neon .magrule::after{background:var(--n-teal);box-shadow:0 0 12px var(--n-teal);}
.lh-neon .magright .hook{color:var(--n-cream);}
.lh-neon .magright .hook em{color:var(--n-teal2);}
.lh-neon .magright p.body{color:var(--n-mist);}
.lh-neon .magicons div{border-left-color:rgba(62,214,214,.22);}
.lh-neon .magicons svg{stroke:var(--n-teal);filter:drop-shadow(0 0 8px rgba(62,214,214,.55));}
.lh-neon .magicons span{color:var(--n-mist2);}
.lh-neon .magright .btn{background:var(--n-teal2);color:#07282C;box-shadow:0 0 24px rgba(62,214,214,.5);}
.lh-neon .magright .btn .cartglyph{background:rgba(7,40,44,.16);}

/* ---------- LOCATOR --------------------------------------------- */
/* the first stop fades the purple in out of magnolia's dark, so the
   two sections meet on a gradient rather than a line */
.lh-neon .locator{background:
  linear-gradient(180deg,#0B0518 0%,rgba(11,5,24,.55) 12%,rgba(11,5,24,0) 30%),
  radial-gradient(110% 100% at 26% 0%,#2A0B45 0%,#140627 52%,#07030F 100%);}
.lh-neon .locator::before{background-image:var(--n-wall);opacity:1;-webkit-mask:none;mask:none;background-size:auto;}
.lh-neon .locator .palm.pl{color:#FFB8DA;opacity:.08;}
.lh-neon .locator .eyebrow{font-family:var(--n-head);letter-spacing:.26em;color:var(--n-teal);}
.lh-neon .locator h2{color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;
  -webkit-text-stroke:3px var(--n-pink);font-size:clamp(38px,6vw,76px);
  filter:drop-shadow(0 0 6px var(--n-pink)) drop-shadow(0 0 22px rgba(255,77,157,.85));
  animation:n-flick 6s ease-in-out infinite;}
.lh-neon .locator .sub{color:var(--n-mist);}
/* the ZIP box is gone — the locator page does the searching */
.lh-neon .locfind{display:inline-flex;margin-top:26px;}
.lh-neon .locwords li{border-color:rgba(62,214,214,.4);color:var(--n-teal2);
  box-shadow:0 0 14px rgba(62,214,214,.2),inset 0 0 14px rgba(62,214,214,.08);
  transition:box-shadow .25s ease,color .25s ease,border-color .25s ease;}
.lh-neon .locwords li:nth-child(2n){border-color:rgba(255,77,157,.4);color:#FFB3D6;
  box-shadow:0 0 14px rgba(255,77,157,.2),inset 0 0 14px rgba(255,77,157,.08);}
.lh-neon .locwords li:hover{color:#fff;box-shadow:0 0 26px rgba(62,214,214,.55);}
.lh-neon .locwords li:nth-child(2n):hover{box-shadow:0 0 26px rgba(255,77,157,.6);}

/* ---------- line spacing ---------------------------------------- */
/* The base sheet sets line-height:.9 on every heading, which was fine
   for solid type but not for lit tubing: at .9 the glow off one line
   lands on the line below it. Everything multi-line gets air. */
.lh-neon h1,.lh-neon h2{line-height:1.12;}
.lh-neon .eyebrow{display:inline-block;margin-bottom:16px;}
.lh-neon h3,.lh-neon h4{line-height:1.14;}
.lh-neon .hero h1 .l2{font-size:.62em;margin-top:.12em;}
.lh-neon .kicker{margin-bottom:2px;}
.lh-neon .lede{line-height:1.7;}
.lh-neon .sub{line-height:1.72;margin-top:24px;}
.lh-neon .strip .v{line-height:1.3;}
.lh-neon .strip .s{line-height:1.5;margin-top:5px;}
.lh-neon .adv .q{line-height:1.2;}
.lh-neon .advbtn{line-height:1.5;align-items:center;}
.lh-neon .terp h3{line-height:1.05;}
.lh-neon .terp .k{line-height:1.3;margin-top:12px;}
.lh-neon .terp .tag{line-height:1.6;margin-top:26px;}
.lh-neon .halfin h3{line-height:1.02;}
.lh-neon .halfin .sp{margin-top:18px;gap:8px;}
.lh-neon .kava .htitle{line-height:1.1;}
.lh-neon .kitem :is(h3,h4){line-height:1.22;}
.lh-neon .kitem p{line-height:1.65;margin-top:8px;}
.lh-neon .ing :is(h3,h4){line-height:1.2;}
.lh-neon .ing :is(h3,h4) b{margin-top:4px;}
.lh-neon .ing p{line-height:1.6;margin-top:7px;}
.lh-neon .magright h2{line-height:1.1;}
.lh-neon .magright .hook{line-height:1.45;}
.lh-neon .magright p.body{line-height:1.72;}
.lh-neon .magicons span{line-height:1.55;}
.lh-neon .locwords li{line-height:1.25;}
.lh-neon .locwords{gap:14px 14px;}

/* ---------- motion --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .lh-neon .tube,.lh-neon .buzz,.lh-neon .kicker,.lh-neon .hero h1,
  .lh-neon .blockA h2,.lh-neon .blockB h2,.lh-neon .locator h2,
  .lh-neon .stage::after{animation:none!important;}
  .lh-neon .half .strike,.lh-neon .half .flash,.lh-neon .half .strike .blt,
  .lh-neon .half:hover .strike,.lh-neon .half:hover .flash{animation:none!important;}
  .lh-neon .half .strike{opacity:.75;}
}

/* ---------- narrow screens -------------------------------------- */
@media(max-width:900px){
  .lh-neon .hero h1,.lh-neon .blockA h2,.lh-neon .blockB h2,
  .lh-neon .locator h2,.lh-neon .kava .htitle em,
  .lh-neon .magright h2 em{-webkit-text-stroke-width:2px;}
  .lh-neon .stage::after{width:min(330px,88%);height:min(330px,88%);}
  /* grid children default to min-width:auto, which let the stage and the
     lede push past the viewport once the hero stacked. */
  .lh-neon .hero-in{grid-template-columns:1fr;}
  .lh-neon .hero-in>*{min-width:0;}
  .lh-neon .stage{max-width:100%;}
  .lh-neon .lede{max-width:100%;}
}
@media(max-width:600px){
  .lh-neon #heroCan{height:min(46vh,340px);}
  .lh-neon .stage{min-height:380px;}
}

/* --------------------------------------------------- locator polaroids -----
 * Two prints pinned above the word list: the sign you are looking for, and a
 * can already out somewhere. They overlap slightly and lean opposite ways.
 */
.lh-neon .loc-right{display:flex;flex-direction:column;gap:30px;}
.lh-neon .locpolas{position:relative;display:flex;align-items:flex-start;
  justify-content:center;gap:0;padding-block:8px 18px;}
.lh-neon .locpola{position:relative;display:block;flex:none;}
.lh-neon .locpola .pola{position:relative;display:block;background:#FFF6E4;
  padding:10px 10px 30px;border-radius:4px;transform-origin:50% 92%;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease;}
.lh-neon .locpola .pola img{display:block;width:100%;height:auto;
  aspect-ratio:4/5;object-fit:cover;border-radius:2px;}
.lh-neon .locpola--a{width:clamp(150px,20vw,224px);z-index:2;}
.lh-neon .locpola--a .pola{transform:rotate(-4deg);
  box-shadow:0 22px 40px rgba(0,0,0,.6),0 0 30px rgba(255,77,157,.3);}
.lh-neon .locpola--b{width:clamp(122px,16vw,182px);margin-left:-34px;margin-top:52px;z-index:1;}
.lh-neon .locpola--b .pola{transform:rotate(5.2deg);
  box-shadow:0 20px 36px rgba(0,0,0,.6),0 0 28px rgba(62,214,214,.32);}
.lh-neon .locpola:hover{z-index:3;}
.lh-neon .locpola:hover .pola{transform:rotate(0deg) translateY(-8px);
  box-shadow:0 30px 54px rgba(0,0,0,.68),0 0 46px rgba(255,77,157,.5);}
@media(max-width:880px){
  /* left-aligned under the copy, with a little room for the tilt to lean into */
  .lh-neon .locpolas{justify-content:flex-start;padding-left:10px;}
}
@media(max-width:420px){
  .lh-neon .locpola--b{margin-left:-24px;margin-top:40px;}
}
@media (prefers-reduced-motion:reduce){.lh-neon .locpola .pola{transition:none;}}

/* --------------------------------------------- BOLT panel text rhythm ------
 * The can render is back, so the print-driven sizing is gone with it. What
 * stays is the alignment fix: the pills used to be right-aligned on the R
 * panel while its badge, heading and button were left-aligned, and that
 * stagger was most of what read as messy.
 */
.lh-neon .halfin > span{min-width:0;}
/* The diagonal seam gives each panel only about 41% of the viewport before
   its content crosses into the other half, and a full-height can eats most of
   that. Left alone it pushes the pills to one per line, breaks the buttons
   across two and clips the INDICA badge on the seam. */
@media(min-width:1321px){
  .lh-neon .halfin{max-width:min(41%,590px);gap:clamp(30px,3vw,44px);}
  .lh-neon .halfin > img{height:min(40vh,300px);}
}
/* Under 1200 there is not enough width for a can and a column of copy side by
   side, so the can sits above the copy and the text gets the full width. */
@media(max-width:1320px) and (min-width:881px){
  .lh-neon .halfin,.lh-neon .half.R .halfin{
    flex-direction:column;align-items:flex-start;
    max-width:min(40%,420px);gap:20px;}
  .lh-neon .halfin > img{height:min(30vh,230px);margin-left:0;}
  .lh-neon .half .halfin .sp{max-width:none;}
}
.lh-neon .half .halfin .sp{justify-content:flex-start;max-width:340px;margin-top:20px;gap:9px;}
.lh-neon .half.R .halfin .sp{justify-content:flex-start;}
.lh-neon .halfin .badge{white-space:nowrap;}
.lh-neon .halfin h3{margin-top:12px;}
.lh-neon .halfin .shop{margin-top:26px;}
@media(max-width:880px){
  .lh-neon .half .halfin .sp{justify-content:center;max-width:none;}
}

/* ===========================================================================
 * MOBILE — front page. Everything below is inside a max-width query so the
 * desktop layout is untouched. Phone had three problems: sections carrying
 * their desktop padding on both sides of every seam, blocks left-aligned in
 * a single column where centred reads better, and the hero type too small to
 * carry the neon treatment.
 * ======================================================================== */
@media(max-width:880px){

  /* ---- hero: centred, and the sign big enough to read ------------------ */
  .lh-neon .hero-in{text-align:center;padding-block:10px 34px;}
  .lh-neon .hero h1{font-size:clamp(58px,15.5vw,104px);-webkit-text-stroke-width:2.6px;
    margin-top:10px;line-height:1.04;}
  .lh-neon .hero .eyebrow{display:block;}
  .lh-neon .hero .lede{margin-inline:auto;max-width:36ch;}
  .lh-neon .hero .cta{justify-content:center;}
  /* label on its own line, then every dot on one row under it */
  .lh-neon .picker{justify-content:center;gap:clamp(5px,1.7vw,9px);margin-top:24px;}
  .lh-neon .picker .pl{flex:0 0 100%;text-align:center;margin:0 0 12px;}
  .lh-neon .chip{width:clamp(28px,7.4vw,38px);height:clamp(28px,7.4vw,38px);border-width:2px;}
  .lh-neon .pausebtn{width:clamp(24px,6.4vw,32px);height:clamp(24px,6.4vw,32px);margin-left:0;}
  .lh-neon .pausebtn svg{width:13px;height:13px;}

  /* ---- seams: halve the stacked padding on both sides of each join ----- */
  .lh-neon .blockA .wrap section{padding-block:44px 28px;}
  .lh-neon .terp{padding-bottom:34px;}
  .lh-neon .terps::after{height:70px;}
  .lh-neon .blockB .wrap section{padding-block:40px 0;}
  .lh-neon .split{margin-top:18px;}
  .lh-neon .half{padding-block:28px !important;}   /* the 880 rule uses !important */
  .lh-neon .halfin > img{height:min(38vh,300px);}
  .lh-neon .div-bot{height:42px;}
  .lh-neon .kava section{padding-block:40px;}
  .lh-neon .mag section,.lh-neon .magright{padding-block:36px;}
  .lh-neon .loc-in{padding-block:44px;}

  /* ---- magnolia: the first bubble was sitting on the print's shadow ---- */
  .lh-neon .magleft{gap:34px;}
  .lh-neon .ingr{margin-top:10px;gap:26px;}
  /* centred on its own, as asked — the copy above it keeps its alignment */
  .lh-neon .magright .btn{align-self:center;}

  /* ---- find us: one centred column ------------------------------------ */
  .lh-neon .locator .loc-in{text-align:center;}
  .lh-neon .locator .lede,.lh-neon .locator .sub{margin-inline:auto;}
  .lh-neon .locfind{margin-inline:auto;}
  .lh-neon .loc-right{align-items:center;}
  .lh-neon .locpolas{justify-content:center;padding-left:0;}
  .lh-neon .locwords{justify-content:center;}
}

/* The facts strip at phone width.
   auto-fit/minmax(150px) gives two columns on a phone, which leaves the fifth
   fact stranded on its own in the left-hand column. Two up, with the last one
   centred across both, and one column on the narrowest screens. */
@media(max-width:640px){
  .lh-neon .strip-in{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 16px;padding-block:32px;justify-items:center;
  }
  .lh-neon .strip-in > div{max-width:22ch}
  .lh-neon .strip-in > div:last-child{grid-column:1 / -1}
  .lh-neon .strip .v{font-size:18px}
}
@media(max-width:380px){
  .lh-neon .strip-in{grid-template-columns:minmax(0,1fr);gap:20px}
  .lh-neon .strip-in > div:last-child{grid-column:auto}
}

/* Magnolia, stacked.
   The grid is photo-column first, copy-column second — right on desktop, wrong
   once it stacks: you scroll past a polaroid and three ingredient balls before
   anything tells you what section you are in. Every other band leads with its
   heading, so this one does too below the breakpoint. */
@media(max-width:960px){
  .lh-neon .maggrid > .magright{order:1}
  .lh-neon .maggrid > .magleft{order:2}
}