/* ==========================================================================
   Cultural Forum, SMUCT — Design tokens
   Palette drawn from Bengali festival & stage life:
   ink (night-stage indigo), paper (kantha cloth cream),
   marigold (Pohela Boishakh garlands), alta (bridal/festive red),
   moyur (peacock teal)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Tiro+Bangla:ital@0;1&family=Hind+Siliguri:wght@300;400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Work+Sans:wght@500;600&family=Barlow:wght@400;500;700&family=Permanent+Marker&family=Inter:wght@500;700;800&display=swap');

:root{
  --ink: #2F4B66;
  --ink-soft: #4A6580;
  --paper: #F7F2E9;
  --paper-dim: #ECE4D5;
  --marigold: #F0C36B;
  --marigold-deep: #A97A22;
  --alta: #C4614D;
  --alta-deep: #A64A38;
  --moyur: #6C97B4;
  --line: rgba(47,75,102,0.16);
  --line-on-ink: rgba(246,240,225,0.16);

  /* Theme-adaptive tokens — these flip in dark mode, everything above stays fixed
     (header/footer/hero/buttons keep their fixed brand colors in both themes) */
  --surface: var(--paper);
  --surface-dim: var(--paper-dim);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --line-soft: var(--line);
  --card: #FAF6EC;                      /* hero slider card */
  --frost: rgba(251,248,238,0.88);       /* frosted text panel over the photo */
  --accent: var(--alta);                 /* arrows, progress ring, link hover */

  --font-display: 'Tiro Bangla', 'Fraunces', serif;
  --font-body: 'Hind Siliguri', 'Fraunces', sans-serif;
  --font-label: 'Work Sans', 'Hind Siliguri', sans-serif;
  --font-marker: 'Permanent Marker', 'Caveat Brush', cursive;

  --radius: 6px;
  --container: 1120px;

  /* motion: one set of smooth curves used everywhere (no overshoot / bounce) */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
}

:root[data-theme="dark"]{
  --surface: #18242F;
  --surface-dim: #121C25;
  --text: #EEEAE0;
  --text-soft: #C3CEDA;
  --line-soft: rgba(237,234,224,0.22);
  --card: #22323F;
  --frost: rgba(34,50,63,0.88);
  --accent: var(--marigold);
}

html{ transition: background-color .3s ease; }
body, .about-card, .committee-card, .ticket, .notice-board, .member-card, .form-card,
.search-bar input, .search-bar select, .field input, .field select, .field textarea,
.contact-info-item .icon{
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:400; margin:0 0 .5em; line-height:1.15; }
p{ margin:0 0 1em; }
button, input, textarea, select{ font-family: inherit; font-size: 1rem; }

.container{ max-width: var(--container); margin:0 auto; padding: 0 24px; }
.eyebrow{
  font-family: var(--font-label);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--alta);
  display:inline-block;
  margin-bottom: .6em;
}
.section{ padding: 84px 0; }
.section-head{ max-width: 640px; margin-bottom: 48px; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); }
.section-head p{ color: var(--text-soft); font-size: 1.05rem; }
.section--ink{ background: var(--ink); color: var(--paper); }
.section--ink .section-head p{ color: rgba(246,240,225,0.7); }
.section--dim{ background: var(--surface-dim); }

:focus-visible{ outline: 3px solid var(--moyur); outline-offset: 2px; }

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-family: var(--font-label);
  font-weight:600; font-size: .88rem;
  letter-spacing: .02em;
  border: 1.5px solid transparent;
  cursor:pointer;
  transition: transform .45s var(--ease-out), background .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.btn:hover{ transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 18px rgba(47,75,102,0.16); }
.btn:active{ transform: translateY(-1px) scale(.97); transition-duration: .1s; }
.btn-primary{ background: var(--alta); color: var(--paper); }
.btn-primary:hover{ background: var(--alta-deep); }
.btn-ghost{ border-color: currentColor; background:transparent; }
.btn-ghost:hover{ background: var(--ink); color: var(--paper); }
.section--cta{
  background: linear-gradient(135deg, var(--alta-deep) 0%, var(--alta) 55%, #b0553f 100%);
  color: var(--paper);
}
.section--cta h2{ color:#fff; }
.section--cta p{ color: rgba(246,240,225,0.85); }
.section--cta .btn-primary{ background: var(--marigold); color: var(--ink); border-color: var(--marigold); }
.section--cta .btn-primary:hover{ background: var(--paper); border-color: var(--paper); }
.section--ink .btn-ghost{ border-color: var(--paper); }
.section--ink .btn-ghost:hover{ background: var(--paper); color: var(--ink); }
@media (prefers-reduced-motion: reduce){
  .btn{ transition: background .2s ease, color .2s ease, border-color .2s ease; }
  .btn:hover, .btn:active{ transform:none; box-shadow:none; }
}

/* ---------- Alpona divider (signature motif) ---------- */
.alpona{
  height: 34px;
  width:100%;
  background-repeat: repeat-x;
  background-position: center;
  background-size: 68px 34px;
  opacity: .85;
  animation: alponaFlow 14s linear infinite;
}
@keyframes alponaFlow{
  from{ background-position: 0 center; }
  to{ background-position: 340px center; }
}
@media (prefers-reduced-motion: reduce){
  .alpona{ animation: none; }
}
.alpona--marigold{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='34' viewBox='0 0 68 34'%3E%3Cg fill='none' stroke='%23A97A22' stroke-width='1.6'%3E%3Cpath d='M0 17 C 10 4, 24 4, 34 17 C 44 30, 58 30, 68 17'/%3E%3Ccircle cx='34' cy='17' r='3' fill='%23A97A22' stroke='none'/%3E%3Ccircle cx='0' cy='17' r='2' fill='%23C4614D' stroke='none'/%3E%3Ccircle cx='68' cy='17' r='2' fill='%23C4614D' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
.alpona--cream{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='34' viewBox='0 0 68 34'%3E%3Cg fill='none' stroke='%23F6F0E1' stroke-width='1.6'%3E%3Cpath d='M0 17 C 10 4, 24 4, 34 17 C 44 30, 58 30, 68 17'/%3E%3Ccircle cx='34' cy='17' r='3' fill='%23F0C36B' stroke='none'/%3E%3Ccircle cx='0' cy='17' r='2' fill='%23F6F0E1' stroke='none'/%3E%3Ccircle cx='68' cy='17' r='2' fill='%23F6F0E1' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Header / Nav ----------
   Floating glass pill (idea: "Glassmorphism navbar" pen by CodeByMurad): blurred translucent bar,
   shimmer sweep + lift on hover. Logo sits in the middle, links on both sides. */
.site-header{
  position: fixed; top:14px; left:0; right:0; z-index:100;
  padding: 0 16px; pointer-events:none; color: var(--paper);
}
.nav{
  pointer-events:auto; position:relative;
  max-width: 1120px; margin:0 auto; padding: 8px 12px;
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; column-gap: 14px;
  background: rgba(47,75,102,0.6);
  -webkit-backdrop-filter: blur(25px) saturate(160%); backdrop-filter: blur(25px) saturate(160%);
  border: 1px solid rgba(246,240,225,0.22); border-radius: 60px;
  box-shadow: 0 8px 32px rgba(47,75,102,0.28), inset 0 1px 0 rgba(255,255,255,0.28);
}
.nav-links{ display:contents; }
.nav-wing{ display:flex; align-items:center; gap:4px; }
.nav-wing--l{ grid-column:1; grid-row:1; justify-self:end; }
.nav-wing--r{ grid-column:3; grid-row:1; justify-self:start; }
.nav-brand{ grid-column:2; grid-row:1; display:flex; align-items:center; gap:10px; }
.nav-logo{
  width:54px; height:54px; object-fit:contain;
  background: var(--paper); border-radius:50%; padding:3px;
  box-shadow: 0 0 0 3px rgba(246,240,225,0.25), 0 6px 16px rgba(0,0,0,0.25);
  transition: transform .6s var(--ease-out);
}
.nav-brand:hover .nav-logo{ transform: rotate(-8deg) scale(1.06); }
.nav-brand-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }  /* name stays for screen readers */
.nav-tools{ position:absolute; right:12px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:6px; }
.theme-toggle{
  background:rgba(246,240,225,0.08); border:1px solid rgba(246,240,225,0.22); color: var(--paper);
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.05rem;
  transition: transform .55s var(--ease-out), background .2s ease, border-color .2s ease;
}
.theme-toggle:hover{ transform: rotate(20deg) scale(1.1); background: rgba(246,240,225,0.18); border-color: var(--marigold); }
.theme-toggle:active{ transform: scale(.9); }

.nav-links a{
  position:relative; overflow:hidden; display:block;
  font-family: var(--font-label); font-size:.88rem; font-weight:500; color: rgba(255,255,255,0.95);
  padding: 10px 16px; border-radius: 999px; white-space:nowrap;
  transition: background .3s linear, color .3s linear, transform .3s ease, box-shadow .3s ease;
}
.nav-links a::before{            /* shimmer sweep */
  content:""; position:absolute; inset:0 auto 0 -100%; width:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
  transition: left .5s;
}
.nav-links a:hover::before{ left:100%; }
.nav-links a:hover{ background: rgba(255,255,255,0.2); color:#fff; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.nav-links a.active{ background: var(--marigold); color: var(--ink); font-weight:600; }
.nav-links a.active:hover{ background: var(--marigold); }

.nav-toggle{
  display:none; background:none; border:none; color: var(--paper);
  width:40px; height:40px; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center;
}
.nav-toggle span{
  width:22px; height:2px; background: currentColor; display:block; border-radius:2px;
  transition: transform .5s var(--ease-out), opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* tablets & phones: logo left, buttons right, links drop down in a glass panel */
@media (max-width: 1040px){
  .nav{ display:flex; justify-content:space-between; border-radius: 40px; padding: 8px 10px 8px 12px; }
  .nav-brand{ order:1; }
  .nav-logo{ width:46px; height:46px; }
  .nav-tools{ position:static; transform:none; order:2; }
  .nav-toggle{ display:flex; }
  .nav-links{
    display:block; position:absolute; top: calc(100% + 10px); left:0; right:0;
    background: rgba(47,75,102,0.95);
    -webkit-backdrop-filter: blur(25px) saturate(160%); backdrop-filter: blur(25px) saturate(160%);
    border: 1px solid rgba(246,240,225,0.22); border-radius: 26px;
    box-shadow: 0 14px 36px rgba(47,75,102,0.35);
    overflow:hidden; max-height:0; opacity:0; padding:0 12px; pointer-events:none;
    transition: max-height .45s var(--ease-out), opacity .3s ease, padding .4s ease;
  }
  .nav-links.open{ max-height:460px; opacity:1; padding:10px 12px 14px; pointer-events:auto; }
  .nav-wing{ flex-direction:column; align-items:stretch; gap:2px; justify-self:auto; }
  .nav-links a{
    padding: 12px 16px; opacity:0; transform: translateX(-12px);
    transition: opacity .3s ease, transform .3s ease, background .3s linear;
  }
  .nav-links.open a{ opacity:1; transform:none; }
  .nav-links.open a:hover{ transform: translateX(3px); }
  .nav-links.open .nav-wing--l a:nth-child(1){ transition-delay:.04s; }
  .nav-links.open .nav-wing--l a:nth-child(2){ transition-delay:.08s; }
  .nav-links.open .nav-wing--l a:nth-child(3){ transition-delay:.12s; }
  .nav-links.open .nav-wing--r a:nth-child(1){ transition-delay:.16s; }
  .nav-links.open .nav-wing--r a:nth-child(2){ transition-delay:.2s; }
  .nav-links.open .nav-wing--r a:nth-child(3){ transition-delay:.24s; }
  .nav-links.open .nav-wing--r a:nth-child(4){ transition-delay:.28s; }
}
@media (prefers-reduced-motion: reduce){
  .nav-toggle span{ transition:none; }
  .nav-links{ transition:none; }
  .nav-links a{ transition:none; }
}

/* ---------- Hero (Swiper slider) ----------
   Ported 1:1 from the "Swiper Hero Section Slider" pen (Hilal Morgül, MIT): same sizes, breakpoints,
   blur panel, parallax text, progress-ring dots and arrows. Only colours/fonts come from the site tokens
   so dark mode keeps working. Needs Swiper 6.7.0 (the pen's version) — see index.html. */
.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;
}
.hero-s{ background: var(--surface-dim); padding: 110px 0 40px; }
.hero-s .container{ max-width:1200px; box-sizing:content-box; padding:0 15px; }

.upk-salf-slider-wrapper{
  --hero-ink: var(--text); --hero-soft: var(--text-soft); --hero-pink: var(--accent);
  font-family: var(--font-body);
  display:flex; flex-direction:row; position:relative;
  background: var(--card); border:1px solid var(--line-soft); border-radius:12px;
  box-shadow: 0 14px 34px rgba(47,75,102,0.10);
  height:400px; padding:30px;
}
.upk-salf-slider-wrapper *{ vertical-align:middle; }
.upk-salf-slider-wrapper .swiper-container{ width:100%; min-width:0; margin-left:auto; margin-right:auto; }

/* loading shimmer until Firestore data arrives */
.upk-salf-slider-wrapper:not(.is-ready) .swiper-container{
  background: linear-gradient(100deg, var(--surface-dim) 30%, var(--line-soft) 50%, var(--surface-dim) 70%);
  background-size:220% 100%; animation: upkShimmer 1.4s linear infinite; min-width:60%;
}
@keyframes upkShimmer{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }

.upk-salf-slider-wrapper .upk-salf-item{ position:relative; display:flex; flex-direction:row-reverse; }
.upk-salf-slider-wrapper .upk-salf-item.swiper-slide-active .upk-salf-eyebrow,
.upk-salf-slider-wrapper .upk-salf-item.swiper-slide-active .upk-salf-title,
.upk-salf-slider-wrapper .upk-salf-item.swiper-slide-active .upk-salf-desc,
.upk-salf-slider-wrapper .upk-salf-item.swiper-slide-active .upk-salf-button{ opacity:1; }
.upk-salf-slider-wrapper .upk-salf-image-wrap{ position:relative; height:100%; width:100%; }
/* pen uses a fixed 800px-tall image that is simply cropped from the top; here the photo fills the frame
   and is cropped around the faces instead, so heads never get cut off */
.upk-salf-slider-wrapper .upk-xanc-img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.upk-salf-slider-wrapper .upk-xanc-img--hd{ position:absolute; inset:0; opacity:0; transition: opacity .9s ease; }
.upk-salf-slider-wrapper .upk-xanc-img--hd.show{ opacity:1; }
.upk-salf-slider-wrapper .upk-xanc-img--empty{ background: linear-gradient(135deg, var(--ink) 0%, var(--alta) 130%); }

.upk-salf-slider-wrapper .upk-salf-content-wrap{
  position:absolute; left:0; bottom:0; top:unset; max-width:460px; overflow:hidden;
  background: var(--frost); border-radius:0 10px 10px 0;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding:20px; padding-left:20px;
}
.upk-salf-slider-wrapper .upk-salf-title{
  font-family: var(--font-display); font-size:1.65rem; font-weight:400; line-height:1.1;
  color: var(--text); margin:0 0 .45em; opacity:0;
}
.upk-salf-slider-wrapper .upk-salf-desc{
  color: var(--text-soft); font-size:.95rem; line-height:1.6; max-width:42ch; margin:0 0 22px; opacity:0;
}
.upk-salf-slider-wrapper .upk-salf-button{ opacity:0; display:flex; align-items:center; flex-wrap:wrap; gap:14px 22px; }
.upk-salf-slider-wrapper .upk-salf-eyebrow{
  display:block; margin-bottom:.8em; opacity:0;
  font-family: var(--font-label); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--accent);
}
.upk-salf-slider-wrapper .upk-salf-title em{ font-style:normal; color: var(--marigold-deep); }
:root[data-theme="dark"] .upk-salf-slider-wrapper .upk-salf-title em{ color: var(--marigold); }
.upk-salf-slider-wrapper .upk-salf-button .btn{ margin:0; }
.upk-salf-slider-wrapper .upk-salf-button .link{
  color: var(--text); cursor:pointer; font-family: var(--font-label); font-weight:600; text-decoration:none;
  font-size:.88rem; transition: all .3s ease;
}
.upk-salf-slider-wrapper .upk-salf-button .link + .link{ margin-left:26px; }
.upk-salf-slider-wrapper .upk-salf-button .link:hover{ color: var(--hero-pink); }
.upk-salf-slider-wrapper .link--arrowed{ display:inline-block; }
.upk-salf-slider-wrapper .link--arrowed .arrow-icon{ position:relative; top:0; transition: transform .3s ease; vertical-align:middle; }
.upk-salf-slider-wrapper .link--arrowed .arrow-icon--circle{ transition: stroke-dashoffset .3s ease; stroke-dasharray:95; stroke-dashoffset:95; }
.upk-salf-slider-wrapper .link--arrowed g{ stroke:currentColor; color: var(--hero-ink); }
.upk-salf-slider-wrapper .link--arrowed:hover .arrow-icon{ transform: translate3d(5px,0,0); }
.upk-salf-slider-wrapper .link--arrowed:hover .arrow-icon--circle{ stroke-dashoffset:0; }
.upk-salf-slider-wrapper .link--arrowed:hover g{ color: var(--hero-pink); }

/* "scroll down" square (desktop) */
.upk-salf-slider-wrapper .upk-page-scroll{ position:absolute; bottom:8%; right:5%; transform:rotate(90deg); z-index:1; display:none; }
.upk-salf-slider-wrapper .upk-page-scroll .arrow-up{
  height:70px; width:70px; display:block; position:relative; cursor:pointer; overflow:hidden;
  background: color-mix(in srgb, var(--card) 79%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transition: all .5s cubic-bezier(.25,1.7,.35,1.5); transform:rotate(-90deg);
}
.upk-salf-slider-wrapper .upk-page-scroll .arrow-slide{ left:0; top:-100%; width:100%; height:100%; background: var(--hero-pink); position:absolute; display:block; z-index:0; }
.upk-salf-slider-wrapper .upk-page-scroll .long-arrow-left{
  display:block; margin:30px auto; width:16px; height:16px;
  border-top:2px solid var(--hero-ink); border-left:2px solid var(--hero-ink); transform:rotate(-135deg);
}
.upk-salf-slider-wrapper .upk-page-scroll .long-arrow-left::after{
  content:""; display:block; width:2px; height:25px; background-color: var(--hero-ink);
  transform: rotate(-45deg) translate(8px,3px); left:0; top:0;
}
.upk-salf-slider-wrapper .upk-page-scroll .arrow-up:hover{ transition: all .1s; }
.upk-salf-slider-wrapper .upk-page-scroll .arrow-up:hover .arrow-slide{ transition: all .5s ease-in-out; transform: translateY(200%); }

/* arrows + dots: one tidy column on the right — prev ▲ · dots · next ▼ */
.upk-salf-slider-wrapper .upk-page-scroll{ display:none !important; }
.upk-salf-slider-wrapper .upk-salf-nav-pag-wrap{
  position:absolute; top:30px; bottom:30px; right:14px; width:48px; height:auto; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
}
.upk-salf-slider-wrapper .upk-salf-navigation{ display:contents; margin:0; }
.upk-salf-slider-wrapper .upk-n-p{ cursor:pointer; width:28px; height:28px; flex:none; transition: color .3s ease, opacity .3s ease; }
.upk-salf-slider-wrapper .upk-n-p .arrow-icon{ display:block; }
.upk-salf-slider-wrapper .upk-n-p:focus-visible{ outline:2px solid var(--hero-pink); outline-offset:4px; border-radius:50%; }
.upk-salf-slider-wrapper .upk-salf-navigation .upk-button-prev{ order:1; margin:0; transform:rotate(-90deg); }
.upk-salf-slider-wrapper .upk-salf-pagi-wrap{ order:2; position:static; margin:0; width:20px; max-height:calc(100% - 120px); overflow:visible; }
.upk-salf-slider-wrapper .upk-salf-pagi-wrap .swiper-pagination{ position:static; transform:none; width:20px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.upk-salf-slider-wrapper .upk-salf-navigation .upk-button-next{ order:3; margin:0; transform:rotate(90deg); }
.upk-salf-slider-wrapper .upk-n-p.swiper-button-disabled{ opacity:.35; cursor:default; }
.upk-salf-slider-wrapper .upk-n-p.swiper-button-lock{ display:none; }

@keyframes progress{
  0%  { stroke-dashoffset:75; opacity:1; }
  95% { stroke-dashoffset:0;  opacity:1; }
  100%{ opacity:0; stroke-dashoffset:0; }
}
.upk-salf-slider-wrapper .upk-salf-pagi-wrap .swiper-pagination-bullet{ background-color:transparent; opacity:.8; }
.upk-salf-slider-wrapper .upk-salf-pagi-wrap .swiper-pagination-bullet--svg-animation{ width:20px; height:20px; margin:0 !important; display:block; flex:none; cursor:pointer; }
.upk-salf-slider-wrapper .upk-salf-pagi-wrap .swiper-pagination-bullet--svg-animation svg{ transform:rotate(-90deg); }
.upk-salf-slider-wrapper .svg__circle{ fill:none; stroke-width:2; }
.upk-salf-slider-wrapper .svg__circle-inner{ stroke: var(--hero-ink); stroke-width:3; fill:transparent; transition: all .3s ease; }
.upk-salf-slider-wrapper .swiper-pagination-bullet-active .svg__circle{
  stroke: var(--hero-pink); stroke-dasharray:75; stroke-dashoffset:0; animation: progress 4s ease-in-out 1 forwards;
}
.upk-salf-slider-wrapper .swiper-pagination-bullet-active .svg__circle-inner{ fill: var(--hero-ink); stroke: var(--hero-pink); }

/* "03 / 14" counter — only used when there are too many slides for dots */
.upk-salf-slider-wrapper .swiper-pagination-fraction{ position:static; width:auto; font-size:13px; color: var(--hero-soft); white-space:nowrap; }
.upk-salf-slider-wrapper .swiper-pagination-current{ color: var(--hero-ink); font-weight:700; font-size:15px; }


/* Swiper unavailable (CDN blocked/offline) → plain static banner */
.upk-salf-slider-wrapper.no-swiper .swiper-container{ width:100%; }
.upk-salf-slider-wrapper.no-swiper .upk-salf-item:not(:first-child){ display:none; }
.upk-salf-slider-wrapper.no-swiper .upk-salf-nav-pag-wrap,
.upk-salf-slider-wrapper.no-swiper .upk-page-scroll{ display:none; }
.upk-salf-slider-wrapper.no-swiper .upk-salf-eyebrow,
.upk-salf-slider-wrapper.no-swiper .upk-salf-title,
.upk-salf-slider-wrapper.no-swiper .upk-salf-desc,
.upk-salf-slider-wrapper.no-swiper .upk-salf-button{ opacity:1; }

/* phones only: the pen's text panel has no tint — add a light frosted tint so text stays readable on busy photos */
@media (max-width: 767px){
  .upk-salf-slider-wrapper .upk-salf-button .link + .link{ margin-left:16px; }
  /* phones slide sideways: controls become a row along the bottom, arrows point left / right */
  .upk-salf-slider-wrapper .upk-salf-nav-pag-wrap{ top:auto; left:30px; right:30px; bottom:34px; width:auto; flex-direction:row; justify-content:space-between; z-index:5; }
  .upk-salf-slider-wrapper .upk-salf-pagi-wrap{ width:auto; max-height:none; }
  .upk-salf-slider-wrapper .upk-salf-pagi-wrap .swiper-pagination{ flex-direction:row; width:auto; }
  .upk-salf-slider-wrapper .upk-salf-pagi-wrap .swiper-pagination-bullet--svg-animation{ width:16px; height:16px; }
  .upk-salf-slider-wrapper .upk-salf-pagi-wrap .swiper-pagination-bullet--svg-animation svg{ width:16px; height:16px; }
  .upk-salf-slider-wrapper .upk-salf-navigation .upk-button-prev{ transform:rotate(180deg); }
  .upk-salf-slider-wrapper .upk-salf-navigation .upk-button-next{ transform:none; }
  .upk-salf-slider-wrapper{ height:auto; padding:14px; border-radius:10px; }
  .upk-salf-slider-wrapper .swiper-container{ height:auto; }
  .upk-salf-slider-wrapper .upk-salf-item{ flex-direction:column; height:auto; }
  .upk-salf-slider-wrapper .upk-salf-image-wrap{ width:100%; height:210px; border-radius:8px; overflow:hidden; }
  .upk-salf-slider-wrapper .upk-salf-content-wrap{ position:static; transform:none; max-width:none; padding:18px 2px 62px; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-radius:0; }
  .upk-salf-slider-wrapper .upk-salf-nav-pag-wrap{ left:14px; right:14px; bottom:14px; }
}

@media (min-width: 768px){
  .upk-salf-slider-wrapper{ height:490px; padding:30px 60px; }
  .upk-salf-slider-wrapper .upk-salf-nav-pag-wrap{ top:30px; bottom:30px; right:6px; }
  .upk-salf-slider-wrapper .upk-salf-title{ font-size:clamp(1.9rem,3.2vw,2.8rem); }
  .upk-salf-slider-wrapper .upk-salf-content-wrap{ max-width:400px; padding:40px; padding-left:0; top:50%; transform:translateY(-50%); bottom:unset; }
  .upk-salf-slider-wrapper .upk-salf-image-wrap{ width:80%; }
}
@media (min-width: 1024px){
  .upk-salf-slider-wrapper{ height:570px; padding:30px 70px; }
  .upk-salf-slider-wrapper .upk-salf-nav-pag-wrap{ top:30px; bottom:30px; right:8px; }
  .upk-salf-slider-wrapper .upk-salf-content-wrap{ max-width:460px; padding:50px; padding-left:0; }
  .upk-salf-slider-wrapper .upk-salf-desc{ font-size:1rem; }
  .upk-salf-slider-wrapper .upk-salf-image-wrap{ width:70%; }
}
@media (min-width: 1440px){
  .upk-salf-slider-wrapper{ height:600px; padding:30px 80px; }
  .upk-salf-slider-wrapper .upk-salf-nav-pag-wrap{ top:30px; bottom:30px; right:10px; }
}
@media (prefers-reduced-motion: reduce){
  .upk-salf-slider-wrapper .upk-salf-eyebrow,
  .upk-salf-slider-wrapper .upk-salf-title,
  .upk-salf-slider-wrapper .upk-salf-desc,
  .upk-salf-slider-wrapper .upk-salf-button{ opacity:1; transform:none !important; }
  .upk-salf-slider-wrapper .swiper-pagination-bullet-active .svg__circle{ animation:none; }
  .upk-salf-slider-wrapper:not(.is-ready) .swiper-container{ animation:none; }
}

/* ---------- Notice board ---------- */
.notice-board{
  background: var(--surface); border: 1.5px solid var(--text);
  border-radius: var(--radius);
  margin-top: 28px; position:relative; z-index:5;
  box-shadow: 8px 8px 0 var(--alta);
}
.notice-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 26px; border-bottom: 1.5px solid var(--text);
}
.notice-head h3{ font-size: 1.15rem; display:flex; align-items:center; gap:10px; }
.notice-dot{ width:9px; height:9px; border-radius:50%; background: var(--alta); animation: pulse 1.8s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.notice-list{ padding: 6px 26px; }
.notice-item{
  display:grid; grid-template-columns: 84px 1fr auto; gap:18px; align-items:start;
  padding: 16px 0; border-bottom: 1px dashed var(--line-soft);
  transition: padding-left .25s ease;
}
.notice-item:hover{ padding-left: 6px; }
.notice-item:last-child{ border-bottom:none; }
.notice-date{
  font-family: var(--font-label); font-size:.72rem; letter-spacing:.06em;
  color: var(--alta); text-transform:uppercase; padding-top:3px;
}
.notice-body strong{ display:block; font-family: var(--font-display); font-size:1.05rem; font-weight:400; margin-bottom:2px; }
.notice-body span{ color: var(--text-soft); font-size:.92rem; }
.notice-tag{
  font-family: var(--font-label); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  padding: 5px 10px; border-radius: 999px; height:fit-content;
  background: var(--surface-dim); color: var(--text-soft);
  white-space:nowrap;
  transition: transform .4s var(--ease-out);
}
.notice-item:hover .notice-tag{ transform: scale(1.08) rotate(-2deg); }
.notice-tag[data-type="rehearsal"]{ background: rgba(47,110,110,0.16); color: var(--moyur); }
.notice-tag[data-type="event"]{ background: rgba(139,38,53,0.12); color: var(--alta); }
.notice-tag[data-type="notice"]{ background: rgba(232,163,61,0.22); color: var(--marigold-deep); }
.notice-more{ padding: 16px 26px 22px; }

/* ---------- Cards grid ---------- */
.grid{ display:grid; gap: 26px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.about-card{
  background: var(--surface); border:1px solid var(--line-soft); border-radius: var(--radius);
  padding: 26px;
  transition: transform .5s var(--ease-out), box-shadow .3s ease, border-color .3s ease;
}
.about-card:hover{
  transform: translateY(-5px) rotate(-.6deg);
  box-shadow: 6px 10px 0 rgba(232,163,61,0.18);
  border-color: var(--marigold);
}
.about-card:nth-child(even):hover{ transform: translateY(-5px) rotate(.6deg); }
.about-card .num{ font-family: var(--font-display); font-size:2.2rem; color: var(--marigold-deep); }

.committee-card{ text-align:center; }
.avatar{
  width:104px; height:104px; border-radius:50%; margin: 0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size:1.7rem; color: var(--paper);
  border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--text);
  transition: transform .5s var(--ease-out);
}
.committee-card:hover .avatar, .member-card:hover .avatar, .member-card:hover img[alt]{
  transform: scale(1.07) rotate(-3deg);
}
.committee-card h4{ margin-bottom:2px; font-size:1.1rem; }
.committee-card .role{ color: var(--alta); font-family: var(--font-label); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; }
.committee-card .dept{ color: var(--text-soft); font-size:.9rem; margin-top:4px; }

/* ---------- Ticket-style event card ---------- */
.ticket{
  display:grid; grid-template-columns: 1fr 96px;
  background: var(--surface); border-radius: var(--radius);
  overflow:hidden; border: 1px solid var(--line-soft);
  box-shadow: 4px 4px 0 rgba(47,75,102,0.08);
  transition: transform .5s var(--ease-out), box-shadow .3s ease;
}
.ticket:hover{
  transform: translateY(-4px) translateX(2px);
  box-shadow: 6px 8px 0 rgba(139,38,53,0.18);
}
.ticket-main{ padding: 22px 22px 20px; }
.ticket-main .eyebrow{ margin-bottom:.4em; }
.ticket-main h3{ font-size:1.28rem; margin-bottom:.25em; }
.ticket-main .meta{ font-size:.85rem; color: var(--text-soft); display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; }
.ticket-stub{
  background: var(--ink); color: var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; padding: 10px 6px;
  border-left: 2px dashed rgba(246,240,225,0.35);
  transition: background .3s ease;
}
.ticket:hover .ticket-stub{ background: var(--alta-deep); }
.ticket-stub::before, .ticket-stub::after{
  content:''; position:absolute; left:-9px; width:18px; height:18px; border-radius:50%; background: var(--paper);
}
.ticket-stub::before{ top:-9px; }
.ticket-stub::after{ bottom:-9px; }
.ticket-stub .month{ font-family: var(--font-label); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color: var(--marigold); }
.ticket-stub .day{ font-family: var(--font-display); font-size:1.9rem; line-height:1; }
.ticket-list{ display:flex; flex-direction:column; gap:22px; }

.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 30px; }
.chip{
  font-family: var(--font-label); font-size:.82rem; font-weight:500;
  padding: 8px 16px; border-radius:999px; border:1.5px solid var(--text);
  background:transparent; color: var(--text); cursor:pointer; transition: transform .4s var(--ease-out), background .18s ease, color .18s ease;
}
.chip:hover{ transform: translateY(-2px) scale(1.05); }
.chip:active{ transform: scale(.95); }
.chip.active, .chip:hover{ background: var(--text); color: var(--surface); }

/* ---------- Gallery ---------- */
.gallery-tile{
  aspect-ratio: 4/3; border-radius: var(--radius); overflow:hidden;
  position:relative; cursor:pointer;
  display:flex; align-items:flex-end;
  transition: transform .55s var(--ease-out), box-shadow .35s ease;
}
.gallery-tile:hover{
  transform: scale(1.035) rotate(-.5deg);
  box-shadow: 6px 10px 0 rgba(47,75,102,0.14);
  z-index: 2;
}
.gallery-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.gallery-tile:hover img{ transform: scale(1.06); }
.gallery-caption{
  position:relative; z-index:2; padding:14px 16px; width:100%;
  background: linear-gradient(to top, rgba(47,75,102,0.85), transparent);
  color: var(--paper); font-family: var(--font-label); font-size:.82rem;
}
.lightbox{
  position:fixed; inset:0; background: rgba(47,75,102,0.92); z-index:1000;
  display:none; align-items:center; justify-content:center; padding: 40px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-height:82vh; border-radius: 4px; }
.lightbox-close{
  position:absolute; top:24px; right:28px; background:none; border:none;
  color: var(--paper); font-size:2rem; cursor:pointer; line-height:1;
}
.lightbox-caption{ position:absolute; bottom:30px; color: var(--paper); font-family: var(--font-label); font-size:.9rem; }

/* ---------- Members directory ---------- */
.search-bar{
  display:flex; gap:12px; margin-bottom: 26px; flex-wrap:wrap;
}
.search-bar input[type="search"]{
  flex:1; min-width:220px; padding: 13px 18px; border-radius: var(--radius);
  border: 1.5px solid var(--text); background: var(--surface); color: var(--text);
}
.search-bar select{
  padding: 13px 16px; border-radius: var(--radius); border: 1.5px solid var(--text); background: var(--surface); color: var(--text);
}
.result-count{ font-family: var(--font-label); font-size:.85rem; color: var(--text-soft); margin-bottom:18px; }
.member-card{
  background: var(--surface); border:1px solid var(--line-soft); border-radius: var(--radius);
  padding: 22px; text-align:center; transition: transform .5s var(--ease-out), box-shadow .3s ease;
}
.member-card:hover{ transform: translateY(-5px); box-shadow: 4px 8px 0 rgba(47,110,110,0.16); }
.member-card img[alt]{ transition: transform .5s var(--ease-out); }
.member-card h4{ font-size:1.05rem; margin-bottom:1px; }
.member-card .role{ font-family: var(--font-label); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color: var(--alta); margin-bottom:6px; }
.member-card .dept{ font-size:.88rem; color: var(--text-soft); }
.member-card .interest{
  margin-top:10px; font-family: var(--font-label); font-size:.7rem; letter-spacing:.03em;
  color: var(--moyur); background: rgba(47,110,110,0.1); display:inline-block; padding:4px 10px; border-radius:999px;
}
.no-results{ text-align:center; padding: 60px 20px; color: var(--text-soft); }

/* ---------- Forms ---------- */
.form-card{
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 36px; max-width: 640px;
}
.field{ margin-bottom: 20px; }
.field label{ display:block; font-family: var(--font-label); font-size:.82rem; margin-bottom:7px; color: var(--text-soft); }
.field input, .field select, .field textarea{
  width:100%; padding: 12px 14px; border-radius: var(--radius);
  border: 1.5px solid var(--line-soft); background: var(--surface); color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--moyur); }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.85rem; color: var(--text-soft); margin-top:6px; }
.form-success{
  display:none; background: rgba(47,110,110,0.1); border:1px solid var(--moyur);
  color: var(--moyur); padding: 16px 20px; border-radius: var(--radius); margin-bottom:20px; font-size:.92rem;
}
.form-success.show{ display:block; }

/* ---------- Page header (inner pages) ---------- */
.page-hero{
  background: var(--ink); color: var(--paper); padding: 130px 0 44px;
}
.page-hero h1{ font-size: clamp(2rem,4vw,2.8rem); }
.page-hero p{ color: rgba(246,240,225,0.72); max-width:56ch; }
.breadcrumb{ font-family: var(--font-label); font-size:.78rem; color: var(--marigold); margin-bottom:14px; letter-spacing:.04em; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info-item{ display:flex; gap:16px; padding: 18px 0; border-bottom:1px dashed var(--line-soft); }
.contact-info-item .icon{
  width:42px; height:42px; border-radius:50%; background: var(--surface-dim);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color: var(--alta); font-size:1.1rem;
}
.map-box{
  margin-top:24px; border-radius: var(--radius); overflow:hidden; border:1px solid var(--line-soft); aspect-ratio: 16/10;
}
.map-box iframe{ width:100%; height:100%; border:0; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: rgba(246,240,225,0.75); padding: 56px 0 26px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h5{ font-family: var(--font-label); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--marigold); margin-bottom:14px; }
.footer-grid li{ margin-bottom:9px; font-size:.92rem; }
.footer-grid a:hover{ color: var(--paper); }
.footer-brand p{ color: rgba(246,240,225,0.6); font-size:.92rem; max-width:32ch; }
.footer-social{ display:flex; gap:10px; margin-top:14px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line-on-ink);
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.footer-social a:hover{ background: var(--marigold); color: var(--ink); border-color: var(--marigold); }
.footer-bottom{
  border-top: 1px solid var(--line-on-ink); padding-top: 22px;
  font-size:.8rem; color: rgba(246,240,225,0.5); text-align:center;
}

/* ---------- Official registration form replica ---------- */
.form-sheet{
  background:#fff; color:#1a1a1a; border:1px solid var(--line);
  border-radius:4px; padding:36px 40px; max-width:900px; margin:0 auto;
  font-family: 'Hind Siliguri', sans-serif;
}
.letterhead{
  display:grid; grid-template-columns: 90px 1fr 110px; gap:16px; align-items:center;
  border-bottom:2px solid #1a1a1a; padding-bottom:16px; margin-bottom:20px;
}
.letterhead img.uni-logo{ width:80px; }
.letterhead-text{ text-align:center; }
.letterhead-text h2{ font-size:1.05rem; margin:0 0 2px; font-family:'Hind Siliguri',sans-serif; font-weight:700; line-height:1.3; }
.letterhead-text p.uni-sub{ font-size:.85rem; margin:0 0 4px; }
.letterhead-text .cf-logo-row{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:4px; }
.letterhead-text .cf-logo-row img{ height:32px; }
.photo-box{
  width:100px; height:120px; border:1.5px solid #1a1a1a; border-radius:2px;
  display:flex; align-items:center; justify-content:center; position:relative;
  overflow:hidden; background:#fafafa; cursor:pointer;
}
.photo-box img{ width:100%; height:100%; object-fit:cover; }
.photo-box span{ font-size:.68rem; text-align:center; padding:4px; color:#555; }
.form-title-bar{
  text-align:center; border:1.5px solid #1a1a1a; padding:8px; font-weight:700;
  font-size:1.05rem; margin-bottom:22px;
}
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin-bottom:14px; }
.form-grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px 24px; margin-bottom:14px; }
.form-field-inline{ display:flex; align-items:baseline; gap:8px; border-bottom:1px solid #999; padding-bottom:4px; }
.form-field-inline label{ font-weight:600; white-space:nowrap; font-size:.95rem; }
.form-field-inline input, .form-field-inline select{
  border:none; outline:none; flex:1; font-size:.95rem; background:transparent; font-family:inherit; padding:2px;
}
.gender-row{ display:flex; gap:32px; margin:18px 0; }
.gender-row label{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem; }
.subject-box{ border:1.5px solid #1a1a1a; padding:16px 20px; margin:18px 0; border-radius:2px; }
.subject-box > strong{ display:block; margin-bottom:10px; font-size:1rem; }
.subject-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; }
.subject-grid label{ display:flex; align-items:center; gap:8px; font-size:.9rem; }
.signature-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:56px; }
.sig-line{ border-top:1px solid #1a1a1a; padding-top:6px; text-align:center; font-size:.78rem; color:#333; }
.form-actions-bar{ display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.reg-success{
  display:none; max-width:900px; margin:0 auto 20px; background:rgba(47,110,110,0.1);
  border:1px solid var(--moyur); color:var(--moyur); padding:16px 20px; border-radius:var(--radius);
}
.reg-success.show{ display:block; }

@media print{
  .site-header, .site-footer, .no-print, .alpona, .page-hero .breadcrumb{ display:none !important; }
  body{ background:#fff; }
  .form-sheet{ border:none; box-shadow:none; max-width:100%; padding:0; margin:0 0 24px; }
  section.page-hero{ display:none; }
}

.reveal{
  opacity:0; transform: translateY(28px) scale(.985);
  transition: opacity .9s ease, transform 1s var(--ease-out);
}
.reveal.in{ opacity:1; transform:none; }
.grid .reveal:nth-child(3n+2){ transition-delay: .05s; }
.grid .reveal:nth-child(3n+3){ transition-delay: .1s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .notice-dot{ animation:none; }
}

/* ---------- App-like bottom tab bar (mobile only) ---------- */
.bottom-nav{
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  background: var(--ink);
  border-top:1px solid var(--line-on-ink);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  justify-content:space-around; align-items:center;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.18);
}
.bottom-nav a{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color: rgba(246,240,225,0.6); font-family: var(--font-label); font-size:.62rem;
  padding:6px 8px; border-radius:12px; flex:1; text-align:center;
  transition: color .2s ease, background .2s ease;
}
.bottom-nav .bn-icon{ font-size:1.28rem; line-height:1; transition: transform .5s var(--ease-out); }
.bottom-nav a.active{ color: var(--marigold); }
.bottom-nav a.active .bn-icon{ transform: translateY(-2px) scale(1.15); }
.bottom-nav a:active .bn-icon{ transform: scale(.88); }
@media (max-width: 860px){
  .bottom-nav{ display:flex; }
  body{ padding-bottom: 62px; }
}
@media (prefers-reduced-motion: reduce){
  .bottom-nav .bn-icon{ transition:none; }
}

/* ---------- Progressive cross-page view transitions (Chrome/Edge) ---------- */
@view-transition{
  navigation: auto;
}

/* ---------- Smooth light/dark switch ---------- */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after{
  transition: background-color .45s ease, color .45s ease, border-color .45s ease,
              fill .45s ease, stroke .45s ease, box-shadow .45s ease !important;
}
::view-transition-old(root){ animation-duration: .3s; }
::view-transition-new(root){ animation-duration: .5s; }

/* ==========================================================================
   PLAYFUL LAYER — paper, tape, brush strokes, sticker cards
   Drawn from the Executive Panel photo-card (navy · red · mustard on cream paper)
   ========================================================================== */
:root{
  --brush-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='%232F4B66' d='M4 31 L15 14 L9 8 L42 12 L92 5 L150 10 L212 4 L272 9 L297 3 L289 22 L299 36 L286 45 L293 55 L240 50 L181 57 L120 50 L60 56 L18 51 L7 46 Z'/%3E%3C/svg%3E");
  --brush-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100' preserveAspectRatio='none'%3E%3Cpath fill='%23C4614D' d='M6 16 L30 6 L72 11 L113 3 L117 40 L110 70 L115 96 L70 91 L30 97 L3 90 L10 55 Z'/%3E%3C/svg%3E");
  --brush-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100' preserveAspectRatio='none'%3E%3Cpath fill='%23F0C36B' d='M5 10 L40 5 L80 12 L116 6 L112 45 L117 85 L75 92 L35 88 L4 96 L10 50 Z'/%3E%3C/svg%3E");
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4  0 0 0 0 .35  0 0 0 0 .25  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body{ background-image: var(--paper-grain); }
:root[data-theme="dark"] body{ background-image:none; }

/* three colour bars on the left edge, like the card */
body::before{
  content:""; position:fixed; left:0; top:34vh; width:9px; height:150px; z-index:60; pointer-events:none;
  background: linear-gradient(to bottom, var(--ink) 0 31%, transparent 31% 34%, var(--alta) 34% 66%, transparent 66% 69%, var(--marigold) 69% 100%);
  border-radius:0 3px 3px 0;
}
@media (max-width: 700px){ body::before{ width:6px; height:110px; top:30vh; } }

/* headings: marker eyebrow on a yellow highlight, squiggle under the title */
.eyebrow{
  font-family: var(--font-marker); font-size:.95rem; letter-spacing:.06em; text-transform:none;
  color: var(--ink); background: var(--marigold); padding: 3px 12px 2px; border-radius: 4px;
  transform: rotate(-2deg); display:inline-block;
}
:root[data-theme="dark"] .eyebrow{ color: var(--ink); }
.section--ink .eyebrow, .page-hero .eyebrow{ color: var(--ink); }
.section-head h2{ position:relative; display:inline-block; }
.section-head h2::after{
  content:""; position:absolute; left:0; right:0; bottom:-10px; height:9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='9' viewBox='0 0 40 9'%3E%3Cpath d='M0 5 Q5 0 10 5 T20 5 T30 5 T40 5' fill='none' stroke='%23C4614D' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 40px 9px;
}
.section-head{ margin-bottom: 56px; }

/* buttons: chunky sticker with offset shadow */
.btn{ border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); font-weight:700; }
.btn:hover{ transform: translate(-2px,-3px) rotate(-1deg); box-shadow: 6px 6px 0 var(--ink); }
.btn:active{ transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-primary{ background: var(--alta); color:#fff; border-color: var(--ink); }
.btn-primary:hover{ background: var(--alta); }
.btn-ghost{ background: var(--card); color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover{ background: var(--marigold); color: var(--ink); }
:root[data-theme="dark"] .btn, :root[data-theme="dark"] .btn:hover{ border-color: var(--paper); box-shadow: 3px 3px 0 var(--paper); }
:root[data-theme="dark"] .btn:hover{ box-shadow: 6px 6px 0 var(--paper); }
.section--ink .btn-ghost, .section--cta .btn-primary{ color: var(--ink); background: var(--marigold); border-color: var(--paper); box-shadow: 3px 3px 0 var(--paper); }

/* sticker cards */
.about-card, .ticket, .form-card, .member-card{
  background: var(--card); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--marigold);
}
:root[data-theme="dark"] .about-card, :root[data-theme="dark"] .ticket, :root[data-theme="dark"] .form-card, :root[data-theme="dark"] .member-card{ border-color: var(--line-soft); }
.about-card:hover{ box-shadow: 8px 8px 0 var(--alta); border-color: var(--ink); }
.ticket{ box-shadow: 5px 5px 0 var(--alta); }
.about-card .num{ font-family: var(--font-marker); color: var(--alta); }
.notice-board{ border-radius: 14px; border:2px solid var(--ink); box-shadow: 8px 8px 0 var(--alta); }
.gallery-tile{ border-radius: 4px; border: 6px solid #fff; box-shadow: 0 8px 18px rgba(47,75,102,.22); }
.gallery-tile:nth-child(odd){ transform: rotate(-1.4deg); }
.gallery-tile:nth-child(even){ transform: rotate(1.2deg); }
.gallery-tile:hover{ transform: rotate(0) scale(1.04); }

/* page banner (inner pages) and CTA: paper-torn bottom edge */
.page-hero{
  background: var(--ink); position:relative;
  clip-path: polygon(0 0,100% 0,100% 92%,96% 96%,92% 91%,87% 97%,81% 92%,75% 98%,69% 93%,62% 97%,55% 92%,48% 98%,41% 93%,34% 97%,27% 92%,20% 98%,13% 93%,7% 97%,0 92%);
  padding-bottom: 70px;
}
.page-hero h1{ font-family: var(--font-marker); font-weight:400; color:#fff; text-shadow: 3px 3px 0 var(--alta); letter-spacing:.02em; }
.section--cta{
  background: var(--alta); position:relative;
  clip-path: polygon(0 4%,5% 0,10% 4%,16% 0,23% 5%,30% 1%,37% 5%,45% 0,52% 4%,60% 0,67% 5%,74% 1%,81% 5%,88% 0,94% 4%,100% 1%,100% 100%,0 100%);
  padding-top: 110px; margin-top:-28px;
}
.section--cta h2{ font-family: var(--font-marker); font-weight:400; text-shadow: 3px 3px 0 var(--ink); }

/* header glass → navy tint, page footer navy */
.site-footer{ background: var(--ink); }
.site-footer h5, .site-footer .footer-col h5{ font-family: var(--font-marker); font-weight:400; letter-spacing:.04em; }

@media (prefers-reduced-motion: reduce){
  .gallery-tile:nth-child(odd), .gallery-tile:nth-child(even){ transform:none; }
}

/* ----- hero decorations ----- */
.upk-salf-slider-wrapper{ border:2px solid var(--ink); border-radius:18px; box-shadow: 8px 8px 0 var(--marigold); overflow:visible; }
:root[data-theme="dark"] .upk-salf-slider-wrapper{ border-color: var(--line-soft); }
.upk-salf-slider-wrapper::before{            /* red marker ring peeking from behind the photo */
  content:""; position:absolute; right:12%; top:9%; width:300px; height:300px; border-radius:50%;
  border:7px solid var(--alta); border-right-color:transparent; border-bottom-color:transparent;
  transform: rotate(18deg); opacity:.9; pointer-events:none;
}
.upk-salf-slider-wrapper::after{             /* navy four-point sparkle */
  content:""; position:absolute; left:46%; bottom:5%; width:34px; height:34px; pointer-events:none;
  background: var(--ink); clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  animation: sparkle 3.2s ease-in-out infinite;
}
@keyframes sparkle{ 0%,100%{ transform: scale(1) rotate(0); } 50%{ transform: scale(1.25) rotate(18deg); } }
.upk-salf-slider-wrapper .upk-salf-image-wrap::after{    /* white polaroid border */
  content:""; position:absolute; inset:0; border:9px solid #fff; box-shadow: 0 10px 24px rgba(47,75,102,.28); pointer-events:none; z-index:2;
}
.upk-salf-slider-wrapper .upk-salf-image-wrap::before{   /* masking tape on the corner */
  content:""; position:absolute; left:-22px; top:6px; width:96px; height:28px; z-index:6;
  background: rgba(40,40,45,.72); transform: rotate(-35deg);
  clip-path: polygon(0 10%,6% 0,12% 12%,18% 0,100% 0,100% 100%,18% 100%,12% 88%,6% 100%,0 90%);
}
.upk-salf-slider-wrapper .upk-xanc-img{ padding:9px; background:#fff; }
.upk-salf-slider-wrapper .upk-xanc-img--hd{ padding:9px; background:none; }
.upk-salf-slider-wrapper .upk-salf-tag{
  position:absolute; right:18px; bottom:24px; z-index:4; max-width:80%;
  font-family: var(--font-marker); font-size:clamp(1rem,1.6vw,1.45rem); color:#fff; line-height:1.1;
  padding: 14px 30px 12px; background: var(--brush-navy) center / 100% 100% no-repeat; transform: rotate(2.5deg);
}
.upk-salf-slider-wrapper .upk-salf-eyebrow{
  font-family: var(--font-marker); font-size:.95rem; letter-spacing:.05em; text-transform:none; color: var(--ink);
  background: var(--marigold); display:inline-block; padding:3px 12px 2px; border-radius:4px; transform:rotate(-2deg);
}
.upk-salf-slider-wrapper .upk-salf-content-wrap{ z-index:5; }
.upk-salf-slider-wrapper .upk-salf-title{ font-family: var(--font-marker); font-weight:400; letter-spacing:.01em; line-height:1.12; }
.upk-salf-slider-wrapper .upk-salf-title em{ color: var(--alta); }
:root[data-theme="dark"] .upk-salf-slider-wrapper .upk-salf-title em{ color: var(--marigold); }
@media (max-width: 767px){
  .upk-salf-slider-wrapper::before{ width:140px; height:140px; right:6%; top:2%; border-width:5px; }
  .upk-salf-slider-wrapper::after{ display:none; }
  .upk-salf-slider-wrapper .upk-salf-image-wrap::after{ border-width:6px; }
  .upk-salf-slider-wrapper .upk-xanc-img{ padding:6px; }
  .upk-salf-slider-wrapper .upk-salf-tag{ font-size:1rem; padding:10px 22px 8px; bottom:14px; }
}

/* ==========================================================================
   PHOTO CARD (Executive Panel card) — everything scales with the card width (cqw)
   ========================================================================== */
.pcard-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 44px 32px; justify-items:center; }
.pcard-grid--wide{ grid-template-columns: repeat(auto-fill, minmax(300px, 340px)); justify-content:center; }
.pcard-wrap{ width:100%; max-width:360px; container-type:inline-size; }
.pcard{
  position:relative; width:100%; aspect-ratio: 2 / 3; overflow:hidden; border-radius: 2.2cqw;
  background: #F1EBDF var(--paper-grain); color: #3F5F7D;
  box-shadow: 0 14px 30px rgba(47,75,102,.22), 0 2px 0 rgba(47,75,102,.08);
  transition: transform .6s var(--ease-out), box-shadow .4s ease;
  font-family: 'Inter', var(--font-label), sans-serif;
}
.pcard-wrap:hover .pcard{ transform: translateY(-8px) rotate(-1.2deg); box-shadow: 0 24px 40px rgba(47,75,102,.28); }
.pcard-wrap:nth-child(even):hover .pcard{ transform: translateY(-8px) rotate(1.2deg); }
.pcard > *{ position:absolute; }
.pcard-bars i{ left:0; width:2.4cqw; display:block; position:absolute; }
.pcard-bars i:nth-child(1){ top:31.7cqw; height:12.7cqw; background:#3F5F7D; }
.pcard-bars i:nth-child(2){ top:45.9cqw; height:12.2cqw; background:#C4614D; }
.pcard-bars i:nth-child(3){ top:59.6cqw; height:11.7cqw; background:#F0C36B; }
.pcard-title{ left:9cqw; top:8.5cqw; margin:0; font-size:3.3cqw; line-height:1.15; font-weight:800; letter-spacing:.24em; text-transform:uppercase; }
.pcard-logo{ right:7.5cqw; top:7cqw; width:17cqw; height:17cqw; object-fit:contain; background:#fff; border-radius:50%; padding:.6cqw; box-shadow: 0 .6cqw 1.6cqw rgba(47,75,102,.25); }
.pcard-ring{ left:17cqw; top:25cqw; width:64cqw; height:64cqw; border-radius:50%; border:1.7cqw solid #C4614D; border-left-color:transparent; border-bottom-color:transparent; transform:rotate(24deg); }
.pcard-blob{ left:17cqw; top:42cqw; width:11cqw; height:33cqw; background:#3F5F7D; clip-path: polygon(40% 0,100% 12%,80% 40%,100% 70%,55% 100%,0 80%,25% 45%,0 20%); opacity:.92; }
.pcard-crown{ left:51cqw; top:19cqw; width:11cqw; height:9cqw; }
.pcard-frame{ left:25cqw; top:29cqw; width:51cqw; height:56cqw; background:#fff; padding:1.3cqw 1.3cqw 0; box-shadow: 0 .8cqw 2cqw rgba(47,75,102,.28); }
.pcard-frame .pcard-photo{ width:100%; height:100%; display:block; object-fit:cover; object-position: 50% 22%; }
.pcard-photo--empty{ background: linear-gradient(160deg,#d7e0f0,#f3efe6 70%); display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.pcard-photo--empty svg{ width:80%; height:auto; display:block; }
.pcard-tape{ left:21.5cqw; top:28.4cqw; width:15cqw; height:4.2cqw; background:rgba(45,45,50,.78); transform:rotate(-34deg); clip-path: polygon(0 10%,5% 0,10% 12%,15% 0,100% 0,100% 100%,15% 100%,10% 88%,5% 100%,0 90%); z-index:3; }
.pcard-role{
  left:18cqw; top:80cqw; width:64cqw; min-height:15.5cqw; z-index:4; display:flex; align-items:center; justify-content:center; text-align:center;
  background: var(--brush-navy) center / 100% 100% no-repeat; transform: rotate(-3deg);
  padding: 2.4cqw 5cqw 2cqw; color:#fff; font-family: var(--font-marker); font-size:6.4cqw; line-height:1.02; text-transform:uppercase; letter-spacing:.01em;
}
.pcard-role.long{ font-size:4.7cqw; }
.pcard-role.xlong{ font-size:3.9cqw; }
.pcard-info{ left:16.5cqw; right:8cqw; top:99cqw; margin:0; padding:0; list-style:none; }
.pcard-info li{ position:relative; display:flex; align-items:center; gap:3.4cqw; min-height:12cqw; padding:1.1cqw 0; }
.pcard-info li + li::before{ content:""; position:absolute; left:14cqw; right:0; top:0; height:1px; background:rgba(47,75,102,.18); }
.pcard-chip{ flex:none; width:11cqw; height:9.4cqw; display:flex; align-items:center; justify-content:center; background-size:100% 100%; background-repeat:no-repeat; }
.pcard-chip svg{ width:5.6cqw; height:5.6cqw; stroke:#fff; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pcard-chip--navy{ background-image: var(--brush-navy); }
.pcard-chip--red{ background-image: var(--brush-red); }
.pcard-chip--yellow{ background-image: var(--brush-yellow); }
.pcard-label{ display:block; font-size:2.5cqw; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#6C97B4; margin-bottom:.4cqw; }
.pcard-value{ display:block; font-size:4.3cqw; font-weight:800; line-height:1.1; color:#3F5F7D; letter-spacing:-.01em; word-break:break-word; }
.pcard-torn-l{ left:0; bottom:0; width:34cqw; height:24cqw; background:#3F5F7D; clip-path: polygon(0 18%,12% 30%,24% 52%,40% 70%,62% 84%,100% 100%,0 100%); z-index:1; }
.pcard-torn-l2{ left:0; bottom:0; width:21cqw; height:13cqw; background:#C4614D; clip-path: polygon(0 20%,30% 55%,100% 100%,0 100%); z-index:2; }
.pcard-torn-r{ right:0; bottom:0; width:38cqw; height:15cqw; background:#F0C36B; clip-path: polygon(100% 0,100% 100%,0 100%,22% 78%,48% 58%,76% 24%); z-index:1; }
.pcard-star{ right:10cqw; top:57cqw; width:7cqw; height:7cqw; background:#3F5F7D; clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); }
.pcard-bldg{ right:-4cqw; top:60cqw; width:16cqw; height:50cqw; opacity:.22; background: repeating-linear-gradient(0deg,#b8bcc6 0 1.2cqw,transparent 1.2cqw 3.2cqw), linear-gradient(90deg,#cfd2da,#eceef2); clip-path: polygon(30% 0,100% 6%,100% 100%,0 100%,0 14%); filter: grayscale(1); }
@media (prefers-reduced-motion: reduce){ .pcard, .pcard-wrap:hover .pcard{ transition:none; transform:none; } }
@media print{ .pcard-wrap:hover .pcard{ transform:none; } }

/* compact variants of the same card for the Members directory */
.mcard{ position:relative; text-align:center; padding: 22px 16px 20px; }
.mcard .mphoto{
  position:relative; width:112px; margin:6px auto 18px; background:#fff; padding:5px 5px 5px; box-shadow: 0 6px 14px rgba(47,75,102,.25);
  transform: rotate(-2.5deg); transition: transform .5s var(--ease-out);
}
.mcard:nth-child(even) .mphoto{ transform: rotate(2.5deg); }
.mcard:hover .mphoto{ transform: rotate(0) scale(1.06); }
.mcard .mphoto img, .mcard .mphoto .avatar{ width:100%; height:122px; border-radius:0; object-fit:cover; display:block; margin:0; border:0; box-shadow:none; font-size:1.6rem; }
.mcard .mphoto::before{ content:""; position:absolute; left:50%; top:-10px; width:46px; height:16px; margin-left:-23px; background:rgba(240,195,107,.85); transform:rotate(-4deg); }

/* ----- About: structure ladder & committee groups ----- */
.ladder{ display:flex; flex-direction:column; align-items:center; gap:0; max-width: 880px; margin:0 auto; }
.step{
  width:100%; position:relative; padding: 26px 30px 24px; border:2px solid var(--ink); border-radius:16px;
  background: var(--card); box-shadow: 6px 6px 0 var(--ink);
}
.step:nth-of-type(odd){ transform: rotate(-.5deg); } .step:nth-of-type(even){ transform: rotate(.5deg); }
.step p{ margin:10px 0 14px; color: var(--text-soft); }
.step-tag{
  display:inline-block; font-family: var(--font-marker); font-size:1.25rem; color:#fff; padding:10px 28px 8px;
  background: var(--brush-navy) center / 100% 100% no-repeat; transform: rotate(-2deg); margin-top:-44px; margin-left:-8px;
}
.step--red .step-tag, .step--ink .step-tag, .step--navy .step-tag{ color:#fff; }
.step--yellow .step-tag{ background-image: var(--brush-yellow); color: var(--ink); }
.step--red .step-tag{ background-image: var(--brush-red); }
.step--yellow{ box-shadow: 6px 6px 0 var(--marigold); } .step--red{ box-shadow: 6px 6px 0 var(--alta); }
.step--ink{ background: var(--ink); color:#fff; } .step--ink p{ color: rgba(255,255,255,.8); }
.step--ink .step-tag{ background-image: var(--brush-red); }
.step-arrow{ width:36px; height:54px; margin:6px 0 -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 54' fill='none' stroke='%23C4614D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 3 C 12 16, 24 26, 18 46 M6 36 L18 50 L30 36'/%3E%3C/svg%3E") center / contain no-repeat; }
.ladder .step{ margin-top: 26px; } .ladder .step-arrow + .step{ margin-top: 30px; }
.slots{ display:grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap:12px; }
.slots--tight{ grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); }
.slot{ background: rgba(47,75,102,.06); border:1.5px dashed rgba(47,75,102,.4); border-radius:10px; padding:11px 14px; display:flex; flex-direction:column; gap:2px; }
:root[data-theme="dark"] .slot{ background: rgba(255,255,255,.05); border-color: var(--line-soft); }
.slot b{ font-size:.95rem; line-height:1.25; } .slot em{ font-style:normal; font-size:.78rem; color: var(--text-soft); }
.who{ font-weight:600; font-size:.9rem; margin-top:4px; } .who small{ display:block; font-weight:400; font-size:.76rem; color: var(--text-soft); }
.who--tba{ color: var(--text-soft); font-weight:500; font-style:italic; font-size:.82rem; }
.principles{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; max-width:880px; margin:56px auto 0; }
.principle{ border:2px solid var(--ink); border-radius:14px; padding:16px 18px; text-align:center; display:flex; flex-direction:column; transform: rotate(-1deg); }
.principle:nth-child(2){ transform: rotate(1deg); }
.principle b{ font-family: var(--font-marker); font-weight:400; font-size:1.35rem; } .principle span{ font-size:.88rem; }
.principle--navy{ background: var(--ink); color:#fff; } .principle--yellow{ background: var(--marigold); color: var(--ink); } .principle--red{ background: var(--alta); color:#fff; }
.group-title{ margin: 18px 0 30px; font-family: var(--font-marker); font-weight:400; font-size: clamp(1.5rem,3vw,2rem); }
.group-title span{ background: linear-gradient(transparent 62%, rgba(240,195,107,.7) 62%); padding:0 6px; }
.pcard-grid + .group-title{ margin-top: 80px; }
@media (max-width: 700px){ .principles{ grid-template-columns:1fr; } .step{ padding:24px 18px 20px; } }
.alpona{ display:none; }
.mcard .mphoto .avatar{ display:flex; align-items:center; justify-content:center; }


/* ==========================================================================
   DARK MODE — richer navy, brighter accents, nothing navy-on-navy
   ========================================================================== */
:root[data-theme="dark"] body{
  background-color: var(--surface);
  background-image:
    radial-gradient(900px 500px at 8% 0%, rgba(108,151,180,.32), transparent 60%),
    radial-gradient(700px 480px at 95% 35%, rgba(196,97,77,.14), transparent 60%),
    radial-gradient(800px 500px at 20% 85%, rgba(240,195,107,.08), transparent 60%);
  background-attachment: fixed;
}
:root[data-theme="dark"] .section--dim{ background: rgba(10,16,22,.45); }
:root[data-theme="dark"] .page-hero{ background: linear-gradient(135deg, #31506b, #223a4e); }
:root[data-theme="dark"] .site-footer{ background: #101921; }
/* buttons & chips */
:root[data-theme="dark"] .btn-ghost{ background: transparent; color: var(--text); border-color: var(--text); }
:root[data-theme="dark"] .btn-ghost:hover{ background: var(--marigold); color: var(--ink); border-color: var(--marigold); }
:root[data-theme="dark"] .btn-primary{ color:#fff; }
:root[data-theme="dark"] .chip{ color: var(--text); border-color: var(--text); background: transparent; }
:root[data-theme="dark"] .chip.active, :root[data-theme="dark"] .chip:hover{ background: var(--marigold); color: var(--ink); border-color: var(--marigold); }
/* cards & text */
:root[data-theme="dark"] .about-card, :root[data-theme="dark"] .ticket, :root[data-theme="dark"] .form-card,
:root[data-theme="dark"] .member-card, :root[data-theme="dark"] .notice-board, :root[data-theme="dark"] .step:not(.step--ink){
  background: var(--card); border-color: rgba(255,255,255,.28);
}
:root[data-theme="dark"] .notice-board{ background: var(--card); }
:root[data-theme="dark"] .about-card .num{ color: var(--marigold); }
:root[data-theme="dark"] .eyebrow{ background: var(--marigold); color: var(--ink); }
:root[data-theme="dark"] .section-head h2, :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4{ color: var(--text); }
:root[data-theme="dark"] .group-title span{ background: linear-gradient(transparent 62%, rgba(240,195,107,.45) 62%); }
:root[data-theme="dark"] .slot{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.35); }
:root[data-theme="dark"] .notice-tag, :root[data-theme="dark"] .member-card .interest{ color: #fff; }
:root[data-theme="dark"] .member-card .interest{ background: rgba(108,151,180,.55); }
:root[data-theme="dark"] .member-card .role, :root[data-theme="dark"] .committee-card .role, :root[data-theme="dark"] .ticket .eyebrow{ color: var(--marigold); }
:root[data-theme="dark"] .gallery-tile{ border-color:#fff; }
/* form fields */
:root[data-theme="dark"] .field input, :root[data-theme="dark"] .field select, :root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .search-bar input, :root[data-theme="dark"] .search-bar select{
  background: rgba(10,16,22,.6); color: var(--text); border-color: rgba(255,255,255,.35);
}
:root[data-theme="dark"] .field input::placeholder, :root[data-theme="dark"] .search-bar input::placeholder{ color: #A9B7C9; }
:root[data-theme="dark"] select option{ background:#18242F; color: var(--text); }
/* the printable paper form always stays white with dark ink */
.form-sheet input, .form-sheet select, .form-sheet textarea{ color:#1a1a1a; }
.form-sheet select option{ background:#fff; color:#1a1a1a; }
.form-sheet ::placeholder{ color:#888; }

/* ----- Gallery: Photos / Videos ----- */
.footer-social a[hidden]{ display:none; }
.media-tabs{ display:flex; gap:12px; margin-bottom:30px; flex-wrap:wrap; }
.media-tab{
  font-family: var(--font-marker); font-size:1.15rem; padding:10px 24px 8px; cursor:pointer;
  border:2px solid var(--ink); border-radius:12px; background: var(--card); color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink); transition: transform .3s var(--ease-out), box-shadow .2s ease, background .2s ease;
}
.media-tab:hover{ transform: translate(-2px,-2px) rotate(-1deg); box-shadow: 5px 5px 0 var(--ink); }
.media-tab.active{ background: var(--marigold); }
:root[data-theme="dark"] .media-tab{ color: var(--text); border-color: var(--text); box-shadow: 3px 3px 0 var(--text); background: transparent; }
:root[data-theme="dark"] .media-tab.active{ background: var(--marigold); color: var(--ink); }
.video-links{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px; }
.video-links:empty{ display:none; }
.video-card{
  display:flex; flex-direction:column; gap:10px; text-align:left; padding:0; border:0; background:none; cursor:pointer; color:inherit; font:inherit;
}
.video-thumb{
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-radius:6px; border:6px solid #fff; background: var(--ink);
  box-shadow: 0 8px 18px rgba(47,75,102,.25); transition: transform .5s var(--ease-out), box-shadow .3s ease;
}
.video-card:nth-child(odd) .video-thumb{ transform: rotate(-1deg); } .video-card:nth-child(even) .video-thumb{ transform: rotate(1deg); }
.video-card:hover .video-thumb{ transform: rotate(0) scale(1.03); box-shadow: 0 14px 28px rgba(47,75,102,.35); }
.video-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.video-ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3rem; color:#fff; background: linear-gradient(135deg, var(--ink), var(--moyur)); }
.video-ph--facebook{ background: linear-gradient(135deg, #6C97B4, #2F4B66); font-family: var(--font-marker); font-size:4rem; }
.video-play{
  position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%;
  background: var(--alta); border:3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: transform .35s var(--ease-out);
}
.video-play::after{ content:""; position:absolute; left:26px; top:19px; border-left:20px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent; }
.video-card:hover .video-play{ transform: scale(1.14); }
.video-badge{
  position:absolute; left:10px; top:10px; padding:3px 10px 2px; border-radius:4px; font-family: var(--font-marker); font-size:.8rem; color:#fff; background: var(--ink);
}
.video-badge--youtube{ background:#C4614D; } .video-badge--facebook{ background:#6C97B4; }
.video-title{ font-family: var(--font-display); font-size:1.08rem; line-height:1.25; }
.video-cat{ font-family: var(--font-label); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--alta); margin-top:-6px; }
:root[data-theme="dark"] .video-cat{ color: var(--marigold); }
.video-frame{ width:100%; aspect-ratio:16/9; border:0; border-radius:6px; background:#000; display:block; }
.video-frame.is-vertical{ aspect-ratio:auto; height:100%; }
@media (prefers-reduced-motion: reduce){ .video-card:nth-child(odd) .video-thumb, .video-card:nth-child(even) .video-thumb{ transform:none; } }

.section-head .eyebrow{ display:table; margin-bottom:.9em; }
.section-head h2{ display:table; }

/* ---- dark mode fixes (round 2) ---- */
:root[data-theme="dark"] .ticket .eyebrow{ color: var(--ink); }            /* was yellow-on-yellow = invisible */
:root[data-theme="dark"] .notice-date{ color: var(--marigold); }
:root[data-theme="dark"] .notice-tag[data-type="event"]{ color:#fff; background: rgba(196,97,77,.55); }
:root[data-theme="dark"] .about-card .num{ color: var(--marigold); }
:root[data-theme="dark"] .video-cat, :root[data-theme="dark"] .breadcrumb a{ color: var(--marigold); }
:root[data-theme="dark"] .section--dim{ background: linear-gradient(180deg, rgba(10,16,22,0), rgba(10,16,22,.38) 18%, rgba(10,16,22,.38) 82%, rgba(10,16,22,0)); }
:root[data-theme="dark"] .ticket-main .meta, :root[data-theme="dark"] .notice-body span{ color: #CBD5DF; }

/* ==========================================================================
   GLASS + GRADIENT THEME (soft, soothing)  — overrides earlier sticker look
   ========================================================================== */
:root{
  --glass-bg: rgba(255,255,255,.52);
  --glass-bg-strong: rgba(255,255,255,.68);
  --glass-border: rgba(255,255,255,.75);
  --glass-shadow: 0 10px 34px rgba(47,75,102,.14), inset 0 1px 0 rgba(255,255,255,.8);
  --grad-a: #CFE0EE; --grad-b: #F6D9CF; --grad-c: #DCD5EE; --grad-d: #D3EBDD;
}
:root[data-theme="dark"]{
  --glass-bg: rgba(255,255,255,.07);
  --glass-bg-strong: rgba(255,255,255,.11);
  --glass-border: rgba(255,255,255,.16);
  --glass-shadow: 0 10px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
/* soft mesh gradient page background (fixed layer behind everything) */
body{ background-color: var(--surface); background-image:none; }
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 600px at 6% 4%,  var(--grad-a), transparent 62%),
    radial-gradient(800px 560px at 96% 18%, var(--grad-b), transparent 62%),
    radial-gradient(900px 640px at 22% 62%, var(--grad-c), transparent 64%),
    radial-gradient(800px 600px at 92% 88%, var(--grad-d), transparent 62%);
}
:root[data-theme="dark"] body{ background-color:#141E29; background-image:none; }
:root[data-theme="dark"] body::before{
  background:
    radial-gradient(900px 600px at 6% 4%,  rgba(84,128,166,.38), transparent 62%),
    radial-gradient(800px 560px at 96% 18%, rgba(196,97,77,.22), transparent 62%),
    radial-gradient(900px 640px at 22% 62%, rgba(120,104,180,.26), transparent 64%),
    radial-gradient(800px 600px at 92% 88%, rgba(70,150,130,.22), transparent 62%);
}
.section--dim, :root[data-theme="dark"] .section--dim{ background: transparent; }

/* glass surfaces */
.about-card, .ticket, .notice-board, .committee-card, .member-card, .form-card, .contact-info-item,
.upk-salf-slider-wrapper, .rehearsal-card, .video-card .video-thumb, .search-bar input, .search-bar select{
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.about-card, .ticket, .notice-board, .committee-card, .member-card, .form-card{ border-radius: 20px; }
.about-card:hover, .ticket:hover, .member-card:hover{ box-shadow: 0 16px 40px rgba(47,75,102,.2), inset 0 1px 0 rgba(255,255,255,.85); border-color: var(--glass-border); }
:root[data-theme="dark"] .about-card, :root[data-theme="dark"] .ticket, :root[data-theme="dark"] .notice-board,
:root[data-theme="dark"] .committee-card, :root[data-theme="dark"] .member-card, :root[data-theme="dark"] .form-card,
:root[data-theme="dark"] .upk-salf-slider-wrapper{ background: var(--glass-bg); border-color: var(--glass-border); }
.upk-salf-slider-wrapper{ border-radius: 26px; }
.notice-board{ border-width:1px; }
.form-sheet, :root[data-theme="dark"] .form-sheet{ background: var(--glass-bg-strong); }
.ticket-stub{ background: linear-gradient(160deg, var(--ink-soft), var(--ink)); }

/* gradient buttons */
.btn-primary{ background: linear-gradient(135deg, #D9826C, #C4614D); border:1px solid rgba(255,255,255,.55); box-shadow: 0 6px 18px rgba(196,97,77,.35); color:#fff; border-radius: 999px; }
.btn-primary:hover{ background: linear-gradient(135deg, #E08F7A, #CC6B56); }
.btn, .btn-ghost{ border-radius: 999px; }
.btn-ghost{ background: var(--glass-bg); border:1px solid var(--glass-border); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
:root[data-theme="dark"] .btn, :root[data-theme="dark"] .btn:hover{ box-shadow: none; }
.chip{ background: var(--glass-bg); border:1px solid var(--glass-border); }

/* gradient CTA / hero heads / footer */
.section--cta{ background: linear-gradient(120deg, #C4614D 0%, #D88A6E 45%, #9A86C4 100%); }
.section--cta .btn-primary{ background: rgba(255,255,255,.9); color: var(--ink); border-color:#fff; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.page-hero{ background: linear-gradient(125deg, #4A6F8F 0%, #5F86A6 50%, #8E86B8 100%); }
:root[data-theme="dark"] .page-hero{ background: linear-gradient(125deg, #263F55 0%, #2F4E69 55%, #483F70 100%); }
.site-footer{ background: linear-gradient(180deg, #3A566F, #2B4157); }
:root[data-theme="dark"] .site-footer{ background: linear-gradient(180deg, #16212C, #0F1820); }
.tri-bars, .upk-salf-slider-wrapper::before{ opacity:.9; }

:root[data-theme="dark"] .section--cta .btn-primary{ color: var(--ink); background: rgba(255,255,255,.92); }

/* ---- layout helpers + mobile polish ---- */
.split-2{ grid-template-columns: 1fr 1fr; gap:48px; align-items:start; }
.split-2--wide{ grid-template-columns: 1fr 1.3fr; }
@media (max-width: 860px){
  .split-2, .split-2--wide{ grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px){
  .container{ padding: 0 18px; }
  .section{ padding: 56px 0; }
  /* notice rows: date + tag on one line, text full width below */
  .notice-item{ grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 0; }
  .notice-item .notice-date{ grid-column: 1; grid-row: 1; padding-top: 0; }
  .notice-item .notice-tag{ grid-column: 2; grid-row: 1; justify-self: end; }
  .notice-item .notice-body{ grid-column: 1 / -1; grid-row: 2; }
  .notice-item:hover{ padding-left: 0; }
  .notice-body strong{ font-size: 1.05rem; }
  .about-card{ padding: 20px 18px; }
  .principles .principle p, .about-card p, .section-head p{ max-width:none; }
  /* tickets: smaller date stub so the title gets the width */
  .ticket-stub{ min-width: 64px; padding: 0 10px; }
  .ticket-stub .day{ font-size: 1.5rem; }
  .ticket-main{ padding: 16px 14px; }
  .ticket-main h3{ font-size: 1.12rem; }
  .page-hero h1{ font-size: clamp(2rem, 9vw, 2.6rem); }
}

/* ==========================================================================
   STAGE HERO — 3D cultural instruments + small photo card
   ========================================================================== */
.stage{ padding: 112px 0 24px; position: relative; }
.stage-card{
  position: relative; display: grid; grid-template-columns: .96fr 1.04fr; align-items: center; gap: 8px;
  min-height: 540px; padding: 44px 48px 44px 56px; border-radius: 40px;
  background:
    radial-gradient(520px 320px at 12% 0%, rgba(240,195,107,.38), transparent 70%),
    radial-gradient(520px 360px at 100% 100%, rgba(154,134,196,.32), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.38));
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 24px 60px rgba(47,75,102,.16), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
}
:root[data-theme="dark"] .stage-card{
  background:
    radial-gradient(520px 320px at 12% 0%, rgba(240,195,107,.16), transparent 70%),
    radial-gradient(560px 380px at 100% 100%, rgba(120,104,180,.34), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.16); box-shadow: 0 24px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
.stage-copy{ position: relative; z-index: 3; min-width: 0; }
.stage-tag{
  display: inline-block; font-family: var(--font-marker); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--marigold); color: var(--ink); padding: 6px 14px; border-radius: 8px; transform: rotate(-2deg); margin-bottom: 18px;
}
.stage-title{
  font-family: var(--font-marker); font-weight: 400; color: var(--text); letter-spacing: .01em;
  font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.1; margin: 0 0 18px;
}
.stage-title em{ font-style: normal; color: var(--alta); }
:root[data-theme="dark"] .stage-title em{ color: var(--marigold); }
.stage-desc{ color: var(--text-soft); font-size: 1.05rem; max-width: 46ch; margin: 0 0 26px; }
.stage-cta{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.stage-link{ font-family: var(--font-label); font-weight: 600; color: var(--text); border-bottom: 2px solid var(--marigold); padding-bottom: 2px; transition: gap .3s, color .3s; }
.stage-link:hover{ color: var(--alta); }
.stage-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.stage-chips li{
  font-family: var(--font-label); font-size: .82rem; font-weight: 600; color: var(--text);
  padding: 7px 14px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

.stage-art{ position: relative; align-self: stretch; min-height: 460px; z-index: 2; touch-action: pan-y; cursor: grab; }
.stage-art:active{ cursor: grabbing; }
.stage-glow{
  position: absolute; inset: 6% 2% 4%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0) 72%),
    radial-gradient(closest-side at 70% 30%, rgba(240,195,107,.55), rgba(240,195,107,0) 70%),
    radial-gradient(closest-side at 25% 75%, rgba(154,134,196,.45), rgba(154,134,196,0) 70%);
  filter: blur(6px);
}
:root[data-theme="dark"] .stage-glow{
  background:
    radial-gradient(closest-side, rgba(108,151,180,.35), rgba(108,151,180,0) 72%),
    radial-gradient(closest-side at 70% 30%, rgba(240,195,107,.22), rgba(240,195,107,0) 70%),
    radial-gradient(closest-side at 25% 75%, rgba(154,134,196,.3), rgba(154,134,196,0) 70%);
}
.stage-art canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* small photo card (replaces the big slider) */
.stage-polaroid{
  position: absolute; left: -4px; bottom: 4px; width: 158px; z-index: 4; display: block;
  transform: rotate(-5deg); transition: transform .5s var(--ease-out);
  filter: drop-shadow(0 12px 18px rgba(47,75,102,.3));
}
.stage-polaroid[hidden]{ display: none; }
.stage-polaroid:hover{ transform: rotate(-1deg) translateY(-6px) scale(1.04); }
.stage-polaroid-frame{ display: block; background: #fff; padding: 7px 7px 0; border-radius: 4px 4px 0 0; }
.stage-polaroid-frame img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #e8e2d4; transition: opacity .28s ease, transform .6s var(--ease-out); }
.stage-polaroid-frame img.swap{ opacity: 0; transform: scale(1.04); }
.stage-polaroid-cap{ display: flex; align-items: center; justify-content: space-between; gap: 6px; background: #fff; padding: 6px 9px 9px; border-radius: 0 0 4px 4px; }
.stage-polaroid-cap b{ font-family: var(--font-marker); font-weight: 400; font-size: .72rem; color: #2F4B66; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
.stage-polaroid-cap i{ display: flex; gap: 3px; }
.stage-polaroid-cap i span{ width: 5px; height: 5px; border-radius: 50%; background: #d6dde5; transition: background .3s, transform .3s; }
.stage-polaroid-cap i span.on{ background: var(--alta); transform: scale(1.35); }
.stage-polaroid-tape{ position: absolute; left: 50%; top: -9px; width: 54px; height: 17px; margin-left: -27px; background: rgba(240,195,107,.85); transform: rotate(3deg); z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,.15); }

/* no WebGL / three.js blocked: the photo card becomes the hero art */
.stage-art.no3d canvas{ display: none; }
.stage-art.no3d .stage-polaroid{ left: 50%; bottom: auto; top: 50%; width: min(300px, 80%); margin: 0; transform: translate(-50%, -50%) rotate(-3deg); }
.stage-art.no3d .stage-polaroid:hover{ transform: translate(-50%, -52%) rotate(0); }
.stage-art.no3d .stage-polaroid-cap b{ max-width: 190px; font-size: .9rem; }

@media (max-width: 900px){
  .stage{ padding-top: 100px; }
  .stage-card{ grid-template-columns: 1fr; padding: 30px 24px 18px; border-radius: 30px; min-height: 0; gap: 0; }
  .stage-art{ min-height: 340px; margin: 6px -8px 0; }
  .stage-desc{ font-size: 1rem; }
  .stage-polaroid{ width: 118px; left: 2px; bottom: 6px; }
  .stage-polaroid-cap b{ max-width: 64px; font-size: .64rem; }
}
@media (max-width: 480px){
  .stage-card{ padding: 26px 18px 12px; }
  .stage-title{ font-size: clamp(1.9rem, 9vw, 2.4rem); }
  .stage-art{ min-height: 310px; }
}
@media print{ .stage-art{ display: none; } }

/* ---- mobile: art first, tighter hero, 2-up gallery ---- */
@media (max-width: 900px){
  .stage-art{ order: -1; min-height: 300px; margin: -6px -10px 4px; }
  .stage-chips{ display: none; }
  .stage-tag{ margin-bottom: 12px; }
}
@media (max-width: 480px){
  .stage-title{ font-size: 1.7rem; margin-bottom: 12px; }
  .stage-desc{ font-size: .96rem; margin-bottom: 18px; }
  .stage-art{ min-height: 280px; }
  .stage-cta .btn{ padding: 12px 22px; }
}
@media (max-width: 600px){
  .grid-4#home-gallery, #home-gallery.grid-4{ grid-template-columns: 1fr 1fr; gap: 12px; }
  #home-gallery .gallery-tile{ aspect-ratio: 1 / 1; min-height: 0; height: auto; }
}