/* Chiobu menu page. Mobile first, desktop at 900px. */
html{scroll-padding-top:calc(var(--nav-h) + 64px)}

/* hero */
.mhero{position:relative;min-height:min(78svh,560px);display:flex;align-items:flex-end;overflow:hidden;padding:calc(var(--nav-h) + 40px) 0 76px}
.mhero__pic,.mhero__pic img{position:absolute;inset:0;width:100%;height:100%}
.mhero__pic img{object-fit:cover;object-position:60% 50%;transform:scale(1.08)}
/* load-in: the photo settles, the copy lifts in (one-off, transform and opacity only) */
.js .mhero__pic{animation:mheroIn 1.6s var(--ease-out) both}
.js .mhero__copy>*{animation:mcopyIn .9s var(--ease-out) both}
.js .mhero__copy>:nth-child(2){animation-delay:.08s}.js .mhero__copy>:nth-child(3){animation-delay:.16s}.js .mhero__copy>:nth-child(4){animation-delay:.24s}
@keyframes mheroIn{from{opacity:.35;transform:scale(1.06)}}
@keyframes mcopyIn{from{opacity:0;transform:translateY(22px)}}
/* no hard bottom edge: the photo itself fades out (mask) and the scrim lands on solid ink */
.mhero{background:var(--ink)}
.mhero__pic{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.55) 74%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.55) 74%,transparent 100%)}
.mhero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,15,.55) 0,rgba(13,13,15,.3) 30%,rgba(13,13,15,.8) 72%,var(--ink) 100%),linear-gradient(90deg,rgba(13,13,15,.7),transparent 70%)}
.mhero__copy{position:relative;width:100%}
.mhero h1{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:10px}
.mhero h1 .jp{font-size:clamp(1.1rem,3.6vw,1.8rem);letter-spacing:.35em;font-weight:500}
.mhero .lede{margin-bottom:22px;max-width:30ch}
@media(min-width:900px){.mhero{min-height:min(74svh,680px);padding-bottom:104px}.mhero .lede{font-size:1.3rem;max-width:none}}

/* share note + the lotus girl */
.mshare{padding:52px 0 32px;overflow:hidden}
/* phones: the painting sits beside the paragraph so the menu arrives quickly */
.mshare__in{display:grid;grid-template-columns:1fr 40%;grid-template-areas:"eye eye" "h2 h2" "p fig";column-gap:18px;align-items:start}
.mshare__copy{display:contents}
.mshare .eyebrow{grid-area:eye}.mshare h2{grid-area:h2}.mshare__copy>p:not(.eyebrow){grid-area:p}.mshare .pgirl{grid-area:fig}
.mshare .eyebrow .jp{font-size:.85em;margin-left:8px;letter-spacing:.25em}
.mshare h2{font-size:clamp(2.7rem,12.5vw,4rem);color:var(--pink);margin-bottom:14px;text-shadow:0 0 22px rgba(255,28,168,.35)}
.mshare p:not(.eyebrow){font-size:1.1rem;line-height:1.6;color:var(--white);max-width:40ch}
@media(min-width:900px){
  .mshare{padding:96px 0 56px}
  .mshare__in{grid-template-columns:1fr minmax(300px,380px);grid-template-areas:none;align-items:center;gap:80px}
  .mshare__copy{display:block}
  .mshare .pgirl{grid-area:auto}
  .mshare h2{font-size:clamp(4rem,7vw,6.4rem)}
  .mshare p:not(.eyebrow){font-size:1.3rem}
}

/* living painting frame (thin pink neon, slight tilt, 3:4) */
.pgirl{position:relative;width:100%;margin:6px 0 0;--rot:2.5deg}
.pframe{position:relative;aspect-ratio:3/4;overflow:hidden;border:2px solid rgba(255,28,168,.85);border-radius:2px;background:#cfcac4;box-shadow:0 0 0 1px rgba(255,28,168,.22),0 0 30px rgba(255,28,168,.36),0 24px 56px rgba(0,0,0,.6);transform:perspective(900px) rotate(var(--rot)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease-out),box-shadow .4s}
.pframe video,.pframe__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pframe video{z-index:2;opacity:0;transition:opacity .7s}
.pframe video.is-ready{opacity:1}
.pgirl__cap{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font:400 .78rem/1.2 var(--display);letter-spacing:.16em;text-align:center;text-transform:uppercase;color:rgba(235,199,161,.8);transform:rotate(var(--rot))}
.pgirl__cap::before,.pgirl__cap::after{content:"";flex:none;width:12px;height:1px;background:var(--pink);box-shadow:0 0 6px var(--pink)}
.pgirl::before{content:"";position:absolute;inset:8% -10% 14%;z-index:-1;background:radial-gradient(closest-side,rgba(255,28,168,.22),transparent);pointer-events:none}
@media(min-width:900px){
  .pgirl{width:100%;margin:0;--rot:3deg}
  .pgirl__cap{gap:10px;margin-top:18px;font-size:.95rem;letter-spacing:.24em}
  .pgirl__cap::before,.pgirl__cap::after{width:22px}
  .pgirl:hover .pframe{box-shadow:0 0 0 1px rgba(255,28,168,.35),0 0 46px rgba(255,28,168,.5),0 30px 70px rgba(0,0,0,.65)}
}
.js .pgirl.rv{transform:translateY(40px) rotate(-2deg)}
.js .pgirl.rv.is-in{transform:none;transition:opacity 1s var(--ease),transform 1.2s cubic-bezier(.2,1.25,.3,1)}

/* sticky chips. Solid on mobile (no backdrop blur while scrolling on iPhone), blur only on desktop. */
.chips{position:sticky;top:var(--nav-h);z-index:40;background:rgba(13,13,15,.97);border-block:1px solid var(--line)}
.chips::before,.chips::after{content:"";position:absolute;top:0;bottom:0;width:40px;pointer-events:none;z-index:1;opacity:0;transition:opacity .25s}
.chips::before{left:0;background:linear-gradient(270deg,transparent,var(--ink) 80%)}
.chips::after{right:0;background:linear-gradient(90deg,transparent,var(--ink) 80%)}
.chips::after,.chips.can-l::before{opacity:1}
.js .chips:not(.can-r)::after{opacity:0}
.chips__in{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:9px var(--gutter);scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.chips__in::-webkit-scrollbar{display:none}
.chips a{flex:none;scroll-snap-align:center;position:relative;display:inline-flex;align-items:center;min-height:44px;padding:2px 20px 0;border:1px solid rgba(235,199,161,.3);border-radius:999px;font:400 1.05rem var(--display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--white);white-space:nowrap;transition:background .25s,color .25s,border-color .25s,box-shadow .3s,transform .15s}
.chips a:active{transform:scale(.95)}
@media(hover:hover){.chips a:hover{border-color:var(--pink);color:var(--pink);box-shadow:0 0 14px rgba(255,28,168,.25)}}
.chips a.is-active{background:var(--pink);border-color:var(--pink);color:var(--ink);box-shadow:0 0 0 3px rgba(255,28,168,.18),0 0 22px rgba(255,28,168,.5)}
/* reading progress: a pink neon hairline under the chips, driven by the browser's scroll timeline (no JS) */
.chips__bar{display:none}
@supports (animation-timeline:scroll()){
  .chips__bar{display:block;position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pink);box-shadow:0 0 8px rgba(255,28,168,.8);transform-origin:left;transform:scaleX(0);animation:chipsBar linear both;animation-timeline:scroll(root)}
  @keyframes chipsBar{to{transform:scaleX(1)}}
}
@media(min-width:900px){
  .chips{background:rgba(13,13,15,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .chips__in{justify-content:center;padding-block:12px}
  .chips::before,.chips::after{display:none}
}

/* legend */
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:28px 0 4px;font-size:.9rem;color:rgba(235,199,161,.8)}
.legend{gap:8px 22px}
.legend span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}

/* tags */
.tag{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:20px;padding:0 7px;border:1px solid var(--pink);border-radius:999px;font:500 .68rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--pink);box-shadow:0 0 10px rgba(255,28,168,.28),inset 0 0 8px rgba(255,28,168,.12);vertical-align:middle;flex:none}
.tag.pick{font-family:var(--jp);font-size:.8rem;font-weight:500;letter-spacing:0;background:var(--pink);color:var(--ink);box-shadow:0 0 14px rgba(255,28,168,.55)}

/* category sections */
.msecs{padding-bottom:24px}
.msec{padding-top:56px;position:relative}
.msec::before{content:"";display:none;height:220px;margin:0 calc(var(--gutter) * -1);background:var(--img) var(--px,50%) calc(var(--pos,50%) + var(--py,0px))/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
#m-small{--img:url(/img/food-smallchow-sm.webp);--pos:55%}
#m-big{--img:url(/img/food-bigchow-sm.webp);--pos:72%}
#m-salads{--img:url(/img/food-salads-sm.webp);--pos:68%}
#m-sides{--img:url(/img/food-sides-sm.webp);--pos:66%}
#m-cocktails{--img:url(/img/cocktail-sm.webp)}
#m-mocktails{--img:url(/img/menu-mocktails-sm.webp);--pos:45%}
#m-drinks{--img:url(/img/menu-drinks-sm.webp);--pos:34%;--px:72%}
#m-small::before,#m-big::before,#m-salads::before,#m-sides::before,#m-cocktails::before,#m-mocktails::before,#m-drinks::before{display:block}
.msec .sec{position:relative;font-size:clamp(3rem,13vw,5.5rem);line-height:.9;margin:-62px 0 18px;text-shadow:0 2px 24px rgba(13,13,15,.8)}
.msec .sec::after{content:"";display:block;width:56px;height:3px;background:var(--pink);margin-top:12px;box-shadow:0 0 10px rgba(255,28,168,.7)}
/* titles switch on like a neon tube when their section arrives; the underline draws in */
.js .msec .sec::after,.js .mdrinks .sec::after{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out) .35s}
.js .msec.is-in .sec::after,.js .mdrinks .sec.is-in::after{transform:none}
.js .msec.is-in .sec,.js .mdrinks .sec.is-in{animation:neonOn 1.2s linear .15s both}
@keyframes neonOn{0%{opacity:.08}5%{opacity:.85}8%{opacity:.12}13%{opacity:1;color:#ffd9ef;text-shadow:0 0 14px rgba(255,28,168,.9),0 0 38px rgba(255,28,168,.55)}17%{opacity:.35}22%{opacity:1;color:#ffd9ef;text-shadow:0 0 14px rgba(255,28,168,.9),0 0 38px rgba(255,28,168,.55)}100%{opacity:1;color:var(--white);text-shadow:0 2px 24px rgba(13,13,15,.8)}}

.items{display:grid;gap:0}
.item{position:relative;padding:16px 0;border-top:1px solid var(--line)}
/* hover / tap: a neon tick on the left, the name nudges, the leader dots light up */
.item::before{content:"";position:absolute;left:-12px;top:18px;bottom:18px;width:2px;border-radius:2px;background:var(--pink);box-shadow:0 0 8px rgba(255,28,168,.8);transform:scaleY(0);transition:transform .3s var(--ease-out)}
.item__name{transition:transform .3s var(--ease-out),color .3s}
.item:active::before{transform:scaleY(1)}
.item:active .item__name{transform:translateX(4px)}
@media(hover:hover){.item:hover::before{transform:scaleY(1)}.item:hover .item__name{transform:translateX(5px)}.item:hover .item__top::after{border-bottom-color:rgba(255,28,168,.75)}}
.item:has(.pick) .item__name{text-shadow:0 0 18px rgba(255,28,168,.35)}
.item:first-child{border-top:0}
.item__top{display:flex;align-items:center;gap:6px 8px}
.item__name{flex:0 1 auto;min-width:0;margin-right:auto;padding-right:4px}
.item__top .price{padding-left:4px}
.item__name{font:400 1.45rem/1.1 var(--display);letter-spacing:.07em;text-transform:uppercase;color:var(--white)}
.item__top .price{margin-left:auto;font:400 1.5rem/1 var(--display);letter-spacing:.06em;color:var(--pink);display:flex;align-items:center;flex:none}
.price::before{content:"$";font-size:.8em;margin-right:1px;opacity:.85}
.item__top .price--tbc{display:none}
.item__desc{margin-top:6px;font-size:1rem;line-height:1.5;color:var(--sand);max-width:52ch}

/* staggered reveal (only when JS is on) */
.js .item{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.js .msec.is-in .item{opacity:1;transform:none;transition-delay:calc(min(var(--i,0),14) * 45ms + 120ms)}

@media(min-width:900px){
  .msec{padding-top:96px}
  .msec::before{height:340px;margin:0;border-radius:4px;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent);mask-image:linear-gradient(180deg,#000 50%,transparent)}
  #m-small{--img:url(/img/food-smallchow-lg.webp)}
  #m-big{--img:url(/img/food-bigchow-lg.webp)}
  #m-salads{--img:url(/img/food-salads-lg.webp)}
  #m-sides{--img:url(/img/food-sides-lg.webp)}
  #m-drinks{--img:url(/img/menu-drinks-lg.webp)}
  #m-cocktails{--img:url(/img/cocktail-lg.webp)}
  #m-mocktails{--img:url(/img/menu-mocktails-lg.webp)}
  .msec .sec{font-size:clamp(5rem,8vw,7rem);margin:-96px 0 28px}
  .items{grid-template-columns:1fr 1fr;column-gap:72px}
  .item{padding:20px 0}
  .item:nth-child(2){border-top:0}
  .item__name{font-size:1.6rem}
  .item__top{flex-wrap:nowrap}
  .item__top .price{margin-left:0;font-size:1.65rem;order:3}
  .item__top .tag{order:1}
  .item__top::after{content:"";order:2;flex:1;align-self:flex-end;height:0;margin:0 6px 7px;border-bottom:2px dotted rgba(235,199,161,.35);transition:border-color .3s}
  .item::before{left:-18px}
  .item__top:has(.price--tbc)::after{display:none}
}

/* boba and sake band */
.sband{position:relative;margin-top:56px;padding:72px 0;background:radial-gradient(120% 90% at 85% 30%,rgba(255,28,168,.14),transparent 60%),linear-gradient(180deg,var(--ink) 0%,var(--charcoal) 22%,var(--charcoal) 78%,var(--ink) 100%);overflow:hidden}
.sband__in{display:grid;gap:32px}
.sband__tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sband__tiles img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:2px;filter:saturate(1.05)}
.sband__tiles img{transition:transform .6s var(--ease-out),filter .4s}
.sband__tiles img:last-child{transform:translateY(24px)}
@media(hover:hover) and (min-width:900px){.sband__tiles img:first-child:hover{transform:translateY(-8px) rotate(-1.5deg)}.sband__tiles img:last-child:hover{transform:translateY(32px) rotate(1.5deg)}}
.sband h2{margin-bottom:14px}
.sband p:last-child{max-width:40ch;color:var(--white)}
.sband a{color:var(--pink);text-underline-offset:3px}
@media(min-width:900px){
  .sband{padding:104px 0}
  .sband__in{grid-template-columns:1fr 1fr;align-items:center;gap:80px}
  .sband__tiles{order:2;max-width:520px;justify-self:end}
  .sband__tiles img:last-child{transform:translateY(40px)}
  .sband h2{font-size:clamp(4rem,6vw,6rem)}
  .sband p:last-child{font-size:1.2rem}
}

/* wine, beer, soft drinks */
.mdrinks{padding:56px 0 24px;position:relative}
.mdrinks::before{content:"";display:none;height:220px;margin:0;background:var(--img) var(--px,50%) var(--pos,50%)/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.mdrinks .sec{font-size:clamp(3rem,13vw,5.5rem);line-height:.9;margin:-62px 0 28px;position:relative;text-shadow:0 2px 24px rgba(13,13,15,.8)}
.mdrinks .sec::after{content:"";display:block;width:56px;height:3px;background:var(--pink);margin-top:12px}
.dgrid{display:grid;gap:18px}
.dgroup{border:1px solid var(--line);border-radius:3px;background:rgba(26,26,29,.6);padding:20px}
.dgroup table{width:100%;border-collapse:collapse}
.dgroup caption{caption-side:top;text-align:left;font:400 1.7rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--pink);padding-bottom:10px}
.dgroup th{font:500 .72rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:rgba(235,199,161,.7);text-align:right;padding:0 0 8px 10px}
.dgroup td{padding:11px 0 11px 10px;text-align:right;border-top:1px solid var(--line);color:var(--white);font-variant-numeric:tabular-nums;vertical-align:top}
.dgroup td:first-child,.dgroup th:first-child{text-align:left;padding-left:0;color:var(--white)}
.dgroup td:first-child{font:400 1.2rem/1.2 var(--display);letter-spacing:.07em;text-transform:uppercase;transition:color .25s}
.dgroup{transition:border-color .3s,box-shadow .3s}
@media(hover:hover){.dgroup:hover{border-color:rgba(255,28,168,.45);box-shadow:0 0 30px rgba(255,28,168,.12)}.dgroup tbody tr:hover td:first-child{color:var(--pink)}}
/* stacked rows on mobile (needs JS data-l labels; otherwise stays a normal table) */
@media(max-width:899px){
  .js .dgroup thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .js .dgroup tr,.js .dgroup tbody{display:block}
  .js .dgroup tr{display:flex;flex-wrap:wrap;gap:6px 18px;padding:14px 0;border-top:1px solid var(--line)}
  .js .dgroup tr:first-child{border-top:0;padding-top:4px}
  .js .dgroup td{display:block;border:0;padding:0;text-align:left}
  .js .dgroup td:first-child{flex:1 0 100%}
  .js .dgroup td[data-l]:not(:first-child){display:inline-flex;align-items:baseline;gap:7px;font:400 1.35rem/1 var(--display);letter-spacing:.05em;color:var(--pink)}
  .js .dgroup td[data-l]:not(:first-child)::before{content:attr(data-l);font:500 .72rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:rgba(235,199,161,.75)}
  .js .dgroup td[data-l]:not(:first-child)::after{content:none}
}
@media(min-width:900px){
  .mdrinks{padding-top:104px}
  .dgroup td{transition:color .25s}
  .dgrid{grid-template-columns:1fr 1fr;gap:24px}
  .dgroup{padding:28px}
  .dgroup:last-child:nth-child(odd){grid-column:1/-1}
}

.mfoot{padding:40px 0 88px;text-align:center}
.mfoot .wrap{display:grid;gap:20px;justify-items:center}
.mfoot .fine{max-width:44ch;font-size:.95rem}

/* wine and beer banner, matches the category banners */
.mdrinks::before{width:calc(100% - var(--gutter) * 2);margin:0 auto;border-radius:3px}
@media(min-width:900px){
  .mdrinks::before{height:340px;max-width:1160px;border-radius:4px;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent);mask-image:linear-gradient(180deg,#000 50%,transparent)}
  .mdrinks .sec{font-size:clamp(5rem,8vw,7rem);margin:-96px 0 28px}
}

@media(prefers-reduced-motion:reduce){.pframe,.pgirl__cap,.js .pgirl.rv{transform:none}.js .msec .sec::after,.js .mdrinks .sec::after{transform:none}.chips__bar{display:none}}

/* ---------- Share everything (rules of the table) ---------- */
.tshare{position:relative;overflow:hidden;padding:56px 0 64px;isolation:isolate}
.tshare__bg,.tshare__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* the toast photo blooms out of the ink at the top and sinks back into it at the bottom */
.tshare__bg{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 14%,#000 30%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 14%,#000 30%,#000 78%,transparent 100%)}
/* a soft pink bloom where the tape crosses, so the dark gap glows instead of going flat */
.tshare::before{content:"";position:absolute;left:50%;top:-140px;width:min(140vw,1400px);height:420px;transform:translateX(-50%);z-index:-1;background:radial-gradient(50% 50% at 50% 50%,rgba(255,28,168,.16),rgba(198,16,46,.06) 55%,transparent 75%);pointer-events:none}
.tshare__bg img{object-position:50% 40%}
.tshare__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,13,15,.5) 0%,rgba(13,13,15,.76) 26%,rgba(13,13,15,.86) 70%,var(--ink) 100%)}
.tshare__in{display:grid;gap:40px}
.tshare .eyebrow .jp{font-size:.85em;margin-left:8px;letter-spacing:.25em}
.tshare h2{font-size:clamp(3.6rem,17vw,5.4rem);line-height:.88;color:var(--pink);text-shadow:0 0 26px rgba(255,28,168,.45);margin:4px 0 16px}
.tshare__lede{font-size:1.12rem;color:var(--white);max-width:38ch;margin-bottom:26px}
.rules{list-style:none;display:grid;gap:12px;counter-reset:r}
.rule{display:flex;align-items:center;gap:16px;padding:14px 16px;background:rgba(13,13,15,.8);border:1px solid var(--line);border-left:3px solid var(--pink);border-radius:3px;transition:transform .3s,border-color .3s,box-shadow .3s}
.rule b{display:block;font:400 1.5rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--white);margin-bottom:4px}
.rule span{font-size:.98rem;color:var(--sand)}
.rule__ico{flex:0 0 48px;width:48px;height:48px;fill:none;stroke:var(--pink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,28,168,.55))}
.rule.is-in .ico-sticks .s1{transform-origin:24px 38px;animation:clack 2.8s ease-in-out .6s infinite}
.rule.is-in .ico-dumpling{animation:bob 3s ease-in-out .3s infinite}
.rule.is-in .ico-plates ellipse:nth-child(n+3){animation:slide 3.4s ease-in-out .4s infinite}
@keyframes clack{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-9deg)}86%{transform:rotate(0)}92%{transform:rotate(-6deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes slide{0%,100%{transform:translate(0,0)}50%{transform:translate(-2px,2px)}}
.rule:nth-child(2){transition-delay:.08s}.rule:nth-child(3){transition-delay:.16s}
.tshare__girl{width:min(68vw,300px);justify-self:center;margin:0}
@media(hover:hover) and (pointer:fine){.rule:hover{transform:translateX(6px);border-color:rgba(255,28,168,.6);box-shadow:0 0 30px rgba(255,28,168,.18)}}
@media(min-width:900px){
  .tshare{padding:110px 0 120px}
  .tshare__scrim{background:linear-gradient(90deg,rgba(13,13,15,.95) 0%,rgba(13,13,15,.82) 48%,rgba(13,13,15,.5) 100%)}
  .tshare__in{grid-template-columns:1.15fr minmax(300px,400px);gap:90px;align-items:center}
  .tshare h2{font-size:clamp(5.4rem,8vw,8rem)}
  .tshare__lede{font-size:1.25rem}
  .rules{max-width:560px}
  .tshare__girl{width:100%}
}
@media(prefers-reduced-motion:reduce){.rule__ico *,.rule__ico{animation:none!important}}

/* ---------- bridge: neon tape across the hero / share seam ---------- */
/* a clipped strip straddling the seam: the tape is wider than the screen and tilted, the strip keeps it from widening the page */
.mbridge{position:relative;z-index:3;height:140px;margin:-74px 0 -66px;overflow:hidden;pointer-events:none}
.mbridge__tape{position:absolute;left:-6vw;right:-6vw;top:50%;transform:translateY(-50%) rotate(-2.2deg);background:linear-gradient(180deg,#111114,#0b0b0d);border-block:1px solid rgba(255,28,168,.85);box-shadow:0 0 0 1px rgba(255,28,168,.18),0 0 18px rgba(255,28,168,.45),0 0 60px rgba(255,28,168,.18),0 18px 40px rgba(0,0,0,.6);overflow:hidden}
.mbridge__track{display:flex;align-items:center;width:max-content;padding:13px 0 11px;white-space:nowrap}
.mbridge__track span{font:400 1.35rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--white);padding:0 20px}
.mbridge__track span.jp{font:500 1.05rem/1 var(--jp);letter-spacing:.3em;color:var(--pink);text-shadow:0 0 10px rgba(255,28,168,.7)}
.mbridge__track i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink),0 0 16px rgba(255,28,168,.6)}
.js .mbridge__track{animation:tape 38s linear infinite}
@keyframes tape{to{transform:translateX(-50%)}}
@media(min-width:900px){
  .mbridge{height:180px;margin:-96px 0 -84px}
  .mbridge__tape{transform:translateY(-50%) rotate(-1.6deg)}
  .mbridge__track{padding:16px 0 14px}
  .mbridge__track span{font-size:1.7rem;padding:0 28px}
  .mbridge__track span.jp{font-size:1.3rem}
}
@media(prefers-reduced-motion:reduce){.js .mbridge__track{animation:none}}
/* seafood origin tag (A / I / M), outlined in sand so it reads apart from the diet tags */
.tag.origin{border-color:var(--sand);color:var(--sand);min-width:22px;padding:0 6px}
.legend__sea{display:inline-flex;align-items:center;gap:6px;white-space:normal;flex-wrap:wrap}
/* sub-heading inside a drinks card (On tap: Tiger by the 500ml), styled like the card's column header */
.dgroup tr.dsub td,.dgroup tr.dsub th{border-top:0;padding-top:22px;padding-bottom:8px}
@media(max-width:899px){
  .js .dgroup tr.dsub{display:block;height:10px;padding:0;border-top:0;overflow:hidden}
  .js .dgroup tr.dsub > *{display:none}
}