/* ============================================================
   珍珠海岸國際音樂節 — Design System
   ============================================================ */
:root{
  /* Brand palette (from extension guide) */
  --orange:#F89041;
  --blue:#4896F3;
  --pink:#F4A1C2;
  --cream:#FFF5E9;
  --brown:#95502B;
  /* Derived from KV */
  --lavender:#B79BD4;
  --sunset:#EE6C3B;
  --ink:#2B1A10;        /* deep brown-black for text */
  --ink-lift:#3A2415;   /* 比 --ink 略亮，深色區塊打光用 */
  --ink-soft:#5A4233;
  --paper:#FFF5E9;

  /* Accent (tweakable) */
  --accent:var(--orange);
  --accent-2:var(--blue);

  /* Type */
  --f-label:"Bungee","Noto Sans TC",sans-serif;
  --f-head:"Noto Sans TC",sans-serif;
  --f-body:"Sora","Noto Sans TC",sans-serif;
  --f-cjk:"Noto Sans TC",sans-serif;

  /* Layout */
  --maxw:1240px;
  --gutter:clamp(20px,5vw,72px);
  --radius:22px;
  --radius-lg:34px;

  /* Motion */
  --float-speed:1;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.skip-link{position:absolute;top:-100%;left:1rem;z-index:9999;padding:.6em 1.2em;background:var(--ink);color:var(--cream);font-family:var(--f-label);font-size:.9rem;border-radius:0 0 var(--radius) var(--radius);text-decoration:none;transition:top .15s;}
.skip-link:focus{top:0;}
html[data-reduce="1"]{scroll-behavior:auto;}
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
section{position:relative;}

/* Font style variants (tweak) */
body[data-font="groovy"]{ --f-label:"Righteous","Noto Sans TC",sans-serif; }
body[data-font="mono"]{ --f-label:"Space Mono","Noto Sans TC",monospace; --f-body:"Space Grotesk","Noto Sans TC",sans-serif; }

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family:var(--f-label);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:clamp(12px,1vw,15px);
  color:var(--accent);
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:currentColor;}
.section-title{
  font-family:var(--f-head);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.01em;
  font-size:clamp(34px,6vw,76px);
  margin:.18em 0 .35em;
  text-wrap:balance;
}
.section-title .en{
  font-family:var(--f-label);
  display:block;
  font-weight:400;
  font-size:.42em;
  letter-spacing:.04em;
  color:var(--ink-soft);
  margin-top:.5em;
}
.lead{
  max-width:62ch;
  font-size:clamp(16px,1.3vw,20px);
  line-height:1.7;
  color:var(--ink-soft);
}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--f-label);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:14px;
  display:inline-flex;align-items:center;gap:.6em;
  padding:15px 26px;
  border-radius:999px;
  border:2.5px solid var(--ink);
  background:var(--accent);
  color:var(--ink);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .2s;
  box-shadow:4px 5px 0 var(--ink);
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 8px 0 var(--ink);}
.btn:active{transform:translate(2px,3px);box-shadow:1px 2px 0 var(--ink);}
.btn--ghost{background:transparent;box-shadow:none;}
.btn--ghost:hover{background:var(--cream);box-shadow:3px 4px 0 var(--ink);}
.btn--blue{background:var(--blue);color:#fff;}
.btn--pink{background:var(--pink);}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
.section-pad{padding-block:clamp(72px,11vh,150px);}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--gutter);
  transition:background .35s ease, box-shadow .35s, padding .35s;
}
.nav__brand{
  display:flex;align-items:center;gap:12px;
  font-family:var(--f-label);font-size:16px;color:var(--cream);
  text-shadow:0 2px 8px rgba(0,0,0,.45);
}
.nav__mark{
  width:38px;height:38px;flex:none;
}
.nav.scrolled .nav__brand{color:var(--ink);text-shadow:none;}
.nav__links{display:flex;align-items:center;gap:6px;}
.nav__links a{
  font-family:var(--f-body);font-weight:600;font-size:14px;
  color:var(--cream);padding:9px 14px;border-radius:999px;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
  transition:background .2s,color .2s;
  white-space:nowrap;
}
.nav.scrolled .nav__links a{color:var(--ink-soft);text-shadow:none;}
.nav__links a:hover{background:rgba(255,245,233,.18);}
.nav.scrolled .nav__links a:hover{background:rgba(43,26,16,.08);color:var(--ink);}
.nav__cta{flex:none;}
.nav.scrolled{background:rgba(255,245,233,.92);backdrop-filter:blur(10px);box-shadow:0 2px 0 rgba(43,26,16,.08);}
.nav__burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px;}
.nav__burger span{width:26px;height:3px;background:var(--cream);border-radius:2px;transition:.3s;}
.nav.scrolled .nav__burger span{background:var(--ink);}
@media (hover:hover){
  .nav__burger:hover span{background:var(--orange);}
  .nav.scrolled .nav__burger:hover span{background:var(--orange);}
}
.nav__burger.active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav__burger.active span:nth-child(2){opacity:0;transform:scaleX(0);}
.nav__burger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:55;background:var(--brown);
  display:flex;flex-direction:column;justify-content:flex-start;gap:8px;
  padding:88px var(--gutter) var(--gutter);
  overflow:hidden auto;visibility:hidden;
  transform:translateY(-100%);transition:transform .45s cubic-bezier(.7,0,.2,1),visibility 0s linear .45s;
}
.mobile-menu::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,245,233,.07) 0 40px,transparent 40px 80px);
}
.mobile-menu.open{transform:translateY(0);visibility:visible;transition:transform .45s cubic-bezier(.7,0,.2,1);}
.mobile-menu a{
  position:relative;z-index:1;
  font-family:var(--f-head);font-weight:800;font-size:clamp(28px,8vw,46px);
  color:var(--cream);padding:6px 0;
  display:flex;align-items:baseline;gap:14px;
}
.mobile-menu a .num{font-family:var(--f-label);font-size:.4em;color:var(--orange);}
.mobile-menu a:hover{color:var(--orange);}
.mobile-menu .mm-cta{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:16px;padding:14px 32px;
  font-family:var(--f-head);font-size:16px;font-weight:700;
  background:var(--orange);color:var(--ink);
  border:3px solid var(--ink);border-radius:999px;
  box-shadow:5px 6px 0 rgba(43,26,16,.22);
  transition:.2s;
}
.mobile-menu .mm-cta:hover{color:var(--ink);transform:translate(-2px,-2px);box-shadow:7px 9px 0 rgba(43,26,16,.22);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:max(100svh,70.8vw);
  display:flex;align-items:flex-end;
  overflow:hidden;background:var(--sunset);
}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
}
.hero__img--portrait{display:none;}
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(43,26,16,.34) 0%,rgba(43,26,16,0) 20% 48%,rgba(43,26,16,.5) 80%,var(--ink) 100%);
  pointer-events:none;
}
.hero__bar{
  position:relative;z-index:3;width:100%;
  padding:0 var(--gutter) clamp(26px,5vh,54px);
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.hero__meta{display:flex;flex-direction:column;gap:6px;color:var(--cream);}
.hero__meta .k{font-family:var(--f-label);font-size:13px;letter-spacing:.14em;color:var(--accent);text-shadow:0 1px 8px rgba(43,26,16,.9);}
.hero__meta .v{font-family:var(--f-head);font-weight:800;font-size:clamp(18px,2vw,26px);text-shadow:0 2px 14px rgba(0,0,0,.75);}
.hero__count{display:flex;gap:10px;}
.count-unit{
  background:rgba(255,245,233,.92);border:2.5px solid var(--ink);border-radius:var(--radius);
  min-width:72px;padding:10px 8px;text-align:center;box-shadow:4px 5px 0 rgba(43,26,16,.45);
}
.count-unit .n{font-family:var(--f-label);font-size:clamp(22px,2.6vw,34px);line-height:1;color:var(--ink);}
.count-unit .l{font-family:var(--f-body);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px;}
.scroll-cue{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;
  color:var(--cream);font-family:var(--f-label);font-size:11px;letter-spacing:.2em;
  display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.9;
}
.scroll-cue .dot{width:7px;height:7px;border-radius:50%;background:var(--cream);animation:cue 1.6s infinite;}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(9px);opacity:1}}

/* marquee strip under hero */
.marquee{
  background:var(--ink);color:var(--cream);overflow:hidden;white-space:nowrap;
  border-bottom:3px solid var(--ink);
}
.marquee__track{display:inline-flex;gap:44px;padding:12px 0;animation:marq 28s linear infinite;}
.marquee span{font-family:var(--f-label);font-size:15px;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;gap:44px;align-items:center;}
.marquee span::after{content:"✺";color:var(--orange);}
@keyframes marq{to{transform:translateX(-50%)}}
html[data-reduce="1"] .marquee__track{animation:none;}

/* stripe ribbon */
.stripe-ribbon{
  height:22px;width:100%;
  border-bottom:3px solid var(--ink);
  background:repeating-linear-gradient(90deg,var(--blue) 0 26px,var(--cream) 26px 52px);
}

/* ============================================================
   LOADER
   ============================================================ */
.loader{
  position:fixed;inset:0;z-index:200;overflow:hidden;
  background:linear-gradient(180deg,#FFE9C9 0%,var(--orange) 48%,var(--sunset) 100%);
  transition:opacity .6s ease, visibility .6s;
}
.loader.done{opacity:0;visibility:hidden;pointer-events:none;}
.loader__sun{
  position:absolute;left:50%;bottom:30%;width:min(46vw,300px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #FFC98A, var(--orange) 70%);
  transform:translate(-50%,120%);
  animation:ldr-sun 1.7s cubic-bezier(.2,.7,.2,1) .1s forwards, ldr-sun-pulse 7s ease-in-out 2.8s infinite;
}
.loader__plane{
  position:absolute;top:30%;left:-20%;width:min(16vw,108px);
  color:var(--brown);transform:rotate(80deg);
  animation:ldr-plane 2.6s cubic-bezier(.45,0,.45,1) .2s forwards;
}
.loader__plane svg{display:block;width:100%;filter:drop-shadow(0 5px 7px rgba(60,30,15,.3));}
/* ocean — brand blue #508BC9 */
.loader__waves{position:absolute;left:0;right:0;bottom:0;height:38%;line-height:0;
  transform:translateY(60%);opacity:.4;animation:ldr-wave 1.5s cubic-bezier(.2,.7,.2,1) .4s forwards;}
.loader__waves svg{position:absolute;left:-10%;width:120%;height:100%;display:block;}
.loader .lw1{animation:ldr-drift1 9s linear infinite;}
.loader .lw2{animation:ldr-drift2 13s linear infinite;}
.loader .lw3{animation:ldr-drift1 7s linear infinite;}
/* full lockup — centre */
.loader__logo{position:absolute;left:50%;top:50%;width:min(38vw,520px);aspect-ratio:1071/594;
  transform:translate(-50%,-50%);opacity:0;
  animation:ldr-logo .95s cubic-bezier(.25,.7,.2,1) 2s both, ldr-breathe 6s ease-in-out 3.4s infinite;}
.loader__logo svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 16px rgba(70,25,20,.38));}
.loader__logo::after{content:"";position:absolute;inset:-20% -12%;z-index:-1;
  background:radial-gradient(58% 64% at 50% 50%,rgba(70,28,24,.42),transparent 72%);}
/* 珍珠 (left) · 海岸 (right) — flank the lockup, stay */
.loader__zh{position:absolute;top:50%;width:min(19vw,300px);transform:translateY(-50%);}
.loader__zh svg{width:100%;display:block;}
.loader__zh--l{left:5%;animation:ldr-zh-l .85s cubic-bezier(.2,.75,.2,1) 1.25s both;}
.loader__zh--r{right:5%;animation:ldr-zh-r .85s cubic-bezier(.2,.75,.2,1) 1.45s both;}
@keyframes ldr-sun{0%{transform:translate(-50%,120%)}72%{transform:translate(-50%,-4%)}100%{transform:translate(-50%,0)}}
@keyframes ldr-sun-pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.1)}}
@keyframes ldr-plane{0%{left:-20%;transform:translateY(12px) rotate(80deg)}100%{left:122%;transform:translateY(-30px) rotate(80deg)}}
@keyframes ldr-wave{to{transform:translateY(0);opacity:1}}
@keyframes ldr-drift1{to{transform:translateX(8.33%)}}
@keyframes ldr-drift2{to{transform:translateX(-8.33%)}}
@keyframes ldr-logo{from{opacity:0;transform:translate(-50%,-46%) scale(.9);filter:blur(7px) brightness(1.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0) brightness(1)}}
@keyframes ldr-breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.014)}}
@keyframes ldr-zh-l{from{opacity:0;transform:translate(-36px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
@keyframes ldr-zh-r{from{opacity:0;transform:translate(36px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
@media (max-width:760px){
  .loader__logo{width:min(50vw,300px);}
  .loader__zh{width:min(17vw,150px);}
  .loader__zh--l{left:4%;}
  .loader__zh--r{right:4%;}
  .loader__waves{height:26%;}
}
html[data-reduce="1"] .loader *{animation-duration:.01s!important;animation-delay:0s!important;}
html[data-reduce="1"] .loader__logo,html[data-reduce="1"] .loader__zh{opacity:1!important;}

/* ============================================================
   EXTENSION TEXTURES
   ============================================================ */
.tx{position:absolute;inset:0;z-index:0;pointer-events:none;}
.tx--wave{
  opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='66' viewBox='0 0 130 66'%3E%3Cg fill='none' stroke='%234896F3' stroke-width='9' stroke-linecap='round'%3E%3Cpath d='M6 24 C 23 6 39 6 56 24 S 90 42 107 24 S 141 6 158 24'/%3E%3C/g%3E%3C/svg%3E");
  background-size:130px 66px;
}
.tx--polka{
  opacity:.14;
  background-image:radial-gradient(circle at 50% 50%, var(--orange) 0 14px, transparent 15px);
  background-size:70px 70px;
}
.sink-sun{position:absolute;border-radius:50%;aspect-ratio:1;pointer-events:none;z-index:0;}

/* ---- tail / back-to-top ---- */
.tail-pop{position:absolute;left:50%;bottom:0;width:74px;z-index:0;transform:translate(-50%,120%);transform-origin:50% 100%;pointer-events:none;}
.tail-pop svg{width:100%;display:block;}
.tail-pop.reveal{animation:tailpop 2.8s cubic-bezier(.3,.68,.3,1) forwards;}
@keyframes tailpop{0%{transform:translate(-50%,120%) rotate(0)}22%{transform:translate(-50%,-40%) rotate(-8deg)}38%{transform:translate(-50%,-22%) rotate(7deg)}54%{transform:translate(-50%,-34%) rotate(-4deg)}70%{transform:translate(-50%,-26%) rotate(2deg)}82%{transform:translate(-50%,-30%) rotate(0)}100%{transform:translate(-50%,120%) rotate(0)}}
@keyframes tailpopSm{0%{transform:translate(-50%,120%) rotate(0)}24%{transform:translate(-50%,-18%) rotate(-6deg)}42%{transform:translate(-50%,-6%) rotate(5deg)}58%{transform:translate(-50%,-14%) rotate(-3deg)}74%{transform:translate(-50%,-9%) rotate(2deg)}86%{transform:translate(-50%,-12%) rotate(0)}100%{transform:translate(-50%,120%) rotate(0)}}
html[data-reduce="1"] .tail-pop{display:none!important;}
.backtop{
  position:fixed;right:22px;bottom:22px;z-index:50;width:60px;height:64px;
  border:none;background:none;padding:0;cursor:pointer;
  opacity:0;transform:translateY(22px) scale(.7);pointer-events:none;
  transition:opacity .35s ease, transform .35s cubic-bezier(.3,1.3,.5,1);
  filter:drop-shadow(2px 3px 0 rgba(43,26,16,.25));
}
.backtop.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.backtop svg{width:100%;height:100%;transform-origin:50% 86%;animation:tail-idle 3s ease-in-out infinite;}
.backtop:hover svg{animation:tail-happy .5s ease-in-out infinite;}
.backtop::after{
  content:"回到頂端 ↑";position:absolute;right:50%;bottom:100%;transform:translate(50%,-6px);
  background:var(--ink);color:var(--cream);font-family:var(--f-body);font-weight:600;font-size:11px;
  padding:5px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;
}
.backtop:hover::after{opacity:1;}
@keyframes tail-idle{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes tail-happy{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
html[data-reduce="1"] .backtop svg{animation:none!important;}
.schedule .wrap,.market .wrap,.footer__top,.footer__bottom{position:relative;z-index:1;}
.footer{position:relative;overflow:hidden;}

/* ============================================================
   WAVE DIVIDERS / floating decor
   ============================================================ */
.wave-top,.wave-bottom{position:absolute;left:0;width:100%;line-height:0;z-index:2;pointer-events:none;}
.wave-top{top:-1px;}
.wave-bottom{bottom:-1px;}
.wave-top svg,.wave-bottom svg{width:100%;height:clamp(40px,6vw,90px);display:block;}

.decor{position:absolute;pointer-events:none;z-index:1;opacity:.9;}
.float{animation:float calc(6s / var(--float-speed)) ease-in-out infinite;}
.float.d2{animation-duration:calc(8s / var(--float-speed));animation-delay:-2s;}
.float.d3{animation-duration:calc(7s / var(--float-speed));animation-delay:-4s;}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-16px) rotate(var(--r,0deg))}}
html[data-reduce="1"] .float{animation:none;}

/* ============================================================
   ABOUT
   ============================================================ */
.about{background:var(--cream);position:relative;overflow:hidden;}
.about__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;}

.about__quote{
  font-family:var(--f-head);font-weight:800;color:var(--blue);
  font-size:clamp(22px,2.6vw,34px);line-height:1.32;margin:.2em 0 .9em;text-wrap:balance;
}
.about__quote-lead{display:block;}
.about__body{margin:0 0 1.7em;line-height:1.85;color:var(--ink-soft);}
.about__body span{display:block;margin-bottom:.5em;}
.about__links{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.about__links .btn{white-space:nowrap;justify-content:center;}

.about__card{
  position:relative;margin:0;border:3px solid var(--ink);border-radius:var(--radius-lg);
  overflow:hidden;aspect-ratio:4/3;box-shadow:8px 10px 0 rgba(43,26,16,.22);background:var(--brown);
}
.about__card image-slot,.about__card img{width:100%;height:100%;display:block;object-fit:cover;}
.about__card::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(150deg,rgba(72,150,243,.58),rgba(244,161,194,.28) 48%,rgba(248,144,65,.60));
  mix-blend-mode:multiply;
}
.about__card-cap{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  font-family:var(--f-label);font-size:clamp(19px,2.3vw,33px);letter-spacing:.14em;line-height:1.25;
  text-transform:uppercase;color:var(--cream);text-shadow:0 3px 16px rgba(43,26,16,.6);
}
.about__card-cap span{
  display:inline-block;padding:16px 30px;
  background:radial-gradient(ellipse 78% 130% at center,rgba(43,26,16,.46),transparent 72%);
}
@media(max-width:980px){.about__card{max-width:520px;}}

/* ============================================================
   LINEUP
   ============================================================ */
.lineup{background:linear-gradient(180deg,var(--orange),var(--sunset));color:var(--ink);}
.lineup .section-title,.tickets .section-title{color:var(--ink);}
/* ---------- Cast wall (festival bill · interactive) ---------- */
.cast-wall{margin:22px 0 36px;}
.cast-wall__rows{
  display:flex;flex-direction:column;align-items:center;gap:1.2em;
  max-width:1120px;margin:0 auto;
}
.cw-group{display:flex;flex-direction:column;align-items:center;gap:.3em;}
.cw-label{
  font-family:var(--f-label);font-size:clamp(11px,1.2vw,14px);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--brown);opacity:.85;
}
.cw-row{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.14em .4em;line-height:1;text-align:center;
}
.cw-sep{
  font-family:var(--f-body);line-height:1;align-self:center;
  font-size:clamp(14px,1.8vw,22px);color:var(--brown);
  transform:translateY(-.04em);
}
.cast-name{
  font-family:var(--f-head);font-weight:900;line-height:.98;
  color:var(--cream);text-shadow:3px 3px 0 var(--ink);
  padding:0 .04em;margin:0;
  position:relative;display:inline-block;
  transition:transform .18s ease,color .18s ease;
  font-size:clamp(26px,4vw,56px);
}
.cast-name:hover{color:var(--pink);transform:translateY(-2px) scale(1.08) rotate(-1.5deg);}
@media(max-width:640px){.cw-row{gap:.12em .3em;}}
@media(prefers-reduced-motion:reduce){
  .cast-name{transition:color .15s ease;}
  .cast-name:hover{transform:scale(1.05);}
}

/* stage cards intro */
.stage-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 46px;}
.stage-card{
  position:relative;
  display:flex;flex-direction:column;background:var(--cream);border:3px solid var(--ink);
  border-radius:var(--radius);overflow:hidden;box-shadow:5px 6px 0 rgba(43,26,16,.22);
  transition:transform .2s,box-shadow .2s;
}
.stage-card:hover{transform:translate(-3px,-3px);box-shadow:8px 11px 0 rgba(43,26,16,.3);}
.stage-card__bar{height:16px;background:var(--sc);border-bottom:3px solid var(--ink);}
.stage-card__more{
  position:absolute;top:24px;right:14px;
  display:flex;align-items:center;gap:5px;
  font-family:var(--f-label);font-size:11px;letter-spacing:.07em;font-weight:700;
  color:var(--ink);text-decoration:none;opacity:.65;transition:opacity .15s;
}
.stage-card__more:hover{opacity:1;}
.stage-card__in{padding:24px 24px 28px;}
.stage-card__tag{font-family:var(--f-label);font-size:11px;letter-spacing:.14em;color:var(--ink-soft);}
.stage-card h3{font-family:var(--f-head);font-weight:900;font-size:clamp(21px,2.3vw,27px);margin:9px 0 14px;line-height:1.12;}
.stage-card h3 .en{display:block;font-family:var(--f-label);font-weight:400;font-size:13px;letter-spacing:.04em;color:var(--ink-soft);margin-top:6px;}
.stage-card p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink-soft);}
.stage-loc{display:flex;align-items:center;gap:7px;margin:16px 0 0;font-family:var(--f-label);font-size:12.5px;letter-spacing:.04em;color:var(--ink);font-weight:700;}
.stage-loc::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--sc);border:2px solid var(--ink);}


.lineup-filter{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:34px;}
.chip{
  font-family:var(--f-label);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 20px;border-radius:999px;border:2.5px solid var(--ink);background:transparent;color:var(--ink);
  cursor:pointer;transition:.2s;
}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--cream);}
.chip:hover{background:rgba(43,26,16,.12);}
.chip[aria-pressed="true"]:hover{background:var(--ink);}

.band-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;}

/* lineup pager */
.lineup-pager{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:34px;}
.lineup-pager[hidden]{display:none;}
.pager-btn{
  width:54px;height:54px;border-radius:50%;border:3px solid var(--ink);background:var(--cream);
  color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:4px 5px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .2s,opacity .2s;
}
.pager-btn svg{width:24px;height:24px;display:block;}
.pager-btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 8px 0 var(--ink);background:var(--orange);}
.pager-btn:active:not(:disabled){transform:translate(2px,3px);box-shadow:1px 2px 0 var(--ink);}
.pager-btn:disabled{opacity:.32;cursor:not-allowed;box-shadow:2px 3px 0 var(--ink);}
.pager-status{font-family:var(--f-label);font-size:15px;letter-spacing:.08em;color:var(--ink);min-width:62px;text-align:center;}
.band-card{
  position:relative;border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;
  background:var(--cream);box-shadow:5px 6px 0 rgba(43,26,16,.25);cursor:pointer;
  transition:transform .2s,box-shadow .2s;
}
.band-card:hover{transform:translate(-3px,-3px);box-shadow:8px 11px 0 rgba(43,26,16,.3);}
.band-card__photo{aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.band-card__photo .ph{font-family:var(--f-label);font-size:46px;color:rgba(255,255,255,.85);}
.band-card__tag{
  position:absolute;top:10px;left:10px;font-family:var(--f-label);font-size:10px;letter-spacing:.08em;
  background:var(--cream);border:2px solid var(--ink);border-radius:999px;padding:4px 9px;
}
.band-card__body{padding:14px 16px 18px;border-top:3px solid var(--ink);}
.band-card__name{font-family:var(--f-head);font-weight:900;font-size:20px;line-height:1.1;}
.band-card__name .en{display:block;font-family:var(--f-body);font-weight:600;font-size:12px;color:var(--ink-soft);letter-spacing:.04em;margin-top:3px;}
.band-card__meta{display:flex;gap:8px;margin-top:12px;font-size:12px;color:var(--ink-soft);font-weight:600;}
.band-card__meta .day{color:var(--accent);}

/* ============================================================
   SCHEDULE
   ============================================================ */
.schedule{background:var(--cream);}
.day-tabs{display:flex;gap:12px;margin-bottom:30px;flex-wrap:wrap;}
.day-tab{
  font-family:var(--f-head);font-weight:800;font-size:18px;
  padding:14px 26px;border-radius:16px;border:2.5px solid var(--ink);background:#fff;cursor:pointer;
  display:flex;flex-direction:column;gap:2px;transition:.2s;box-shadow:4px 5px 0 rgba(43,26,16,.12);
}
.day-tab .d{font-family:var(--f-label);font-size:11px;letter-spacing:.1em;color:var(--ink-soft);}
.day-tab:hover:not([aria-pressed="true"]){transform:translate(-2px,-2px);box-shadow:6px 7px 0 rgba(43,26,16,.2);}
.day-tab[aria-pressed="true"]{background:var(--blue);color:#fff;transform:translate(-2px,-2px);box-shadow:6px 7px 0 rgba(43,26,16,.22);}
.day-tab[aria-pressed="true"] .d{color:rgba(255,255,255,.8);}
.sched-board{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:30px;}
.stage-col{border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;background:#fff;}
.stage-col__head{position:relative;padding:16px;color:#fff;font-family:var(--f-head);font-weight:900;font-size:18px;border-bottom:3px solid var(--ink);}
.stage-col__head .en{display:block;font-family:var(--f-label);font-size:11px;letter-spacing:.08em;opacity:.85;margin-top:2px;}
.stage-col__more{
  position:absolute;top:14px;right:14px;
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-label);font-weight:700;font-size:10.5px;letter-spacing:.04em;color:inherit;
  background:rgba(255,245,233,.22);border:1.6px solid currentColor;border-radius:999px;
  padding:4px 9px;text-decoration:none;transition:transform .18s,background .18s;
}
.stage-col__more svg{width:13px;height:13px;}
.stage-col__more:hover{transform:translate(-1px,-1px);background:rgba(255,245,233,.4);}
.stage-col__head:has(.stage-col__more){padding-right:104px;}
.slot--note{padding-top:9px;padding-bottom:9px;}
.slot--note .a{font-family:var(--f-label);font-size:11px;letter-spacing:.02em;font-weight:600;color:var(--brown);}
.slot{padding:14px 13px;border-bottom:1.5px dashed rgba(43,26,16,.22);display:flex;gap:10px;align-items:baseline;}
.slot:last-child{border-bottom:none;}
/* min-width 是下限；flex-shrink:0 讓「09:30–17:00」這種較長的區間字串能撐開而不被壓縮溢出 */
.slot .t{font-family:var(--f-body);font-weight:700;font-size:13px;color:var(--accent-2);white-space:nowrap;min-width:62px;flex-shrink:0;}
/* keep-all 維持中文不隨意斷字；overflow-wrap 只在真的塞不下時才允許斷，避免 4 欄時長字串溢出 */
.slot .a{font-family:var(--f-head);font-weight:700;font-size:15px;word-break:keep-all;overflow-wrap:anywhere;}
.slot.tbd .a{color:var(--ink-soft);font-style:italic;font-weight:600;}
.slot .t--tbc{opacity:.55;font-style:italic;}
/* 場次分組標題列（例：啦啦隊表演｜第一場）—— 必須排在 .slot / .slot .a 之後，
   否則同權重的 .slot 規則會蓋掉 padding / border-bottom / font */
.slot--group{padding:10px 13px;background:rgba(43,26,16,.055);border-top:2px solid var(--ink);border-bottom:none;}
.slot--group .a{font-family:var(--f-label);font-size:12px;letter-spacing:.04em;color:var(--ink);}
/* 分組列上方只留一條實線：把前一列的虛線下框收掉，避免實線＋虛線疊在一起 */
.slot:has(+ .slot--group){border-bottom:none;}

/* ============================================================
   TICKETS
   ============================================================ */
.tickets{
  background:repeating-linear-gradient(90deg,var(--pink) 0 46px,#F8C0D6 46px 92px);
}
.freepass{
  position:relative;background:var(--cream);border:3px solid var(--ink);border-radius:var(--radius-lg);
  box-shadow:8px 10px 0 rgba(43,26,16,.28);text-align:center;overflow:hidden;
  padding:clamp(36px,6vw,68px) clamp(24px,5vw,60px);max-width:900px;margin:0 auto;
}
.freepass__flag{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--f-label);font-size:clamp(12px,1.3vw,15px);letter-spacing:.08em;
  background:var(--orange);border:2.5px solid var(--ink);border-radius:999px;
  padding:9px 20px;color:var(--ink);box-shadow:3px 4px 0 var(--ink);
}
.freepass__big{
  font-family:var(--f-head);font-weight:900;line-height:1.06;text-wrap:balance;
  font-size:clamp(30px,5.4vw,60px);margin:24px 0 12px;color:var(--ink);
}
.freepass__big b{color:var(--sunset);}
.freepass__sub{font-size:clamp(16px,1.4vw,20px);color:var(--ink-soft);line-height:1.65;max-width:46ch;margin:0 auto;}
.freepass__points{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px;}
.freepass__points span{
  font-family:var(--f-body);font-weight:700;font-size:14px;
  background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:10px 18px;
  display:inline-flex;align-items:center;gap:.55em;
}
.freepass__points span::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--blue);border:2px solid var(--ink);}
.ticket-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;}
.ticket{
  position:relative;background:var(--cream);border:3px solid var(--ink);border-radius:var(--radius);
  padding:30px 26px 28px;box-shadow:6px 7px 0 rgba(43,26,16,.28);display:flex;flex-direction:column;
  transition:transform .2s;
}
.ticket:hover{transform:translateY(-6px);}
.ticket.feat{background:var(--ink);color:var(--cream);}
.ticket.feat .ticket__price,.ticket.feat .ticket__name{color:var(--cream);}
.ticket__flag{position:absolute;top:-14px;right:22px;background:var(--orange);border:2.5px solid var(--ink);border-radius:999px;font-family:var(--f-label);font-size:11px;padding:6px 14px;color:var(--ink);}
.ticket__name{font-family:var(--f-head);font-weight:900;font-size:22px;}
.ticket__name .en{display:block;font-family:var(--f-label);font-size:11px;letter-spacing:.06em;color:var(--ink-soft);margin-top:4px;}
.ticket.feat .ticket__name .en{color:rgba(255,245,233,.7);}
.ticket__price{font-family:var(--f-label);font-size:42px;color:var(--accent);margin:18px 0 4px;line-height:1;}
.ticket__price small{font-size:15px;color:var(--ink-soft);}
.ticket.feat .ticket__price{color:var(--orange);}
.ticket__note{font-size:12px;color:var(--ink-soft);}
.ticket.feat .ticket__note{color:rgba(255,245,233,.6);}
.ticket ul{list-style:none;padding:0;margin:20px 0 24px;display:flex;flex-direction:column;gap:11px;font-size:14px;}
.ticket li{display:flex;gap:10px;align-items:flex-start;line-height:1.4;}
.ticket li::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--accent);border:2px solid var(--ink);}
.ticket.feat li::before{background:var(--orange);}
.ticket .btn{margin-top:auto;justify-content:center;}
.tickets__note{margin-top:30px;font-size:13px;color:var(--brown);text-align:center;font-weight:600;}

/* ============================================================
   LIVE STREAM
   ============================================================ */
/* Hero 底部遮罩收在 --ink、跑馬燈是 --ink、直播區也是深色，三塊連續深色需要層次。
   用一道「舞台光牆」取代硬性分隔線：上下緣都是純 ink，與跑馬燈、下方波浪的接縫
   完全無硬邊；中段橫跨整個寬度柔和提亮，標題與播放器兩側都吃得到光。
   （不用 radial 聚光是因為它的亮核正好被不透明的播放器蓋住，量測後幾乎看不出來） */
.live{
  background:
    linear-gradient(180deg, var(--ink) 0%, var(--ink-lift) 42%, var(--ink) 100%),
    var(--ink);
  color:var(--cream);
}
.live .section-title{color:var(--cream);}
.live .section-title .en{color:rgba(255,245,233,.72);}
.live .eyebrow{color:var(--orange);}
/* ---- LIVE: embed slot. Before the stream, #liveEmbed shows a compact announcement
   (.live-embed__ph). Once main.js injects the iframe it adds .live-embed--playing,
   which turns the same container into a 16:9 player frame. ---- */
.live-embed{
  width:100%;max-width:900px;margin:clamp(32px,5vw,48px) auto 0;
}
.live-embed__ph{
  aspect-ratio:16/9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:clamp(20px,4vw,48px);
  border:3px solid var(--cream);border-radius:var(--radius);
  background:radial-gradient(120% 120% at 50% 0%, var(--ink-lift) 0%, var(--ink) 70%);
  box-shadow:6px 8px 0 rgba(0,0,0,.45);
}
/* 窄螢幕：16:9 會過矮，放寬為較高比例，讓徽章＋說明有足夠垂直空間 */
@media(max-width:640px){
  .live-embed__ph{aspect-ratio:4/3;}
}
@media(max-width:420px){
  .live-embed__ph{aspect-ratio:auto;min-height:210px;}
}
.live-embed__ph p{max-width:46ch;color:rgba(255,245,233,.92);font-size:clamp(15px,1.3vw,17px);line-height:1.7;margin:0;}
.live-embed__badge{
  font-family:var(--f-label);letter-spacing:.08em;font-size:13px;
  display:inline-flex;align-items:center;gap:.5em;
  padding:7px 16px;border-radius:999px;border:2.5px solid var(--ink);
  background:var(--orange);color:var(--ink);
}
/* playing state: real 16:9 player frame */
.live-embed--playing{
  aspect-ratio:16/9;border:3px solid var(--cream);border-radius:var(--radius);
  overflow:hidden;background:#000;box-shadow:6px 8px 0 rgba(0,0,0,.45);
}
.live-embed--playing iframe{width:100%;height:100%;border:0;display:block;}
/* 備援連結：擋廣告／隱私擴充剝除 referrer 時 YouTube 會拒播（錯誤 153），
   此時這行是唯一的觀看路徑。orange on ink = 7.16:1，通過 WCAG AA。 */
.live-embed__fallback{
  max-width:900px;margin:14px auto 0;text-align:center;
  font-family:var(--f-body);font-size:clamp(13px,1.1vw,15px);
}
.live-embed__fallback a{
  color:var(--orange);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}
.live-embed__fallback a:hover{color:var(--cream);}
/* ---- LIVE: broadcast info cards ---- */
.live-info__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px);
  margin-top:clamp(32px,5vw,48px);
}
.live-info{
  background:var(--cream);color:var(--ink);
  border:3px solid var(--ink);border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);box-shadow:5px 6px 0 rgba(0,0,0,.4);
}
.live-info h3{font-family:var(--f-head);font-weight:900;font-size:clamp(20px,2vw,26px);margin:0 0 6px;}
.live-info__time{font-family:var(--f-label);font-size:clamp(15px,1.3vw,18px);color:var(--brown);margin:0 0 14px;}
.live-info p{color:var(--ink-soft);line-height:1.6;margin:0 0 14px;}
.live-logos{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-width:340px;}
.live-logo{
  display:flex;align-items:center;justify-content:center;
  height:50px;padding:6px 12px;border:2px solid var(--ink);border-radius:10px;
  background:#fff;
}
.live-logo img{display:block;max-height:26px;max-width:100%;width:auto;height:auto;object-fit:contain;}
@media(max-width:768px){
  .live-info__grid{grid-template-columns:1fr;}
}

/* ============================================================
   TRANSPORT
   ============================================================ */
.transport{background:var(--blue);color:var(--cream);}
.transport .section-title{color:var(--cream);}
.transport .eyebrow{color:var(--cream);}
/* ---- TRANSPORT: official maps (shown directly) ---- */
.tx-maps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,24px);margin-top:32px;}
.tx-map{
  position:relative;display:block;padding:0;cursor:zoom-in;font:inherit;
  background:transparent;border:3px solid var(--ink);border-radius:18px;overflow:hidden;
  box-shadow:6px 8px 0 rgba(43,26,16,.28);transition:transform .18s,box-shadow .18s;
}
.tx-map:hover{transform:translate(-3px,-3px);box-shadow:9px 12px 0 rgba(43,26,16,.4);}
.tx-map:focus-visible{outline:4px solid var(--cream);outline-offset:3px;}
.tx-map img{display:block;width:100%;height:auto;}
/* ---- TRANSPORT: arrival modes recap ---- */
.tx-modes{margin-top:clamp(34px,4vw,48px);}
.tx-modes__h{font-family:var(--f-head);font-weight:900;color:var(--cream);font-size:clamp(22px,2.4vw,28px);margin:0 0 20px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.tx-modes__en{font-family:var(--f-label);font-size:12px;letter-spacing:.12em;color:var(--cream);text-transform:uppercase;font-weight:400;}
.tx-mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.tx-mode{display:flex;gap:14px;align-items:stretch;background:rgba(255,245,233,.1);border:2px solid rgba(255,245,233,.35);border-radius:18px;padding:20px 20px;transition:background .2s;}
.tx-mode:hover{background:rgba(255,245,233,.18);}
.tx-mode__ic{width:44px;height:44px;flex:none;border-radius:12px;background:var(--cream);border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center;}
.tx-mode__b{display:flex;flex-direction:column;flex:1;}
.tx-mode__b b{font-family:var(--f-head);font-weight:800;font-size:18px;display:block;}
.tx-mode__b p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:rgba(255,245,233,.86);}
.tx-mode__link{display:inline-block;margin-top:auto;padding-top:10px;font-size:12.5px;font-family:var(--f-head);font-weight:700;color:var(--cream);text-decoration:underline;text-underline-offset:3px;opacity:.85;transition:opacity .15s;}
.tx-mode__link:hover{opacity:1;}
/* ---- TRANSPORT & VENUE: lightbox (shared) ---- */
.txlb,.vnlb{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;background:rgba(24,14,7,.92);backdrop-filter:blur(3px);opacity:0;transition:opacity .22s;}
.txlb[hidden],.vnlb[hidden]{display:none;}
.txlb.is-open,.vnlb.is-open{opacity:1;}
.txlb__stage,.vnlb__stage{max-width:94vw;max-height:82vh;overflow:auto;border:3px solid var(--ink);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:var(--cream);cursor:zoom-in;-webkit-overflow-scrolling:touch;}
.txlb__stage.is-zoom,.vnlb__stage.is-zoom{cursor:zoom-out;}
.txlb__stage img,.vnlb__stage img{display:block;width:auto;max-width:94vw;max-height:82vh;object-fit:contain;}
.txlb__stage.is-zoom img,.vnlb__stage.is-zoom img{max-width:none;max-height:none;width:auto;height:auto;}
.txlb__close,.vnlb__close{position:absolute;top:18px;right:20px;width:52px;height:52px;border-radius:50%;background:var(--cream);border:3px solid var(--ink);color:var(--ink);font-size:30px;line-height:1;cursor:pointer;box-shadow:3px 4px 0 rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;}
.txlb__close:hover,.vnlb__close:hover{background:var(--orange);}
.txlb__nav,.vnlb__nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;background:var(--cream);border:3px solid var(--ink);color:var(--ink);font-size:32px;line-height:1;cursor:pointer;box-shadow:3px 4px 0 rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;}
.txlb__nav:hover,.vnlb__nav:hover{background:var(--blue);color:var(--cream);}
.txlb__nav--prev,.vnlb__nav--prev{left:18px;}
.txlb__nav--next,.vnlb__nav--next{right:18px;}
.txlb__bar,.vnlb__bar{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--cream);border-radius:999px;padding:9px 20px;max-width:92vw;flex-wrap:wrap;justify-content:center;}
.txlb__title,.vnlb__title{font-family:var(--f-head);font-weight:900;font-size:15px;}
.txlb__hint,.vnlb__hint{font-size:11.5px;letter-spacing:.04em;color:rgba(255,245,233,.7);}

/* ---- SIDE EVENTS: clickable tile + photo gallery ---- */
.mtile--gallery{cursor:pointer;}
.mtile__actions{display:flex;flex-wrap:wrap;gap:10px;align-self:flex-start;margin-top:16px;}
.mtile__shot,.mtile__shop{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-label);font-size:11px;letter-spacing:.06em;font-weight:800;
  color:inherit;background:rgba(255,245,233,.26);border:2px solid currentColor;border-radius:999px;
  padding:5px 13px;cursor:pointer;transition:transform .18s,background .18s;
}
.mtile--gallery:hover .mtile__shot,.mtile__shop:hover{transform:translateX(3px);background:rgba(255,245,233,.5);}
.mtile__shot:focus-visible,.mtile__shop:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}

.evlb{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(24,14,7,.8);backdrop-filter:blur(2px);opacity:0;transition:opacity .22s;}
.evlb[hidden]{display:none;}
.evlb.is-open{opacity:1;}
.evlb__panel{position:relative;width:min(1000px,94vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;background:var(--cream);border:3px solid var(--ink);border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.5);}
.evlb__close{position:absolute;top:18px;right:20px;z-index:5;width:48px;height:48px;border-radius:50%;background:var(--cream);border:3px solid var(--ink);color:var(--ink);font-size:28px;line-height:1;cursor:pointer;box-shadow:2px 3px 0 rgba(43,26,16,.35);transition:background .18s;}
.evlb__close:hover{background:var(--orange);}
.evlb__grid{columns:3 200px;column-gap:10px;padding:18px;overflow:auto;-webkit-overflow-scrolling:touch;}
.evlb__grid[hidden]{display:none;}
.evthumb{padding:0;font:inherit;display:block;break-inside:avoid;margin-bottom:10px;border-radius:6px;overflow:hidden;cursor:zoom-in;transition:opacity .15s,transform .15s;}
.evthumb:hover{opacity:.88;transform:scale(1.01);}
.evthumb:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
.evthumb img{display:block;width:100%;height:auto;}
.evlb__empty{padding:60px 28px;text-align:center;color:var(--ink);}
.evlb__empty[hidden]{display:none;}
.evlb__wip{display:flex;align-items:center;justify-content:center;min-height:360px;padding:40px 28px;position:relative;overflow:hidden;background:var(--cream);}
.evlb__wip[hidden]{display:none;}
.evlb__wip-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(var(--ink) 1.4px,transparent 1.6px);background-size:26px 26px;opacity:.09;}
.evlb__wip-floatdec{position:absolute;pointer-events:none;}
.evlb__wip-floatdec.d1{bottom:-4%;right:-2%;width:130px;--mc:var(--blue);opacity:.22;}
.evlb__wip-floatdec.d2{top:7%;left:4%;width:68px;--mc:var(--orange);opacity:.32;}
.evlb__wip-body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:420px;}
.evlb__wip-badge{width:80px;height:80px;display:grid;place-items:center;background:var(--orange);border:3px solid var(--ink);border-radius:50%;box-shadow:5px 6px 0 rgba(43,26,16,.22);color:var(--ink);margin-bottom:20px;animation:wipFloat 3.6s ease-in-out infinite;}
.evlb__wip-badge svg{width:38px;height:38px;}
@keyframes wipFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@media(prefers-reduced-motion:reduce){.evlb__wip-badge{animation:none;}}
.evlb__wip .eyebrow{color:var(--sunset);margin-bottom:8px;}
.evlb__wip-head{font-family:var(--f-label);font-weight:900;font-size:clamp(22px,3vw,32px);letter-spacing:.05em;margin:0 0 12px;color:var(--ink);text-transform:uppercase;}
.evlb__wip-sub{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin:0 0 24px;}
.evlb__wip-wave{width:clamp(120px,22vw,200px);height:18px;--mc:var(--orange);}
.evlb__empty-ic{display:inline-flex;color:var(--pink);margin-bottom:8px;}
.evlb__empty-ic svg{width:56px;height:56px;}
.evlb__empty h3{font-family:var(--f-head);font-weight:900;font-size:22px;margin:6px 0 8px;letter-spacing:.04em;}
.evlb__empty p{font-size:14px;line-height:1.6;opacity:.75;margin:0;max-width:340px;margin-inline:auto;}
.evlb__viewer{position:fixed;inset:0;z-index:1201;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(24,14,7,.97);opacity:0;transition:opacity .2s;}
.evlb__viewer[hidden]{display:none;}
.evlb__viewer.is-open{opacity:1;}
.evlb__vstage{max-width:92%;max-height:90vh;display:flex;align-items:center;justify-content:center;}
.evlb__vstage img{display:block;max-width:100%;max-height:88vh;object-fit:contain;border-radius:6px;box-shadow:0 8px 32px rgba(0,0,0,.6);}
.evlb__vclose{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;background:var(--cream);border:3px solid var(--ink);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;transition:background .18s;}
.evlb__vclose:hover{background:var(--orange);}
.evlb__vnav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:var(--cream);border:3px solid var(--ink);color:var(--ink);font-size:30px;line-height:1;cursor:pointer;transition:background .18s,color .18s;}
.evlb__vnav:hover{background:var(--blue);color:var(--cream);}
.evlb__vnav--prev{left:14px;}
.evlb__vnav--next{right:14px;}
.evlb__count{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:var(--ink);color:var(--cream);border-radius:999px;padding:7px 18px;font-family:var(--f-label);font-size:12px;letter-spacing:.06em;}
@media(max-width:640px){
  .evlb__grid{columns:2 140px;column-gap:8px;padding:12px;}
  .evthumb{margin-bottom:8px;}
  .evlb__vnav{width:44px;height:44px;font-size:26px;}
  .evlb__vnav--prev{left:6px;}.evlb__vnav--next{right:6px;}
}

/* ============================================================
   MARKET
   ============================================================ */
.market{background:var(--cream);}
.market__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.mtile{
  position:relative;border:3px solid var(--ink);border-radius:var(--radius);padding:26px 24px;overflow:hidden;
  min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:5px 6px 0 rgba(43,26,16,.16);
  transition:transform .2s,box-shadow .2s;
}
.mtile:hover{transform:translate(-2px,-2px);box-shadow:8px 9px 0 rgba(43,26,16,.22);}
.mtile:active{transform:translate(1px,2px);box-shadow:2px 3px 0 rgba(43,26,16,.12);}
.mtile h3{font-family:var(--f-head);font-weight:900;font-size:23px;margin:0;}
.mtile h3 .en{display:block;font-family:var(--f-label);font-size:11px;letter-spacing:.06em;opacity:.7;margin-top:4px;}
.mtile p{margin:10px 0 0;font-size:14px;line-height:1.5;}
.mtile__ic{position:absolute;top:20px;right:20px;opacity:.5;}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:var(--cream);}
.faq__grid{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(28px,5vw,64px);align-items:start;}
.faq-list{display:flex;flex-direction:column;}
.faq-item{border-top:2px solid rgba(43,26,16,.15);}
.faq-item:last-child{border-bottom:2px solid rgba(43,26,16,.15);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--f-head);font-weight:800;font-size:clamp(16px,1.5vw,20px);color:var(--ink);
}
.faq-q .pm{flex:none;width:30px;height:30px;border-radius:50%;border:2.5px solid var(--ink);position:relative;transition:.25s;}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--ink);border-radius:2px;}
.faq-q .pm::before{width:13px;height:2.5px;top:50%;left:50%;transform:translate(-50%,-50%);}
.faq-q .pm::after{width:2.5px;height:13px;top:50%;left:50%;transform:translate(-50%,-50%);transition:.25s;}
.faq-item.open .pm{background:var(--accent);}
.faq-item.open .pm::after{transform:translate(-50%,-50%) scaleY(0);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a p{margin:0 0 22px;font-size:15px;line-height:1.7;color:var(--ink-soft);max-width:60ch;}

/* ============================================================
   SPONSORS + CTA + FOOTER
   ============================================================ */
.sponsors{background:var(--cream);text-align:center;}
.sponsor-tier{margin-top:34px;}
.sponsor-tier h4{font-family:var(--f-label);font-size:12px;letter-spacing:.16em;color:var(--ink-soft);text-transform:uppercase;margin:0 0 16px;}
.sponsor-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;}
.logo-slot{
  width:170px;height:78px;border:2.5px dashed rgba(43,26,16,.3);border-radius:14px;
  display:flex;align-items:center;justify-content:center;background:#fff;
  font-family:var(--f-body);font-weight:600;font-size:13px;color:rgba(43,26,16,.4);
  overflow:hidden;
}
.logo-slot img{width:100%;height:100%;object-fit:contain;padding:10px;}
.logo-slot:has(img){border-style:solid;border-color:rgba(43,26,16,.1);}
.logo-slot.sm{width:130px;height:60px;}
.sponsor-row--sm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.sponsor-row--sm-grid .logo-slot.sm{width:auto;height:80px;}
.logo-slot.sm img{padding:8px;}

/* ---- chapter break: FAQ → Sponsors ---- */
.chapter-break{position:relative;background:var(--brown);color:var(--cream);overflow:hidden;}
.chapter-break .wave-top svg,.chapter-break .wave-bottom svg{height:clamp(34px,5vw,70px);}
.chapter-break__inner{
  position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;
  padding:clamp(46px,7vw,78px) var(--gutter);
  display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,30px);
}
.chapter-break .cb-mark{width:clamp(40px,5vw,52px);height:clamp(40px,5vw,52px);flex:none;}
.chapter-break .cb-line{
  height:3px;flex:1;max-width:200px;opacity:.7;
  background:repeating-linear-gradient(90deg,var(--cream) 0 9px,transparent 9px 20px);
}
.chapter-break .cb-word{
  font-family:var(--f-label);font-size:clamp(12px,1.5vw,16px);letter-spacing:.2em;
  text-transform:uppercase;white-space:nowrap;text-align:center;
}
.chapter-break .cb-word b{display:block;color:var(--orange);letter-spacing:.16em;margin-top:5px;}
@media(max-width:560px){.chapter-break .cb-line{max-width:60px;}}

.cta-band{background:var(--ink);color:var(--cream);text-align:center;overflow:hidden;position:relative;}
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.07;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--cream) 0 40px,transparent 40px 80px);
}
.cta-band .wrap{position:relative;z-index:1;}
.cta-band .section-title{color:var(--cream);}
.cta-band .lead{color:rgba(255,245,233,.78);margin:0 auto 30px;}

.footer{background:var(--brown);color:var(--cream);padding:60px var(--gutter) 36px;}
.footer__top{max-width:var(--maxw);margin:0 auto;}
.footer__brand .f-mark{display:flex;align-items:center;gap:12px;font-family:var(--f-label);font-size:18px;}
.footer__brand p{margin:16px 0 0;font-size:13px;line-height:1.7;color:rgba(255,245,233,.85);max-width:36ch;}
.social{display:flex;gap:12px;margin-top:8px;}
.social a{width:42px;height:42px;border-radius:12px;border:2px solid rgba(255,245,233,.4);display:flex;align-items:center;justify-content:center;transition:.2s;}
.social a:hover{background:var(--orange);border-color:var(--orange);color:var(--ink);}
.footer__bottom{max-width:var(--maxw);margin:40px auto 0;padding-top:24px;border-top:1.5px solid rgba(255,245,233,.2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:rgba(255,245,233,.75);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* 時間表欄數階梯：≥1200px 4 欄 → 981–1199px 2 欄 → ≤980px 1 欄。
   這三條規則權重相同，靠先後順序決勝負，順序不可調換。 */
@media(max-width:1199px){
  .sched-board{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:1080px){
  :root{--maxw:920px;}
  .sched-board{gap:12px;}
  .slot .t{min-width:74px;}
  .market__grid{grid-template-columns:1fr;}
}
@media(max-width:980px){
  .about__grid,.faq__grid{grid-template-columns:1fr;}
  .tx-mode-grid{grid-template-columns:1fr;}
  .txlb__nav{width:46px;height:46px;font-size:26px;}
  .sched-board{grid-template-columns:1fr;}
  .about__card{max-width:520px;margin:0 auto;}
  .faq__grid h2{margin-bottom:.2em;}
}
@media(min-width:641px) and (max-width:980px),(min-width:1200px){
  .about__links{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:1080px){
  .nav__links,.nav__cta{display:none;}
  .nav__burger{display:flex;}
}
@media(min-width:1081px) and (max-width:1280px){
  .nav__links a{padding:6px 9px;}
  .nav__links{gap:3px;}
  .nav__cta{display:none;}
}
@media(max-width:480px){
  .nav__brand span{font-size:12px;letter-spacing:.04em;}
}
@media(max-width:820px) and (orientation:portrait){
  .hero__img--landscape{display:none;}
  .hero__img--portrait{display:block;}
  /* 直式 KV 圖面自帶「珍珠海岸／2026.AUG.1-2 PLACE」底部字樣，會壓在 hero__bar 的
     DATE／PLACE 後面，故加重底部暗角把它淡出，保住畫面文字的可讀性 */
  .hero__veil{
    background:linear-gradient(180deg,rgba(43,26,16,.34) 0%,rgba(43,26,16,0) 18% 38%,rgba(43,26,16,.62) 64%,rgba(43,26,16,.94) 84%,var(--ink) 100%);
  }
}
@media(max-width:768px){
  .section-pad{padding-block:clamp(56px,9vh,96px);}
  .hero{align-items:flex-end;}
  .hero__bar{flex-direction:column;align-items:stretch;gap:18px;}
  .hero__count{width:100%;justify-content:space-between;gap:8px;}
  .count-unit{flex:1 1 0;min-width:0;padding:10px 4px;}
  .scroll-cue{bottom:26px;}
  .decor.float{width:38px!important;opacity:.4;}
  .tail-pop{width:60px;}
  .tail-pop.reveal{animation-name:tailpopSm;}
  .footer__bottom{flex-direction:column;align-items:flex-start;}
  .freepass__points{gap:8px;}
}
@media(min-width:521px) and (max-width:768px){
  .hero__count{justify-content:flex-end;gap:12px;}
  .count-unit{flex:0 0 82px;}
}
@media(max-width:820px){
  .stage-cards{grid-template-columns:repeat(2,1fr);}
  .stage-card:last-child{grid-column:1/-1;max-width:calc(50% - 9px);margin:0 auto;}
}
@media(max-width:640px){
  .stage-cards{grid-template-columns:1fr;}
  .stage-card:last-child{grid-column:auto;max-width:none;margin:0;}
  .tx-maps{grid-template-columns:1fr;}
  .tx-mode-grid{grid-template-columns:1fr;}
  .txlb__nav--prev,.vnlb__nav--prev{left:8px;}.txlb__nav--next,.vnlb__nav--next{right:8px;}
  .tx-sub-en{display:block;}
  .logo-slot:not(.sm){width:140px;height:64px;}
  .sponsor-row--sm-grid{grid-template-columns:repeat(2,1fr);}
  .band-grid{
    display:flex;flex-direction:row;
    overflow-x:auto;scroll-snap-type:x mandatory;
    gap:16px;padding:0 20px 20px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .band-grid::-webkit-scrollbar{display:none;}
  .band-grid .band-card{flex:none;width:calc(100vw - 56px);scroll-snap-align:start;}
  .carousel-dots{
    position:relative;overflow:hidden;
    width:72px;height:10px;margin:16px auto 0;
  }
  .carousel-dots__track{
    position:relative;display:flex;align-items:center;
    gap:5px;padding:0 9px;transition:transform .3s ease;
  }
  .carousel-dot{
    width:6px;height:6px;border-radius:999px;
    background:var(--cream);opacity:.25;flex-shrink:0;
    transition:opacity .25s ease;
  }
  .carousel-dot.is-near{opacity:.55;}
  .carousel-dot.is-far{opacity:.15;}
  .carousel-dot-pip{
    position:absolute;top:50%;left:9px;
    width:18px;height:6px;border-radius:999px;
    background:var(--cream);opacity:.92;
    transform:translateY(-50%) translateX(0);
    transition:transform .3s ease;
    box-shadow:0 1px 5px rgba(43,26,16,.35);
    pointer-events:none;
  }
}
@media(max-width:520px){
  .decor.float{width:32px!important;opacity:.32;}
  .nav{padding-block:12px;}
  .count-unit{padding:9px 2px;}
  .count-unit .n{font-size:24px;}
  .count-unit .l{font-size:9px;letter-spacing:.04em;}
  .hero__meta .v{font-size:17px;}
  .day-tab{flex:1 1 0;padding:13px 14px;font-size:16px;}
  .chip{padding:9px 15px;font-size:12px;}
  .stat{flex:1 1 calc(50% - 7px);padding:16px 12px;}
  .freepass__points span{font-size:13px;padding:9px 14px;}
  .btn{padding:14px 22px;font-size:13px;}
  .marquee span,.marquee__track{gap:30px;}
  .footer__bottom{font-size:11px;}
}
@media(max-width:360px){
  .count-unit .n{font-size:21px;}
  .stat{flex:1 1 100%;}
}
@media(prefers-reduced-motion:reduce){
  .float,.marquee__track,.scroll-cue .dot{animation:none!important;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   v2 ADDITIONS — language toggle · news · side events ·
                  access card · venue map · nearby
   ============================================================ */

/* ---- nav right group + language toggle ---- */
.nav__right{display:flex;align-items:center;gap:12px;}
.lang-toggle{
  font-family:var(--f-label);font-size:13px;letter-spacing:.06em;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;height:38px;padding:0 14px;cursor:pointer;
  border:2.5px solid var(--cream);border-radius:999px;background:transparent;color:var(--cream);
  text-shadow:0 1px 6px rgba(0,0,0,.4);transition:background .2s,color .2s,border-color .2s;
}
.lang-toggle:hover{background:rgba(255,245,233,.18);}
.nav.scrolled .lang-toggle{border-color:var(--ink);color:var(--ink);text-shadow:none;}
.nav.scrolled .lang-toggle:hover{background:rgba(43,26,16,.08);}
.lang-toggle--mobile{
  align-self:flex-start;
  border-color:var(--cream);color:var(--cream);height:42px;
  margin-bottom:8px;
}

/* ---- NEWS ---- */
.news{background:var(--cream);}
.news__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.news__all{flex:none;}
.news-list{display:flex;flex-direction:column;margin-top:34px;border-top:2.5px solid var(--ink);}
.news-item{
  display:grid;grid-template-columns:108px 1fr auto;align-items:center;gap:24px;
  padding:24px 8px;border-bottom:2px solid rgba(43,26,16,.22);border-left:3px solid transparent;
  transition:background .2s,padding .2s,border-left-color .2s;
}
.news-item:hover{background:#fff;padding-inline:18px;border-left-color:var(--accent);}
.news-item__date{display:flex;flex-direction:column;align-items:center;line-height:1;}
.news-item__date .d{font-family:var(--f-label);font-size:34px;color:var(--accent);}
.news-item__date .my{font-family:var(--f-body);font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--ink-soft);margin-top:6px;}
.news-tag{
  display:inline-block;font-family:var(--f-label);font-size:11px;letter-spacing:.08em;
  background:var(--nt,var(--orange));border:2px solid var(--ink);border-radius:999px;padding:3px 10px;color:var(--ink);margin-bottom:10px;
}
.news-item__body h3{font-family:var(--f-head);font-weight:900;font-size:clamp(17px,1.7vw,21px);line-height:1.25;margin:0 0 6px;}
.news-item__body p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-soft);}
.news-item__go{font-family:var(--f-label);font-size:22px;color:var(--ink-soft);transition:transform .2s,color .2s;}
.news-item:hover .news-item__go{transform:translate(3px,-3px);color:var(--accent);}
/* collapsed state: only the newest 4 items show (see syncNewsMore in main.js) */
.news-list--collapsed .news-item:nth-child(n+5){display:none;}
.news-more{display:flex;justify-content:center;margin-top:28px;}
.news-more[hidden]{display:none;}
.news-more__ic{display:inline-block;transition:transform .2s;}
.news-more__btn[aria-expanded="true"] .news-more__ic{transform:rotate(180deg);}
.news-more__btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){.news-more__ic{transition:none;}}
.news__note,.events__note,.sponsor-note,.venue__map-note{
  margin-top:24px;font-size:13px;color:var(--brown);font-weight:600;text-align:center;
}

/* ---- SIDE EVENTS ---- */
.events{background:var(--brown);color:var(--cream);}
.events .section-title{color:var(--cream);}
.events .section-title .en{color:rgba(255,245,233,.72);}
.events__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px;}
.event-card{
  display:flex;gap:22px;background:var(--cream);color:var(--ink);
  border:3px solid var(--ink);border-radius:var(--radius-lg);padding:30px 30px 32px;
  box-shadow:7px 9px 0 rgba(43,26,16,.32);transition:transform .2s,box-shadow .2s;
}
.event-card:hover{transform:translate(-3px,-3px);box-shadow:10px 13px 0 rgba(43,26,16,.4);}
.event-card__ic{
  flex:none;width:68px;height:68px;border-radius:18px;background:var(--ec,var(--orange));
  border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;color:var(--ink);
}
.event-card__kicker{font-family:var(--f-label);font-size:11px;letter-spacing:.1em;color:var(--ink-soft);}
.event-card__body h3{font-family:var(--f-head);font-weight:900;font-size:clamp(22px,2.4vw,28px);margin:8px 0 12px;line-height:1.12;}
.event-card__body p{margin:0 0 22px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);}
.event-card__link{font-size:13px;}

/* ---- VENUE MAP ---- */
.venue{background:var(--cream);}
/* venue map cards — one card each: attached title bar + corner zoom badge */
.venue__maps{display:grid;grid-template-columns:1.8fr 1fr;gap:clamp(18px,2.6vw,30px);margin-top:34px;align-items:start;}
.vn-map{
  display:block;width:100%;padding:0;font:inherit;text-align:left;cursor:zoom-in;
  background:var(--cream);border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;
  box-shadow:6px 8px 0 rgba(43,26,16,.22);transition:transform .18s,box-shadow .18s;
}
.vn-map:hover{transform:translate(-3px,-3px);box-shadow:9px 12px 0 rgba(43,26,16,.32);}
.vn-map:focus-visible{outline:4px solid var(--ink);outline-offset:3px;}
.vn-map__fig{position:relative;display:block;}
.vn-map__fig img{display:block;width:100%;height:auto;}
@media(max-width:768px){.venue__maps{grid-template-columns:1fr;}}

/* ---- NEARBY ---- */
.nearby{background:var(--lavender);}
.nearby .section-title{color:var(--ink);}
.nearby .section-title .en{color:var(--brown);}
.nearby__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
.nearby__grid .spot-card{aspect-ratio:3/4;}
/* image-forward spot card: photo fills card, title rides bottom-left tag, meta fades in on hover */
.spot-card{
  position:relative;display:block;border:3px solid var(--ink);background:var(--brown);
  border-radius:var(--radius);overflow:hidden;box-shadow:5px 6px 0 rgba(43,26,16,.28);
  aspect-ratio:16/10;transition:transform .2s,box-shadow .2s;
}
.spot-card:hover{transform:translate(-3px,-3px);box-shadow:8px 11px 0 rgba(43,26,16,.36);}
.spot-card__img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;}
.spot-card__hover{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  padding:18px;background:linear-gradient(155deg,rgba(43,26,16,.5),transparent 52%);
  opacity:0;transition:opacity .3s;
}
.spot-card:hover .spot-card__hover{opacity:1;}
.spot-card__dist{font-family:var(--f-label);font-size:11px;letter-spacing:.08em;color:var(--cream);text-transform:uppercase;}
.spot-card__nav{font-family:var(--f-label);font-size:13px;letter-spacing:.04em;color:var(--orange);}
/* always-visible title tag clinging to top-left edge */
.spot-card__tag{
  position:absolute;left:0;top:20px;z-index:3;
  background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-left:none;
  border-radius:0 14px 14px 0;padding:11px 20px 11px 16px;
  font-family:var(--f-head);font-weight:900;font-size:clamp(17px,1.8vw,22px);line-height:1.1;white-space:nowrap;
  box-shadow:4px 4px 0 rgba(43,26,16,.25);transition:transform .25s;
}
.spot-card:hover .spot-card__tag{transform:translateY(-2px);}

/* ---- v2 responsive ---- */
@media(max-width:980px){
  .events__grid{grid-template-columns:1fr;}
  .nearby__grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:640px){
  .news-item{grid-template-columns:64px 1fr;gap:16px;}
  .news-item__go{display:none;}
  .news-item__date .d{font-size:26px;}
  .event-card{flex-direction:column;gap:16px;padding:24px;}
  .nearby__grid{grid-template-columns:1fr;}
}
@media(max-width:1080px){
  .nav__right{display:none;}
}