/* =============================================================
   01. DESIGN TOKENS
   Add the final background by changing --home-bg-image to:
   url("assets/your-background-file.jpg")
   ============================================================= */
:root {
  color-scheme: dark;
  --ink: #f8f8fb;
  --muted: #a8a8b5;
  --panel: rgba(18, 18, 25, .48);
  --panel-strong: rgba(16, 15, 22, .82);
  --line: rgba(255, 255, 255, .13);
  --red: #ff302f;
  --red-soft: #9f0c13;
  --blue: #335dff;
  --blue-soft: #111a6c;
  --radius: 26px;
  --header-h: 72px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --home-bg-image: none;
}

/* =============================================================
   02. RESET AND SHARED GLASS SURFACES
   ============================================================= */
* { box-sizing: border-box; }
html { min-width: 320px; background: #050407; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); font-family: var(--font); background: #050407; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.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; }
.glass-panel,
.glass-strip {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 18px 65px rgba(0,0,0,.32);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
}

/* =============================================================
   03. HOMEPAGE HERO AND UPLOAD PLACEHOLDERS
   ============================================================= */
.hero-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  padding: 22px clamp(18px, 3.3vw, 54px) 24px;
  background-image: var(--home-bg-image), radial-gradient(circle at 100% 35%, rgba(220,16,24,.24), transparent 34%), radial-gradient(circle at 0% 68%, rgba(34,53,222,.2), transparent 37%);
  background-color: #030204;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.home-page .hero-shell .aurora,
.home-page .hero-shell .streaks,
.home-page .hero-shell .noise { display: none; }
.aurora { position: absolute; z-index: -3; width: 38vw; height: 115vh; top: -8vh; filter: blur(40px); opacity: .52; animation: breathe 7s ease-in-out infinite alternate; }
.aurora-red { right: -17vw; background: linear-gradient(90deg, transparent, rgba(255,0,0,.44)); }
.aurora-blue { left: -22vw; top: 15vh; background: linear-gradient(90deg, rgba(16,31,212,.38), transparent); animation-delay: -3s; }
.streaks { position: absolute; inset: 0; z-index: -2; opacity: .28; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(255,255,255,.035) 13px, transparent 14px 21px); mask-image: linear-gradient(90deg,#000,transparent 38%,transparent 62%,#000); animation: drift 13s linear infinite; }
.noise { position: absolute; inset: 0; z-index: -1; opacity: .065; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.background-upload-note { position: absolute; z-index: 1; right: clamp(18px, 3vw, 50px); top: calc(var(--header-h) + 38px); display: flex; flex-direction: column; align-items: flex-end; color: rgba(255,255,255,.48); pointer-events: none; }
.background-upload-note span { font-size: .63rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.background-upload-note small { margin-top: 3px; color: rgba(255,255,255,.28); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }

/* =============================================================
   04. SHARED TOP NAVIGATION
   ============================================================= */
.site-header { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; width: min(1320px, 100%); height: var(--header-h); margin: 0 auto; padding: 8px 10px 8px 12px; border-radius: 999px; }
.site-header::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: linear-gradient(100deg, rgba(51,93,255,.28), transparent 32%, transparent 68%, rgba(255,48,47,.3)); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; padding: 1px; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.club-logo-wrap { width: 39px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; flex: none; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 0 28px rgba(70,98,255,.18); }
.club-logo-wrap img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); }
.brand-copy { display: flex; align-items: center; line-height: 1; white-space: nowrap; }
.brand-copy strong { font-size: 1.16rem; letter-spacing: -.02em; }
.brand-short { display: none; }
.header-actions { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.primary-nav { display: flex; align-items: center; gap: 2px; }
.primary-nav a { min-height: 46px; padding: 0 15px; display: inline-flex; align-items: center; border-radius: 999px; border: 0; background: transparent; color: #d8d8df; font-size: .86rem; font-weight: 700; cursor: pointer; transition: color .25s ease, background .25s ease, transform .25s ease; }
.primary-nav a:hover, .primary-nav a.active { color: #fff; background: rgba(255,255,255,.075); }
.primary-button { border: 1px solid rgba(255,255,255,.18); color: #fff; background: linear-gradient(135deg, #f23a32, #8f0712); box-shadow: inset 0 1px rgba(255,255,255,.24), 0 9px 28px rgba(209,14,22,.25); }
.primary-button:hover { transform: translateY(-2px); background: linear-gradient(135deg, #ff4a42, #a90a17); }
.header-register { min-height: 46px; padding: 0 22px; border-radius: 999px; font-size: .88rem; font-weight: 800; cursor: pointer; }

.hero-content { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 0; padding: 1.5vh 0 0; text-align: center; }
.eyebrow { margin: 0; color: rgba(255,255,255,.64); font-size: clamp(.66rem, .75vw, .82rem); font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.event-logo-stage { position: relative; display: grid; place-items: center; width: min(1050px, 78vw); height: min(56vh, 590px); margin: -2vh auto -3vh; overflow: visible; perspective: 1200px; animation: logoFloat 5.5s ease-in-out 2.1s infinite; }
.home-logo-slot { position: relative; z-index: 2; display: grid; place-items: center; align-content: center; width: min(760px, 94%); height: min(390px, 72%); border: 1px dashed rgba(255,255,255,.23); border-radius: 42px; background: rgba(0,0,0,.24); box-shadow: inset 0 0 50px rgba(255,255,255,.025), 0 0 70px rgba(255,20,30,.08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.home-logo-slot span { font-size: clamp(1.35rem, 3.2vw, 2.6rem); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.home-logo-slot small { margin-top: 9px; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.event-logo { position: relative; z-index: 2; display: block; width: min(1180px, 96vw); height: auto; max-width: none; object-fit: contain; filter: drop-shadow(0 0 24px rgba(255,255,255,.11)) drop-shadow(16px 8px 38px rgba(241,24,32,.12)); }
.logo-orbit { position: absolute; width: 65%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); box-shadow: 0 0 90px rgba(238,22,31,.09), inset 0 0 75px rgba(48,74,255,.07); opacity: .8; animation: orbitPulse 4s ease-in-out infinite alternate; }
.event-meta { display: flex; align-items: center; gap: 16px; max-width: 850px; padding: 10px 20px; border-radius: 999px; color: var(--muted); font-size: .76rem; }
.event-meta strong { color: #fff; font-size: .9rem; }
.event-meta > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 16px 2px 0; border-radius: 50%; background: rgba(255,255,255,.4); }

.hero-footer { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; width: min(1240px, 100%); margin: 0 auto; }
.hero-bottom-center { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.social-links { justify-self: start; display: flex; align-items: center; gap: 8px; padding: 7px 9px 7px 15px; border-radius: 999px; }
.social-links > span { color: var(--muted); margin-right: 2px; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.social-links a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.06); transition: transform .2s ease, background .2s ease; }
.social-links a:hover { transform: translateY(-2px); background: rgba(255,255,255,.14); }
.social-links svg { width: 15px; height: 15px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
.social-links svg rect, .social-links svg circle:not(.fill-dot) { fill: none; }
.countdown { display: flex; align-items: center; gap: 15px; padding: 10px 19px; border-radius: 20px; }
.countdown div { display: flex; flex-direction: column; align-items: center; min-width: 40px; }
.countdown strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.countdown span { color: var(--muted); font-size: .56rem; text-transform: uppercase; letter-spacing: .1em; }
.countdown i { width: 1px; height: 25px; background: rgba(255,255,255,.12); }
/* =============================================================
   05. CINEMATIC LOADING SCREEN
   ============================================================= */
.cinematic-intro { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; background: #010102; animation: introExit .8s cubic-bezier(.65,0,.35,1) 1.55s forwards; pointer-events: none; }
.intro-mark { display: grid; place-items: center; width: min(600px, 78vw); height: 42vh; overflow: hidden; opacity: 0; animation: introMark 1.4s ease .18s forwards; }
.loading-logo-slot { display: grid; place-items: center; align-content: center; width: 180px; aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(255,255,255,.3); background: rgba(255,255,255,.035); box-shadow: 0 0 70px rgba(255,48,47,.12), inset 0 0 35px rgba(255,255,255,.03); }
.loading-logo-slot span { font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.loading-logo-slot small { margin-top: 6px; color: var(--muted); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.loading-logo { width: min(520px, 76vw); max-height: 38vh; object-fit: contain; filter: drop-shadow(0 0 25px rgba(255,255,255,.13)); }
.intro-scan { position: absolute; width: min(720px, 88vw); height: 1px; background: linear-gradient(90deg, transparent, #fff, var(--red), transparent); box-shadow: 0 0 22px #fff, 0 0 55px var(--red); transform: scaleX(0); animation: scan 1.3s ease-out .15s forwards; }

/* =============================================================
   06. CLUB STORY BELOW THE HOMEPAGE
   ============================================================= */
.club-section { position: relative; overflow: hidden; padding: clamp(70px, 9vw, 130px) 18px; background: radial-gradient(circle at 10% 60%, rgba(37,54,237,.18), transparent 34%), radial-gradient(circle at 93% 25%, rgba(218,16,24,.2), transparent 32%), #050407; }
.club-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
.club-overview { position: relative; display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: clamp(35px, 7vw, 90px); align-items: center; width: min(1120px, 100%); margin: 0 auto; padding: clamp(28px, 5vw, 64px); border-radius: 38px; }
.club-emblem-card { min-height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 30px; background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1); }
.club-emblem { width: min(250px, 75%); aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: white; box-shadow: 0 0 0 10px rgba(255,255,255,.035), 0 30px 80px rgba(0,0,0,.4), 0 0 60px rgba(49,86,255,.13); }
.club-emblem img { width: 100%; height: 100%; object-fit: cover; }
.club-emblem-card > span { margin-top: 25px; color: var(--muted); font-size: .68rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.club-details h2 { margin: 13px 0 18px; font-size: clamp(2.5rem, 5vw, 4.9rem); line-height: .96; letter-spacing: -.06em; }
.club-details h2 span { color: var(--red); }
.club-details > p:not(.eyebrow) { max-width: 650px; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.club-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 30px 0; }
.club-facts div { padding: 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
.club-facts strong { display: block; font-size: 1.3rem; }
.club-facts span { display: block; margin-top: 4px; color: var(--muted); font-size: .68rem; line-height: 1.3; }
.club-links { display: flex; flex-wrap: wrap; gap: 10px; }
.club-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 15px; font-size: .8rem; font-weight: 850; transition: transform .2s ease, background .2s ease; }
.club-links .ghost-button { border: 1px solid var(--line); }

/* =============================================================
   07. SHARED INNER-PAGE LAYOUT AND EVENT CARDS
   ============================================================= */
.inner-page { min-height: 100vh; overflow-x: hidden; background: #050407; }
.page-backdrop { position: fixed; z-index: -1; inset: 0; overflow: hidden; background: radial-gradient(circle at 100% 0%, rgba(194,13,20,.27), transparent 35%), radial-gradient(circle at 0% 60%, rgba(32,45,204,.22), transparent 40%), #050407; }
.page-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
.inner-header { position: sticky; top: 18px; margin-top: 18px; }
.page-content { width: min(1240px, calc(100% - 36px)); margin: 0 auto; padding: 88px 0 84px; }
.page-heading { max-width: 740px; margin-bottom: 38px; }
.page-heading h1 { margin: 12px 0 14px; font-size: clamp(2.55rem, 6vw, 5.5rem); line-height: .96; letter-spacing: -.065em; }
.page-heading h1 span { color: var(--red); text-shadow: 0 0 36px rgba(255,48,47,.26); }
.page-heading > p:last-child { max-width: 650px; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.event-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.event-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 302px; padding: 25px; border-radius: var(--radius); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.event-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -80px; bottom: -80px; border-radius: 50%; background: var(--red); opacity: .08; filter: blur(20px); transition: opacity .3s ease, transform .3s ease; }
.event-card:nth-child(3n+2)::after { background: var(--blue); }
.event-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 25px 75px rgba(0,0,0,.38); }
.event-card:hover::after { opacity: .18; transform: scale(1.3); }
.card-top { display: flex; justify-content: space-between; align-items: center; }
.event-number { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); font-size: .78rem; font-weight: 900; }
.event-type { color: #ff8c88; font-size: .67rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.event-card h2 { margin: 31px 0 10px; font-size: 1.45rem; letter-spacing: -.03em; }
.event-card p { margin: 0 0 25px; color: var(--muted); line-height: 1.55; font-size: .9rem; }
.card-actions { position: relative; z-index: 2; display: flex; gap: 9px; margin-top: auto; }
.card-actions button { flex: 1; min-height: 45px; border-radius: 14px; border: 1px solid var(--line); font-size: .8rem; font-weight: 800; cursor: pointer; }
.ghost-button { background: rgba(255,255,255,.045); }
.ghost-button:hover { background: rgba(255,255,255,.1); }
.site-footer { display: flex; justify-content: space-between; gap: 20px; width: min(1240px, calc(100% - 36px)); margin: 0 auto; padding: 24px 0 38px; border-top: 1px solid rgba(255,255,255,.09); color: #777784; font-size: .75rem; }

/* =============================================================
   08. THREE-DAY SCHEDULE
   ============================================================= */
.schedule-content { width: min(1020px, calc(100% - 36px)); }
.schedule-heading { max-width: 800px; }
.day-tabs { position: sticky; z-index: 20; top: 104px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 18px; padding: 8px; border-radius: 24px; }
.day-tab { position: relative; min-height: 76px; border: 0; border-radius: 18px; background: transparent; cursor: pointer; transition: background .25s ease, transform .25s ease; }
.day-tab span, .day-tab strong { display: block; }
.day-tab span { margin-bottom: 5px; color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.day-tab strong { font-size: 1rem; }
.day-tab:hover { background: rgba(255,255,255,.05); }
.day-tab.active { background: linear-gradient(135deg, rgba(255,61,55,.94), rgba(104,7,17,.9)); box-shadow: 0 10px 34px rgba(180,12,20,.24), inset 0 1px rgba(255,255,255,.25); }
.day-tab.active span { color: rgba(255,255,255,.7); }
.schedule-board { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 40px; margin-bottom: 24px; padding: 30px; border-radius: 30px; scroll-margin-top: 205px; animation: boardIn .36s ease both; }
.schedule-summary { position: sticky; top: 205px; align-self: start; min-height: 220px; padding: 24px; border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); }
.schedule-summary span { color: #ff8d88; font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.schedule-summary strong { display: block; margin: 16px 0 12px; font-size: 1.8rem; line-height: 1.05; letter-spacing: -.045em; }
.schedule-summary p { margin: 0; color: var(--muted); line-height: 1.55; font-size: .86rem; }
.timeline { position: relative; padding-left: 24px; }
.timeline::before { content: ""; position: absolute; top: 6px; bottom: 7px; left: 78px; width: 1px; background: linear-gradient(var(--red), rgba(255,255,255,.12), var(--blue)); }
.timeline-item { position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 35px; min-height: 88px; padding-bottom: 18px; }
.timeline-item::before { content: ""; position: absolute; left: 73px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #54545e; box-shadow: 0 0 0 5px #121218; }
.timeline-item.highlight::before { background: var(--red); box-shadow: 0 0 0 5px #241012, 0 0 18px var(--red); }
.timeline-item.break::before { background: var(--blue); box-shadow: 0 0 0 5px #101328, 0 0 17px var(--blue); }
.timeline-item time { color: #dddde4; font-size: .76rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.timeline-item span { color: #777784; font-size: .62rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.timeline-item h2 { margin: 5px 0 5px; font-size: 1rem; letter-spacing: -.01em; }
.timeline-item p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }

/* =============================================================
   09. ORGANIZING COMMITTEE
   ============================================================= */
.committee-content { width: min(1140px, calc(100% - 36px)); }
.committee-heading { max-width: 850px; }
.committee-tabs { position: sticky; z-index: 20; top: 104px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(580px, 100%); margin-bottom: 24px; padding: 8px; border-radius: 22px; }
.committee-tab { min-height: 54px; border: 0; border-radius: 16px; background: transparent; color: var(--muted); font-size: .82rem; font-weight: 850; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease; }
.committee-tab:hover { color: #fff; background: rgba(255,255,255,.055); }
.committee-tab.active { color: #fff; background: linear-gradient(135deg, rgba(255,62,55,.95), rgba(112,7,17,.9)); box-shadow: inset 0 1px rgba(255,255,255,.22), 0 12px 35px rgba(170,12,20,.22); }
.committee-panel { animation: boardIn .3s ease both; }
.member-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.teacher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.member-card { overflow: hidden; min-height: 365px; border-radius: 26px; transition: transform .28s ease, border-color .28s ease; }
.member-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.24); }
.member-photo { position: relative; display: grid; place-items: center; height: 260px; overflow: hidden; background: radial-gradient(circle at 50% 37%, rgba(255,255,255,.11), transparent 18%), linear-gradient(145deg, rgba(50,76,255,.14), rgba(255,37,42,.11)), rgba(255,255,255,.025); }
.member-photo::before { content: ""; width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.08); box-shadow: 0 112px 0 46px rgba(255,255,255,.055); }
.member-photo span { position: absolute; bottom: 17px; color: rgba(255,255,255,.38); font-size: .62rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.member-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.member-card > div:last-child { padding: 20px; }
.member-card h2 { margin: 0 0 7px; font-size: 1.06rem; letter-spacing: -.02em; }
.member-card p { margin: 0; color: #ff8984; font-size: .74rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.member-card.featured { min-height: 420px; }
.member-card.featured .member-photo { height: 310px; }

/* =============================================================
   10. POPUPS AND REGISTRATION FORMS
   ============================================================= */
.modal-backdrop { position: fixed; z-index: 500; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); animation: fadeIn .2s ease; }
.modal { position: relative; width: min(620px, 100%); max-height: min(780px, 91dvh); overflow: auto; padding: 28px; border-radius: 30px; background: linear-gradient(145deg, rgba(28,27,36,.96), rgba(9,9,13,.96)); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 35px 120px rgba(0,0,0,.7), -20px 0 65px rgba(28,47,255,.08), 20px 0 65px rgba(255,28,31,.12); animation: modalIn .28s cubic-bezier(.2,.8,.2,1); }
.modal-close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.06); font-size: 1.2rem; cursor: pointer; }
.modal-kicker { color: #ff8e89; font-size: .68rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.modal h2 { margin: 10px 45px 10px 0; font-size: clamp(1.75rem, 5vw, 2.65rem); line-height: 1; letter-spacing: -.05em; }
.modal-lead { margin: 0 0 24px; color: var(--muted); line-height: 1.6; }
.register-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.choice-card { display: flex; flex-direction: column; min-height: 170px; padding: 20px; border-radius: 22px; border: 1px solid var(--line); background: rgba(255,255,255,.045); text-align: left; cursor: pointer; transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.choice-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.26); }
.choice-card strong { margin: auto 0 7px; font-size: 1.05rem; }
.choice-card span { color: var(--muted); font-size: .8rem; line-height: 1.45; }
.choice-visual { position: relative; display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 18px; border-radius: 20px; color: #fff; background: linear-gradient(145deg, rgba(255,66,59,.25), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.11); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 14px 35px rgba(0,0,0,.2); }
.choice-visual::after { content: ""; position: absolute; right: -14px; bottom: -12px; width: 42px; height: 42px; border-radius: 50%; background: var(--red); opacity: .12; filter: blur(12px); }
.choice-card:nth-child(2) .choice-visual { background: linear-gradient(145deg, rgba(50,83,255,.28), rgba(255,255,255,.035)); }
.choice-card:nth-child(2) .choice-visual::after { background: var(--blue); }
.choice-visual svg { position: relative; z-index: 1; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0; }
.detail-meta div { padding: 15px; border-radius: 17px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); }
.detail-meta span { display: block; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.detail-meta strong { display: block; margin-top: 5px; font-size: .88rem; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions button, .modal-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 0 22px; border-radius: 15px; border: 1px solid var(--line); font-weight: 800; cursor: pointer; }
.registration-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { color: #c7c7cf; font-size: .76rem; font-weight: 750; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; outline: 0; background: rgba(255,255,255,.05); color: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.field textarea { min-height: 88px; padding-top: 12px; resize: vertical; }
.field select option { background: #15151c; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(255,74,66,.68); box-shadow: 0 0 0 4px rgba(255,48,47,.1); }
.form-note { grid-column: 1 / -1; color: #777784; font-size: .7rem; line-height: 1.45; }
.submit-button { grid-column: 1 / -1; min-height: 52px; border-radius: 15px; border: 0; cursor: pointer; font-weight: 900; }
.success-state { display: grid; place-items: center; min-height: 310px; text-align: center; }
.success-mark { display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 18px; border-radius: 50%; background: linear-gradient(145deg, var(--red), #690710); box-shadow: 0 0 40px rgba(255,48,47,.22); font-size: 2rem; }
.success-state h2 { margin-right: 0; }

@keyframes breathe { to { opacity: .82; transform: translateX(3vw) scale(1.05); } }
@keyframes drift { to { transform: translateX(22px); } }
@keyframes logoFloat { 0%,100% { transform: translateY(0) rotateX(0); } 50% { transform: translateY(-9px) rotateX(1deg); } }
@keyframes orbitPulse { to { transform: scale(1.1); opacity: .35; } }
@keyframes introExit { to { opacity: 0; visibility: hidden; transform: scale(1.04); } }
@keyframes introMark { 0% { opacity: 0; filter: blur(12px); transform: scale(.94); } 42%,82% { opacity: 1; filter: blur(0); transform: scale(1); } 100% { opacity: .4; transform: scale(1.025); } }
@keyframes scan { 0% { transform: scaleX(0); opacity: 0; } 25% { opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes boardIn { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 980px) {
  .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule-board { grid-template-columns: 240px 1fr; gap: 28px; }
  .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  :root { --header-h: 62px; }
  .hero-shell { padding: max(12px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)); }
  .site-header { gap: 4px; padding: 6px 7px 6px 8px; }
  .club-logo-wrap { width: 35px; }
  .brand { gap: 6px; }
  .brand-full { display: none; }
  .brand-short { display: inline; }
  .brand-copy strong { font-size: .7rem; letter-spacing: 0; }
  .header-actions { gap: 0; }
  .primary-nav { gap: 0; }
  .primary-nav a { min-height: 40px; padding: 0 7px; font-size: .63rem; }
  .header-register { min-height: 40px; padding: 0 10px; font-size: .64rem; }
  .hero-content { padding-top: 2vh; }
  .hero-content .eyebrow { max-width: 270px; line-height: 1.5; }
  .background-upload-note { top: calc(var(--header-h) + 24px); right: 17px; }
  .event-logo-stage { width: min(98vw, 620px); height: min(48vh, 440px); margin: -2.5vh auto -2vh; }
  .home-logo-slot { width: min(430px, 92vw); height: min(260px, 66%); border-radius: 27px; }
  .logo-orbit { width: 76%; }
  .event-meta { max-width: 95vw; gap: 7px; padding: 8px 13px; font-size: .63rem; }
  .event-meta strong { font-size: .76rem; }
  .event-meta > * + *::before { margin-right: 7px; }
  .hero-footer { grid-template-columns: 1fr; align-items: end; gap: 8px; }
  .social-links { grid-column: 1; grid-row: 2; justify-self: center; padding: 5px; }
  .hero-bottom-center { grid-column: 1; grid-row: 1; justify-self: center; gap: 6px; }
  .social-links > span { display: none; }
  .social-links a { width: 32px; height: 32px; }
  .countdown { justify-self: center; gap: 9px; padding: 8px 11px; }
  .countdown div { min-width: 35px; }
  .countdown strong { font-size: .87rem; }
  .club-overview { grid-template-columns: 1fr; gap: 28px; border-radius: 28px; }
  .club-emblem-card { min-height: 285px; }
  .club-emblem { width: min(210px, 70%); }
  .club-facts { gap: 7px; }
  .club-facts div { padding: 13px 10px; }
  .page-content { padding-top: 65px; }
  .page-heading h1 { font-size: clamp(2.5rem, 13vw, 4.3rem); }
  .event-grid { grid-template-columns: 1fr; }
  .event-card { min-height: 280px; }
  .schedule-board { grid-template-columns: 1fr; gap: 22px; padding: 18px; }
  .schedule-summary { position: static; min-height: 0; }
  .timeline { padding-left: 4px; }
  .timeline::before { left: 65px; }
  .timeline-item { grid-template-columns: 50px 1fr; gap: 30px; }
  .timeline-item::before { left: 60px; }
  .registration-form { grid-template-columns: 1fr; }
  .field.full, .form-note, .submit-button { grid-column: 1; }
  .modal { padding: 24px 18px; border-radius: 25px; }
  .register-choice { grid-template-columns: 1fr; }
  .choice-card { min-height: 125px; }
  .detail-meta { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; gap: 6px; }
  .member-grid, .teacher-grid { grid-template-columns: 1fr; }
  .member-card { min-height: 345px; }
  .member-photo { height: 240px; }
}

@media (max-width: 450px) {
  .brand-copy { max-width: 52px; }
  .club-logo-wrap { width: 32px; }
  .primary-nav a { padding-inline: 5px; font-size: .59rem; }
  .header-register { padding-inline: 8px; font-size: .6rem; }
  .event-logo-stage { height: min(43vh, 350px); }
  .home-logo-slot { width: min(94vw, 410px); height: min(230px, 66%); }
  .event-meta { flex-wrap: wrap; justify-content: center; border-radius: 18px; }
  .event-meta > * + *::before { display: none; }
  .countdown { gap: 6px; }
  .countdown div { min-width: 32px; }
  .countdown i { height: 21px; }
  .day-tab { min-height: 68px; }
  .day-tab strong { font-size: .85rem; }
  .club-facts { grid-template-columns: 1fr; }
  .club-links a { flex: 1 1 42%; }
  .committee-tabs { top: 91px; }
}

@media (max-height: 690px) and (min-width: 721px) {
  .hero-shell { padding-top: 14px; padding-bottom: 14px; }
  :root { --header-h: 64px; }
  .event-logo-stage { height: 39vh; width: min(600px, 54vw); }
  .hero-content .eyebrow { display: none; }
  .event-meta { padding-block: 7px; }
  .countdown { padding-block: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .cinematic-intro { display: none; }
}

/* =============================================================
   11. UPDATED NAVIGATION AND BRAND ASSETS
   ============================================================= */
.menu-toggle { display: none; width: 40px; height: 40px; padding: 10px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.055); cursor: pointer; }
.menu-toggle span { display: block; width: 17px; height: 1.5px; margin: 3px auto; border-radius: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }
.loading-logo-round { width: 175px; height: 175px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 0 70px rgba(255,48,47,.18), 0 0 110px rgba(51,93,255,.12); }
.background-upload-note { display: none; }

/* =============================================================
   12. OFFICIAL RULES AND DYNAMIC REGISTRATION
   ============================================================= */
.modal-wide { width: min(850px, 100%); }
.rules-panel { margin: 22px 0; padding: 20px; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; background: rgba(255,255,255,.035); }
.rules-panel h3 { margin: 0 0 14px; font-size: 1rem; }
.rules-panel ol { display: grid; gap: 9px; margin: 0; padding-left: 21px; color: #bdbdc8; }
.rules-panel li { padding-left: 5px; font-size: .86rem; line-height: 1.55; }
.member-fields { grid-column: 1 / -1; display: grid; gap: 14px; }
.member-block { min-width: 0; margin: 0; padding: 18px; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; background: rgba(255,255,255,.033); }
.member-block legend { padding: 0 9px; color: #fff; font-size: .8rem; font-weight: 850; }
.member-block legend span { display: inline-grid; place-items: center; width: 29px; height: 29px; margin-right: 8px; border-radius: 9px; background: linear-gradient(145deg, rgba(255,55,49,.9), rgba(113,7,17,.9)); font-size: .65rem; }
.member-grid-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.member-grid-fields .full { grid-column: 1 / -1; }
.member-count-field { padding: 12px; border-radius: 17px; background: rgba(51,93,255,.07); border: 1px solid rgba(83,106,255,.14); }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-error { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border: 1px solid rgba(255,74,66,.32); border-radius: 14px; background: rgba(255,48,47,.09); color: #ffaaa6; font-size: .78rem; }
.submit-button:disabled { cursor: wait; opacity: .6; transform: none; }
.registration-id { margin: 3px 0 15px; padding: 13px 17px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(255,255,255,.04); }
.registration-id span { display: block; color: var(--muted); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.registration-id strong { display: block; margin-top: 5px; font-size: .9rem; letter-spacing: .04em; }
.connection-notice { max-width: 480px; margin: 0 0 18px; color: #f4b777; font-size: .76rem; line-height: 1.5; }
.connection-notice.success { color: #9bd3aa; }

/* =============================================================
   12A. QR REGISTRATION PASS
   ============================================================= */
.registration-pass-preview { display: grid; grid-template-columns: 158px minmax(0, 1fr); align-items: center; gap: 20px; width: min(520px, 100%); margin: 2px 0 17px; padding: 17px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: radial-gradient(circle at 100% 0, rgba(255,48,47,.12), transparent 42%), radial-gradient(circle at 0 100%, rgba(51,93,255,.12), transparent 45%), rgba(255,255,255,.035); text-align: left; }
.registration-qr { display: grid; place-items: center; width: 158px; height: 158px; padding: 9px; overflow: hidden; border-radius: 17px; background: #fff; color: #17171d; font-size: .72rem; font-weight: 850; text-align: center; }
.registration-qr canvas, .registration-qr img { display: block; width: 140px !important; height: 140px !important; }
.registration-pass-copy { min-width: 0; }
.registration-pass-copy .registration-id { margin: 0 0 13px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.registration-pass-copy .registration-id strong { overflow-wrap: anywhere; font-size: 1rem; }
.registration-pass-copy p { margin: 0 0 5px; font-size: .86rem; line-height: 1.4; }
.registration-pass-copy small { color: var(--muted); font-size: .68rem; }
.pass-actions { width: min(520px, 100%); flex-wrap: wrap; justify-content: center; }
.pass-actions button, .pass-actions a { flex: 1 1 145px; }
.pass-actions [data-download-pass] { flex-basis: 190px; }
.qr-error { max-width: 500px; margin: 0 0 16px; color: #ffaaa6; font-size: .74rem; line-height: 1.5; }

/* =============================================================
   12B. QR VERIFICATION PAGE
   ============================================================= */
.verification-page { min-height: 100dvh; background: radial-gradient(circle at 100% 0, rgba(233,25,32,.19), transparent 35%), radial-gradient(circle at 0 100%, rgba(44,69,242,.17), transparent 38%), #050508; }
.verification-shell { display: grid; place-items: center; min-height: 100dvh; padding: 28px 18px; }
.verification-card { width: min(610px, 100%); padding: clamp(24px, 5vw, 42px); border: 1px solid rgba(255,255,255,.14); border-radius: 34px; background: rgba(15,15,21,.88); box-shadow: 0 35px 120px rgba(0,0,0,.55); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); text-align: center; }
.verification-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 30px; }
.verification-brand img { width: 52px; height: 52px; object-fit: cover; border-radius: 50%; background: #fff; }
.verification-brand strong { font-size: 1rem; letter-spacing: -.02em; }
.verification-status-mark { display: grid; place-items: center; width: 82px; height: 82px; margin: 0 auto 20px; border-radius: 50%; background: linear-gradient(145deg, #f43c35, #760812); box-shadow: 0 0 55px rgba(255,48,47,.2); font-size: 2rem; font-weight: 900; }
.verification-card[data-state="found"] .verification-status-mark { background: linear-gradient(145deg, #28c875, #0a693b); }
.verification-card[data-state="error"] .verification-status-mark { background: linear-gradient(145deg, #f04a42, #710910); }
.verification-card h1 { margin: 10px 0 12px; font-size: clamp(2rem, 7vw, 3.6rem); line-height: .98; letter-spacing: -.055em; }
.verification-card > p { margin: 0 auto 23px; max-width: 480px; color: var(--muted); line-height: 1.6; }
.verification-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 23px 0; text-align: left; }
.verification-details div { min-width: 0; padding: 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(255,255,255,.035); }
.verification-details div:first-child { grid-column: 1 / -1; }
.verification-details span { display: block; margin-bottom: 5px; color: var(--muted); font-size: .61rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.verification-details strong { display: block; overflow-wrap: anywhere; font-size: .85rem; line-height: 1.35; }
.verification-home { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 21px; border-radius: 14px; }

/* =============================================================
   13. FINAL SCHEDULE DETAILS
   ============================================================= */
.schedule-summary em { display: inline-flex; margin-top: 22px; padding: 8px 11px; border-radius: 999px; color: #fff; background: rgba(255,48,47,.1); border: 1px solid rgba(255,70,64,.2); font-size: .68rem; font-style: normal; font-weight: 800; letter-spacing: .05em; }
.timeline::before { left: 151px; }
.timeline-item { grid-template-columns: 132px 1fr; gap: 36px; }
.timeline-item::before { left: 146px; }
.timeline-item time { line-height: 1.35; }

/* =============================================================
   14. CONTACT PAGE
   ============================================================= */
.contact-content { width: min(1120px, calc(100% - 36px)); }
.contact-heading { max-width: 780px; }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.contact-card { position: relative; overflow: hidden; min-height: 390px; padding: 25px; border-radius: 28px; }
.contact-card::after { content: ""; position: absolute; right: -70px; bottom: -70px; width: 190px; height: 190px; border-radius: 50%; background: var(--red); opacity: .08; filter: blur(25px); }
.contact-card:nth-child(2)::after { background: var(--blue); }
.contact-avatar { position: relative; z-index: 1; display: grid; place-items: center; width: 120px; height: 120px; margin-bottom: 48px; border-radius: 32px; color: #fff; background: linear-gradient(145deg, rgba(255,56,50,.84), rgba(92,6,15,.9)); border: 1px solid rgba(255,255,255,.17); box-shadow: inset 0 1px rgba(255,255,255,.22), 0 24px 60px rgba(0,0,0,.3); font-size: 1.75rem; font-weight: 900; letter-spacing: -.04em; }
.contact-card:nth-child(2) .contact-avatar { background: linear-gradient(145deg, rgba(55,88,255,.85), rgba(11,20,93,.92)); }
.contact-copy { position: relative; z-index: 1; }
.contact-copy > span, .contact-strip span { color: #ff8d88; font-size: .65rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.contact-copy h2 { margin: 10px 0 8px; font-size: 1.45rem; letter-spacing: -.035em; }
.contact-copy p { min-height: 42px; margin: 0 0 20px; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.contact-copy a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 15px; border-radius: 13px; background: rgba(255,255,255,.06); border: 1px solid var(--line); font-size: .82rem; font-weight: 850; }
.contact-strip { display: grid; grid-template-columns: 1.2fr 1fr .8fr; gap: 30px; margin-top: 18px; padding: 25px; border-radius: 26px; }
.contact-strip strong { display: block; margin: 9px 0 5px; font-size: .94rem; }
.contact-strip p { margin: 0; color: var(--muted); font-size: .78rem; }
.contact-social a { display: inline-flex; margin: 9px 7px 0 0; padding: 8px 11px; border-radius: 10px; background: rgba(255,255,255,.06); font-size: .75rem; font-weight: 800; }

/* =============================================================
   15. GALLERY PAGE
   ============================================================= */
.gallery-content { width: min(1160px, calc(100% - 36px)); }
.gallery-tabs { display: inline-flex; gap: 6px; margin-bottom: 22px; padding: 7px; border-radius: 18px; }
.gallery-tab { min-height: 42px; padding: 0 17px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: .76rem; font-weight: 850; cursor: pointer; }
.gallery-tab.active { color: #fff; background: linear-gradient(135deg, rgba(255,61,55,.95), rgba(108,7,17,.9)); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; min-height: 420px; }
.gallery-empty { grid-column: 1 / -1; display: grid; place-items: center; align-content: center; min-height: 420px; padding: 35px; border-radius: 30px; text-align: center; }
.gallery-empty-mark { position: relative; width: 96px; height: 76px; margin-bottom: 23px; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; background: linear-gradient(145deg, rgba(51,93,255,.13), rgba(255,48,47,.11)); }
.gallery-empty-mark::before { content: ""; position: absolute; width: 22px; height: 22px; top: 13px; right: 15px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }
.gallery-empty-mark span { position: absolute; left: 13px; right: 13px; bottom: 13px; height: 31px; background: linear-gradient(135deg, transparent 0 20%, rgba(255,255,255,.15) 21% 50%, transparent 51%), linear-gradient(45deg, rgba(255,48,47,.18), rgba(51,93,255,.18)); clip-path: polygon(0 100%, 31% 27%, 49% 65%, 67% 42%, 100% 100%); }
.gallery-empty h2 { margin: 13px 0 9px; font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -.045em; }
.gallery-empty > p:last-child { max-width: 560px; margin: 0; color: var(--muted); line-height: 1.6; }
.gallery-card { position: relative; overflow: hidden; aspect-ratio: 4 / 3; padding: 0; border: 1px solid var(--line); border-radius: 22px; background: #101017; cursor: zoom-in; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gallery-card:hover img { transform: scale(1.045); }
.gallery-card span { position: absolute; left: 12px; bottom: 12px; padding: 7px 10px; border-radius: 10px; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); font-size: .68rem; font-weight: 850; }
.gallery-lightbox img { width: 100%; max-height: 72vh; object-fit: contain; border-radius: 19px; }
.gallery-lightbox p { margin: 15px 0 0; color: var(--muted); text-align: center; }

/* =============================================================
   16. RESPONSIVE UPDATES
   ============================================================= */
@media (max-width: 1060px) {
  .primary-nav a { padding-inline: 10px; font-size: .79rem; }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .menu-toggle { display: block; }
  .site-header { overflow: visible; }
  .header-actions { position: relative; gap: 5px; }
  .primary-nav { position: absolute; z-index: 80; top: calc(100% + 13px); right: 0; display: grid; width: min(230px, calc(100vw - 24px)); padding: 8px; border: 1px solid var(--line); border-radius: 20px; background: rgba(12,12,17,.96); box-shadow: 0 24px 70px rgba(0,0,0,.55); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, visibility .2s ease, transform .2s ease; }
  .primary-nav.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .primary-nav a { justify-content: flex-start; min-height: 44px; padding: 0 14px; font-size: .78rem; }
  .club-logo-wrap { width: 34px; }
  .brand-copy strong { font-size: .72rem; }
  .event-logo-stage { width: 98vw; height: min(47vh, 430px); margin: -3vh auto -2vh; }
  .event-logo { width: min(650px, 140vw); }
  .logo-orbit { width: 82%; }
  .member-grid-fields { grid-template-columns: 1fr; }
  .member-grid-fields .full { grid-column: 1; }
  .timeline::before { left: 103px; }
  .timeline-item { grid-template-columns: 88px 1fr; gap: 31px; }
  .timeline-item::before { left: 98px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card:last-child { grid-column: auto; }
  .contact-strip { grid-template-columns: 1fr; gap: 22px; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-tabs { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
  .gallery-tab { padding-inline: 8px; }
}

@media (max-width: 450px) {
  .header-register { padding-inline: 10px; }
  .event-logo-stage { height: min(42vh, 360px); }
  .event-logo { width: min(630px, 140vw); }
  .timeline { padding-left: 0; }
  .timeline::before { left: 86px; }
  .timeline-item { grid-template-columns: 72px 1fr; gap: 28px; }
  .timeline-item::before { left: 81px; }
  .timeline-item time { font-size: .66rem; }
  .modal-actions { flex-direction: column; }
  .registration-pass-preview { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .registration-pass-copy { width: 100%; }
  .pass-actions button, .pass-actions a { width: 100%; flex-basis: auto; }
  .verification-details { grid-template-columns: 1fr; }
  .verification-details div:first-child { grid-column: auto; }
}

/* =============================================================
   17. USER-UPLOAD IMAGE SLOTS
   Required filenames:
   homepage-background.jpg, header-logo.png, loading-logo.png,
   event-logo.png
   ============================================================= */
.upload-image-slot { position: relative; }
.upload-image-slot [data-upload-image] { opacity: 0; }
.upload-image-slot.asset-ready [data-upload-image] { opacity: 1; }
.upload-image-slot.asset-ready > .asset-placeholder,
.upload-image-slot.asset-ready > .background-upload-note { display: none; }
.asset-placeholder { display: grid; place-items: center; color: rgba(255,255,255,.82); font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.asset-placeholder small { display: block; margin-top: 7px; color: var(--muted); font-size: .58rem; letter-spacing: .1em; }
.club-logo-wrap .asset-placeholder { position: absolute; inset: 0; color: #1265aa; background: #fff; font-size: .61rem; letter-spacing: -.01em; }
.hero-bg-slot { position: absolute; z-index: -4; inset: 0; overflow: hidden; background: radial-gradient(circle at 100% 35%, rgba(220,16,24,.24), transparent 34%), radial-gradient(circle at 0% 68%, rgba(34,53,222,.2), transparent 37%), #030204; }
.hero-bg-image { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; }
.hero-bg-slot .background-upload-note { z-index: 2; top: calc(var(--header-h) + 40px); right: clamp(18px, 3vw, 50px); display: flex; }
.intro-logo-slot { width: min(560px, 78vw); height: min(300px, 38vh); }
.intro-logo-slot .loading-logo { grid-area: 1 / 1; width: min(520px, 76vw); max-height: 38vh; object-fit: contain; }
.intro-logo-slot .asset-placeholder { grid-area: 1 / 1; width: 180px; aspect-ratio: 1; border: 1px dashed rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.035); box-shadow: 0 0 70px rgba(255,48,47,.12), inset 0 0 35px rgba(255,255,255,.03); }
.event-logo-slot { display: grid; place-items: center; width: 100%; height: 100%; }
.event-logo-slot > * { grid-area: 1 / 1; }
.event-logo-stage { width: min(1120px, 82vw); height: min(58vh, 620px); margin: -1vh auto -2vh; }
.event-logo-slot { position: absolute; inset: 0; }
.event-logo-slot .event-logo { width: min(1180px, 96vw); height: auto; max-height: none; object-position: center; transform: translateY(-1vh) scale(1.12); transform-origin: center; }
.event-logo-slot .event-logo-placeholder { width: min(760px, 94%); height: min(390px, 72%); border: 1px dashed rgba(255,255,255,.23); border-radius: 42px; background: rgba(0,0,0,.24); box-shadow: inset 0 0 50px rgba(255,255,255,.025), 0 0 70px rgba(255,20,30,.08); font-size: clamp(1.2rem, 3vw, 2.4rem); }

.event-count-chip { display: inline-flex; align-items: center; min-height: 36px; margin-top: 17px; padding: 0 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #e9e9ef; background: linear-gradient(135deg, rgba(255,48,47,.1), rgba(51,93,255,.08)); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }

/* =============================================================
   18. MATCH INNER HEADERS TO THE HOMEPAGE
   ============================================================= */
.inner-header { width: min(1320px, calc(100% - clamp(36px, 6.6vw, 108px))); }

/* =============================================================
   19. COMPACT ONE-SCREEN CONTACT PAGE
   ============================================================= */
.contact-page { min-height: 100dvh; }
.contact-page .contact-content { padding-top: clamp(42px, 6vh, 66px); padding-bottom: 28px; }
.contact-page .page-heading { margin-bottom: 24px; }
.contact-page .page-heading h1 { font-size: clamp(2.8rem, 5vw, 4.8rem); }
.contact-card { min-height: 0; padding: 24px; }
.contact-copy h2 { margin-top: 14px; }
.contact-copy p { min-height: 42px; }
.contact-strip { margin-top: 14px; padding: 20px 24px; }

@media (min-width: 721px) {
  .contact-page .site-footer { padding-top: 18px; padding-bottom: 22px; }
}

@media (max-width: 720px) {
  .inner-header { width: calc(100% - 24px); }
  .hero-bg-slot .background-upload-note { top: calc(var(--header-h) + 24px); right: 17px; }
  .event-logo-slot .event-logo-placeholder { width: min(430px, 92vw); height: min(260px, 66%); border-radius: 27px; }
  .event-logo-stage { width: 100vw; height: min(50vh, 450px); margin: -2vh auto -1vh; }
  .event-logo-slot .event-logo { width: min(650px, 140vw); transform: translateY(-.5vh) scale(1.08); }
  .contact-page .contact-content { padding-top: 60px; }
}

/* =============================================================
   20. RESTORED ONE-SCREEN HOMEPAGE LOGO LAYOUT
   Matches the original approved homepage composition.
   ============================================================= */
.hero-content { min-height: 0; padding: 1.5vh 0 0; overflow: visible; }
.logo-orbit { display: none; }
.event-logo-stage {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: min(620px, 52vw) !important;
  height: min(46vh, 460px) !important;
  min-height: 260px;
  margin: -1vh auto -2vh !important;
  overflow: visible;
}
.event-logo-slot {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.event-logo-slot .event-logo {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}
.club-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 720px) {
  .hero-content { padding-top: 1vh; }
  .event-logo-stage {
    width: min(92vw, 560px) !important;
    height: min(38vh, 340px) !important;
    min-height: 220px;
    margin: -1vh auto -1vh !important;
  }
  .event-logo-slot .event-logo {
    max-width: 100% !important;
    max-height: 100% !important;
  }
}

@media (max-width: 450px) {
  .event-logo-stage {
    width: 94vw !important;
    height: min(34vh, 300px) !important;
    min-height: 195px;
  }
}

@media (max-height: 690px) and (min-width: 721px) {
  .event-logo-stage {
    width: min(560px, 48vw) !important;
    height: 38vh !important;
    min-height: 220px;
  }
}

/* =============================================================
   21. COMPACT ONE-SCREEN REGISTRATION SUCCESS PASS
   Keeps the QR and buttons visible without modal scrolling.
   ============================================================= */
.modal.success-modal {
  width: min(560px, 100%);
  max-height: calc(100dvh - 20px);
  padding: 18px;
  overflow: hidden;
}
.success-state { min-height: 0; align-content: center; }
.success-state .success-mark { width: 48px; height: 48px; margin-bottom: 8px; font-size: 1.3rem; }
.success-state .modal-kicker { font-size: .58rem; }
.success-state h2 { margin: 6px 0; font-size: clamp(1.45rem, 5vw, 2rem); }
.success-state .modal-lead { margin: 0 0 9px; font-size: .78rem; line-height: 1.4; }
.success-state .registration-pass-preview { grid-template-columns: 116px minmax(0, 1fr); gap: 13px; margin: 0 0 9px; padding: 10px; border-radius: 18px; }
.success-state .registration-qr { width: 116px; height: 116px; padding: 7px; border-radius: 13px; }
.success-state .registration-qr canvas,
.success-state .registration-qr img { width: 102px !important; height: 102px !important; }
.success-state .registration-pass-copy .registration-id { margin-bottom: 7px; }
.success-state .registration-pass-copy .registration-id strong { margin-top: 3px; font-size: .82rem; }
.success-state .registration-pass-copy p { margin-bottom: 3px; font-size: .76rem; }
.success-state .registration-pass-copy small { font-size: .61rem; }
.success-state .connection-notice { margin: 0 0 9px; font-size: .65rem; line-height: 1.35; }
.success-state .pass-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.success-state .pass-actions button { width: auto; min-height: 42px; padding: 0 14px; font-size: .72rem; }

@media (max-width: 450px) {
  .modal.success-modal { padding: 14px; border-radius: 22px; }
  .success-state .registration-pass-preview { grid-template-columns: 104px minmax(0, 1fr); justify-items: stretch; text-align: left; }
  .success-state .registration-qr { width: 104px; height: 104px; }
  .success-state .registration-qr canvas,
  .success-state .registration-qr img { width: 90px !important; height: 90px !important; }
  .success-state .pass-actions { grid-template-columns: 1fr auto; }
  .success-state .pass-actions button { width: auto; }
}