/* Visit page. Mobile first, desktop at 900px. */
.page-visit section{padding:72px 0}
@media(min-width:900px){.page-visit section{padding:112px 0}}

/* hero */
.vhero{position:relative;min-height:min(92svh,820px);display:flex;align-items:flex-end;padding:calc(var(--nav-h) + 40px) 0 40px!important;overflow:hidden;isolation:isolate}
.vhero__media{position:absolute;inset:-6% 0;z-index:-3}
.vhero__img{width:100%;height:100%;object-fit:cover;object-position:34% 50%}
.vhero__scrim{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(13,13,15,.55) 0%,rgba(13,13,15,.15) 30%,rgba(13,13,15,.78) 68%,var(--ink) 100%)}
.vhero__body{width:100%}
.vhero h1{font-size:clamp(4.5rem,24vw,11rem);line-height:.86}
.vhero__script{font:400 clamp(1.8rem,8vw,5.6rem)/1.05 var(--script);color:var(--pink);text-shadow:0 0 14px rgba(255,28,168,.75),0 0 42px rgba(255,28,168,.4);margin:2px 0 18px;transform:rotate(-3deg);transform-origin:left;white-space:nowrap}
.vhero__script span{display:inline-block;padding:.12em .3em .2em .05em;margin:-.12em -.3em -.2em -.05em}
.vhero__script b{display:inline-block;font-weight:inherit}
/* the neon script wipes in on load, then the tube flickers on. Transform only (outer window slides in, inner text slides
   the opposite way so it stays put): animating mask-position repaints the glow every frame and stalled mid-write on load. */
@media(prefers-reduced-motion:no-preference){
  .js .vhero__script span{overflow:hidden;will-change:transform;animation:vWipeOut 1.15s cubic-bezier(.35,.1,.25,1) .45s both,vflick 1.3s linear 1.7s both}
  .js .vhero__script b{will-change:transform;animation:vWipeIn 1.15s cubic-bezier(.35,.1,.25,1) .45s both}
}
@keyframes vWipeOut{from{transform:translateX(-102%) skewX(-12deg)}to{transform:none}}
@keyframes vWipeIn{from{transform:skewX(12deg) translateX(102%)}to{transform:none}}
@keyframes vflick{0%,100%{opacity:1}8%{opacity:.35}12%{opacity:1}20%{opacity:.55}24%{opacity:1}}
.vhero__addr{font-style:normal;font-size:1.15rem;color:var(--white);margin-bottom:24px;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.vhero .btn-row{margin-bottom:22px}
@media(min-width:900px){
  .vhero{min-height:min(96svh,880px);padding-bottom:56px!important}
  .vhero__scrim{background:linear-gradient(90deg,rgba(13,13,15,.94) 0%,rgba(13,13,15,.78) 38%,rgba(13,13,15,.15) 70%,rgba(13,13,15,.05) 100%),linear-gradient(180deg,rgba(13,13,15,.5) 0%,transparent 25%,transparent 70%,var(--ink) 100%)}
  .vhero__img{object-position:50% 50%}
}

.badge{display:inline-flex;align-items:center;gap:10px;font:400 1rem var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--white);border:1px solid rgba(255,28,168,.65);border-radius:999px;padding:7px 16px;background:rgba(13,13,15,.55)}
.badge__dot{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* walk-ins and groups. Centred header (banner + promise), the three steps across the full width,
   then a balanced groups row: the card on one side, the example email on the other. */
.page-visit .book{position:relative;overflow:hidden;padding:28px 0 56px;background:var(--ink)}
.book__bg,.book__bg picture,.book__bg img,.book__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.book__bg img,.book__bg video{object-position:var(--bgx,85%) 50%}
.book__bg video{opacity:0;transition:opacity .8s}
.book__bg video.is-ready{opacity:1}
.book__scrim{position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.5) 12%,rgba(13,13,15,.62) 60%,rgba(13,13,15,.9) 100%)}
.book__inner{position:relative;display:grid;gap:40px}

.book__head{text-align:center;display:grid;justify-items:center}
.book__head .eyebrow{margin-bottom:14px}
.book__banner{font:400 clamp(2.6rem,13vw,4.4rem)/.92 var(--display);letter-spacing:.04em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(233,214,184,.75)}
.book__banner span{display:block}
.book__banner span+span{color:var(--white);-webkit-text-stroke:0;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.book__banner i{font-style:normal;color:var(--pink);-webkit-text-stroke:0}
.book__h{font-size:clamp(1.7rem,7vw,2.2rem);margin:20px 0 10px}
.book__head .lede{max-width:44ch;margin:0 auto}

.bsteps{display:grid;gap:12px}
.bstep{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;background:rgba(22,22,25,.94);border:1px solid var(--line);border-left:3px solid var(--pink);border-radius:2px;transition:transform .3s var(--ease-out),border-color .3s,box-shadow .3s,opacity .8s var(--ease)}
.bstep:nth-child(2){transition-delay:0s,0s,0s,.1s}.bstep:nth-child(3){transition-delay:0s,0s,0s,.2s}
.bstep__n{flex:0 0 42px;height:42px;display:grid;place-items:center;border:2px solid var(--pink);border-radius:50%;font:400 1.5rem var(--display);color:var(--pink);box-shadow:0 0 14px rgba(255,28,168,.45),inset 0 0 12px rgba(255,28,168,.25);transition:background .3s,color .3s}
.bstep h3{font-size:1.4rem;margin-bottom:2px}
.bstep p{font-size:.98rem}
@media(hover:hover){.bstep:hover{transform:translateY(-4px);border-color:var(--pink);box-shadow:0 0 28px rgba(255,28,168,.22)}.bstep:hover .bstep__n{background:var(--pink);color:var(--ink)}}

/* static jump target for /visit#groups: the card itself slides in (.rv), so anchoring to it lands short.
   Absolutely positioned so it takes no grid row (an empty grid item still costs a full gap). */
.book__groups{position:relative;display:grid;gap:44px}
.anchor{position:absolute;top:0;left:0;width:1px;height:1px}
.groups{padding:20px 20px 16px;border:1px solid rgba(255,28,168,.55);border-radius:4px;background:rgba(13,13,15,.88);box-shadow:0 0 28px rgba(255,28,168,.18)}
.groups__pic{display:block;margin:-20px -20px 16px;border-radius:4px 4px 0 0;overflow:hidden;aspect-ratio:16/8}
.groups__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.groups__h{font:400 clamp(1.8rem,7vw,2.4rem)/1 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--pink);text-shadow:0 0 14px rgba(255,28,168,.55)}
.groups__p{margin:8px 0 16px;color:var(--white);max-width:40ch}
.groups .book__privacy{margin-top:12px}

.mail{position:relative;max-width:460px;margin:0 auto;width:100%;transform:rotate(1.6deg)}
.mail__tag{font:400 1.05rem var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin-bottom:10px}
.mail__card{position:relative;background:var(--sand);color:#17110c;border-radius:4px;padding:0 0 18px;box-shadow:10px 10px 0 var(--pink),0 30px 70px rgba(0,0,0,.55);overflow:hidden}
.mail__bar{display:flex;gap:6px;padding:10px 14px;background:#17110c}
.mail__bar i{width:9px;height:9px;border-radius:50%;background:var(--sand);opacity:.55}
.mail__head{padding:12px 18px 0}
.mail__head div{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid rgba(23,17,12,.2);font-size:.95rem}
.mail__head dt{flex:0 0 62px;font:400 1rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:#17110c}
.mail__head dd{font-weight:500;word-break:break-word}
.mail__body{padding:16px 18px 4px;font-size:1rem;line-height:1.55;min-height:15.5em}
.mail__body p+p{margin-top:.8em}
.mail__caret{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:var(--crimson);animation:caret .9s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.mail__send{position:absolute;right:16px;bottom:14px;font:400 1.05rem var(--display);letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--pink);padding:6px 16px;border-radius:2px;animation:pulseSend 2.6s ease-in-out infinite;transition:transform .25s var(--ease-out),background .2s,color .2s}
.mail.is-sent .mail__send{animation:none;background:var(--pink);color:var(--ink);transform:scale(.94);transition:transform .15s,background .2s}
@keyframes pulseSend{50%{box-shadow:0 0 18px rgba(255,28,168,.75)}}

@media(min-width:900px){
  .page-visit .book{padding:36px 0 72px}
  /* the sign sits high on the far-left wall: show the left of the photo and lift it a touch so チオブ lands
     in the gutter beside the heading, above the step cards, from 1280 up */
  /* photo starts at the top, behind the heading. The CHIOBU wall sign sits ~26-33% down the photo (photo height
     ~0.5625vw), so the gap above "No bookings" is sized to frame it between the two headings. Tuned 1280 to 1920. */
  .page-visit .book__bg{inset:0 0 auto 0;height:clamp(700px,56vw,1000px);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 72%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 72%,transparent)}
  .book__bg img,.book__bg video{object-position:0% 50%}
  .book__scrim{background:linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.42) 12%,rgba(13,13,15,.55) 55%,rgba(13,13,15,.9) 88%,var(--ink) 100%)}
  .book__inner{gap:64px}
  .book__banner{font-size:clamp(4rem,7.4vw,7.6rem);white-space:nowrap}
  .book__banner span{display:inline-block}
  .book__h{font-size:clamp(2rem,2.6vw,2.6rem);margin-top:calc(14.7vw - 82px)}
  .bsteps{grid-template-columns:repeat(3,1fr);gap:20px}
  .bstep{padding:20px 22px}
  .book__groups{grid-template-columns:1fr 1fr;gap:72px;align-items:center}
  .mail{margin:0 auto;transform:rotate(2.4deg)}
}
@media(prefers-reduced-motion:reduce){.mail{transform:none}.mail__send{animation:none}.pframe,.pgirl__cap,.js .pgirl.rv{transform:none}}

/* living painting frame (thin pink neon, slight tilt, 3:4) */
.pgirl{position:relative;width:min(64vw,270px);margin:0 auto;--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:10px;margin-top:18px;font:400 .95rem var(--display);letter-spacing:.22em;text-transform:uppercase;color:rgba(235,199,161,.8);text-align:center;transform:rotate(var(--rot))}
.pgirl__cap::before,.pgirl__cap::after{content:"";flex:none;width:18px;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,.2),transparent);pointer-events:none}
@media(min-width:900px){.pgirl{width:100%}.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(3deg)}
.js .pgirl.rv.is-in{transform:none;transition:opacity 1s var(--ease),transform 1.2s cubic-bezier(.2,1.25,.3,1)}

/* follow */
.follow{position:relative;overflow:hidden;isolation:isolate}
.follow__media{position:absolute;inset:0;z-index:-2}
.follow__media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.follow__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.72) 22%,rgba(13,13,15,.8) 78%,var(--ink) 100%)}
@media(min-width:900px){.follow__scrim{background:linear-gradient(90deg,rgba(13,13,15,.92) 0%,rgba(13,13,15,.55) 60%,rgba(13,13,15,.35) 100%),linear-gradient(180deg,var(--ink) 0%,transparent 20%,transparent 80%,var(--ink) 100%)}}
.follow h2{margin-bottom:14px}
.follow .lede{max-width:38ch;margin-bottom:28px}
.social{display:grid;gap:12px;max-width:440px}
.social__a{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 20px;border:1px solid var(--sand);border-radius:2px;background:rgba(13,13,15,.6);text-decoration:none;font:400 1.3rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--white);transition:border-color .2s,color .2s,box-shadow .2s,transform .2s}
.social__a:hover{border-color:var(--pink);color:var(--pink);box-shadow:0 0 24px rgba(255,28,168,.35)}
.social__h{margin-left:auto;font:300 1rem var(--body);letter-spacing:.02em;text-transform:none;color:var(--sand)}
.social__a.is-pending{cursor:default;opacity:.7}
.social__a.is-pending:hover{border-color:var(--sand);color:var(--white);box-shadow:none}


/* ---------- hours: a neon sign over the dining room ---------- */
.hours{position:relative;overflow:hidden;isolation:isolate;background:var(--ink)}
.hours__bg{position:absolute;inset:0;z-index:-2;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%)}
.hours__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:.26}
.hours::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 45% at 50% 62%,rgba(255,28,168,.2),transparent 70%),radial-gradient(60% 40% at 15% 20%,rgba(198,16,46,.16),transparent 70%),linear-gradient(180deg,rgba(13,13,15,.7),rgba(13,13,15,.55) 50%,rgba(13,13,15,.8))}
.hours__grid{display:grid;gap:40px;grid-template-areas:"intro" "girl" "board"}
.hours__intro{grid-area:intro;text-align:center}.hours__girl{grid-area:girl}.hours__board{grid-area:board}
.hours .eyebrow .jp{font-size:.85em;margin-left:8px;letter-spacing:.25em}
/* the heading is a lit neon tube in a sign box, hung on two wires */
.hours__sign{position:relative;display:inline-block;margin-top:34px;padding:.16em .42em .1em;font-size:clamp(3.4rem,15vw,6.6rem);line-height:.95;color:#ffe6f5;border:3px solid var(--pink);border-radius:18px;text-shadow:0 0 6px rgba(255,28,168,.95),0 0 18px rgba(255,28,168,.75),0 0 46px rgba(255,28,168,.45);box-shadow:0 0 10px rgba(255,28,168,.8),0 0 34px rgba(255,28,168,.4),inset 0 0 14px rgba(255,28,168,.45);background:rgba(13,13,15,.55)}
.hours__sign::before,.hours__sign::after{content:"";position:absolute;bottom:100%;width:1px;height:36px;background:linear-gradient(rgba(235,199,161,0),rgba(235,199,161,.55))}
.hours__sign::before{left:18%}.hours__sign::after{right:18%}
.js .hours__intro.is-in .hours__sign span{animation:tubeOn 1.4s linear .2s both}
@keyframes tubeOn{0%{opacity:.15}6%{opacity:.9}9%{opacity:.2}15%{opacity:1}19%{opacity:.4}24%,100%{opacity:1}}
/* the board */
.hours__board{position:relative;width:100%;max-width:640px;justify-self:center;padding:22px 18px 10px;background:rgba(13,13,15,.86);border:1px solid rgba(255,28,168,.35);border-radius:10px;box-shadow:0 0 0 1px rgba(255,28,168,.08),0 0 50px rgba(255,28,168,.14),0 30px 60px rgba(0,0,0,.5)}
.hours__week{display:flex;justify-content:space-between;gap:6px;padding:0 2px 16px;border-bottom:1px solid var(--line)}
.hours__week li{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(235,199,161,.28);font:400 1.15rem/1 var(--display);letter-spacing:.04em;color:rgba(235,199,161,.85);padding-top:2px}
.hours__week li.is-today{background:var(--pink);border-color:var(--pink);color:var(--ink);box-shadow:0 0 14px rgba(255,28,168,.8),0 0 30px rgba(255,28,168,.4)}
.hours__table{width:100%;border-collapse:collapse}
.hours__table tr{border-bottom:1px solid var(--line);transition:background .3s}
.hours__table tr:last-child{border-bottom:0}
.hours__table th,.hours__table td{padding:18px 6px;text-align:left;vertical-align:middle;font-weight:300}
.hours__table th{font:400 clamp(1.05rem,4.4vw,1.5rem)/1.05 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--sand);width:38%}
.hours__table td{text-align:right;white-space:nowrap;color:var(--white)}
.hours__table .t{font:400 clamp(2rem,8.6vw,3.3rem)/1 var(--display);letter-spacing:.02em;color:#fff2fa;text-shadow:0 0 8px rgba(255,28,168,.55),0 0 24px rgba(255,28,168,.3)}
.hours__table .ap{font:400 .95rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin-left:2px}
.hours__table .to{font-size:.9rem;color:rgba(235,199,161,.8);margin:0 6px}
.today{display:block;width:max-content;margin-top:8px;padding:5px 10px 3px;border-radius:999px;background:var(--pink);color:var(--ink);font:400 .85rem/1 var(--display);letter-spacing:.18em;box-shadow:0 0 14px rgba(255,28,168,.6)}
.hours__table tr.is-today{background:linear-gradient(90deg,rgba(255,28,168,.16),rgba(255,28,168,.02))}
.hours__table tr.is-today th{color:var(--white);box-shadow:inset 3px 0 0 var(--pink)}
.hours__table tr.is-today .t{color:#fff;text-shadow:0 0 6px rgba(255,28,168,.95),0 0 18px rgba(255,28,168,.8),0 0 40px rgba(255,28,168,.5)}
.hours__table th{padding-left:14px}
@media(hover:hover){.hours__table tr:hover th{color:var(--pink)}}
@media(min-width:900px){
  .hours__grid{grid-template-columns:minmax(280px,350px) 1fr;grid-template-areas:"girl intro" "girl board";grid-template-rows:auto 1fr;column-gap:96px;row-gap:34px;align-items:start}
  .hours__intro{text-align:left;align-self:end}
  .hours__girl{--rot:-3deg;align-self:center}
  .hours__board{justify-self:start;padding:26px 28px 12px}
  .hours__week{justify-content:flex-start;gap:12px}
  .hours__week li{width:44px;height:44px}
  .hours__table th,.hours__table td{padding:22px 8px}
  .hours__table th{padding-left:16px}
  .today{display:inline-block;margin:0 0 0 12px;vertical-align:middle}
}

/* ---------- one street, one big night: dusk to midnight ---------- */
.night{position:relative;overflow:hidden;isolation:isolate;text-align:center;background:var(--ink)}
.night__sky{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#0D0D0F 0%,#0D0D0F 3%,#1a0b14 11%,#3d1220 19%,#7a2a1e 27%,#9a4a1c 31%,#6a2034 40%,#2e1236 54%,#16122a 70%,#0f0e1c 85%,#0D0D0F 100%)}
.night__sun{position:absolute;right:-70px;top:17%;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,170,60,.85) 0,rgba(255,138,0,.55) 30%,rgba(198,16,46,.25) 55%,transparent 70%);opacity:.75}
.night__moon{position:absolute;right:9%;top:63%;width:46px;height:46px;border-radius:50%;box-shadow:inset -11px 5px 0 0 #f4e3cf;filter:drop-shadow(0 0 10px rgba(244,227,207,.45));transform:rotate(-18deg)}
.night__stars,.night__stars::after{position:absolute;inset:45% 0 0 0;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff 50%,transparent),radial-gradient(1px 1px at 28% 42%,#fff 50%,transparent),radial-gradient(1.5px 1.5px at 46% 12%,#fff 50%,transparent),radial-gradient(1px 1px at 63% 36%,#fff 50%,transparent),radial-gradient(1.5px 1.5px at 82% 22%,#fff 50%,transparent),radial-gradient(1px 1px at 91% 58%,#fff 50%,transparent),radial-gradient(1px 1px at 8% 66%,#fff 50%,transparent),radial-gradient(1.5px 1.5px at 37% 78%,#fff 50%,transparent),radial-gradient(1px 1px at 72% 84%,#fff 50%,transparent),radial-gradient(1px 1px at 55% 60%,#fff 50%,transparent);opacity:.55}
.night__stars::after{content:"";inset:0;background-image:radial-gradient(1px 1px at 20% 30%,#fff 50%,transparent),radial-gradient(1.5px 1.5px at 52% 26%,#fff 50%,transparent),radial-gradient(1px 1px at 76% 48%,#fff 50%,transparent),radial-gradient(1px 1px at 33% 64%,#fff 50%,transparent),radial-gradient(1.5px 1.5px at 88% 76%,#fff 50%,transparent),radial-gradient(1px 1px at 14% 88%,#fff 50%,transparent);animation:twinkle 4.5s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.15}}
.night h2{margin-bottom:44px;text-shadow:0 2px 24px rgba(13,13,15,.6)}
.night .eyebrow{color:#ffd1ea}
.night__route{position:relative;max-width:440px;margin:0 auto;text-align:left;--lx:39px;--ly:60px;--len:calc(100% - 120px)}
/* the line: faint track, a lit fill that follows the dot, and the dot itself */
.night__line{position:absolute;left:var(--lx);top:var(--ly);width:2px;height:var(--len);margin-left:-1px;background:rgba(255,220,240,.18);border-radius:2px}
.night__fill{position:absolute;inset:0;background:linear-gradient(180deg,var(--mandarin),var(--pink));box-shadow:0 0 10px rgba(255,28,168,.7);transform-origin:0 0}
.night__dot{position:absolute;z-index:3;left:50%;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,28,168,.35),0 0 14px 4px rgba(255,28,168,.85),0 0 40px 10px rgba(255,28,168,.4);display:none}
.night--live .night__dot{display:block}
.night__route.is-h .night__line{width:var(--len);height:2px;margin:-1px 0 0}
.night__route.is-h .night__fill{background:linear-gradient(90deg,var(--mandarin),var(--pink))}
.night__route.is-h .night__dot{left:0;top:50%}
.night__list{position:relative;display:grid;gap:6px}
.step{position:relative;display:grid;grid-template-columns:78px 1fr;grid-template-areas:"ico when" "ico what" "ico where";column-gap:18px;align-items:center;padding:16px 0}
.step__ico{grid-area:ico;position:relative;z-index:1;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:rgba(16,10,22,.92);border:1px solid rgba(255,28,168,.35);transition:border-color .5s,box-shadow .5s}
.step__ico svg{width:46px;height:46px;fill:none;stroke:var(--pink);stroke-width:2.6;overflow:visible;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(255,28,168,.9))}
.step__ico svg *{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.3,1)}
.step__ico svg *:nth-child(2){transition-delay:.2s}.step__ico svg *:nth-child(3){transition-delay:.4s}.step__ico svg *:nth-child(4){transition-delay:.55s}
.step__when{grid-area:when;align-self:end;font:400 .9rem/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:#ffc58a;margin-bottom:6px}
.step__what{grid-area:what;font:400 clamp(2rem,8vw,2.6rem)/1 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--white)}
.step__where{grid-area:where;align-self:start;color:#f3dcc4}
.step.is-lit .step__ico,.night:not(.night--live) .step__ico{border-color:var(--pink);box-shadow:0 0 18px rgba(255,28,168,.55),inset 0 0 12px rgba(255,28,168,.3)}
/* JS on: icons wait dark and undrawn until the dot reaches them */
.night--live .step:not(.is-lit) .step__ico svg *{stroke-dashoffset:1}
.night--live .step:not(.is-lit) .step__ico svg{filter:none;opacity:.5}
.step__ico svg{transition:opacity .4s}
/* Chiobu: the main event */
.step--us{padding:22px 0}
.step--us::before{content:"";position:absolute;inset:4px -14px;z-index:-1;border:1px solid var(--pink);border-radius:12px;background:linear-gradient(135deg,rgba(255,28,168,.2),rgba(30,8,28,.82) 60%);box-shadow:0 0 0 1px rgba(255,28,168,.15),0 0 34px rgba(255,28,168,.35)}
.step--us .step__when{display:inline-block;justify-self:start;padding:5px 10px 3px;border-radius:999px;background:var(--pink);color:var(--ink);letter-spacing:.18em;font-size:.82rem}
.step--us .step__what{color:#fff;text-shadow:0 0 8px rgba(255,28,168,.95),0 0 26px rgba(255,28,168,.6);font-size:clamp(2.5rem,10vw,3.2rem)}
.step--us .step__where{color:var(--white);font-weight:500}
.step--us .step__ico{background:var(--pink)}
.step--us .step__ico svg{stroke:var(--ink);filter:none}
.night--live .step--us:not(.is-lit) .step__ico{background:rgba(16,10,22,.92)}
.night--live .step--us:not(.is-lit) .step__ico svg{stroke:var(--pink)}
.step--us.is-lit .step__ico{box-shadow:0 0 0 6px rgba(255,28,168,.18),0 0 34px rgba(255,28,168,.8)}
.step__ico{transition:border-color .5s,box-shadow .5s,background .5s}
.night__sum{margin:44px auto 0;max-width:34ch;font-family:var(--script);font-size:clamp(1.25rem,4.4vw,1.6rem);line-height:1.4;color:var(--white)}
@media(min-width:900px){
  .night__sky{background:linear-gradient(180deg,#0D0D0F 0%,transparent 18%,transparent 82%,#0D0D0F 100%),linear-gradient(90deg,#8a3a1c 0%,#6a2034 22%,#3a1438 44%,#1a1430 66%,#0f0e1c 86%,#0b0b12 100%)}
  .night__sun{left:-120px;right:auto;top:auto;bottom:4%;width:480px;height:480px;opacity:.7}
  .night__moon{right:9%;top:16%;bottom:auto;width:64px;height:64px;box-shadow:inset -15px 7px 0 0 #f4e3cf}
  .night__stars{inset:0 0 0 45%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
  .night h2{margin-bottom:64px}
  .night__route{max-width:none}
  .night__list{grid-template-columns:repeat(4,1fr);gap:28px}
  .step{grid-template-columns:1fr;grid-template-areas:"when" "ico" "what" "where";justify-items:center;text-align:center;row-gap:10px;padding:24px 8px}
  .step__when{margin-bottom:6px}
  .step__ico{width:96px;height:96px;margin-bottom:10px}
  .step__ico svg{width:56px;height:56px}
  .step--us{padding:24px 8px}
  .step--us::before{inset:-14px 0}
  .step--us .step__when{justify-self:center}
  .step--us .step__what{font-size:3.1rem}
}

/* ---------- FAQ: a flirty text thread (every question and answer is plain HTML) ---------- */
.faq{position:relative;background:var(--ink)}
.faq__wrap{display:grid;gap:30px}
.faq__lede{color:var(--sand);max-width:32ch;margin-top:12px}
.chat{position:relative;width:100%;max-width:600px;justify-self:center;border:1px solid rgba(255,28,168,.35);border-radius:26px;background:linear-gradient(180deg,#151518,#101013);box-shadow:0 0 0 1px rgba(255,28,168,.08),0 0 60px rgba(255,28,168,.12),0 30px 80px rgba(0,0,0,.55);overflow:hidden}
.chat__head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(26,26,29,.9)}
.chat__head img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,28,168,.5)}
.chat__head b{display:block;font:400 1.35rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--white)}
.chat__head span{font-size:.85rem;color:rgba(235,199,161,.8)}
.chat__thread{display:grid;gap:22px;padding:18px 14px 26px}
.chat__day{justify-self:center;font:400 .8rem/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:rgba(235,199,161,.75);padding:6px 12px 4px;border:1px solid var(--line);border-radius:999px}
.faq__q{display:grid;gap:10px}
.faq__ask{justify-self:end;max-width:84%;padding:11px 16px;border-radius:20px 20px 6px 20px;background:linear-gradient(135deg,#ff3cb6,var(--pink));color:var(--ink);font:500 1.02rem/1.4 var(--body);letter-spacing:0;text-transform:none;text-wrap:pretty;box-shadow:0 6px 20px rgba(255,28,168,.28)}
.faq__reply{display:grid;grid-template-columns:32px 1fr;column-gap:8px;align-items:start;max-width:90%}
.faq__av{grid-column:1;grid-row:1;width:32px;height:32px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,28,168,.45)}
.faq__ans,.faq__dots{grid-column:2;grid-row:1}
.faq__ans{justify-self:start;padding:12px 16px;border-radius:6px 20px 20px 20px;background:#25252a;color:#f4e6d6;font-size:1rem;line-height:1.5;border:1px solid rgba(235,199,161,.1)}
.faq__ans a{color:#fff;text-decoration-color:var(--pink);text-underline-offset:3px;text-decoration-thickness:2px}
.faq__ans a:hover{color:var(--pink)}
.faq__dots{justify-self:start;align-self:start;display:none;gap:5px;padding:14px 16px;border-radius:6px 20px 20px 20px;background:#25252a}
.faq__dots i{width:7px;height:7px;border-radius:50%;background:var(--sand)}
/* JS + motion: each answer "types" for a beat, then lands (all inside 1.4s) */
@media(prefers-reduced-motion:no-preference){
  .js .faq__dots{display:inline-flex;opacity:0}
  .js .faq__q.is-in .faq__dots{animation:dotsShow 1s ease .3s both}
  .js .faq__q.is-in .faq__dots i{animation:dotBounce .6s ease-in-out infinite}
  .js .faq__q.is-in .faq__dots i:nth-child(2){animation-delay:.12s}.js .faq__q.is-in .faq__dots i:nth-child(3){animation-delay:.24s}
  .js .faq__q:not(.is-in) .faq__ans{opacity:0}
  .js .faq__q.is-in .faq__ans{animation:ansIn .45s cubic-bezier(.2,1.2,.4,1) 1.05s both}
  .js .faq__q.is-in .faq__av{animation:ansIn .3s ease .3s both}
  .js .faq__q.rv{transform:translateY(16px)}
  .js .faq__q.rv.is-in{transform:none}
}
@keyframes dotsShow{0%{opacity:0;transform:scale(.6)}15%,85%{opacity:1;transform:none}100%{opacity:0;transform:scale(.9)}}
@keyframes dotBounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}
@keyframes ansIn{from{opacity:0;transform:translateY(8px) scale(.94);transform-origin:0 100%}}
@media(min-width:900px){
  .faq__wrap{grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
  .faq__intro{position:sticky;top:calc(var(--nav-h) + 48px)}
  .chat__thread{padding:22px 24px 30px}
  .faq__ask{font-size:1.06rem}
}

/* ---------- Chiobu dictionary: a deck of cards that deals out, flips to the meaning ---------- */
.dict{overflow:hidden}
.dict__intro h2{margin-bottom:14px}
.dict__intro .lede{max-width:32ch}
.dict__hint{margin-top:12px;font:400 1rem var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--pink)}
.dict__hint--mouse{display:none}
@media(hover:hover) and (pointer:fine){.dict__hint--mouse{display:inline}.dict__hint--touch{display:none}}
.deck{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:34px var(--gutter) 44px;scrollbar-width:none;overscroll-behavior-x:contain}
.deck::-webkit-scrollbar{display:none}
.dc{flex:0 0 min(74vw,300px);scroll-snap-align:start;position:relative;perspective:1100px;transform:rotate(var(--r,0deg))}
.dc:nth-child(1){--r:-2.5deg}.dc:nth-child(2){--r:1.8deg}.dc:nth-child(3){--r:-1.2deg}.dc:nth-child(4){--r:2.6deg}.dc:nth-child(5){--r:-2deg}.dc:nth-child(6){--r:1.2deg}.dc:nth-child(7){--r:-1.6deg}.dc:nth-child(8){--r:2.2deg}
.dc__in{position:relative;display:grid;min-height:212px;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.3,1.25,.45,1)}
.dc__face{position:relative;display:flex;flex-direction:column;padding:22px 22px 20px;border-radius:8px}
.dc__front{background:#F4E9D4;background-image:repeating-linear-gradient(0deg,rgba(120,80,40,.06) 0 1px,transparent 1px 28px);color:#2A1A14;box-shadow:8px 8px 0 var(--pink),0 20px 40px rgba(0,0,0,.45)}
.dc__front::before{content:"";position:absolute;inset:8px;border:1px dashed rgba(42,26,20,.3);border-radius:5px;pointer-events:none}
.dc__no{font:400 .95rem/1 var(--display);letter-spacing:.2em;color:rgba(42,26,20,.62)}
.dc__word{margin-top:auto;font:400 clamp(2.4rem,11vw,3rem)/.95 var(--display);letter-spacing:.03em;color:#2A1A14;text-transform:uppercase}
.dc__btn{all:unset;cursor:pointer;display:flex;align-items:flex-end;width:100%;min-height:44px}
.dc__btn::after{content:"";position:absolute;inset:0;border-radius:8px}
.dc__btn:focus-visible{outline:none}
.dc:has(.dc__btn:focus-visible) .dc__face{outline:2px solid var(--mandarin);outline-offset:4px}
.dc__ipa{margin-top:8px;font-size:1rem;color:rgba(42,26,20,.8)}
.dc__ipa i{font-weight:500;color:#A30E58}
.dc__stamp{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:42px;height:42px;border:2px solid var(--crimson);border-radius:50%;font:500 1.15rem/1 var(--jp);color:var(--crimson);transform:rotate(12deg);opacity:.85}
.dc__back{background:var(--pink);color:var(--ink);box-shadow:8px 8px 0 #2A1A14,0 20px 40px rgba(0,0,0,.45);justify-content:center}
.dc__bw{font:400 1.1rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.dc__def{font:500 1.2rem/1.4 var(--body);color:var(--ink)}
/* JS on: real 3D flip. JS off: both faces simply stack, so every meaning is still on the page. */
/* both faces carry their own 3D transform: WebKit only honours backface-visibility on transformed layers */
.js .dc__face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotateY(0deg) translateZ(1px)}
.js .dc__back{transform:rotateY(180deg) translateZ(1px)}
.js .dc.is-flipped .dc__in{transform:rotateY(180deg)}
.no-js .dc__back,html:not(.js) .dc__back{margin-top:16px}
@media(hover:hover) and (pointer:fine){.js .dc:hover .dc__in{transform:rotateY(180deg)}}
/* belt and braces for WebKit, which can ignore backface-visibility: clip away the hidden face as the card passes edge-on
   (clip-path, not visibility or display, so screen readers always get the meaning) */
.js .dc__face{transition:clip-path 0s linear .14s}
.js .dc__back,.js .dc.is-flipped .dc__front{clip-path:inset(0 0 100% 0)}
.js .dc.is-flipped .dc__back{clip-path:none}
@media(hover:hover) and (pointer:fine){.js .dc:hover .dc__back{clip-path:none}.js .dc:hover .dc__front{clip-path:inset(0 0 100% 0)}}
/* deal out: cards fly from the stack (offsets set by visit.js), staggered */
.js .deck.rv{opacity:1;transform:none}
.js .deck .dc{transition:transform .9s cubic-bezier(.2,1.1,.3,1),opacity .5s ease;transition-delay:calc(var(--i,0) * 70ms)}
.js .deck:not(.is-in) .dc{opacity:0;transform:translate(var(--dx,40vw),var(--dy,0)) rotate(var(--r0,12deg)) scale(.94)}
@media(min-width:900px){
  .deck{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 28px;max-width:1240px;margin:0 auto;overflow:visible;padding:44px var(--gutter) 20px}
  .dc__in{min-height:224px}
  .dc__word{font-size:2.9rem}
}
@media(prefers-reduced-motion:reduce){.js .deck:not(.is-in) .dc{opacity:1;transform:rotate(var(--r,0deg))}.night__stars::after{animation:none}}

/* night-out stops: the venues' own logos (white; Chiobu in brand neon pink) instead of text names */
.step__where--logo{display:flex;justify-content:center;margin-top:10px}
.step__logo{display:block;height:34px;width:auto;max-width:150px;object-fit:contain;opacity:.92;transition:opacity .3s}
.step.is-lit .step__logo{opacity:1}
.step__logo--chiobu{height:42px;max-width:120px}
@media(min-width:900px){.step__logo{height:44px;max-width:170px}.step__logo--chiobu{height:54px;max-width:140px}}
@media(max-width:899px){.step__where--logo{justify-content:flex-start}}
/* Drift's mark is near-square with small type, so it needs more height to match the wide wordmarks */
.step__logo--drift{height:46px;max-width:none}
@media(min-width:900px){.step__logo--drift{height:60px}}
/* optical centring: the script slants left (heavy C, low swoosh start), so nudge it right to LOOK centred */
.step__logo--chiobu{transform:translateX(-1px)}


/* section photo backgrounds (FAQ, dictionary): photo under a scrim, content above */
.faq,.dict{position:relative;isolation:isolate}
.sbg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.sbg picture,.sbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sbg::after{content:"";position:absolute;inset:0}
.sbg--faq img{object-position:60% 100%}
.sbg--faq::after{background:linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.55) 18%,rgba(13,13,15,.5) 70%,var(--ink) 100%)}
.sbg--dict img{object-position:50% 50%}
.sbg--dict::after{background:linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.45) 16%,rgba(13,13,15,.45) 84%,var(--ink) 100%)}
.faq{background:var(--ink)}
@media(min-width:900px){
  .sbg--faq img{object-position:50% 50%}
  .sbg--faq::after{background:linear-gradient(90deg,rgba(13,13,15,.82) 0%,rgba(13,13,15,.5) 45%,rgba(13,13,15,.25) 100%),linear-gradient(180deg,var(--ink) 0%,transparent 16%,transparent 84%,var(--ink) 100%)}
}
/* let the bar photo glow through the chat panel */
.chat{background:linear-gradient(180deg,rgba(21,21,24,.8),rgba(16,16,19,.84));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.chat__head{background:rgba(26,26,29,.72)}

/* soft top edge on phones too: the parallax can lift the photo, so fade it in rather than show its edge */
.book__bg{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 86%,transparent 100%)}

/* calmer walkway: dimmer, a little desaturated, so the copy and cards lead and the signs still glow */
.book__bg img,.book__bg video{filter:brightness(.7)}
.book__scrim{background:linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.62) 12%,rgba(13,13,15,.72) 60%,rgba(13,13,15,.92) 100%)}
@media(min-width:900px){.book__scrim{background:linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.5) 12%,rgba(13,13,15,.66) 55%,rgba(13,13,15,.92) 88%,var(--ink) 100%)}}