/* ===================================================
   OASIS-INSPIRED THEME · THE ARABIAN NIGHTS
   Inspired by BITS Pilani Oasis (bits-oasis.org)
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&family=Cinzel+Decorative:wght@700;900&family=Cinzel:wght@600;700&family=Dancing+Script:wght@700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* Oasis Arabian Palette */
  --bg: #080a18;
  --bg-deep: #050711;
  --bg-twilight: #1a0f1f;
  --bg-card: #150d26e0;
  --bg-card-hover: #21133cf2;
  
  --sand: #eed8af;
  --sand-light: #f3e6c8;
  --sand-muted: #cfc3d6;
  --brass: #afa360;
  --brass-light: #d8cf8a;
  
  --gold: #e5ad2f;
  --gold-bright: #ffca42;
  --gold-glow: #e5ad2f80;
  
  --peach: #f0cbb3;
  --cream: #f5eee3;
  --ember: #ff7a2b;
  --plum: #3d3364;
  --plum-dark: #2a1530;
  --burgundy: #6b3a4a;
  --oasis-blue: #46a5ff;
  
  --border-gold: rgba(229, 173, 47, 0.35);
  --border-gold-hover: rgba(229, 173, 47, 0.85);
  --card-shadow: 0 16px 40px rgba(0, 0, 0, 0.75);
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.77, 0, 0.175, 1);
  
  /* Oasis Font Families */
  --font-title: 'Amita', 'Cinzel Decorative', cursive, serif;
  --font-heading: 'Cinzel Decorative', 'Cinzel', serif;
  --font-subhead: 'Cinzel', serif;
  --font-serif: 'EB Garamond', Georgia, serif;
  --font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-cursive: 'Dancing Script', cursive;
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--sand);
  font-family:var(--font-serif);
  overflow-x:hidden;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body.loading{overflow:hidden}

h1,h2,h3{
  font-family:var(--font-title);
  font-weight:700;
  letter-spacing:.04em;
}
.logo,.sign{
  font-family:var(--font-heading);
}
button,input,select,textarea{font-family:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- Preloader with Shooting Star (Oasis Style) ---------- */
#loader{
  position:fixed;
  inset:0;
  z-index:200;
  background:radial-gradient(circle at center,#160b2b 0%,#080a18 70%);
  display:grid;
  place-items:center;
  transition:opacity .9s var(--ease-spring),visibility .9s;
}
.loader-content{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}
.loader-logo{
  font-family:var(--font-title);
  font-size:clamp(2.2rem,5vw,3.4rem);
  color:var(--sand-light);
  letter-spacing:.15em;
  text-shadow:0 0 35px #e5ad2fa0,0 2px 8px #000;
}
#loader b{
  font-family:var(--font-sans);
  font-size:2.4rem;
  font-weight:700;
  color:var(--gold-bright);
  letter-spacing:.08em;
  text-shadow:0 0 25px var(--ember);
}
.loader-sub{
  font-family:var(--font-sans);
  color:var(--brass-light);
  font-size:.85rem;
  letter-spacing:.25em;
  text-transform:uppercase;
}
body:not(.loading) #loader{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* Shooting Stars effect */
.stars{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(2px 2px at 15% 25%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 70% 18%,#fff,transparent),
    radial-gradient(2px 2px at 45% 65%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 85% 55%,#fff,transparent),
    radial-gradient(1px 1px at 25% 80%,#fff,transparent);
  background-size:300px 300px;
  animation:twinkle 2.5s infinite alternate;
}
.stars::after{
  content:"";
  position:absolute;
  top:18%;
  left:-20%;
  width:180px;
  height:2.5px;
  background:linear-gradient(270deg,#fff 0%,#e1f8ff 20%,#78c8ff 50%,transparent 100%);
  clip-path:polygon(0% 20%,86% 38%,100% 50%,86% 62%,0% 80%);
  filter:drop-shadow(0 0 6px #78c8ff) drop-shadow(0 0 14px #46a5ff);
  animation:comet 3s linear infinite;
}
@keyframes twinkle{to{opacity:.45}}
@keyframes comet{to{transform:translate(145vw,55vh) rotate(22deg)}}

/* ---------- Curtain Wipe & Progress Bar ---------- */
#curtain{
  position:fixed;
  inset:0;
  z-index:180;
  pointer-events:none;
  background:linear-gradient(90deg,#1a0f1f,#3d1a38 30%,#6b3a4a 60%,#b5523a 85%,#e5ad2f);
  clip-path:inset(0 100% 0 0);
}
#curtain.in{animation:curtainIn .5s var(--ease) forwards}
#curtain.out{animation:curtainOut .5s var(--ease) forwards}
@keyframes curtainIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes curtainOut{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}

#bar{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:100%;
  z-index:190;
  background:linear-gradient(90deg,var(--gold),var(--ember),var(--oasis-blue));
  transform:scaleX(0);
  transform-origin:left;
}
#glow{
  position:fixed;
  left:0;
  top:0;
  width:360px;
  height:360px;
  margin:-180px 0 0 -180px;
  border-radius:50%;
  pointer-events:none;
  z-index:6;
  background:radial-gradient(#ffaa4a28,transparent 65%);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .4s;
  will-change:transform;
}
#fx{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:7;
}

/* ---------- Navbar (Oasis Style) ---------- */
nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 4vw;
  background:linear-gradient(180deg,#080a18f5,#080a18e0 80%,transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:all .3s ease;
  gap:12px;
}
.nav-toggle{
  display:none;
  background:transparent;
  border:1.5px solid var(--border-gold);
  border-radius:8px;
  width:40px;
  height:40px;
  cursor:pointer;
  padding:8px 7px;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  transition:all .25s ease;
  z-index:1001;
}
.nav-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:var(--gold);
  border-radius:2px;
  transition:all .3s ease;
  transform-origin:center;
}
.nav-open .nav-toggle{
  background:#1f1338;
  border-color:var(--gold);
}
.nav-open .nav-toggle span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}
.nav-open .nav-toggle span:nth-child(2){
  opacity:0;
  transform:scaleX(0);
}
.nav-open .nav-toggle span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}
.logo{
  color:var(--sand-light);
  text-decoration:none;
  letter-spacing:.22em;
  font-size:1.4rem;
  font-weight:900;
  text-shadow:0 0 20px #e5ad2f77,0 2px 4px #000;
  display:flex;
  align-items:center;
  gap:8px;
}
.logo::after{
  content:"2026";
  font-family:var(--font-sans);
  font-size:.7rem;
  letter-spacing:.15em;
  color:var(--gold);
  border:1px solid var(--border-gold);
  padding:2px 6px;
  border-radius:10px;
}
.pill{
  background:#1f1338b8;
  border:1.5px solid var(--border-gold);
  border-radius:40px;
  padding:8px 16px;
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  box-shadow:0 4px 20px #0008;
}
.pill a{
  font-family:var(--font-sans);
  font-weight:600;
  color:var(--sand);
  text-decoration:none;
  margin:0 12px;
  display:inline-block;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:transform .2s,color .2s;
}
.pill a:hover,.pill a.active{
  transform:scale(1.08);
  color:var(--gold-bright);
  text-shadow:0 0 12px #e5ad2faa;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.nav-btn{
  font-family:var(--font-sans);
  font-weight:600;
  background:#1f1338aa;
  border:1px solid var(--border-gold);
  color:var(--sand-light);
  padding:8px 16px;
  border-radius:24px;
  font-size:.82rem;
  letter-spacing:.06em;
  text-decoration:none;
  transition:all .25s ease;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.nav-btn:hover{
  background:#321c54;
  color:var(--gold-bright);
  border-color:var(--gold);
  transform:translateY(-1px);
  box-shadow:0 4px 15px #e5ad2f44;
}
.nav-btn-primary{
  background:linear-gradient(135deg,#b5523a,#e5ad2f);
  color:#0f0714;
  font-weight:700;
  border:1px solid var(--gold);
  box-shadow:0 4px 16px #b5523a66;
}
.nav-btn-primary:hover{
  background:linear-gradient(135deg,#e5ad2f,#ff8f4a);
  color:#000;
  box-shadow:0 6px 20px #e5ad2f88;
}

/* ---------- Scenes ---------- */
.scene{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:110px 5vw 70px;
}
.night{
  background:linear-gradient(#070920 0%,#181042 38%,#4a1c44 70%,#b5523a 92%,#e5ad2f 100%);
}
.dusk{
  background:
    radial-gradient(circle at 50% 0,#5a1c58bb,transparent 65%),
    linear-gradient(rgba(26, 13, 51, 0.86), rgba(51, 24, 70, 0.9)),
    url('assets/events-bg.webp') center / cover no-repeat;
}
.plum{
  background:
    radial-gradient(circle at 50% 40%,#4e2a77bb,transparent 70%),
    linear-gradient(rgba(17, 8, 38, 0.88), rgba(46, 20, 82, 0.92)),
    url('assets/about-bg.webp') center / cover no-repeat;
}
.dawn{
  background:
    radial-gradient(circle at 50% 20%,#b8582f44,transparent 70%),
    linear-gradient(rgba(29, 12, 38, 0.86), rgba(70, 28, 57, 0.9)),
    url('assets/contact-bg.webp') center / cover no-repeat;
}

h2{
  font-size:clamp(2.2rem,4.8vw,3.5rem);
  color:var(--sand-light);
  text-shadow:0 3px 15px #000c,0 0 25px #e5ad2f55;
  text-align:center;
  margin-bottom:14px;
}
.section-lead{
  max-width:720px;
  text-align:center;
  color:var(--sand);
  font-size:1.2rem;
  margin-bottom:34px;
}

/* ---------- Buttons (Oasis Gold / Velvet) ---------- */
.btn{
  font-family:var(--font-sans);
  font-weight:700;
  text-transform:uppercase;
  background:linear-gradient(135deg,#b5523a,#7a2e22);
  color:var(--cream);
  border:2px solid var(--gold);
  padding:13px 38px;
  border-radius:30px;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  letter-spacing:.12em;
  box-shadow:0 8px 24px #000a,0 0 20px #e5ad2f33;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  transition:all .25s ease;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px #b5523a88,0 0 25px #e5ad2f66;
  filter:brightness(1.1);
  color:#fff;
}
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,transparent 30%,#ffffff99 50%,transparent 70%);
  transform:translateX(-120%);
  animation:sweep 3.2s infinite;
}
@keyframes sweep{60%,to{transform:translateX(120%)}}

.btn-outline{
  background:#1a0e2ccc;
  border-color:var(--border-gold);
  color:var(--sand);
}
.btn-outline:hover{
  background:#2f174aaa;
  border-color:var(--gold);
  color:var(--gold-bright);
}
.btn-block{width:100%}
.btn-sm{padding:9px 22px;font-size:.82rem}

/* ---------- Hero Scene ---------- */
#home{justify-content:flex-start;padding-top:13vh}
.moon-wrap{
  position:absolute;
  top:6%;
  right:9%;
  width:min(22vw,220px);
  aspect-ratio:1;
  z-index:2;
}
.hero-moon{
  position:relative;
  width:100%;
  height:100%;
  object-fit:contain;
  background:none !important;
  box-shadow:none !important;
  filter:drop-shadow(0 0 35px rgba(255, 220, 140, 0.8)) drop-shadow(0 0 80px rgba(229, 173, 47, 0.5));
}
.moon-glow{
  position:absolute;
  inset:-25%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255, 230, 160, 0.4), rgba(229, 173, 47, 0.15) 50%, transparent 70%);
  pointer-events:none;
  animation:moonPulse 4s ease-in-out infinite alternate;
}
@keyframes moonPulse{
  0%{transform:scale(0.95);opacity:0.75}
  100%{transform:scale(1.12);opacity:1}
}
.moon{
  position:absolute;
  top:8%;
  right:10%;
  width:min(20vw,200px);
  aspect-ratio:1;
  border-radius:50%;
}
#rb-pdf-btn, .btn-pdf, .card-btn-pdf{
  background:linear-gradient(135deg, #183358, #0e1e36);
  border:1.5px solid var(--oasis-blue);
  color:#e1f8ff;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-weight:600;
  transition:all .25s ease;
}
#rb-pdf-btn:hover, .btn-pdf:hover, .card-btn-pdf:hover{
  background:linear-gradient(135deg, #254a7c, #152b4d);
  border-color:#78c8ff;
  box-shadow:0 6px 20px rgba(70, 165, 255, 0.45);
  color:#fff;
  transform:translateY(-2px);
}
.hero{
  text-align:center;
  z-index:3;
  display:grid;
  gap:16px;
  justify-items:center;
  text-shadow:0 2px 8px #000e,0 0 35px #000b;
}
.logo-draw{
  width:min(90vw,840px);
  overflow:visible;
  filter:drop-shadow(0 0 22px #000);
}
.logo-draw text{
  font-family:var(--font-heading);
  font-size:104px;
  font-weight:700;
  fill:transparent;
  stroke:#fff;
  stroke-width:2.2;
  stroke-dasharray:3000;
  stroke-dashoffset:3000;
}
body:not(.loading) .logo-draw text{
  animation:drawLogo 2.4s var(--ease) forwards,fillLogo .8s 2s forwards;
}
@keyframes drawLogo{to{stroke-dashoffset:0}}
@keyframes fillLogo{to{fill:#fff}}

.year{
  font-family:var(--font-sans);
  color:var(--sand-light);
  font-weight:700;
  letter-spacing:.25em;
  text-transform:uppercase;
  font-size:.95rem;
  background:#0e0618bb;
  padding:6px 22px;
  border-radius:24px;
  border:1.5px solid var(--border-gold);
  box-shadow:0 0 20px #e5ad2f33;
}
.subhead{
  max-width:720px;
  color:var(--sand);
  font-size:1.25rem;
  line-height:1.6;
}
.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:10px;
}
.hero>*:not(.logo-draw){
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s,transform .8s;
}
body:not(.loading) .hero>*{opacity:1;transform:none}
.hero>*:nth-child(2){transition-delay:1.6s}
.hero>*:nth-child(3){transition-delay:1.8s}
.hero>*:nth-child(4){transition-delay:2s}

/* Parallax Layers */
[data-speed]{will-change:transform}
.cloud{position:absolute;width:300px;animation:cloudDrift 40s linear infinite alternate}
.c1{top:28%;left:6%}.c2{top:16%;left:60%;animation-duration:55s;width:240px}
@keyframes cloudDrift{from{margin-left:-8vw}to{margin-left:20vw}}
.dune{position:absolute;left:0;width:100%}
.palace{
  position:absolute;
  bottom:20%;
  left:50%;
  margin-left:calc(min(70vw,760px)/-2);
  width:min(70vw,760px);
}
.camels{position:absolute;bottom:24%;left:2%;width:min(38vw,460px)}
.d1{bottom:0}.d2{bottom:-4%}

/* Phoenix */
.phoenix{
  position:absolute;
  top:3%;
  left:50%;
  margin-left:calc(min(62vw,560px)/-2);
  width:min(62vw,560px);
  z-index:2;
  opacity:.88;
  filter:drop-shadow(0 0 32px #ff7a2b);
}
body.loading .phoenix{opacity:0}
body:not(.loading) .phoenix{
  animation:rise 2.6s var(--ease) both,glowPulse 3s 2.6s ease-in-out infinite alternate;
}
@keyframes rise{from{opacity:0;margin-top:40vh;scale:.6}to{opacity:.88;margin-top:0;scale:1}}
@keyframes glowPulse{from{filter:drop-shadow(0 0 20px #ff7a2b)}to{filter:drop-shadow(0 0 60px #ffb347)}}

/* Ribbon Marquee */
.ribbon{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  z-index:4;
  overflow:hidden;
  background:#10061ecc;
  border-top:1.5px solid var(--border-gold);
  padding:10px 0;
  backdrop-filter:blur(6px);
}
.ribbon div{display:flex;width:max-content;animation:marquee 28s linear infinite}
.ribbon span{
  font-family:var(--font-sans);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--sand-light);
  padding:0 26px;
  position:relative;
  font-size:.85rem;
}
.ribbon span::after{
  content:"◆";
  position:absolute;
  right:-5px;
  color:var(--gold);
  font-size:.7em;
  top:.2em;
}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Events Section & Arabian Cards ---------- */
.sign{
  color:var(--sand-light);
  margin:0 0 3vh;
  padding:12px 60px;
  position:relative;
  text-shadow:0 3px 10px #000;
  background:linear-gradient(#5a2d18,#2f1408);
  border:3px solid #1a0a04;
  border-radius:12px;
  box-shadow:inset 0 0 0 2px #8a5a36,0 14px 35px #000b;
  transform-origin:50% -20vh;
  animation:idle 5s ease-in-out infinite alternate;
}
.sign::before,.sign::after{
  content:"";
  position:absolute;
  top:-30vh;
  width:3px;
  height:30vh;
  background:var(--sand);
  left:18%;
}
.sign::after{left:auto;right:18%}

.category-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:30px;
}
.cat-tab{
  font-family:var(--font-sans);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:9px 22px;
  border-radius:30px;
  background:#1a0f32aa;
  border:1.5px solid var(--border-gold);
  color:var(--sand);
  font-size:.85rem;
  transition:all .25s ease;
}
.cat-tab:hover,.cat-tab.active{
  background:linear-gradient(135deg,#e5ad2f,#b5523a);
  color:#0f0618;
  font-weight:700;
  border-color:var(--gold);
  box-shadow:0 6px 18px #e5ad2f66;
}

/* Vases Showcase */
.vases{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(14px,3.8vw,42px);
  margin-top:12px;
  max-width:1160px;
  z-index:2;
}
.vase{
  display:grid;
  justify-items:center;
  gap:10px;
  color:var(--sand-light);
  font-size:1.25rem;
  font-family:var(--font-title);
  transition:filter .3s,transform .25s ease-out;
  transform-style:preserve-3d;
  padding:10px;
  border-radius:16px;
}
.vase img{
  height:clamp(120px,16vw,190px);
  filter:drop-shadow(0 12px 20px #000d);
  animation:bobV 4s ease-in-out infinite alternate;
  animation-delay:calc(var(--k)*-.6s);
}
.vase:hover{filter:brightness(1.4) drop-shadow(0 0 25px #e5ad2f88)}
@keyframes bobV{to{transform:translateY(-8px)}}

.events-summary{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:44px;
}
.summary-pill{
  font-family:var(--font-sans);
  background:#180d30cc;
  border:1px solid var(--border-gold);
  padding:12px 24px;
  border-radius:30px;
  color:var(--sand);
  font-size:.9rem;
  letter-spacing:.04em;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow:0 6px 20px #0008;
}
.summary-pill b{color:var(--gold-bright);font-weight:700}
.badge-icon{font-size:1.25rem}

/* ---------- Dedicated Events Page Grid (Oasis Arch Cards) ---------- */
.events-page-main{
  max-width:1300px;
  margin:0 auto;
  padding:20px 4vw 90px;
}
.events-search-wrap{
  width:min(640px,100%);
  margin:0 auto 30px;
  position:relative;
}
.events-search-wrap input{
  width:100%;
  padding:14px 22px 14px 48px;
  background:#140c2ce0;
  border:1.5px solid var(--border-gold);
  border-radius:30px;
  color:var(--cream);
  font-size:1rem;
  font-family:var(--font-serif);
  backdrop-filter:blur(8px);
  transition:all .25s ease;
}
.events-search-wrap input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 18px #e5ad2f66;
}
.events-search-wrap .search-icon{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  font-size:1.1rem;
  opacity:.7;
}

.events-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:30px;
}

/* Arabian Arch Event Card */
.event-card{
  background:linear-gradient(135deg,#170e33ef,#261245e6);
  border:1.5px solid var(--border-gold);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--card-shadow);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
  display:flex;
  flex-direction:column;
  position:relative;
}
.event-card:hover{
  transform:translateY(-8px);
  border-color:var(--gold);
  box-shadow:0 20px 45px #000e,0 0 30px #e5ad2f44;
}
.event-card-media{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#0a0618;
}
.event-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease);
}
.event-card:hover .event-card-media img{
  transform:scale(1.08);
}
.event-arch-overlay{
  position:absolute;
  inset:0;
  border-bottom:3px solid var(--border-gold);
  pointer-events:none;
}
.event-card-tag{
  position:absolute;
  top:12px;
  left:14px;
  background:#0a061cfa;
  border:1px solid var(--border-gold);
  color:var(--gold-bright);
  font-family:var(--font-sans);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:4px 12px;
  border-radius:14px;
}
.event-card-prize{
  position:absolute;
  bottom:12px;
  right:14px;
  background:linear-gradient(135deg,#b5523a,#e5ad2f);
  color:#0f0618;
  font-family:var(--font-sans);
  font-size:.8rem;
  font-weight:800;
  padding:5px 12px;
  border-radius:14px;
  box-shadow:0 4px 12px #0008;
}

.event-card-body{
  padding:22px 22px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex-grow:1;
}
.event-card-body h3{
  font-family:var(--font-title);
  color:var(--sand-light);
  font-size:1.55rem;
  line-height:1.25;
}
.event-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-family:var(--font-sans);
  font-size:.8rem;
  color:var(--brass-light);
}
.event-card-meta span{
  background:#ffffff0d;
  padding:3px 10px;
  border-radius:12px;
  border:1px solid #ffffff15;
}
.event-card-desc{
  color:var(--sand);
  font-size:1.05rem;
  line-height:1.6;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.event-card-footer{
  margin-top:auto;
  padding-top:14px;
  border-top:1px dashed #e5ad2f33;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
  align-items:center;
}
.event-rule-link{
  font-family:var(--font-title);
  color:var(--gold);
  text-decoration:none;
  font-size:.95rem;
  border-bottom:1px dashed var(--gold);
  transition:all .2s ease;
}
.event-rule-link:hover{color:#fff;border-bottom-style:solid}
.card-btn-pdf{
  padding:6px 14px;
  border-radius:20px;
  font-size:.78rem;
  font-family:var(--font-sans);
  font-weight:700;
  letter-spacing:.04em;
  background:linear-gradient(135deg, #183358, #0e1e36);
  border:1.5px solid var(--oasis-blue);
  color:#e1f8ff;
  display:inline-flex;
  align-items:center;
  gap:4px;
  text-decoration:none;
  transition:all .2s ease;
}
.card-btn-pdf:hover{
  background:linear-gradient(135deg, #254a7c, #152b4d);
  border-color:#78c8ff;
  box-shadow:0 4px 14px rgba(70, 165, 255, 0.45);
  color:#fff;
  transform:translateY(-1px);
}

/* ---------- Modals ---------- */
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:150;
  display:grid;
  place-items:center;
  padding:20px;
  background:radial-gradient(circle at center,#1a0d33e6,#050711fa);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow-y:auto;
}
.modal-backdrop[hidden]{display:none}

.m-close{
  position:absolute;
  top:14px;
  right:18px;
  font-size:2.4rem;
  line-height:1;
  color:var(--gold);
  transition:transform .2s,color .2s;
  z-index:10;
}
.m-close:hover{transform:scale(1.2);color:#fff}

/* Event Details Modal Card */
.m-card{
  position:relative;
  width:min(680px,100%);
  display:block;
  padding:44px;
  background:linear-gradient(135deg,#160e35fa,#251347f8);
  border:2px solid var(--gold);
  border-radius:20px;
  box-shadow:0 25px 70px #000,0 0 40px #e5ad2f33;
  animation:modalIn .45s var(--ease);
}
.m-cat-tag{
  color:var(--gold);
  font-family:var(--font-sans);
  font-weight:700;
  letter-spacing:.2em;
  font-size:.8rem;
  text-transform:uppercase;
  margin-bottom:8px;
}
.m-text h3{
  color:var(--sand-light);
  font-size:2.2rem;
  line-height:1.2;
  margin-bottom:14px;
  text-shadow:0 0 20px #e5ad2f44;
}
.m-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
  font-family:var(--font-sans);
}
.m-badge{
  background:#ffffff14;
  border:1px solid var(--border-gold);
  color:var(--sand-light);
  font-size:.8rem;
  font-weight:600;
  padding:5px 12px;
  border-radius:18px;
}
.m-text p{color:var(--sand);line-height:1.7;margin-bottom:14px;font-size:1.1rem}
.m-loc{color:var(--gold);font-weight:600}
.m-loc::before{content:"📍 ";font-weight:normal}
.m-actions{
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:22px;
}
.m-reg-btn{padding:11px 28px;font-size:.9rem}



.m-nav{
  grid-column:1/-1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:26px;
  color:var(--peach);
}
.m-nav button{
  font-size:2.6rem;
  line-height:1;
  color:var(--gold);
  transition:transform .2s;
}
.m-nav button:hover{transform:scale(1.25);color:#fff}

@keyframes modalIn{from{opacity:0;transform:translateY(30px) scale(.95)}}
@keyframes eventAppear{from{opacity:0;transform:translateX(18px)}}

/* ---------- Rulebook Modal (Oasis Ornate Card) ---------- */
.rulebook-card{
  position:relative;
  width:min(880px,100%);
  max-height:88vh;
  display:flex;
  flex-direction:column;
  background:linear-gradient(135deg,#180e38fa,#25144afa);
  border:2px solid var(--gold);
  border-radius:20px;
  padding:38px 44px;
  box-shadow:0 30px 80px #000,0 0 50px #e5ad2f33;
  animation:modalIn .4s var(--ease);
}
.rb-header{
  border-bottom:1px solid #e5ad2f44;
  padding-bottom:18px;
  margin-bottom:20px;
}
.rb-tag{
  color:var(--gold);
  font-family:var(--font-sans);
  font-weight:700;
  letter-spacing:.22em;
  font-size:.8rem;
  text-transform:uppercase;
}
.rb-header h2{text-align:left;font-size:2rem;margin-bottom:4px}
.rb-subtitle{color:var(--sand);font-size:1.05rem}

.rb-content{
  overflow-y:auto;
  padding-right:12px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.rb-content::-webkit-scrollbar{width:6px}
.rb-content::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}

.rb-section h4{
  font-family:var(--font-title);
  color:var(--gold);
  font-size:1.35rem;
  margin-bottom:10px;
  border-bottom:1px dashed #e5ad2f33;
  padding-bottom:4px;
}
.rb-section ul{
  padding-left:22px;
  display:grid;
  gap:8px;
  color:var(--cream);
  font-size:1.08rem;
}
.rb-box{
  background:#ffffff0d;
  border-left:3px solid var(--gold);
  padding:14px 18px;
  border-radius:0 8px 8px 0;
  color:var(--cream);
  line-height:1.65;
}
.rb-criteria{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
}
.rb-crit-chip{
  background:#1d113d;
  border:1px solid #e5ad2f44;
  padding:12px 16px;
  border-radius:10px;
}
.rb-crit-chip b{
  font-family:var(--font-sans);
  color:var(--gold-bright);
  display:block;
  font-size:1.25rem;
  font-weight:800;
}
.rb-crit-chip small{color:var(--sand-light);font-size:.85rem}

.rb-prizes{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.rb-prize-box{
  flex:1 1 180px;
  background:linear-gradient(135deg,#3d2218,#1f1338);
  border:1.5px solid var(--gold);
  border-radius:10px;
  padding:14px 18px;
  text-align:center;
}
.rb-prize-box span{
  font-family:var(--font-sans);
  display:block;
  color:var(--sand);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.rb-prize-box b{color:var(--gold-bright);font-size:1.4rem;font-family:var(--font-title)}

.rb-coords{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.rb-coord-chip{
  background:#231445;
  border:1px solid #ffffff22;
  padding:12px 16px;
  border-radius:10px;
  font-size:.95rem;
}
.rb-coord-chip b{color:var(--cream);display:block}
.rb-coord-chip a{color:var(--gold);text-decoration:none;font-size:.85rem}

.rb-footer{
  display:flex;
  gap:16px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid #e5ad2f33;
}

/* ---------- Registration Modal ---------- */
.reg-card{
  position:relative;
  width:min(760px,100%);
  max-height:90vh;
  overflow-y:auto;
  background:linear-gradient(135deg,#150d30fa,#231144fa);
  border:2px solid var(--gold);
  border-radius:20px;
  padding:38px 44px;
  box-shadow:0 30px 80px #000,0 0 50px #e5ad2f33;
  animation:modalIn .4s var(--ease);
}
.reg-header{
  text-align:center;
  margin-bottom:24px;
}
.reg-badge{
  font-family:var(--font-sans);
  color:var(--gold);
  font-size:.78rem;
  letter-spacing:.25em;
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:6px;
}
.reg-header h2{font-size:2.1rem;margin-bottom:8px}
.reg-header p{color:var(--sand);font-size:1rem}

.reg-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.form-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.form-group label{
  font-family:var(--font-sans);
  color:var(--sand-light);
  font-size:.85rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.form-group input,
.form-group select,
.inquiry-form input,
.inquiry-form textarea{
  background:#0a061c;
  border:1.5px solid #e5ad2f55;
  color:var(--cream);
  padding:11px 16px;
  border-radius:10px;
  font-family:var(--font-serif);
  font-size:1.05rem;
  transition:border-color .25s,box-shadow .25s;
}
.form-group input:focus,
.form-group select:focus,
.inquiry-form input:focus,
.inquiry-form textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 14px #e5ad2f55;
}
.form-checkbox label{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--sand);
  font-size:.95rem;
  cursor:pointer;
}
.form-checkbox input{
  width:18px;
  height:18px;
  accent-color:var(--gold);
}
.form-footer{margin-top:10px}

/* ---------- Pass Modal ---------- */
.pass-card{
  position:relative;
  width:min(540px,100%);
  display:flex;
  flex-direction:column;
  gap:20px;
  animation:modalIn .4s var(--ease);
}
.pass-ticket{
  background:linear-gradient(135deg,#2b1747,#110829);
  border:2px solid var(--gold);
  border-radius:20px;
  padding:34px 30px;
  position:relative;
  box-shadow:0 30px 70px #000,0 0 40px #e5ad2f44;
}
.pass-ticket::before,.pass-ticket::after{
  content:"";
  position:absolute;
  top:50%;
  width:26px;
  height:26px;
  background:var(--bg);
  border-radius:50%;
  transform:translateY(-50%);
}
.pass-ticket::before{left:-13px}
.pass-ticket::after{right:-13px}

.pass-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1.5px dashed #e5ad2f44;
  padding-bottom:16px;
  margin-bottom:16px;
}
.pass-logo{
  font-family:var(--font-heading);
  color:var(--sand-light);
  font-size:1.6rem;
  letter-spacing:.15em;
}
.pass-status{
  font-family:var(--font-sans);
  background:#28a74533;
  border:1px solid #28a745;
  color:#75f28f;
  padding:4px 12px;
  border-radius:20px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
}
.pass-id-block{
  text-align:center;
  margin-bottom:20px;
}
.pass-lbl{font-family:var(--font-sans);font-size:.72rem;letter-spacing:.22em;color:var(--brass-light)}
.pass-id{
  font-family:var(--font-sans);
  font-size:1.9rem;
  color:var(--gold-bright);
  letter-spacing:.08em;
  font-weight:800;
}
.pass-details-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  background:#ffffff0d;
  padding:18px;
  border-radius:12px;
  margin-bottom:20px;
}
.pass-details-grid small{
  font-family:var(--font-sans);
  display:block;
  font-size:.72rem;
  color:var(--brass-light);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.pass-details-grid b{color:var(--cream);font-size:1.1rem}

.pass-barcode{
  text-align:center;
  border-top:1.5px dashed #e5ad2f44;
  padding-top:16px;
}
.barcode-lines{
  height:42px;
  background:repeating-linear-gradient(90deg,#e5ad2f 0,#e5ad2f 2px,transparent 2px,transparent 5px,#e5ad2f 5px,#e5ad2f 8px,transparent 8px,transparent 12px);
  margin-bottom:8px;
  opacity:.85;
}
.pass-barcode small{font-family:var(--font-sans);color:var(--sand);font-size:.8rem}
.pass-actions{
  display:flex;
  gap:14px;
  justify-content:center;
}

/* My Passes Drawer */
.passes-drawer-card{
  position:relative;
  width:min(660px,100%);
  max-height:85vh;
  overflow-y:auto;
  background:linear-gradient(135deg,#1c103e,#0e0724);
  border:2px solid var(--gold);
  border-radius:20px;
  padding:38px;
  box-shadow:0 25px 70px #000;
}
.passes-list{
  display:grid;
  gap:16px;
  margin-top:20px;
}
.pass-mini-card{
  background:#26154d;
  border:1px solid var(--border-gold);
  border-radius:12px;
  padding:16px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.pass-mini-info b{font-family:var(--font-title);display:block;color:var(--gold);font-size:1.2rem}
.pass-mini-info span{font-family:var(--font-sans);color:var(--sand);font-size:.85rem}
.pass-mini-id{
  font-family:var(--font-sans);
  font-weight:700;
  color:var(--cream);
  font-size:1.1rem;
}
.passes-empty{
  text-align:center;
  color:var(--sand);
  padding:44px 20px;
  font-style:italic;
}

/* ---------- Fest Schedule Scene ---------- */
.schedule-switch{
  display:flex;
  gap:14px;
  margin-bottom:32px;
  flex-wrap:wrap;
  justify-content:center;
}
.sch-btn{
  padding:11px 30px;
  border-radius:30px;
  background:#21143daa;
  border:1.5px solid var(--border-gold);
  color:var(--sand);
  font-family:var(--font-sans);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.9rem;
  transition:all .25s ease;
}
.sch-btn:hover,.sch-btn.active{
  background:linear-gradient(135deg,#e5ad2f,#b5523a);
  color:#0f0618;
  border-color:var(--gold);
  box-shadow:0 6px 20px #e5ad2f66;
}
.timeline-container{
  width:min(940px,100%);
  display:grid;
  gap:18px;
}
.timeline-card{
  background:linear-gradient(90deg,#241444cc,#150a2bcc);
  border:1.5px solid var(--border-gold);
  border-left:5px solid var(--gold);
  border-radius:14px;
  padding:20px 26px;
  display:grid;
  grid-template-columns:140px 1fr auto;
  align-items:center;
  gap:22px;
  transition:transform .2s,box-shadow .2s;
}
.timeline-card:hover{
  transform:translateX(8px);
  box-shadow:0 10px 30px #0009;
  border-color:var(--gold);
}
.tl-time{
  font-family:var(--font-sans);
  color:var(--gold-bright);
  font-weight:700;
  font-size:1.05rem;
}
.tl-info h4{
  font-family:var(--font-title);
  color:var(--sand-light);
  font-size:1.4rem;
  margin-bottom:4px;
}
.tl-info p{color:var(--sand);font-size:1rem}
.tl-tags{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  font-family:var(--font-sans);
}
.tl-venue{
  background:#ffffff14;
  color:var(--sand-light);
  padding:4px 12px;
  border-radius:14px;
  font-size:.8rem;
  white-space:nowrap;
}
.tl-cat{
  color:var(--gold);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ---------- About Section ---------- */
.about{
  max-width:820px;
  text-align:center;
  z-index:2;
  font-size:1.3rem;
  line-height:1.8;
}
.about p span{
  display:inline-block;
  white-space:pre;
  opacity:0;
  transform:translateY(.6em);
  filter:blur(5px);
  transition:opacity .7s,transform .7s,filter .7s;
  transition-delay:calc(var(--i)*30ms);
}
.about.in p span{opacity:1;transform:none;filter:none}

.stats{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(22px,4vw,48px);
  margin-top:38px;
}
.stats>div{text-align:center}
.stats b{
  display:block;
  font-size:2.6rem;
  color:var(--gold-bright);
  font-family:var(--font-sans);
  font-weight:800;
  text-shadow:0 0 25px #e5ad2f77;
}
.stats small{
  font-family:var(--font-sans);
  color:var(--sand-light);
  font-size:.85rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.clubs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;
  margin-top:44px;
  text-align:left;
}
.club-chip{
  background:#221345c0;
  border:1.5px solid var(--border-gold);
  border-radius:12px;
  padding:16px 18px;
  transition:transform .2s,border-color .2s;
}
.club-chip:hover{
  transform:translateY(-4px);
  border-color:var(--gold);
  box-shadow:0 8px 24px #0008;
}
.club-chip b{
  display:block;
  color:var(--sand-light);
  font-family:var(--font-title);
  font-size:1.2rem;
}
.club-chip span{
  font-family:var(--font-sans);
  color:var(--brass-light);
  font-size:.82rem;
}

.lantern{
  position:absolute;
  top:0;
  width:clamp(50px,7vw,90px);
  transform-origin:top;
  animation:swing 3.5s ease-in-out infinite alternate,flicker 1.6s infinite;
  filter:drop-shadow(0 0 22px #e5ad2f);
}
.lantern img{display:block;width:100%;margin-top:18vh}
.lantern::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  height:18vh;
  background:var(--sand);
}
@keyframes swing{from{transform:rotate(-2deg)}to{transform:rotate(3deg) translateY(-6px)}}
@keyframes flicker{0%,100%{opacity:.95}50%{opacity:.6}}
@keyframes idle{from{transform:rotate(-.7deg)}to{transform:rotate(.7deg)}}

/* ---------- FAQ Section ---------- */
.faq-container{
  width:min(880px,100%);
  display:grid;
  gap:16px;
}
.faq-item{
  background:#20123faa;
  border:1.5px solid var(--border-gold);
  border-radius:12px;
  overflow:hidden;
  transition:border-color .2s;
}
.faq-item.open{
  border-color:var(--gold);
  box-shadow:0 6px 22px #e5ad2f28;
}
.faq-q{
  width:100%;
  padding:20px 26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-align:left;
  font-size:1.2rem;
  color:var(--sand-light);
  font-family:var(--font-serif);
  font-weight:600;
}
.faq-arrow{
  font-size:1.5rem;
  color:var(--gold);
  transition:transform .25s ease;
}
.faq-item.open .faq-arrow{transform:rotate(45deg)}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease,padding .35s ease;
  padding:0 26px;
}
.faq-item.open .faq-a{
  max-height:220px;
  padding:0 26px 22px;
}
.faq-a p{color:var(--sand);font-size:1.1rem;line-height:1.7}

/* ---------- Contact Section ---------- */
.contact-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:44px;
  align-items:flex-start;
  justify-content:center;
  width:min(1100px,100%);
  margin-bottom:44px;
}
.parchment{
  flex:1 1 420px;
  max-width:530px;
  padding:38px 36px;
  color:var(--sand);
  background:linear-gradient(#4a2b17f2,#2e1a0df2);
  clip-path:polygon(0 2%,6% 0,18% 1.5%,35% 0,50% 2%,65% 0,80% 1.5%,100% 0,98% 18%,100% 45%,97.5% 70%,100% 100%,82% 98.5%,60% 100%,40% 98%,20% 100%,0 98.5%,1.5% 70%,0 40%,2% 18%);
  box-shadow:0 18px 45px #000c;
}
.parchment h2{text-align:left;margin-bottom:8px}
.parchment-lead{color:var(--sand-light);font-size:1rem;margin-bottom:20px}
.parchment ul{list-style:none;padding:0;display:grid;gap:8px}
.parchment li button{
  font-family:var(--font-sans);
  text-align:left;
  width:100%;
  padding:9px 14px;
  border-radius:8px;
  transition:background .2s,color .2s;
  font-size:.95rem;
  letter-spacing:.03em;
}
.parchment li button:hover,.parchment li button.active{
  background:#ffffff1a;
  color:var(--gold-bright);
  font-weight:700;
}

.quick-inquiry{
  margin-top:28px;
  padding-top:22px;
  border-top:1px dashed #e5ad2f55;
}
.quick-inquiry h3{
  font-family:var(--font-title);
  font-size:1.35rem;
  color:var(--gold);
  margin-bottom:14px;
}
.inquiry-form{display:grid;gap:12px}

.polaroid-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:20px;
}
.polaroid{
  background:#f8f3ea;
  color:#2a1a10;
  padding:22px 22px 28px;
  width:min(340px,92vw);
  display:grid;
  gap:12px;
  text-align:center;
  box-shadow:0 24px 55px #000d,0 0 30px #e5ad2f25;
  transform:rotate(2deg);
  position:relative;
  transition:transform .3s ease,box-shadow .3s ease;
  border-radius:4px;
}
.polaroid:hover{transform:rotate(0deg) scale(1.03);box-shadow:0 28px 65px #000f,0 0 40px #e5ad2f44}
.polaroid::before{
  content:"✕";
  position:absolute;
  top:-14px;
  left:50%;
  translate:-50%;
  color:#e0458f;
  font-size:1.6rem;
  font-weight:bold;
}
.polaroid .ph{
  aspect-ratio:1;
  width:100%;
  background:linear-gradient(135deg,#6b3a4a,#3d3364);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffffbb;
  font-size:3.4rem;
  font-family:var(--font-title);
  text-shadow:0 2px 10px #0006;
  background-size:cover !important;
  background-position:center top !important;
  box-shadow:inset 0 0 15px #0005;
}
.p-dept-label{
  font-family:var(--font-sans);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#8a4d25;
  font-weight:700;
}
.polaroid b{
  font-family:var(--font-cursive);
  font-size:2.2rem;
  font-weight:normal;
  color:#1e1008;
  line-height:1.15;
}
.p-meta, .polaroid a{
  font-family:var(--font-sans);
  color:#7a2e22;
  font-size:.88rem;
  text-decoration:none;
  word-break:break-all;
}
.polaroid a:hover{text-decoration:underline}
.p-phone{
  font-weight:700;
  color:#3d2012!important;
  font-size:1rem;
}
.polaroid.swap{animation:eventAppear .4s var(--ease)}

footer{
  width:100%;
  margin-top:50px;
  text-align:center;
  border-top:1.5px solid var(--border-gold);
  padding:32px 20px;
  background:#090414;
}
.footer-content p{
  color:var(--sand);
  margin-bottom:6px;
  font-size:1rem;
}
.footer-content small{
  font-family:var(--font-sans);
  color:var(--brass-light);
  font-size:.8rem;
  letter-spacing:.05em;
}

/* ---------- Festival Gallery Page & Showcase ---------- */
.gallery-page{
  background:var(--bg);
  min-height:100vh;
  padding-top:85px;
}
.gallery-hero{
  padding:60px 5vw 34px;
  text-align:center;
  max-width:980px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.gallery-hero-badge{
  font-family:var(--font-sans);
  font-weight:700;
  color:var(--gold);
  font-size:.8rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  background:#1a0f30cc;
  border:1px solid var(--border-gold);
  padding:6px 20px;
  border-radius:24px;
}
.gallery-hero h1{
  font-size:clamp(2.6rem,5.5vw,4rem);
  color:var(--sand-light);
  text-shadow:0 0 30px #e5ad2f77;
}
.gallery-hero-sub{
  color:var(--sand);
  font-size:1.2rem;
  line-height:1.75;
}

.gallery-controls{
  width:100%;
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
}
.search-box{
  position:relative;
  width:min(640px,100%);
}
.search-icon{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  font-size:1.1rem;
  opacity:.7;
}
.search-box input{
  width:100%;
  padding:14px 22px 14px 48px;
  background:#140c2ce0;
  border:1.5px solid var(--border-gold);
  border-radius:30px;
  color:var(--cream);
  font-size:1rem;
  font-family:var(--font-serif);
  transition:all .25s ease;
  backdrop-filter:blur(8px);
}
.search-box input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 18px #e5ad2f66;
}

.gallery-filter-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.g-tab{
  font-family:var(--font-sans);
  font-weight:600;
  letter-spacing:.06em;
  padding:9px 20px;
  border-radius:26px;
  background:#1a0f32aa;
  border:1.5px solid var(--border-gold);
  color:var(--sand);
  font-size:.85rem;
  transition:all .2s ease;
}
.g-tab:hover,.g-tab.active{
  background:linear-gradient(135deg,#e5ad2f,#b5523a);
  color:#0f0618;
  font-weight:700;
  border-color:var(--gold);
  box-shadow:0 6px 18px #e5ad2f66;
}

.gallery-main{
  max-width:1300px;
  margin:0 auto;
  padding:10px 4vw 85px;
}
.gallery-stats-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--font-sans);
  color:var(--sand);
  font-size:.9rem;
  letter-spacing:.05em;
  margin-bottom:24px;
  padding-bottom:12px;
  border-bottom:1px solid #e5ad2f22;
}
.gallery-stats-bar b{color:var(--gold-bright)}

/* ---------- Visual Photo Gallery Grid (Clean & Bordered, No Subtitles) ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:22px;
  padding:10px 0 70px;
}
@media (max-width:680px){
  .gallery-grid{
    grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
    gap:12px;
  }
}

.gallery-tile{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#120926;
  border:1.5px solid rgba(229,173,47,0.3);
  box-shadow:0 10px 28px rgba(0,0,0,0.65);
  cursor:pointer;
  aspect-ratio:4/3;
  transition:transform .35s cubic-bezier(0.2,0,0.2,1),box-shadow .35s ease,border-color .35s ease;
  outline:none;
}
.gallery-tile:hover,.gallery-tile:focus-visible{
  transform:translateY(-6px) scale(1.02);
  border-color:var(--gold-bright);
  box-shadow:0 20px 45px rgba(0,0,0,0.85),0 0 25px rgba(229,173,47,0.38);
  z-index:2;
}

.tile-frame{
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
}
.tile-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s cubic-bezier(0.2,0,0.2,1);
}
.gallery-tile:hover .tile-frame img{
  transform:scale(1.08);
}

.tile-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(8,10,24,0.05) 0%,rgba(229,173,47,0.15) 50%,rgba(8,10,24,0.65) 100%);
  opacity:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .3s ease;
  pointer-events:none;
}
.gallery-tile:hover .tile-overlay{
  opacity:1;
}
.tile-icon{
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(14,8,30,0.88);
  border:1.5px solid var(--gold-bright);
  color:var(--gold-bright);
  display:grid;
  place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.8),0 0 18px rgba(229,173,47,0.5);
  transform:scale(0.85);
  transition:transform .3s cubic-bezier(0.34,1.56,0.64,1);
}
.gallery-tile:hover .tile-icon{
  transform:scale(1);
}

/* Lightbox Modal (Clean Visual Focus) */
.lightbox-modal{
  position:fixed;
  inset:0;
  z-index:160;
  background:rgba(5,7,20,0.94);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:overlayIn .25s ease;
}
.lightbox-modal[hidden]{display:none}

.lightbox-topbar{
  position:absolute;
  top:18px;
  left:30px;
  right:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:10;
  pointer-events:auto;
}
.lb-counter{
  font-family:var(--font-sans);
  font-weight:700;
  color:var(--gold-bright);
  font-size:.92rem;
  letter-spacing:.08em;
  background:rgba(18,9,36,0.88);
  border:1px solid var(--border-gold);
  padding:6px 18px;
  border-radius:20px;
  backdrop-filter:blur(8px);
}
.lb-topbar-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.lightbox-close{
  background:rgba(22,11,42,0.88);
  border:1px solid var(--border-gold);
  color:var(--sand-light);
  width:42px;
  height:42px;
  border-radius:50%;
  font-size:1.6rem;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all .2s ease;
}
.lightbox-close:hover{
  background:var(--plum);
  border-color:var(--gold-bright);
  color:#fff;
  transform:scale(1.1);
}

.lightbox-stage{
  max-width:90vw;
  max-height:82vh;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:modalIn .3s cubic-bezier(0.2,0,0.2,1);
}
.lightbox-img{
  max-width:100%;
  max-height:82vh;
  object-fit:contain;
  border-radius:14px;
  border:1.5px solid var(--border-gold);
  box-shadow:0 25px 80px rgba(0,0,0,0.95),0 0 40px rgba(229,173,47,0.25);
}

.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(18,9,36,0.88);
  border:1.5px solid var(--border-gold);
  color:var(--sand-light);
  width:50px;
  height:50px;
  border-radius:50%;
  font-size:2rem;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:10;
  transition:all .2s ease;
  backdrop-filter:blur(8px);
}
.lightbox-nav:hover{
  background:var(--plum);
  border-color:var(--gold-bright);
  color:var(--gold-bright);
  transform:translateY(-50%) scale(1.12);
  box-shadow:0 0 20px rgba(229,173,47,0.5);
}
.lb-prev{left:24px}
.lb-next{right:24px}

/* Showcase Section on index.html */
.gallery-showcase{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  width:min(1120px,100%);
  margin:28px 0;
}
.showcase-thumb{
  position:relative;
  aspect-ratio:16/10;
  border-radius:14px;
  overflow:hidden;
  border:1.5px solid var(--border-gold);
  box-shadow:0 10px 28px #0008;
  transition:transform .3s,border-color .3s;
}
.showcase-thumb:hover{
  transform:scale(1.03);
  border-color:var(--gold);
  box-shadow:0 14px 35px #e5ad2f44;
}
.showcase-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.showcase-caption{
  position:absolute;
  bottom:0;
  inset-inline:0;
  padding:10px 14px;
  background:linear-gradient(0deg,#09061cf5,transparent);
  color:var(--sand-light);
  font-family:var(--font-sans);
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.05em;
}

/* Scroll Reveal */
.reveal{
  opacity:0;
  transform:translateY(35px);
  transition:opacity .9s,transform .9s;
}
.reveal.in{
  opacity:1;
  transform:none;
}

/* Toast */
.toast{
  position:fixed;
  bottom:30px;
  right:30px;
  background:linear-gradient(135deg,#e5ad2f,#b5523a);
  color:#0f0618;
  font-weight:700;
  padding:14px 26px;
  border-radius:30px;
  box-shadow:0 10px 35px #000c;
  z-index:220;
  animation:toastIn .3s var(--ease);
  font-family:var(--font-sans);
  font-size:.95rem;
}
@keyframes toastIn{from{opacity:0;transform:translateY(20px)}}

/* Responsive Queries */
@media (max-width:900px){
  .timeline-card{grid-template-columns:1fr;gap:10px}
  .tl-tags{align-items:flex-start;flex-direction:row}
  .m-card{padding:32px 24px}
  .form-row{grid-template-columns:1fr}
  .lightbox-content{grid-template-columns:1fr;max-height:86vh}
  .lightbox-media-wrap{min-height:240px;max-height:40vh}
  .lb-prev{left:8px}
  .lb-next{right:8px}
}

/* Responsive Navbar: Screens under 1050px */
@media (max-width:1050px){
  .pill a{margin:0 8px;font-size:.78rem}
  .logo{font-size:1.25rem}
  .nav-btn{padding:6px 12px;font-size:.78rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.hero>*,.about p span{opacity:1;transform:none;filter:none}
  .logo-draw text{fill:#fff;stroke-dashoffset:0}
  #fx{display:none}
}

/* ==========================================
   EVENT TILES & DAY SELECTOR (EVENTS PAGE)
   ========================================== */
.events-day-switch {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.events-day-btn {
  padding: 12px 32px;
  border-radius: 30px;
  background: rgba(33, 20, 61, 0.7);
  border: 1.5px solid var(--border-gold);
  color: var(--sand);
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.events-day-btn:hover {
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(229, 173, 47, 0.3);
}

.events-day-btn.active {
  background: linear-gradient(135deg, #e5ad2f, #b5523a);
  color: #0f0618;
  border-color: var(--gold);
  font-weight: 800;
  box-shadow: 0 6px 22px rgba(229, 173, 47, 0.5);
  transform: translateY(-2px);
}

/* Event Tile Grid Layout */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 22px;
}

/* Arabian Oasis Event Tile */
.event-tile {
  background: linear-gradient(135deg, rgba(23, 14, 51, 0.94), rgba(38, 18, 69, 0.9));
  border: 1.5px solid var(--border-gold);
  border-left: 5px solid var(--gold);
  border-radius: 16px;
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform 0.28s var(--ease), border-color 0.28s, box-shadow 0.28s;
}

.event-tile::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at top right, rgba(229, 173, 47, 0.12), transparent 70%);
  pointer-events: none;
}

.event-tile:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 24px rgba(229, 173, 47, 0.25);
}

.event-tile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.event-tile-header h3 {
  font-family: var(--font-title);
  color: var(--sand-light);
  font-size: 1.45rem;
  line-height: 1.3;
  margin: 0;
}

.event-tile-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.event-tile-tag {
  background: rgba(10, 6, 28, 0.9);
  border: 1px solid var(--border-gold);
  color: var(--gold-bright);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

.event-tile-prize {
  background: linear-gradient(135deg, #b5523a, #e5ad2f);
  color: #0f0618;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

.event-tile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  color: var(--brass-light);
  align-items: center;
}

.event-tile-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 11px;
  border-radius: 12px;
  border: 1px solid rgba(229, 173, 47, 0.18);
}

.event-tile-meta-item.time {
  color: var(--gold-bright);
  font-weight: 600;
  border-color: rgba(229, 173, 47, 0.35);
  background: rgba(229, 173, 47, 0.08);
}

.event-tile-meta-item.venue {
  color: var(--sand-light);
}

.event-tile-meta-item.team {
  color: var(--sand-muted);
}

.event-tile-desc {
  color: var(--sand);
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 768px) {
  .events-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .event-tile {
    padding: 18px 18px 18px;
  }
  .event-tile-header h3 {
    font-size: 1.25rem;
  }
  .events-day-btn {
    padding: 10px 22px;
    font-size: 0.85rem;
  }
}


/* ===== Contact Section — Unified Tabs & Layout ===== */
.contact-outer{
  max-width:980px;
  margin:0 auto;
  padding:60px 4vw 40px;
  text-align:center;
}
.contact-outer h2{margin-bottom:6px}

.contact-tabs{
  display:flex;
  justify-content:center;
  gap:14px;
  margin:20px 0 36px;
}
.contact-tab-btn{
  font-family:var(--font-title);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.06em;
  padding:12px 30px;
  border-radius:30px;
  border:2px solid var(--border-gold);
  background:transparent;
  color:var(--sand);
  cursor:pointer;
  transition:all .25s var(--ease);
}
.contact-tab-btn:hover{
  background:#ffffff0f;
  color:var(--sand-light);
}
.contact-tab-btn.active{
  background:linear-gradient(135deg,var(--gold),#c8882a);
  color:#1a0a00;
  border-color:transparent;
  box-shadow:0 4px 20px #e5ad2f44;
}

.contact-wrap-inner{
  display:flex;
  align-items:center;
  gap:44px;
  justify-content:center;
  flex-wrap:wrap;
  text-align:left;
}
.contact-wrap-inner .parchment{
  flex:1;
  min-width:280px;
  max-width:440px;
}
.contact-wrap-inner .parchment ul{
  display:grid;
  gap:9px;
  list-style:none;
  padding:0;
}
.contact-wrap-inner .parchment li button{
  width:100%;
  text-align:left;
  font-family:var(--font-title);
  font-size:.96rem;
  padding:12px 18px;
  border-radius:10px;
  border:1.5px solid var(--border-gold);
  background:linear-gradient(135deg,#1f1140cc,#2c1555cc);
  color:var(--sand-light);
  cursor:pointer;
  transition:all .2s var(--ease);
}
.contact-wrap-inner .parchment li button:hover,
.contact-wrap-inner .parchment li button.active{
  background:linear-gradient(135deg,var(--gold),#c8882a);
  color:#1a0a00;
  font-weight:700;
  border-color:transparent;
  box-shadow:0 4px 18px #e5ad2f33;
  transform:translateX(4px);
}

@media(max-width:700px){
  .contact-tabs{gap:8px}
  .contact-tab-btn{padding:10px 18px;font-size:.82rem}
  .contact-wrap-inner{gap:28px}
}

/* ===== Registration Category Choice Modal ===== */
.choice-card{
  position:relative;
  width:min(580px,94vw);
  background:linear-gradient(145deg,#1b0d38,#2a1352);
  border:2px solid var(--border-gold);
  border-radius:20px;
  padding:42px 34px 38px;
  text-align:center;
  box-shadow:0 24px 60px #000c,0 0 40px #e5ad2f33;
  animation:modalIn .35s var(--ease);
}
.choice-badge{
  font-family:var(--font-sans);
  font-size:.75rem;
  letter-spacing:.2em;
  font-weight:700;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:10px;
}
.choice-title{
  font-family:var(--font-title);
  font-size:2rem;
  color:var(--sand-light);
  margin-bottom:12px;
}
.choice-sub{
  font-family:var(--font-sans);
  font-size:1rem;
  color:var(--sand);
  line-height:1.6;
  margin-bottom:28px;
  max-width:440px;
  margin-inline:auto;
}
.choice-btns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.choice-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px 18px;
  border-radius:16px;
  text-decoration:none;
  border:2px solid var(--border-gold);
  background:linear-gradient(160deg,#241448,#341a66);
  color:var(--sand-light);
  transition:all .28s var(--ease);
}
.choice-btn:hover{
  transform:translateY(-5px);
  border-color:var(--gold);
  box-shadow:0 12px 30px #000a,0 0 25px #e5ad2f44;
}
.choice-tech:hover{
  background:linear-gradient(160deg,#183652,#214c77);
  border-color:#4fc3f7;
  box-shadow:0 12px 30px #000a,0 0 25px #0288d155;
}
.choice-cult:hover{
  background:linear-gradient(160deg,#4d1a3c,#6b2253);
  border-color:#f06292;
  box-shadow:0 12px 30px #000a,0 0 25px #e91e6355;
}
.choice-icon{
  font-size:2.4rem;
  margin-bottom:8px;
}
.choice-label{
  font-family:var(--font-title);
  font-size:1.15rem;
  font-weight:700;
  margin-bottom:6px;
  color:#fff;
}
.choice-hint{
  font-family:var(--font-sans);
  font-size:.75rem;
  color:var(--sand);
  line-height:1.4;
}

@media(max-width:540px){
  .choice-btns{grid-template-columns:1fr;gap:12px}
  .choice-card{padding:32px 20px 28px}
  .choice-title{font-size:1.6rem}
}



/* ==============================================================
   COMPREHENSIVE MOBILE & RESPONSIVE ADAPTATIONS (FINAL AUDIT)
   ============================================================== */

/* Prevent horizontal overflow across the entire document */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

img, svg, video, canvas {
  max-width: 100%;
}

/* Ensure timeline container is never hidden on any device */
.timeline-container {
  opacity: 1 !important;
  transform: none !important;
}

/* ==============================================================
   TABLET & MOBILE SCREENS (<= 920px): NAVBAR & DRAWER
   ============================================================== */
@media (max-width: 920px) {
  /* Force all reveal elements visible on mobile so nothing stays blank */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  /* Fixed compact header bar */
  nav {
    padding: 8px 4vw !important;
    height: 56px !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(8, 10, 24, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(229, 173, 47, 0.25) !important;
  }

  .logo {
    font-size: 1.15rem !important;
    letter-spacing: 0.12em !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .logo::after {
    font-size: 0.62rem !important;
    padding: 1px 5px !important;
    letter-spacing: 0.08em !important;
  }

  .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  /* Hide the "Back to Fest" text button on mobile navbar so items fit cleanly */
  .nav-actions a[href="index.html"] {
    display: none !important;
  }

  .nav-btn {
    padding: 6px 11px !important;
    font-size: 0.76rem !important;
    height: 36px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #btn-audio {
    width: 36px !important;
    padding: 0 !important;
  }
  .audio-text {
    display: none !important;
  }

  /* Hamburger Toggle Button */
  .nav-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 8px 7px !important;
    box-sizing: border-box !important;
    margin-left: 2px !important;
    border: 1.5px solid var(--border-gold) !important;
    border-radius: 8px !important;
    background: transparent !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    z-index: 1002 !important;
    transition: all 0.25s ease !important;
  }
  .nav-toggle span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background: var(--gold) !important;
    border-radius: 2px !important;
    transition: all 0.25s ease !important;
  }
  .nav-open .nav-toggle {
    background: rgba(31, 19, 56, 0.9) !important;
    border-color: var(--gold) !important;
  }
  .nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }
  .nav-open .nav-toggle span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  .nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }

  /* Dropdown Menu Drawer */
  .pill {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(13, 7, 30, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: none !important;
    border-bottom: 2px solid var(--border-gold) !important;
    border-radius: 0 0 20px 20px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85), 0 0 30px rgba(229, 173, 47, 0.25) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    max-height: 0 !important;
    padding: 0 5vw !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, transform 0.25s ease, padding 0.35s ease, visibility 0.35s !important;
    z-index: 999 !important;
  }
  .nav-open .pill {
    max-height: calc(100vh - 65px) !important;
    padding: 16px 5vw 24px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .pill a {
    margin: 0 !important;
    padding: 13px 18px !important;
    font-size: 1rem !important;
    font-family: var(--font-title) !important;
    letter-spacing: 0.08em !important;
    border-radius: 12px !important;
    border: 1px solid rgba(229, 173, 47, 0.15) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    text-align: center !important;
    color: var(--sand-light) !important;
    display: block !important;
    transition: all 0.2s ease !important;
  }
  .pill a:hover, .pill a.active {
    background: linear-gradient(135deg, var(--gold), #c8882a) !important;
    color: #120700 !important;
    font-weight: 700 !important;
    border-color: transparent !important;
  }

  /* Dimmed backdrop when drawer is open */
  .nav-open::after {
    content: "" !important;
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 995 !important;
    pointer-events: auto !important;
  }
}

/* ==============================================================
   MOBILE SCREENS (<= 768px): SECTIONS & CONTENT
   ============================================================== */
@media (max-width: 768px) {
  /* Scenes layout & padding */
  .scene {
    padding: 75px 4vw 45px !important;
    min-height: auto !important;
    overflow: visible !important;
  }
  
  #home {
    min-height: 100svh !important;
    padding-top: 14vh !important;
    padding-bottom: 50px !important;
    overflow: hidden !important;
  }

  /* Parallax assets on phone: proportional, visible, and never overlapping text */
  .moon-wrap {
    top: 8% !important;
    right: 4% !important;
    width: min(24vw, 95px) !important;
  }
  
  .cloud {
    width: 140px !important;
  }
  .c1 { top: 30% !important; left: -15px !important; }
  .c2 { top: 16% !important; right: -20px !important; left: auto !important; width: 120px !important; }

  .palace {
    position: absolute !important;
    bottom: 7% !important;
    left: 50% !important;
    width: 96vw !important;
    margin-left: -48vw !important;
    opacity: 0.9 !important;
    pointer-events: none !important;
  }

  .camels {
    position: absolute !important;
    bottom: 4% !important;
    left: 2% !important;
    width: min(46vw, 190px) !important;
    opacity: 0.95 !important;
    pointer-events: none !important;
  }

  .dune {
    height: 20vh !important;
    object-fit: cover !important;
    object-position: top !important;
    pointer-events: none !important;
  }
  .d1 { bottom: 0 !important; }
  .d2 { bottom: -2% !important; }

  /* Hero Section Typography */
  .logo-draw {
    width: min(92vw, 360px) !important;
  }
  .logo-draw text {
    font-size: 78px !important;
  }
  
  .year {
    font-size: 0.75rem !important;
    letter-spacing: 0.14em !important;
    padding: 5px 14px !important;
  }
  
  .subhead {
    font-size: 0.92rem !important;
    padding: 0 10px !important;
    line-height: 1.5 !important;
  }

  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    width: min(280px, 90vw) !important;
    gap: 10px !important;
    margin-top: 18px !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    text-align: center !important;
    padding: 11px 20px !important;
    font-size: 0.9rem !important;
  }

  /* Ribbon marquee */
  .ribbon {
    padding: 6px 0 !important;
  }
  .ribbon span {
    font-size: 0.72rem !important;
    padding: 0 14px !important;
  }

  /* Signs and section headers */
  .sign {
    font-size: 1.35rem !important;
    padding: 10px 22px !important;
    margin-bottom: 14px !important;
    width: min(92vw, 360px) !important;
    text-align: center !important;
  }
  .sign::before, .sign::after {
    display: none !important;
  }

  .section-lead {
    font-size: 0.9rem !important;
    padding: 0 10px !important;
    margin-bottom: 22px !important;
  }

  /* Festival Arenas (Vases) */
  .category-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-bottom: 18px !important;
  }
  .cat-tab {
    padding: 7px 14px !important;
    font-size: 0.78rem !important;
    border-radius: 20px !important;
  }
  .vases {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .vase {
    width: calc(33.33% - 8px) !important;
    min-width: 85px !important;
    max-width: 110px !important;
    padding: 6px !important;
    font-size: 0.85rem !important;
  }
  .vase img {
    height: clamp(75px, 18vw, 100px) !important;
  }

  .events-summary {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
  }
  .summary-pill {
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
  }

  /* Timeline & Schedule Cards on Index */
  .schedule-switch {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .sch-btn {
    padding: 9px 16px !important;
    font-size: 0.8rem !important;
    border-radius: 22px !important;
    white-space: nowrap !important;
  }
  .timeline-container {
    width: 100% !important;
    display: grid !important;
    gap: 12px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .timeline-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 15px 16px !important;
    background: linear-gradient(135deg, rgba(31, 16, 61, 0.95), rgba(18, 9, 38, 0.95)) !important;
    border: 1.5px solid var(--border-gold) !important;
    border-left: 5px solid var(--gold) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .tl-time {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--gold-bright) !important;
  }
  .tl-info {
    width: 100% !important;
  }
  .tl-info h4 {
    font-size: 1.15rem !important;
    color: var(--sand-light) !important;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
  }
  .tl-info p {
    font-size: 0.88rem !important;
    color: var(--sand) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }
  .tl-tags {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: 4px !important;
  }
  .tl-venue {
    font-size: 0.78rem !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--sand-light) !important;
  }
  .tl-cat {
    font-size: 0.78rem !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    background: rgba(229, 173, 47, 0.15) !important;
    color: var(--gold) !important;
    border: 1px solid var(--border-gold) !important;
  }

  /* Dedicated Events & Schedule Pages */
  .gallery-hero {
    padding: 30px 4vw 20px !important;
  }
  .gallery-hero h1 {
    font-size: 2rem !important;
  }
  .gallery-hero-sub {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }
  .events-day-switch {
    gap: 8px !important;
    margin: 14px 0 !important;
  }
  .events-day-btn {
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
  }
  .events-search-wrap {
    margin-bottom: 14px !important;
  }
  .gallery-filter-tabs {
    gap: 6px !important;
  }
  .g-tab {
    padding: 7px 14px !important;
    font-size: 0.78rem !important;
  }
  .events-page-main {
    padding: 15px 4vw 70px !important;
  }
  .events-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }
  .event-tile {
    padding: 16px 15px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .event-tile h3 {
    font-size: 1.15rem !important;
  }
  .event-tile-meta {
    flex-direction: column !important;
    gap: 5px !important;
  }
  .event-tile-meta-item {
    font-size: 0.82rem !important;
  }
  .event-tile-desc {
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
  }

  /* Gallery Showcase on Home */
  .gallery-showcase {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .showcase-thumb img {
    height: 130px !important;
    object-fit: cover !important;
  }

  /* Gallery Page Grid */
  .gallery-main {
    padding: 10px 4vw 70px !important;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .g-item img {
    height: 140px !important;
    object-fit: cover !important;
  }

  /* About Section Stats */
  .stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin: 24px 0 !important;
  }
  .stats > div {
    padding: 14px 10px !important;
  }
  .stats b {
    font-size: 1.7rem !important;
  }
  .stats small {
    font-size: 0.75rem !important;
  }
  .stats > div:last-child {
    grid-column: 1 / -1 !important;
  }

  /* FAQ Accordion */
  .faq-container {
    width: 100% !important;
  }
  .faq-q {
    font-size: 0.9rem !important;
    padding: 13px 14px !important;
    text-align: left !important;
  }
  .faq-a p {
    font-size: 0.86rem !important;
    padding: 0 14px 12px !important;
  }

  /* Contact: Committee & Polaroid */
  .contact-wrap-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
  }
  .contact-wrap-inner .parchment {
    width: 100% !important;
    max-width: 100% !important;
  }
  .contact-wrap-inner .parchment li button {
    padding: 11px 14px !important;
    font-size: 0.88rem !important;
  }
  .polaroid-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  .polaroid {
    width: min(300px, 88vw) !important;
    transform: none !important;
    padding: 16px 16px 22px !important;
  }
  .polaroid .ph {
    width: 100% !important;
    aspect-ratio: 1 !important;
  }
  .polaroid b {
    font-size: 1.7rem !important;
  }

  /* Event Details Modal (Arena Popup) */
  .m-card {
    padding: 22px 16px 18px !important;
    width: 94vw !important;
    border-radius: 14px !important;
  }
  .m-text h3 {
    font-size: 1.35rem !important;
  }
  .m-text p {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
  }
  .m-nav button {
    font-size: 2rem !important;
  }

  /* Rulebook & Registration Modals */
  .rulebook-card {
    width: min(600px, 94vw) !important;
    padding: 24px 16px 20px !important;
    max-height: 88vh !important;
  }
  .rb-header h2 {
    font-size: 1.35rem !important;
  }
  .rb-footer {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .rb-footer .btn {
    width: 100% !important;
    text-align: center !important;
  }
  .choice-card {
    width: min(440px, 94vw) !important;
    padding: 26px 16px 22px !important;
    border-radius: 16px !important;
  }
  .choice-title {
    font-size: 1.45rem !important;
  }
  .choice-sub {
    font-size: 0.88rem !important;
    margin-bottom: 18px !important;
  }
  .choice-btns {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .choice-btn {
    padding: 16px 14px !important;
    border-radius: 12px !important;
  }

  /* Footer */
  footer {
    padding: 24px 4vw 20px !important;
    font-size: 0.82rem !important;
  }
  .footer-content p {
    font-size: 0.85rem !important;
    margin-bottom: 4px !important;
  }
  .footer-content small {
    font-size: 0.72rem !important;
  }
}

/* ==============================================================
   VERY SMALL PHONES (<= 420px)
   ============================================================== */
@media (max-width: 420px) {
  .logo-draw {
    width: 90vw !important;
  }
  .logo-draw text {
    font-size: 64px !important;
  }
  .vase {
    width: calc(50% - 8px) !important;
    max-width: 130px !important;
  }
  .gallery-showcase {
    grid-template-columns: 1fr !important;
  }
  .gallery-grid {
    grid-template-columns: 1fr !important;
  }
  .stats {
    grid-template-columns: 1fr !important;
  }
  .stats > div:last-child {
    grid-column: auto !important;
  }
  .logo {
    font-size: 1.05rem !important;
  }
  .nav-btn {
    padding: 5px 8px !important;
    font-size: 0.72rem !important;
  }
}