/* =============================================================
   BAB Visit Map — styles
   Tokens taken from BAB2026_BABMAP_FULLMAP_V15.ai / DESKTOP_V2.ai
   Desktop-first (1440), reflows to mobile.
   ============================================================= */

:root{
  /* colour */
  --pink:#E94E7C;
  --magenta:#9F2280;
  --plum:#6D3C61;
  --surface:#E8F5FD;
  --page:#ffffff;              /* v12: same as the map art background */
  --line:#BDCCD4;
  --grey:#808080;
  --white:#fff;
  --green:#7AC943;
  --teal:#0E7A6B;
  --blue:#1B4A9C;
  --maroon:#8E1F45;
  --pier:#5A8FA8;

  /* type */
  --display:"malila","Malila",Georgia,serif;
  --body:"Manrope",system-ui,-apple-system,sans-serif;

  /* geometry */
  --topbar-h:72px;
  --radius:14px;
  --radius-sm:6px;
  --shadow:0 18px 50px rgba(29,44,74,.18);

  /* map native aspect (925 x 549 artboard) */
  --map-aspect:1.6849;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--page);
  color:var(--plum);
  font-family:var(--body);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
[hidden]{display:none !important}

/* ---------------- 1. LOADER ---------------- */
.loader{
  position:fixed;inset:0;z-index:90;
  display:grid;place-items:center;
  background:var(--page);
  transition:opacity .5s ease,visibility .5s;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__inner{text-align:center;padding:24px}
.loader__logo{width:132px;margin:0 auto 28px}
/* v11: logo only — a soft fade-in so it doesn't just blink on */
.loader__logo{margin:0 auto;animation:logoIn .7s ease both}
@keyframes logoIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.loader__logo{animation:none}}

/* ---------------- TOP BAR ---------------- */
.topbar{
  position:relative;z-index:20;
  height:var(--topbar-h);
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:18px 22px 0;
}
.topbar__logo img{width:104px}
.topbar__menu{
  width:104px;height:76px;margin-top:-14px;
  display:grid;place-items:center;
  background:url("assets/brand/menu-splatter.svg") center/contain no-repeat;
}
.topbar__menu span{
  font-family:var(--display);font-size:16px;color:var(--surface);
  margin-top:-4px;
}

/* ---------------- 2. MAIN ---------------- */
.page__head{text-align:center;padding:4px 20px 18px}
.page__title{
  font-family:var(--display);
  font-size:clamp(30px,3.4vw,46px);
  color:var(--plum);
  letter-spacing:.01em;
  margin:0;
}
.page__sub{
  margin:6px 0 0;color:var(--grey);font-size:12px;letter-spacing:.04em;
}

/* ---------- ZOOM CONTROLS (mobile only) ---------- */
.zoomctl{display:none}
.zoomctl button{
  width:38px;height:38px;
  display:grid;place-items:center;
  background:var(--white);color:var(--magenta);
  border:1px solid var(--line);
  font-size:19px;line-height:1;
  box-shadow:0 3px 10px rgba(29,44,74,.14);
}
.zoomctl button:first-child{border-radius:9px 9px 0 0}
.zoomctl button:last-child{border-radius:0 0 9px 9px;font-size:13px}
.zoomctl button+button{border-top:0}
.zoomctl button:active{background:var(--surface)}

.mapwrap{padding:0 0 40px;position:relative}
.map{
  position:relative;
  width:100%;
  max-width:1600px;
  margin:0 auto;
}
/* the canvas is exactly the size of the map art, so every %-positioned
   marker / pill / prompt resolves against the artwork and never drifts */
.map__canvas{position:relative;width:100%;line-height:0}
.map__art{width:100%;height:auto}

/* ---------------- VENUE LABELS (exported .ai artwork) ----------------
   Each label is the real chip artwork from the Illustrator file, placed
   at its exact authored position. It is a real <button> with an
   aria-label, so it is focusable and announced — not a hotspot.        */
.markers{position:absolute;inset:0}
/* 3D venue buildings — HD artwork above the labels, as layered in the .ai;
   click-through so the labels underneath stay tappable */
.buildings{position:absolute;inset:0;z-index:4;pointer-events:none}
.bldg{position:absolute;display:block;pointer-events:none;-webkit-user-drag:none}
.marker{
  position:absolute;padding:0;line-height:0;
  transform-origin:50% 60%;
  transition:transform .18s ease,filter .18s ease;
  z-index:2;
}
.marker img{width:100%;height:100%;display:block;pointer-events:none}
.marker__name{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
.marker.is-hot,.marker:focus-visible{
  transform:scale(1.07);
  filter:drop-shadow(0 6px 14px rgba(159,34,128,.45));
  outline:none;z-index:5;
}
.marker:focus-visible{filter:drop-shadow(0 0 0 3px var(--pink))}
.marker.is-active{transform:scale(1.07);filter:drop-shadow(0 6px 14px rgba(233,78,124,.5))}
/* v11: the building lights up with its label (JS sets .is-hot on both) */
.bldg{transition:opacity .25s ease,filter .18s ease}
.bldg.is-hot{filter:drop-shadow(0 6px 14px rgba(159,34,128,.45))}
.bldg.is-active{filter:drop-shadow(0 6px 14px rgba(233,78,124,.5))}
.map.over-venue{cursor:pointer}
/* BAB Plus A–E pins are small artwork; give them a >= 44px touch target
   on screen whatever the zoom (--s = live map scale, set by app.js) */
.marker--plus{z-index:6}   /* above the 3D buildings (z 4) */
.marker--plus::before{
  content:"";position:absolute;left:50%;top:50%;
  width:max(100%, calc(44px / var(--s, 1)));height:max(100%, calc(44px / var(--s, 1)));
  transform:translate(-50%,-50%);
}

/* ---------------- ROUTE TABS ----------------
   Look is shared; desktop puts them on the side edges (vertical),
   mobile on the bottom edge (see the breakpoint blocks).            */
.sidetab{
  display:block;position:fixed;z-index:45;
  background:var(--pink);color:var(--white);
  font-family:var(--display);letter-spacing:.05em;
  box-shadow:0 6px 20px rgba(233,78,124,.35);
  transition:right .34s ease,left .34s ease,bottom .34s ease,top .3s ease,background .2s ease,opacity .2s ease;
}
.sidetab:hover,.sidetab.is-open{background:var(--magenta)}
.sidetab:focus-visible{outline:3px solid var(--white);outline-offset:-6px}
body.venue-open .sidetab{opacity:0;pointer-events:none}

/* ---------------- MAP SWITCH (v10) ----------------
   Two maps on one canvas: body[data-map] = main | plus.            */
.marker{transition:transform .18s ease,filter .18s ease,opacity .25s ease}
body[data-map="main"] .marker--plus{display:none}
/* faded only when the visitor ticks BAB Plus — a route shows the pins
   but keeps the numbered venues at full strength (body[data-route]) */
body[data-map="plus"]:not([data-route]) .marker:not(.marker--plus),
body[data-map="plus"]:not([data-route]) .bldg{opacity:.5}
/* faded venues are still buttons: come back up when pointed at */
body[data-map="plus"] .marker:not(.marker--plus).is-hot,
body[data-map="plus"] .bldg.is-hot,body[data-map="plus"] .bldg.is-active,
body[data-map="plus"] .marker:not(.marker--plus):focus-visible,
body[data-map="plus"] .marker:not(.marker--plus).is-active{opacity:.95}
/* ---------------- SCRIM ---------------- */
.scrim{
  position:fixed;inset:0;z-index:40;
  background:rgba(222,241,251,.75);
  backdrop-filter:blur(2px);
  animation:fade .25s ease;
}
/* the route view keeps the map fully visible (it pans instead) */
.scrim--clear{background:transparent;backdrop-filter:none}

/* map pans / zooms to frame the active route */
.map{overflow:hidden}
.map__canvas{transition:transform .55s cubic-bezier(.4,.1,.2,1)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------------- 3. VENUE CARD ---------------- */
.venue{
  position:fixed;z-index:50;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(1000px,92vw);max-height:88vh;
  overflow:auto;
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 30px 30px;
  animation:rise .3s ease;
}
@keyframes rise{from{opacity:0;transform:translate(-50%,-46%) scale(.985)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.venue__close{
  position:absolute;top:16px;right:18px;z-index:2;
  width:30px;height:30px;display:grid;place-items:center;
  border-radius:50%;
}
.routes__close{
  position:absolute;top:84px;right:30px;z-index:3;
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
}
.routes__close:hover{background:rgba(233,78,124,.14)}
.venue__close img,.routes__close img{width:16px}
.venue__close:hover,.routes__close:hover{background:rgba(233,78,124,.12)}
.venue__name{
  font-family:var(--display);
  font-size:clamp(26px,2.4vw,34px);
  color:var(--pink);
  margin:0 40px 18px 0;
  text-transform:uppercase;letter-spacing:.01em;
}
.venue__tag{
  display:inline-block;align-self:flex-start;   /* desktop card is a flex column — don't stretch */
  margin:0 0 10px;padding:5px 11px 4px;border-radius:999px;
  background:var(--pink);color:var(--white);
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;
}
.venue__th{
  margin:-12px 40px 18px 0;
  font-family:"Manrope","Noto Sans Thai","Thonburi",system-ui,sans-serif;
  font-size:16px;font-weight:500;color:var(--magenta);line-height:1.35;
}
.venue__body{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}

/* media column */
.venue__hero{display:block;width:100%;padding:0;overflow:hidden;border-radius:8px}
.venue__hero img{width:100%;height:230px;object-fit:cover;transition:transform .4s ease}
.venue__hero:hover img:first-child{transform:scale(1.03)}
.venue__hero--plus{position:relative}
.venue__hero img.venue__plusbadge{
  position:absolute;top:0;right:3%;
  width:15%;min-width:58px;height:auto;aspect-ratio:auto;object-fit:contain;
  pointer-events:none;transition:none;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.18));
}

/* WHAT'S ON posters: portrait 2:3 */
.vsec--whatson{margin-top:18px}
.posters{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.posters button{padding:0;overflow:hidden;border-radius:6px;aspect-ratio:2/3}
.posters img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.posters button:hover img{transform:scale(1.04)}
.posters button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.venue__gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.venue__gallery button{padding:0;overflow:hidden;border-radius:6px;aspect-ratio:4/3}
.venue__gallery img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.venue__gallery button:hover img{transform:scale(1.05)}
.venue__gallery button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}

/* info column */
.tabs{display:flex;gap:10px;margin-bottom:14px}
.tab{
  flex:1;padding:8px 10px;border-radius:8px;
  background:var(--white);color:var(--magenta);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s,color .2s;
}
.tab.is-active{background:var(--pink);color:var(--white)}
.tab:focus-visible{outline:3px solid var(--magenta);outline-offset:2px}
.tabpane{display:none}
.tabpane.is-active{display:block}

.artistlist{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;column-gap:18px;
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);
  line-height:1.9;
}
.about{font-size:11.5px;line-height:1.75;color:var(--grey);white-space:pre-line}
.about .about__addr{display:block;margin-top:12px;color:var(--plum)}

.rule{border:0;border-top:1px solid var(--line);margin:18px 0}

/* desktop venue card: Details > Artists > About, one scrolling column */
.vsec__title{
  font-family:var(--display);font-size:17px;color:var(--magenta);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px;
}
.vsec .amenities{margin-top:16px}

.facts{
  display:grid;grid-template-columns:auto 1fr;gap:4px 22px;margin:0;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
}
.facts dt{color:var(--grey)}
.facts dd{margin:0;color:var(--plum)}

.amenities{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;
}
.amenities li{display:grid;grid-template-columns:24px 1fr;gap:9px;align-items:center;
  font-size:11.5px;color:#4a5560;line-height:1.35}
.amen__icon{width:24px;height:24px;display:block;flex:none}

.gmaps{
  margin-top:18px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-radius:var(--radius-sm);
  background:var(--pier);color:var(--white);text-decoration:none;
  font-size:12px;letter-spacing:.06em;
  transition:background .2s;
}
.gmaps:hover{background:var(--blue)}
.gmaps img{width:18px;height:18px;filter:brightness(0) invert(1)}

/* ---------------- 4. ROUTES PANEL ---------------- */
.routes{
  position:fixed;z-index:50;top:0;bottom:0;right:0;
  width:var(--panel-w,max(600px,min(640px,42vw)));
  background:transparent;
  padding:120px 30px 46px;
  overflow:auto;
  animation:slideIn .34s ease;
  -ms-overflow-style:none;scrollbar-width:none;
}
.routes::-webkit-scrollbar{display:none}
.routes__close svg{
  width:22px;height:22px;fill:none;stroke:var(--pink);stroke-width:2.4;stroke-linecap:round;
}
.routes.is-left{right:auto;left:0;animation:slideInL .34s ease}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes slideInL{from{transform:translateX(-100%)}to{transform:none}}
.routes__days{display:grid;gap:34px}

/* day header: "CITY ROUTE" ......... "DAY 1 · 4 VENUES" */
.day__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:0 0 10px 22px;
}
.day__label{
  font-family:var(--display);font-size:26px;color:var(--plum);
  text-transform:uppercase;letter-spacing:.01em;
}
.day__count{
  font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--plum);white-space:nowrap;
}

/* the lavender track the cards sit on */
.day__list{
  background:#F3E8F3;
  border-radius:10px;
  padding:8px 8px 8px 22px;
  display:grid;
}

.rcard{
  position:relative;
  display:grid;grid-template-columns:1fr 96px;align-items:center;gap:10px;
  width:100%;text-align:left;
  padding:12px 12px 12px 28px;
  border-radius:8px;background:var(--white);
  transition:transform .16s ease,box-shadow .16s ease;
}
.rcard--static{cursor:default}
.rcard[data-link]:hover,.rcard[data-link]:focus-visible{
  transform:translateX(2px);box-shadow:0 6px 18px rgba(107,20,80,.16);outline:none;
}
.rcard[data-link]:focus-visible{box-shadow:0 0 0 3px var(--pink)}

/* badge / pin hangs off the left edge, as drawn */
.rcard__badge{
  position:absolute;left:-22px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:grid;place-items:center;pointer-events:none;
}
.rcard__badge img{width:100%;height:100%;object-fit:contain}
.rcard__badge--pin img{width:74%;height:74%}

.rcard__name{
  font-family:var(--display);
  font-size:17px;color:var(--magenta);
  text-transform:uppercase;letter-spacing:.01em;
  margin:0 0 5px;line-height:1.1;
}
.rcard__grid{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 44px minmax(0,54px);
  gap:3px 7px;margin:0;align-items:baseline;
}
.rcard__grid dt{
  font-size:6.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);
  align-self:center;white-space:nowrap;
}
.rcard__grid dd{
  margin:0;font-size:8.5px;letter-spacing:0;text-transform:uppercase;color:var(--plum);
  white-space:nowrap;
}
.rcard__glyph{justify-self:end;display:grid;place-items:center;height:52px}
.rcard__glyph img{max-height:52px;width:auto;object-fit:contain}

/* connector between stops: dotted rail + mode pill(s) */
.leg{
  position:relative;
  padding:7px 0 7px 0;
  display:flex;align-items:center;gap:9px;
}
.leg::before{
  content:"";position:absolute;left:0;top:0;bottom:0;
  border-left:2px dotted #C9A0C4;
}
.leg__pill{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--magenta);color:var(--white);
  border-radius:999px;padding:2px 12px 2px 2px;
  font-size:9.5px;letter-spacing:.02em;white-space:nowrap;
}
.leg__pill img{
  width:18px;height:18px;border-radius:50%;
  background:var(--white);object-fit:cover;flex:0 0 auto;
}
.leg__or{font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--plum)}

/* ---------------- 5. LIGHTBOX ---------------- */
.lightbox{
  position:fixed;inset:0;z-index:70;
  background:rgba(12,18,32,.94);
  display:grid;
  grid-template-columns:64px 1fr 64px;
  grid-template-rows:1fr auto;
  grid-template-areas:"prev stage next" "strip strip strip";
  align-items:center;
  animation:fade .2s ease;
}
.lightbox__stage{grid-area:stage;margin:0;display:grid;place-items:center;padding:28px 8px;min-height:0}
.lightbox__stage img{max-width:100%;max-height:72vh;width:auto;border-radius:6px;object-fit:contain}
.lightbox__close{
  position:absolute;top:18px;right:22px;z-index:2;
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.12);
}
.lightbox__close img{width:18px;filter:brightness(0) invert(1)}
.lightbox__close:hover{background:rgba(255,255,255,.24)}
.lightbox__nav{
  color:#fff;font-size:40px;line-height:1;opacity:.7;
  height:100%;display:grid;place-items:center;
}
.lightbox__nav--prev{grid-area:prev}
.lightbox__nav--next{grid-area:next}
.lightbox__nav:hover{opacity:1;background:rgba(255,255,255,.06)}
.lightbox__strip{
  grid-area:strip;
  display:flex;gap:10px;justify-content:center;flex-wrap:nowrap;
  overflow-x:auto;padding:14px 18px 22px;
}
.lightbox__strip button{padding:0;border-radius:5px;overflow:hidden;flex:0 0 auto;
  opacity:.55;transition:opacity .2s,box-shadow .2s}
.lightbox__strip img{width:104px;height:70px;object-fit:cover}
.lightbox__strip button.is-active{opacity:1;box-shadow:0 0 0 3px #fff}
.lightbox__strip button:hover{opacity:.9}

/* =============================================================
   RESPONSIVE
   ============================================================= */

/* tablet */
/* =============================================================
   FULL-SCREEN MAP — every screen size (v6). No heading, no key.
   ============================================================= */
html,body{height:100%;overflow:hidden}
/* heading kept for screen readers, hidden on screen */
.page__head{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
/* logo + menu float over the map */
.topbar{position:fixed;top:0;left:0;right:0;z-index:20;pointer-events:none}
.topbar>*{pointer-events:auto}
.mapwrap{padding:0}
.map{
  max-width:none;margin:0;
  height:100vh;height:100dvh;
  touch-action:none;cursor:grab;
  -webkit-user-select:none;user-select:none;
}
.map:active{cursor:grabbing}
/* no will-change here: app.js sets it only while the map moves, so the
   browser redraws the HD art sharply once it settles */
.map__canvas{position:absolute;top:0;left:0;width:100%}
.map__art{pointer-events:none;-webkit-user-drag:none}

@media (max-width:900px){
  .venue__body{grid-template-columns:1fr;gap:20px}
  .venue{padding:22px 20px 26px}
}

/* =============================================================
   MOBILE — follows the Webflow demo's flow:
   River/City tabs → zoomed map → full-screen venue card
   → Photos/Artists/About → lightbox; floating route button
   → full-screen route list. Design language stays the .ai's.
   ============================================================= */
@media (max-width:680px){
  :root{--topbar-h:64px}

  .topbar{padding:14px 14px 0}
  .topbar__logo img{width:88px}
  .topbar__menu{width:78px;height:58px;margin-top:-8px}
  .topbar__menu span{font-size:13px}

  /* zoom controls, lifted clear of the City tab */
  .zoomctl{
    display:flex;flex-direction:column;
    position:absolute;left:12px;bottom:64px;z-index:6;
  }

  .marker{transform-origin:50% 50%}

  /* route tabs on the bottom edge; when a route is open they ride the
     top edge of the bottom sheet (tap the open one to close, the other
     to swap) */
  .sidetab{
    bottom:0;padding:10px 18px 12px;font-size:15px;
    min-width:130px;text-align:center;   /* equal widths: the pair is truly centred */
    border-radius:14px 14px 0 0;
  }
  /* centred as a pair on the bottom edge: River left, City right (v8) */
  /* v11: no route tabs on phones */
  .sidetab{display:none !important}
  .sidetab[data-route="river"]{right:calc(50% + 4px)}
  .sidetab[data-route="city"]{left:calc(50% + 4px)}
  /* v15: tabs never move */

  /* route list: bottom sheet; the route's area of the map stays in view above */
  .routes{
    top:auto;right:0;bottom:0;left:0;
    width:auto;min-width:0;height:var(--sheet-h);
    background:var(--page);
    border-radius:18px 18px 0 0;
    box-shadow:0 -10px 30px rgba(29,44,74,.18);
    padding:52px 16px 40px;
    animation:slideUp .34s ease;
  }
  .routes::before{            /* sheet handle */
    content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:2px;background:var(--line);
  }
  .routes.is-left{animation:slideUp .34s ease}
  @keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
  .routes__close{top:14px;right:14px}
  .day__head{margin-left:14px}
  .day__label{font-size:21px}
  .day__list{padding:8px 6px 8px 18px}
  .rcard{grid-template-columns:1fr 62px;padding:10px 8px 10px 22px}
  .rcard__badge{left:-18px;width:36px;height:36px}
  .rcard__name{font-size:14px}
  .rcard__glyph{height:40px}
  .rcard__glyph img{max-height:40px}
  .rcard__grid{grid-template-columns:46px minmax(0,1fr);gap:3px 8px}
  .rcard__grid dt{font-size:6px}
  .rcard__grid dd{font-size:8px;white-space:normal}

  /* venue card: inset sheet, exactly like the Webflow demo */
  .venue{
    top:0;left:0;right:0;bottom:0;transform:none;
    width:auto;max-width:none;height:auto;max-height:none;
    margin:15px;border-radius:20px;
    padding:18px 16px 22px;
    animation:fade .25s ease;
  }
  .venue__name{font-size:26px;margin-bottom:14px}
  .venue__th{font-size:15px;margin:-8px 40px 14px 0}
  .venue__body{grid-template-columns:1fr;gap:14px}
  .venue__hero img{height:190px}
  .venue__gallery{grid-template-columns:1fr 1fr}
  .tabs{gap:8px}
  .tab{padding:8px 6px;font-size:10px}
  .artistlist{grid-template-columns:1fr 1fr;font-size:9.5px}
  .amenities{grid-template-columns:1fr}
  .facts{grid-template-columns:auto 1fr;gap:3px 14px}
  .vsec--whatson{margin-top:0}

  .lightbox{grid-template-columns:1fr;grid-template-areas:"stage" "strip"}
  .lightbox__nav{display:none}
  .lightbox__strip img{width:78px;height:54px}
}

/* =============================================================
   DESKTOP — route tabs on the side edges, landscape photos.
   (Full-screen map rules are shared, above.)
   ============================================================= */
@media (min-width:681px){
  /* 58%, not 50%: at mid-height the left tab sat on Wat Arun (4). Below
     it, both edges are clear of every label at common desktop sizes. */
  .sidetab{top:58%;padding:24px 12px;font-size:16px;writing-mode:vertical-rl}
  .sidetab[data-side="right"]{right:0;border-radius:14px 0 0 14px;transform:translateY(-50%)}
  .sidetab[data-side="left"] {left:0; border-radius:14px 0 0 14px;transform:translateY(-50%) rotate(180deg)}
  /* an open drawer carries its tab on its inner edge */
  body[data-route] .sidetab.is-open[data-side="right"]{right:var(--panel-w)}
  body[data-route] .sidetab.is-open[data-side="left"] {left:var(--panel-w)}

  /* venue photos cropped landscape 3:2 */
  .venue__hero img{height:auto;aspect-ratio:3/2}
  .venue__gallery button{aspect-ratio:3/2}
}

/* two-column card: fixed height, each column scrolls on its own */
@media (min-width:901px){
  .venue{display:flex;flex-direction:column;height:min(780px,88vh);overflow:hidden}
  .venue__body{flex:1;min-height:0;align-items:stretch}
  .venue__media,.venue__info{
    min-height:0;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  }
  .venue__info{padding-right:12px}
  .venue__info:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* =====================================================================
   v13 — venue card + route panel redesign (overrides the rules above)
   ===================================================================== */

/* one, thinner heading weight everywhere Malila is a heading */
.venue__name,.vsec__title,.rcard__name,.day__label{font-weight:500}

/* ---------- venue card ---------- */
.venue{background:var(--white)}
.tab{background:#F3E8F3}
.tab.is-active{background:var(--pink)}

/* facts and GOOD TO KNOW share one label column */
:root{--fact-label:108px}
.facts{grid-template-columns:var(--fact-label) 1fr;column-gap:0}
.gtk{
  display:grid;grid-template-columns:var(--fact-label) 1fr;align-items:start;
  margin-top:18px;
}
.gtk__label{
  padding-top:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#1f1f1f;
}
.gtk .amenities{
  grid-auto-flow:column;grid-template-columns:1fr 1fr;
  gap:8px 14px;margin:0;
}
.gtk .amenities li{grid-template-columns:22px 1fr;gap:8px;font-size:11px;color:var(--grey)}
.gtk .amen__icon{width:22px;height:22px}

/* About: grey body, plain subheadings in the body font */
.about{white-space:normal}
.about__h{
  margin:14px 0 2px;
  font-family:var(--body);font-size:11.5px;font-weight:700;color:#5c5c5c;
}
.about__h:first-child{margin-top:0}
.about__p{margin:0;font-size:11.5px;line-height:1.75;color:var(--grey);white-space:pre-line}

/* ---------- route panel ---------- */
.routes{
  z-index:60;                                   /* above the logo and the menu button */
  background:var(--white);
  box-shadow:0 0 40px rgba(29,44,74,.14);
  padding:30px 30px 46px;
}
.routes__close{top:22px;right:22px}
.routes__days{gap:30px}
.day__head{margin:0 44px 12px 28px}            /* clear of the close button */
.day__label{font-size:30px;letter-spacing:0}
.day__count{font-size:13px;font-weight:600;letter-spacing:.04em}
.day__list{background:#F1E6F0;border-radius:12px;padding:10px 10px 10px 28px}

.rcard{grid-template-columns:1fr 90px;gap:12px;padding:14px 14px 14px 34px;border-radius:10px}
/* the number sits level with the venue name, hanging off the card edge */
.rcard__badge{top:6px;transform:none;left:-26px;width:52px;height:52px}
.rcard__badge--pin img{width:74%;height:74%}
.rcard__name{font-size:19px;margin:0 0 8px;line-height:1.1}
.rcard__grid{grid-template-columns:42px minmax(0,1fr) 54px minmax(0,58px);gap:5px 8px}
.rcard__grid dt{font-size:7.5px;letter-spacing:.05em}
.rcard__grid dd{font-size:10px;font-weight:500}
.rcard__glyph{height:auto;width:90px}
.rcard__glyph img{max-height:none;width:calc(var(--gw,64) * 1px);height:calc(var(--gh,48) * 1px);object-fit:contain}

/* the dotted rail runs through the middle of the mode icons */
.leg{padding:8px 0 8px 32px;gap:10px}
.leg::before{left:43px;border-left:2px dotted #C9A0C4}
.leg__pill{position:relative;font-size:10px;padding:2px 13px 2px 2px;gap:8px}
.leg__pill img{width:20px;height:20px}
.leg__or{font-size:9.5px}

@media (max-width:680px){
  :root{--fact-label:96px}
  .gtk .amenities{gap:7px 10px}

  /* Google Maps: a floating button in the card's bottom-right corner */
  .gmaps--fab{
    position:fixed;right:28px;bottom:28px;z-index:55;margin:0;
    padding:11px 14px 11px 16px;border-radius:999px;
    box-shadow:0 8px 24px rgba(29,44,74,.28);
    font-size:12px;gap:10px;
  }
  .venue__body{padding-bottom:56px}            /* room to scroll past the button */

  .routes{padding:44px 14px 40px;z-index:60}
  .routes__close{top:12px;right:12px}
  .day__head{margin:0 40px 10px 20px}
  .day__label{font-size:22px}
  .day__count{font-size:11px}
  .day__list{padding:8px 8px 8px 22px}
  .rcard{grid-template-columns:1fr 64px;gap:8px;padding:12px 10px 12px 26px}
  .rcard__badge{left:-21px;top:5px;width:42px;height:42px}
  .rcard__name{font-size:15px;margin-bottom:6px}
  .rcard__grid{grid-template-columns:44px minmax(0,1fr);gap:4px 8px}
  .rcard__grid dt{font-size:7px}
  .rcard__grid dd{font-size:9.5px;white-space:normal}
  .rcard__glyph{width:64px}
  .rcard__glyph img{width:calc(var(--gw,64) * .72px);height:calc(var(--gh,48) * .72px)}
  .leg{padding-left:26px}
  .leg::before{left:36px}
}

/* v13 refinements after the side-by-side with the reference cards */
.venue__close,.routes__close{outline:none}
.venue__close:focus-visible,.routes__close:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.venue__close img{width:20px}
.routes__close svg{width:24px;height:24px;stroke-width:2}
.day__count{font-size:14px}
.rcard__badge{top:-1px;left:-23px;width:46px;height:46px}
.rcard__name{font-size:20px}
.rcard__grid{grid-template-columns:44px minmax(0,1fr) 58px minmax(0,60px);gap:6px 8px}
.rcard__grid dt{font-size:8px}
.rcard__grid dd{font-size:11px}
@media (max-width:680px){
  .rcard__badge{top:0;left:-20px;width:40px;height:40px}
  .rcard__name{font-size:15px}
  .rcard__grid dd{font-size:10px}
  .rcard__grid dt{font-size:7px}
}
/* columns in the reference's proportions: label · value (≈⅓ of the card) · label · value · building */
.rcard{grid-template-columns:1fr 72px;padding:14px 12px 14px 34px}
.rcard__grid{grid-template-columns:38px minmax(150px,1fr) 56px minmax(0,50px)}
.rcard__glyph{width:72px}
.rcard__glyph img{max-width:72px}
.rcard__name.is-brand{text-transform:none}       /* e.g. centralwOrld keeps its own spelling */
@media (max-width:680px){
  .rcard{grid-template-columns:1fr 58px}
  .rcard__grid{grid-template-columns:44px minmax(0,1fr)}
  .rcard__glyph{width:58px}
  .rcard__glyph img{max-width:58px}
}
@media (max-width:680px){
  :root{--fact-label:88px}
  .gtk .amenities{gap:7px 8px}
  .gtk .amenities li{grid-template-columns:20px 1fr;gap:6px;font-size:10.5px;white-space:nowrap}
  .gtk .amen__icon{width:20px;height:20px}
  .gtk__label{padding-top:4px;font-size:10px}
}

/* =====================================================================
   v14
   ===================================================================== */
/* GOOD TO KNOW reads like the facts above it: same grey, letter-spaced
   label; small icons, because this is secondary information */
.gtk{margin-top:14px}
.gtk__label{
  padding-top:2px;
  font-size:10.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey);
}
.gtk .amenities{gap:6px 14px}
.gtk .amenities li{grid-template-columns:16px 1fr;gap:7px;font-size:10.5px;color:var(--grey);line-height:16px}
.gtk .amen__icon{width:16px;height:16px}

@media (max-width:680px){
  .gtk__label{padding-top:1px;font-size:10.5px}
  .gtk .amenities{gap:6px 8px}
  .gtk .amenities li{grid-template-columns:15px 1fr;gap:6px;font-size:10px;line-height:15px}
  .gtk .amen__icon{width:15px;height:15px}
}

/* =====================================================================
   v15 — phone map (V18) + fixed route tabs
   ===================================================================== */
/* V18's "gradient overlay" layer, rebuilt in CSS: white fading to clear,
   top 0–24.9% and bottom 73.6–100% of the phone map (curve sampled from the .ai) */
.map__fade{position:absolute;left:0;right:0;pointer-events:none;z-index:1;display:none}
body[data-art] .map__fade{display:block}           /* v16: the V18 fade on desktop too */
.map__fade--top{
  top:0;height:24.9%;
  background:linear-gradient(to bottom,
    #fff 0%, rgba(255,255,255,.99) 20%, rgba(255,255,255,.92) 40%,
    rgba(255,255,255,.75) 60%, rgba(255,255,255,.46) 80%,
    rgba(255,255,255,.09) 96%, rgba(255,255,255,0) 100%);
}
.map__fade--bottom{
  top:73.6%;bottom:0;
  background:linear-gradient(to top,
    #fff 0%, rgba(255,255,255,.99) 19%, rgba(255,255,255,.93) 38%,
    rgba(255,255,255,.78) 57%, rgba(255,255,255,.53) 76%,
    rgba(255,255,255,.13) 95%, rgba(255,255,255,0) 100%);
}
/* route tabs never move up or down */
.sidetab{transition:right .34s ease,left .34s ease,background .2s ease,opacity .2s ease}
/* fixed height that's clear of every venue at all tested desktop sizes
   (1024×768 … 2560×1440, incl. 5:4 and short windows) */
@media (min-width:681px){ .sidetab{top:84%} }

/* =====================================================================
   v16 — card grid in thirds, larger body text, route heading colour
   ===================================================================== */
/* facts: label = first third, value = the other two; items: three equal thirds */
.facts{grid-template-columns:1fr 2fr;font-size:12px;gap:6px 0}
.gtk{display:block;margin-top:16px}
.gtk .amenities{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;grid-template-rows:none;gap:10px 12px}
.gtk .amenities li{grid-template-columns:16px 1fr;gap:7px;font-size:12px;line-height:1.35;white-space:normal;align-items:start}
.gtk .amen__icon{width:16px;height:16px;margin-top:1px}

/* body text: 12-13px minimum for reading text; small capital labels ~10px */
.about__p{font-size:13px;line-height:1.7}
.artistlist{font-size:11.5px;line-height:1.85}
.tab{font-size:11.5px}
.gmaps{font-size:13px}

/* About subheadings: all caps, italic, not bold — same body font */
.about__h{font-weight:400;font-style:italic;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;color:#5c5c5c;margin-bottom:3px}

/* route panel: heading and day count in the venue-name colour; more air under names */
.day__label,.day__count{color:var(--magenta)}
.rcard__name{margin-bottom:13px}
.rcard__grid dt{font-size:9.5px}
.rcard__grid dd{font-size:12px}
.rcard__grid{grid-template-columns:44px minmax(160px,1fr) 64px minmax(0,56px);gap:7px 8px}

@media (max-width:680px){
  .facts{font-size:12px}
  .gtk .amenities{gap:9px 8px}
  .gtk .amenities li{grid-template-columns:15px 1fr;gap:5px;font-size:11.5px}
  .gtk .amen__icon{width:15px;height:15px}
  .about__p{font-size:13px}
  .artistlist{font-size:11px}
  .rcard__name{margin-bottom:10px}
  .rcard__grid{grid-template-columns:52px minmax(0,1fr)}
  .rcard__grid dt{font-size:9px}
  .rcard__grid dd{font-size:11.5px}
}
.rcard__name{display:block}      /* inline spans ignore margin — needed for the space under the name */
/* one shared thirds grid (same gap) so the value column lines up with the
   second item column */
.facts{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px}
.facts dt{grid-column:1}
.facts dd{grid-column:2 / span 2}
@media (max-width:680px){ .facts{column-gap:8px} }
/* space under the venue name = space above it (measured on the rendered ink: 16px each) */
.rcard__name{margin-bottom:7px}
@media (max-width:680px){ .rcard__name{margin-bottom:5px} }

/* v16 update 3: phone card hero is landscape 3:2 */
@media (max-width:680px){
  .venue__hero img{height:auto;aspect-ratio:3/2}
}
/* v16 update 4: horizontal swipes belong to the lightbox, vertical still scrolls */
.lightbox__stage{touch-action:pan-y}

/* v16 update 6: icon items sit in columns 2-3 only, under the facts values */
.gtk .amenities{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px}
.gtk .amenities li:nth-child(odd){grid-column:2}
.gtk .amenities li:nth-child(even){grid-column:3}
@media (max-width:680px){ .gtk .amenities{column-gap:8px} }
/* v16 update 6: route tab text always on one line */
.sidetab{white-space:nowrap}
/* short windows: keep the one-line tab fully on screen */
@media (min-width:681px){ .sidetab{top:min(84%, calc(100% - 84px))} }

/* v16 update 5: venues not open yet (COMING_SOON in data.js) */
.marker.is-soon img,.bldg.is-soon{filter:grayscale(1) opacity(.55)}
.marker.is-soon.is-hot img,.bldg.is-soon.is-hot{filter:grayscale(1) opacity(.75)}
.marker.is-soon.is-hot{filter:none}
.soon{
  position:fixed;z-index:80;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 18px;border-radius:12px;background:var(--white);
  box-shadow:0 8px 24px rgba(60,20,60,.18);text-align:center;white-space:nowrap;
  animation:fade .2s ease;
}
.soon strong{font-family:var(--display);font-size:17px;letter-spacing:.04em;color:var(--plum);font-weight:normal}
.soon span{font-size:12px;letter-spacing:.08em;color:var(--grey)}
.soon--centre{left:50%;top:50%;transform:translate(-50%,-50%)}
.soon--above::after,.soon--below::after{content:"";position:absolute;left:var(--ax,50%);width:12px;height:12px;background:var(--white);transform:translateX(-50%) rotate(45deg)}
.soon--above::after{bottom:-6px}
.soon--below::after{top:-6px}

/* ================= v17: partner venue (Louis Vuitton) =================
   Own marker art; a black card on a dark scrim. Titles in Josefin Sans,
   text white, icons white, Google Maps as an outlined button.          */
.marker--feature{transform-origin:50% 100%}
.marker--feature.is-hot,.marker--feature:focus-visible{transform:scale(1.06)}
.marker--feature.is-active{transform:scale(1.08);filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.scrim.scrim--dark{background:rgba(0,0,0,.76);backdrop-filter:none}

.venue.venue--feature{background:#000;color:#fff}
.venue--feature .venue__close img{filter:brightness(0) invert(1)}
.venue--feature .venue__close:hover{background:rgba(255,255,255,.14)}
.venue--feature .venue__tag{
  display:block;margin:0 0 8px;font-family:var(--body);font-size:10.5px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:none;padding:0}
.venue--feature .venue__name{
  font-family:"Josefin Sans",var(--body);font-weight:600;color:#fff;
  font-size:30px;line-height:1.18;letter-spacing:.04em;text-transform:uppercase;margin-bottom:22px}
.venue--feature .vsec__title{
  font-family:"Josefin Sans",var(--body);font-weight:600;color:#fff;
  font-size:17px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.venue--feature .rule{border:0;border-top:1px solid rgba(255,255,255,.22);margin:18px 0}
.venue--feature .facts dt,.venue--feature .facts dd{color:#fff;text-transform:uppercase;letter-spacing:.03em}
.venue--feature .facts dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.venue--feature .fsep{opacity:.7}
.venue--feature .fbook{color:#fff;text-decoration:none}
.venue--feature a.fbook{text-decoration:underline;text-underline-offset:3px}
.venue--feature .fnote{font-size:8.5px;letter-spacing:.06em;color:#8c8c8c;text-transform:uppercase}
.venue--feature .fabout{font-size:12px;line-height:1.6;color:#fff;margin:0 0 10px;text-transform:uppercase;letter-spacing:.02em}
.venue--feature .fartists{list-style:none;margin:0;padding:0;font-size:12px;letter-spacing:.03em;text-transform:uppercase}
.venue--feature .fartists li{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px;padding:3px 0}
.venue--feature .fartists__dates{grid-column:2 / span 2}
.venue--feature .fartists__dates::before{content:"|";margin-right:10px;opacity:.7}
/* white icons: dark tile → white, white glyph → black */
.venue--feature .amen__icon{filter:grayscale(1) brightness(.6) contrast(100) invert(1)}
.venue--feature .gtk{margin-top:0}
.venue--feature .gtk .amenities{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
.venue--feature .gtk .amenities li{grid-column:auto;color:#fff}
.venue--feature .gmaps{
  display:flex;align-items:center;justify-content:space-between;margin-top:16px;
  background:transparent;color:#fff;border:1px solid #fff;border-radius:8px;
  padding:11px 16px;box-shadow:none}
.venue--feature .gmaps img{display:block}   /* same white icon as the other cards, right side */
.venue--feature .gmaps:hover{background:rgba(255,255,255,.1)}
.venue--feature .venue__hero,.venue--feature .venue__gallery button{border-radius:10px;overflow:hidden}
.venue--feature .venue__gallery{grid-template-columns:1fr;margin-top:10px}
.venue--feature .venue__gallery button{aspect-ratio:auto}
.venue--feature .venue__gallery img,.venue--feature .venue__hero img{height:auto;aspect-ratio:auto;object-fit:cover}
.venue--feature .venue__info{scrollbar-color:rgba(255,255,255,.35) transparent}
@media (max-width:680px){
  .venue--feature .venue__name{font-size:22px;margin-bottom:16px}
  .venue--feature .venue__media{margin-bottom:18px}
  .venue--feature .fartists li{grid-template-columns:1fr 1fr}
  .venue--feature .fartists__dates{grid-column:2}
}
/* artists: one shared name column so every "| dates" lines up, names never wrap */
.venue--feature .fartists{display:grid;grid-template-columns:max-content 1fr;column-gap:22px;row-gap:6px}
.venue--feature .fartists li{display:contents}
.venue--feature .fartists__dates{grid-column:auto}
@media (max-width:680px){ .venue--feature .fartists{column-gap:14px} .venue--feature .fartists__dates{grid-column:auto} }
@media (max-width:680px){ .venue--feature .venue__name{font-size:19px;letter-spacing:.03em;padding-right:34px} }
@media (max-width:680px){ .venue--feature .venue__name{font-size:18px;padding-right:0} .venue--feature .venue__tag{padding-right:40px} }

/* v17 update: phones — LV title at the same size as other venue titles;
   only the photo (the poster is desktop-only) */
@media (max-width:680px){
  .venue.venue--feature .venue__name{font-size:26px;line-height:1.15}
  .venue--feature .venue__gallery{display:none}
}

/* ================= v17: main-site menu (bkkartbiennale.com) =================
   Rules below are copied from the main site's Webflow stylesheet (only the ones
   the menu uses). The first block recreates the page defaults the menu relies
   on (Webflow's body font/colour, its a/img resets), scoped to .nav-bar so the
   map's own styles are untouched.                                              */
:root{--b26-lightblue:#def1fb;--b26-brightpink:#e94e7c;--dark-green:#013d1d;--b26-lesslightblue:#e8f5fd}
.nav-bar{font-family:malila,sans-serif;font-size:18px;line-height:28px;letter-spacing:.1em;
  overflow-wrap:anywhere;color:var(--b26-brightpink);pointer-events:none}
.nav-bar > *{pointer-events:auto}
.nav-bar *{box-sizing:border-box}
.nav-bar a{background-color:transparent;color:var(--b26-brightpink);text-decoration:none}
.nav-bar img{border:0;vertical-align:middle;max-width:100%;display:inline-block;object-fit:cover}
.w-inline-block{
  max-width: 100%;
  display: inline-block;
}
.nav-menu-text{
  margin-top: -2px;
  font-size: 16px;
}
.nav-menu-text.b26-nav-colour{
  color: var(--b26-lightblue);
  margin-left: auto;
  margin-right: auto;
}
.nav-menu-button{
  z-index: 2;
  align-items: center;
  height: 50px;
  padding: 18px;
  display: flex;
  position: relative;
}
.nav-menu-button.bb-nav-colour{
  justify-content: flex-end;
  align-items: center;
  width: 150px;
  height: 100px;
  margin-top: 20px;
  padding: 25px 30px 20px 28px;
}
.nav-logo{
  height: 50px;
  margin-top: 45px;
  position: absolute;
}
.nav-logo.lime{
  opacity: 0;
}
.nav-logo-container{
  z-index: 1;
  padding-left: 0;
}
.hide{
  display: none;
}
.nav-menu{
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-image: url("assets/webflow/img/b26-menu-graphicx.webp"), linear-gradient(to bottom, var(--b26-lesslightblue), var(--b26-lesslightblue));
  background-position: 100% 100%, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: auto 50%, auto;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100vw;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
  padding: 100px 40px 167px;
  display: none;
  position: fixed;
  inset: 0%;
  overflow: hidden;
}
.nav-grid{
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1.25fr 1.25fr 1.25fr;
  grid-auto-columns: 1fr;
  place-items: start;
  height: 100%;
  margin-top: 57px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.1vw;
  display: grid;
}
.nav-grid.between-nav-grid{
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  grid-template-columns: auto;
  width: 100%;
  height: 80%;
  margin-top: 60px;
  display: flex;
}
.nav-social-link{
  object-fit: contain;
  width: 18px;
  min-width: 18px;
  height: 18px;
}
.nav-social-link.social-link-larger-icon{
  width: 26px;
  height: 26px;
}
.nav-social-container{
  grid-column-gap: 30px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 20px 20px 20px 1px 20px;
  grid-auto-columns: 1fr;
  place-items: center start;
  display: grid;
}
.nav-social-container.nav-social-larger-icon{
  grid-template-columns: 26px 26px 26px 26px 1px;
}
.nav-footer{
  z-index: 1;
  justify-content: space-between;
  width: 100%;
  display: flex;
  position: relative;
}
.nav-footer.hide{
  display: none;
}
.nav-sub-menu{
  z-index: 1;
  text-align: left;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
  position: relative;
}
.nav-bar{
  z-index: 10;
  width: 100%;
  color: var(--dark-green);
  background-color: #0000;
  justify-content: space-between;
  padding: 20px 20px 20px 30px;
  transition: all .2s;
  display: flex;
  position: fixed;
  top: 0;
}
.nav-bar:hover{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav-bar.nav-homepage{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-top: 0;
  padding-bottom: 0;
}
.nav-menu-close-button{
  object-fit: contain;
  width: 20px;
  height: 20px;
  display: none;
}
.nav-row-grid{
  z-index: 1;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1.5fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  display: grid;
  position: relative;
}
.nav-row-grid.hide{
  display: none;
}
.nav-link-container{
  display: block;
  position: static;
}
.nav-link-container.nav-link-extra-padding{
  padding-top: 15px;
}
.nav-link-container.hide{
  display: none;
}
.nav-diag-arrow{
  z-index: 1;
  width: 2em;
  margin-top: -20px;
  margin-left: 1em;
  position: relative;
}
.nav-diag-arrow.nav-sub-arrow{
  width: .8em;
  margin-top: -3px;
  margin-left: .5em;
}
.preload{
  display: none;
}
.between-nav-grid{
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1.75fr 1fr 1.25fr;
  grid-auto-columns: 1fr;
  place-items: start;
  height: 100%;
  margin-top: 57px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.1vw;
  display: grid;
}
.b26-nav-link{
  z-index: 1;
  color: var(--b26-brightpink);
  text-transform: uppercase;
  margin-bottom: .1em;
  font-size: 3vw;
  font-weight: 400;
  line-height: 1em;
  display: inline-block;
  position: relative;
}
.b26-nav-link.nav-link-sub{
  margin-bottom: 1em;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 1.3vw;
  font-weight: 400;
}
.bb-nav-contact-link{
  color: #ead08f;
  font-size: 1.5em;
}
.b26-nav-link-sub{
  z-index: 1;
  width: 240px;
  color: var(--b26-brightpink);
  text-align: center;
  margin-top: 4px;
  font-size: .8vw;
  line-height: 1.4em;
  position: relative;
}
.nav-horizontal{
  z-index: 1;
}
.nav-smc{
  justify-content: flex-start;
  align-items: flex-end;
  height: 101%;
  display: block;
}
.text-inline{
  font-size: .8vw;
  line-height: 16px;
  display: inline-block;
}
.nav-smc-image{
  width: 240px;
  margin-bottom: 45px;
}
.nav-row{
  z-index: 1;
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  border-top: 1px solid var(--b26-brightpink);
  align-items: flex-end;
  width: 100%;
  padding-top: 80px;
  display: flex;
  position: relative;
}
.nav-row-column{
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}
.b26-nav-button-bg{
  object-fit: contain;
  width: 150px;
  height: 100px;
  margin-top: 20px;
  position: absolute;
  inset: 0% 20px 0% auto;
}
.nav-vj{
  justify-content: flex-start;
  align-items: flex-end;
  max-width: 220px;
  margin-top: -.6em;
  display: block;
}
.b26-vj-logo{
  width: 100%;
  transform: scale3d(1none, 1none, 1none);
  transform-style: preserve-3d;
}
.vj-subtext{
  z-index: 1;
  color: var(--b26-brightpink);
  text-align: center;
  margin-top: 20px;
  font-size: .8vw;
  line-height: 1.4em;
  position: relative;
}
@media screen and (min-width: 1440px){.nav-menu{
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }.b26-nav-link-sub{
    line-height: 1em;
  }.text-inline{
    font-size: 12px;
  }.nav-vj{
    max-width: 230px;
  }.vj-subtext{
    margin-top: 20px;
    font-size: .6vw;
  }}
@media screen and (max-width: 991px){.nav-menu-text{
    font-size: 18px;
  }.nav-menu-text.b26-nav-colour{
    font-size: 16px;
  }.nav-menu-button{
    height: 32px;
  }.nav-menu-button.bb-nav-colour{
    width: 130px;
    height: 90px;
  }.nav-logo{
    height: 40px;
  }.nav-menu{
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    padding: 50px 30px 117px;
  }.nav-grid{
    flex-direction: column;
    justify-content: flex-start;
    font-size: 12px;
    display: flex;
  }.nav-grid.between-nav-grid{
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 70px;
    display: flex;
  }.nav-social-link{
    width: 18px;
    height: 18px;
  }.nav-footer{
    flex: 1;
  }.nav-row-grid{
    display: block;
  }.nav-row-grid.hide{
    display: none;
  }.nav-link-container.nav-link-container-top-margin{
    margin-top: 25px;
  }.nav-diag-arrow{
    width: 22px;
    margin-top: -15px;
  }.between-nav-grid{
    flex-direction: column;
    justify-content: flex-start;
    font-size: 12px;
    display: flex;
  }.b26-nav-link{
    margin-bottom: 0;
    font-size: 24px;
  }.b26-nav-link.nav-link-sub{
    font-size: 16px;
  }.b26-nav-link-sub{
    width: 130px;
    font-size: 6px;
  }.text-inline{
    line-height: 9px;
  }.nav-smc-image{
    width: 130px;
    margin-bottom: 30px;
  }.nav-row{
    padding-top: 69px;
  }.nav-row-column{
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 10px;
  }.b26-nav-button-bg{
    width: 130px;
    height: 90px;
  }.nav-vj{
    max-width: 130px;
  }.vj-subtext{
    font-size: 6px;
  }}
@media screen and (max-width: 767px){.nav-menu-text{
    font-size: 16px;
  }.nav-menu-button{
    height: 32px;
    padding: 10px;
  }.nav-menu-button.bb-nav-colour{
    margin-top: 0;
    padding-right: 20px;
  }.nav-logo{
    height: 32px;
    margin-top: 30px;
  }.nav-menu{
    padding: 30px 30px 97px;
  }.nav-social-link{
    width: 20px;
    height: 20px;
  }.nav-social-link.social-link-larger-icon{
    width: 24px;
    height: 24px;
  }.nav-bar{
    height: 62px;
    padding: 15px 10px 15px 20px;
  }.nav-bar.nav-homepage{
    background-color: #0000;
  }.nav-row-grid{
    margin-bottom: -20px;
  }.text-inline{
    line-height: 8px;
  }.nav-row-column.nav-row-extra-margin{
    margin-bottom: 15px;
  }.b26-nav-button-bg{
    margin-top: 0;
    margin-right: -15px;
  }}
@media screen and (max-width: 479px){.nav-menu-button{
    flex: 0 auto;
  }.nav-menu-button.bb-nav-colour{
    padding-right: 10px;
  }.nav-logo-container{
    flex: 0 auto;
  }.nav-menu{
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    background-image: url("assets/webflow/img/b26-menu-graphic-mbx.webp"), linear-gradient(to bottom, var(--b26-lightblue), var(--b26-lightblue));
    background-position: 100% 110%, 0 0;
    background-size: 75%, auto;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    padding-bottom: 85px;
    padding-left: 20px;
    padding-right: 20px;
  }.nav-footer{
    align-items: flex-end;
    padding-bottom: 60px;
  }.nav-bar{
    padding-left: 10px;
  }.nav-row-grid{
    width: 100%;
  }.nav-row-grid.hide{
    display: none;
  }.nav-diag-arrow{
    width: 17px;
    margin-top: -10px;
  }.nav-diag-arrow.nav-sub-arrow{
    width: .8em;
  }.b26-nav-link{
    font-size: 24px;
  }.b26-nav-link.nav-link-sub{
    font-size: 14px;
  }.bb-nav-contact-link{
    flex: 0 auto;
    margin-bottom: -6px;
  }.b26-nav-link-sub{
    width: auto;
  }.nav-horizontal{
    z-index: 0;
    flex: 0 auto;
    position: relative;
  }.nav-smc{
    margin-top: .25em;
  }.text-inline{
    font-size: 6px;
    line-height: 1.6em;
  }.nav-smc-image{
    width: auto;
  }.nav-row{
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-items: center;
    padding-top: 50px;
    display: grid;
  }.b26-nav-button-bg{
    margin-right: -20px;
  }.nav-vj{
    z-index: 1;
    flex: 1;
    max-width: none;
    margin-top: .25em;
    position: relative;
  }.b26-vj-logo{
    width: 90%;
  }.vj-subtext{
    width: 90%;
    font-size: 8px;
  }}
#w-node-_7ee07a7a-ae02-efff-92b4-fc3ecae0b3c6-ca1821fa, #w-node-_7ee07a7a-ae02-efff-92b4-fc3ecae0b3c7-ca1821fa, #w-node-d4fae6c7-6924-983b-4202-b1eddda2dc11-dda2dc03, #w-node-d4fae6c7-6924-983b-4202-b1eddda2dc1c-dda2dc03, #w-node-d4fae6c7-6924-983b-4202-b1eddda2dc32-dda2dc03, #w-node-c022a7da-d4b6-fdcb-1708-9bfa847bd151-847bd147, #w-node-c022a7da-d4b6-fdcb-1708-9bfa847bd1a7-847bd147{
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#w-node-c022a7da-d4b6-fdcb-1708-9bfa847bd1b2-847bd147, #w-node-c022a7da-d4b6-fdcb-1708-9bfa847bd1b3-847bd147{
  grid-area: span 1 / span 3 / span 1 / span 3;
  align-self: end;
}
#w-node-c022a7da-d4b6-fdcb-1708-9bfa847bd1bc-847bd147{
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: end;
}

/* map stacking: above the route tabs (45), under the venue card (50) and route panel (60) */
.nav-bar{z-index:47}
/* LV card: show the amenity icons exactly as on the other cards (the white filter blurred their edges) */
.venue--feature .amen__icon{filter:none}
/* card popups: the overlay sits above the menu bar, so the menu can't be used while a card is open */
body.venue-open .nav-bar{z-index:35;transition:none}
/* LV card, desktop: photo cropped to 3:2 so the photo + 16:9 poster both fit the card height */
@media (min-width:681px){ .venue--feature .venue__hero img{aspect-ratio:3/2;object-fit:cover} }

/* v18: an odd last gallery photo spans the full row (no empty gap for 1 or 3 photos) */
.venue__gallery button:last-child:nth-child(odd){grid-column:1 / -1}

/* v18: LV card heading — each line stays on one line ("Bangkok Art Biennale" never breaks);
   both lines share one size, scaled down only when the screen is too narrow (26px cap) */
.venue--feature .venue__name{white-space:nowrap}
@media (max-width:680px){
  .venue.venue--feature .venue__name{font-size:min(26px, calc((100vw - 102px) / 13.6));letter-spacing:.03em}
}
/* admission row: FREE | BOOK HERE  PRE-BOOKING RECOMMENDED on one line */
.venue--feature .facts dd{flex-wrap:nowrap;white-space:nowrap;gap:0 6px}
@media (max-width:680px){
  .venue--feature .facts dd{gap:0 4px}
  .venue--feature .fnote{font-size:clamp(6px, 1.75vw, 8.5px);letter-spacing:0}
}