/* =========================================================
   Hapn – public site styles
   Mobile-first: base styles are for phones, media queries
   add layout for tablets (768px) and desktops (900px+).
   ========================================================= */

:root {
  --ink: #111936;
  --blue: #2f45ff;
  --blue-dark: #2233d6;
  --blue-soft: #e9ecff;
  --sun: #ffc935;
  --paper: #f5f6fb;
  --white: #ffffff;
  --muted: #5b6482;
  --line: #dfe2ee;
  --green: #12805c;
  --green-soft: #e2f5ee;
  --red: #c62828;
  --red-soft: #fdeaea;
  --amber-soft: #fff3d1;
  --radius-card: 18px;
  --radius-ctl: 12px;
  --shadow-sm: 0 1px 2px rgba(17, 25, 54, .06), 0 2px 8px rgba(17, 25, 54, .06);
  --shadow-md: 0 14px 28px -12px rgba(17, 25, 54, .28);
  --container: 1120px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.hero :focus-visible, .site-footer :focus-visible, .admin-header :focus-visible { outline-color: var(--sun); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1rem; }
.muted { color: var(--muted); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: #fff;
  padding: .6rem 1rem; border-radius: 10px;
}
.skip-link:focus { top: .75rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem 1.25rem; border: 1.5px solid transparent; border-radius: var(--radius-ctl);
  font: inherit; font-weight: 700; line-height: 1.2; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-sun:hover { background: #ffbb0d; }
.btn-outline { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #a81f1f; }
.btn-danger-outline { background: #fff; border-color: #f0c4c4; color: var(--red); }
.btn-danger-outline:hover { background: var(--red-soft); }
.btn-ghost-light { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .12); }
.btn-block { width: 100%; }
.btn-sm { padding: .45rem .85rem; font-size: .9rem; }
.btn-lg { padding: .9rem 1.6rem; font-size: 1.05rem; }
.btn[disabled], .btn-disabled {
  background: #eceef6; color: #7c84a3; border-color: transparent; cursor: not-allowed; transform: none;
}

/* ---------- Motion ---------- */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ticketDrop {
  from { opacity: 0; transform: translateY(-18px) rotate(-1.5deg) scale(.96); }
  to   { opacity: 1; transform: translateY(0) rotate(-1.5deg) scale(1); }
}
@keyframes chipPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero-inner > div:first-child { animation: fadeSlideUp .6s cubic-bezier(.2,.7,.3,1) both; }
.hero-inner > div:first-child > .btn { animation: fadeSlideUp .6s cubic-bezier(.2,.7,.3,1) both .12s; }
#next-up.ticket-ready { animation: ticketDrop .55s cubic-bezier(.2,.7,.3,1) both .22s; }

/* Cards fade + rise into place, staggered by their position (set inline via --i). */
.event-card.reveal {
  animation: fadeSlideUp .5s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.event-card { will-change: transform; }
.event-card:hover .card-poster img { transform: scale(1.035); }
.card-poster img { transition: transform .35s ease; }
.event-card .card-actions .btn-primary { transition: background-color .15s ease, transform .15s ease; }

.chip { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.chip:active { transform: scale(.96); }
.chip.just-selected { animation: chipPop .28s ease; }

.search input { transition: box-shadow .15s ease, border-color .15s ease; }

/* Mobile nav slides down instead of popping in */
.nav {
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: transform .22s ease, opacity .22s ease, visibility .22s;
}
.nav.open { transform: translateY(0); opacity: 1; visibility: visible; }
@media (min-width: 768px) { .nav, .nav.open { transform: none; opacity: 1; visibility: visible; transition: none; } }
/* Toast slides in */
.toast { animation: toastIn .25s cubic-bezier(.2,.7,.3,1) both; }

/* Buttons: a small lift instead of only a color swap */
.btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; }
.btn-primary:hover, .btn-sun:hover { transform: translateY(-1px); box-shadow: 0 8px 16px -8px rgba(17, 25, 54, .35); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; }
.nav-toggle {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff; border-radius: 10px; font-size: 1.3rem; cursor: pointer; color: var(--ink);
  transition: transform .15s ease, border-color .15s ease;
}
.nav-toggle:active { transform: scale(.92); }
.nav {
  display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff;
  border-bottom: 1px solid var(--line); padding: .5rem 1rem 1rem; flex-direction: column; gap: .25rem;
  box-shadow: 0 12px 20px -14px rgba(17, 25, 54, .3);
}
.nav.open { display: flex; }
.nav a { padding: .75rem .75rem; color: var(--ink); font-weight: 600; border-radius: 10px; }
.nav a:hover { background: var(--blue-soft); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--blue); }
.nav .nav-admin { border: 1.5px solid var(--ink); text-align: center; margin-top: .5rem; }
@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .nav {
    display: flex; position: static; flex-direction: row; align-items: center; padding: 0;
    border: 0; box-shadow: none; gap: .25rem; background: transparent;
  }
  .nav a { padding: .5rem .9rem; }
  .nav .nav-admin { margin: 0 0 0 .75rem; padding: .45rem 1rem; }
  .nav .nav-admin:hover { background: var(--ink); color: #fff; }
}

/* ---------- Hero ---------- */
.hero { background: var(--blue); color: #fff; padding: 3rem 0 3.25rem; }
.hero-inner { display: grid; gap: 2.25rem; align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 7.5vw, 3.75rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; margin: 0 0 1rem; }
.hero p { font-size: 1.1rem; max-width: 34rem; color: #e3e7ff; margin-bottom: 1.75rem; }
@media (min-width: 900px) {
  .hero { padding: 5rem 0; }
  .hero-inner { grid-template-columns: 1.25fr .75fr; gap: 3rem; }
}

/* "Next up" ticket in the hero (filled from the newest upcoming event) */
.ticket {
  position: relative; display: block; background: #fff; color: var(--ink); border-radius: 20px;
  padding: 1.25rem 1.4rem; max-width: 24rem; box-shadow: 0 20px 30px -18px rgba(0, 0, 40, .55);
  transform: rotate(-1.5deg); transition: transform .2s ease;
}
.ticket:hover { text-decoration: none; transform: rotate(0deg); }
.ticket::before, .ticket::after {
  content: ""; position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue); margin-top: -11px;
}
.ticket::before { left: -11px; }
.ticket::after { right: -11px; }
.ticket-label { display: inline-block; background: var(--sun); font-weight: 700; font-size: .85rem; padding: .15rem .65rem; border-radius: 999px; margin-bottom: .6rem; }
.ticket-title { display: block; font-size: 1.3rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; padding-bottom: 1rem; border-bottom: 2px dashed var(--line); margin-bottom: 1rem; }
.ticket-rows { display: grid; gap: .3rem; color: var(--muted); font-size: .95rem; }
.ticket-when { display: block; margin-top: .8rem; font-weight: 700; color: var(--blue); }

/* ---------- Page header (Events / About / Event) ---------- */
.page-head { background: #fff; border-bottom: 1px solid var(--line); padding: 2rem 0 1.75rem; }
.page-head h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); margin-bottom: .25rem; }
.page-head p { color: var(--muted); margin: 0; max-width: 40rem; }

/* ---------- Sections ---------- */
.section { padding: 2.5rem 0 3rem; }
#events { scroll-margin-top: 72px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.section-head h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0; }
.results-count { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------- Search + filters ---------- */
.toolbar { display: grid; gap: .9rem; margin-bottom: 1.5rem; }
.search { position: relative; }
.search input {
  width: 100%; padding: .85rem 1rem .85rem 2.85rem; border: 1.5px solid var(--line);
  border-radius: var(--radius-ctl); font: inherit; background: #fff; color: var(--ink);
}
.search input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }
.search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.chips { display: flex; gap: .5rem; overflow-x: auto; padding: 2px 2px .4rem; scrollbar-width: thin; }
.chip {
  flex: 0 0 auto; padding: .45rem 1rem; border-radius: 999px; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink); font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--blue); }
.chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
@media (min-width: 768px) { .chips { flex-wrap: wrap; overflow: visible; } }

/* ---------- Event cards ---------- */
.events-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr)); }
.event-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-poster { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--blue-soft); overflow: hidden; }
.card-poster img { width: 100%; height: 100%; object-fit: cover; }
.badge {
  position: absolute; top: .75rem; left: .75rem; background: #fff; color: var(--ink); font-weight: 700;
  font-size: .82rem; padding: .2rem .7rem; border-radius: 999px; box-shadow: 0 1px 4px rgba(17, 25, 54, .2);
}
.badge-ended { left: auto; right: .75rem; background: var(--ink); color: #fff; }
.card-body { display: flex; flex-direction: column; gap: .65rem; padding: 1.1rem 1.15rem 1.25rem; flex: 1; }
.card-title { font-size: 1.2rem; margin: 0; }
.card-title a { color: var(--ink); }
.card-title a:hover { color: var(--blue); text-decoration: none; }
.meta { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; color: var(--muted); font-size: .95rem; }
.meta li { display: flex; gap: .55rem; align-items: baseline; }
.meta li > span:first-child { flex: 0 0 1.25rem; text-align: center; }
.card-desc {
  margin: 0; color: #38405e; font-size: .96rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-actions { margin-top: auto; padding-top: .5rem; }
.event-card.is-past .card-poster img { filter: grayscale(.9); opacity: .8; }
.event-card.is-past .card-title a { color: var(--muted); }

.empty { grid-column: 1 / -1; text-align: center; background: #fff; border: 1.5px dashed var(--line); border-radius: var(--radius-card); padding: 2.5rem 1rem; }
.empty-title { font-size: 1.25rem; font-weight: 800; margin-bottom: .25rem; }
.empty p:last-child { margin: 0; color: var(--muted); }

.skeleton { min-height: 360px; background: linear-gradient(90deg, #eceef6 25%, #f6f7fb 37%, #eceef6 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; box-shadow: none; }
.skeleton:hover { transform: none; box-shadow: none; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Notices ---------- */
.notice { padding: .85rem 1rem; border-radius: var(--radius-ctl); border: 1px solid; margin-bottom: 1rem; font-size: .96rem; }
.notice-error { background: var(--red-soft); border-color: #f2bcbc; color: #8e1c1c; }
.notice-warn { background: var(--amber-soft); border-color: #f0d68a; color: #6b4e00; }
.notice-success { background: var(--green-soft); border-color: #a9dfc9; color: #0c5a41; }
.notice code { background: rgba(0, 0, 0, .06); padding: .05rem .35rem; border-radius: 6px; }

/* ---------- Event details page ---------- */
.back-link { display: inline-block; margin-bottom: 1rem; font-weight: 600; }
.detail { display: grid; gap: 1.75rem; }
.detail-poster { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); background: var(--blue-soft); }
.detail-poster img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.detail-info h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); margin: .6rem 0 1rem; }
.pill { display: inline-block; background: var(--blue-soft); color: var(--blue-dark); font-weight: 700; font-size: .88rem; padding: .2rem .8rem; border-radius: 999px; }
.pill-ended { background: #eceef6; color: var(--muted); margin-left: .4rem; }
.info-list { display: grid; gap: .75rem; margin: 0 0 1.5rem; padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.info-list div { display: flex; gap: .75rem; }
.info-list dt { flex: 0 0 8.5rem; color: var(--muted); font-weight: 600; }
.info-list dd { margin: 0; font-weight: 600; }
.detail-text { white-space: pre-line; color: #2b3352; max-width: 65ch; }
.detail-text-title { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.detail-cta { margin-top: 1.5rem; }
.detail-cta small { display: block; margin-top: .5rem; color: var(--muted); }
@media (min-width: 900px) {
  .detail { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: start; }
  .detail-poster { position: sticky; top: 88px; }
}

/* ---------- About page ---------- */
.prose { max-width: 42rem; }
.prose h2 { font-size: 1.5rem; margin-top: 2rem; }
.steps { list-style: none; counter-reset: step; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; }
.steps li { counter-increment: step; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1rem 1rem 3.5rem; }
.steps li::before {
  content: counter(step); position: absolute; left: 1rem; top: 1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--blue); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: .95rem;
}
.steps strong { display: block; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #c9cee6; padding: 2.5rem 0 1.5rem; }
.footer-grid { display: grid; gap: 1.5rem; }
.footer-brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-weight: 800; font-size: 1.2rem; }
.footer-brand img { width: 32px; height: 32px; }
.footer-tagline { margin: .5rem 0 0; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.footer-links a { color: #dfe3f7; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 1.75rem; padding-top: 1rem; font-size: .9rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr; align-items: start; } }

/* ---------- Toast messages ---------- */
#toast-box { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 200; display: grid; gap: .5rem; width: min(92vw, 26rem); }
.toast { background: var(--ink); color: #fff; padding: .85rem 1.1rem; border-radius: 12px; box-shadow: var(--shadow-md); font-weight: 600; }
.toast-success { background: var(--green); }
.toast-error { background: var(--red); }

/* ---------- 404 ---------- */
.not-found { text-align: center; padding: 5rem 1rem; display: grid; justify-items: center; gap: .5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ticket { transform: none; }
  .event-card.reveal, .hero-inner > div, #next-up.ticket-ready { opacity: 1; transform: none; }
  .nav { opacity: 1; visibility: visible; transform: none; }
}


/* ---------- Featured events carousel ---------- */
#next-up { min-width: 0; max-width: none; width: 100%; }
.featured-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.8rem; }
.carousel-controls { display:flex; gap:.4rem; }
.carousel-controls button { width:2.3rem; height:2.3rem; border:1px solid rgba(255,255,255,.55); border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; }
.featured-carousel { display:grid; grid-auto-columns:minmax(230px, 78%); grid-auto-flow:column; gap:.85rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:.15rem .1rem .75rem; scrollbar-width:thin; }
.featured-card { min-width:0; display:flex; flex-direction:column; background:#fff; color:var(--ink); border-radius:16px; overflow:hidden; scroll-snap-align:start; box-shadow:0 12px 24px -16px rgba(0,0,30,.5); }
.featured-poster { display:block; aspect-ratio:16/8; background:var(--blue-soft); overflow:hidden; }
.featured-poster img { display:block; width:100%; height:100%; object-fit:cover; }
.featured-copy { padding:1rem; display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; }
.featured-date { color:var(--blue); font-weight:800; font-size:.85rem; }
.featured-copy h3 { margin:0; font-size:1.1rem; line-height:1.25; }
.featured-copy h3 a { color:var(--ink); }
.featured-copy p { margin:0 0 .35rem; color:var(--muted); font-size:.9rem; }
.featured-copy .btn { margin-top:auto; }
.publish-options { display:grid; gap:.6rem; margin-top:1rem; }
@media (min-width:900px) { .featured-carousel { grid-auto-columns:minmax(250px, 48%); } }


/* ---------- Center-focused glass featured carousel ---------- */
.hero { overflow:hidden; }
.hero-inner { min-width:0; }
#next-up { min-width:0; width:100%; max-width:100%; align-self:center; }
.featured-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin:0 auto 1rem; max-width:100%; }
.featured-head .ticket-label { color:#fff; background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 8px 24px rgba(12,18,90,.14); }
.carousel-controls button { width:2.5rem; height:2.5rem; color:#fff; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.45); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.featured-carousel {
  display:flex; align-items:stretch; gap:1rem; width:100%; min-width:0;
  overflow-x:auto; overflow-y:hidden; padding:1rem max(1rem, calc((100% - 72%) / 2)) 1.5rem;
  scroll-snap-type:x mandatory; scroll-padding-inline:calc((100% - 72%) / 2);
  scroll-behavior:smooth; overscroll-behavior-x:contain; touch-action:pan-x pan-y;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab;
  perspective:1000px;
}
.featured-carousel::-webkit-scrollbar { display:none; }
.featured-carousel:active { cursor:grabbing; }
.featured-card {
  flex:0 0 72%; min-width:0; width:72%; display:flex; flex-direction:column;
  opacity:.48; transform:scale(.86); filter:saturate(.62) brightness(.84);
  border:1px solid rgba(255,255,255,.62);
  background:rgba(255,255,255,.16); color:#fff;
  border-radius:22px; overflow:hidden; scroll-snap-align:center;
  box-shadow:0 18px 50px rgba(7,14,90,.2), inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  transition:transform .35s ease, opacity .35s ease, filter .35s ease, box-shadow .35s ease;
}
.featured-card.is-active { opacity:1; transform:scale(1); filter:none; box-shadow:0 28px 65px rgba(8,14,90,.3), inset 0 1px 0 rgba(255,255,255,.7); }
.featured-poster { display:block; aspect-ratio:16/9; overflow:hidden; background:rgba(255,255,255,.12); }
.featured-poster img { width:100%; height:100%; display:block; object-fit:cover; }
.featured-copy { padding:1rem; gap:.5rem; background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(241,244,255,.82)); color:var(--ink); }
.featured-date { color:var(--blue); font-size:.82rem; font-weight:800; }
.featured-copy h3 { margin:0; font-size:clamp(1rem,1.2vw,1.3rem); line-height:1.25; }
.featured-copy h3 a { color:var(--ink); }
.featured-copy p { margin:0 0 .35rem; color:var(--muted); font-size:.88rem; }
.featured-copy .btn { margin-top:auto; align-self:flex-start; }
.category-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.5rem .8rem; padding:.8rem; border:1px solid var(--line); border-radius:12px; background:#fafbff; }
.category-options .check { margin:0; }
.field-label { display:block; font-weight:700; margin-bottom:.5rem; }
@media (min-width:900px) {
  .hero { padding:4rem 0 4.5rem; }
  .hero-inner { grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:2.25rem; }
  #next-up { width:100%; max-width:100%; overflow:hidden; }
  .featured-carousel { gap:.5rem; padding:1.5rem 0 1.75rem; scroll-padding-inline:33.333%; }
  .featured-card { flex:0 0 33.333%; width:33.333%; transform:scale(.82); }
  .featured-card.is-active { transform:scale(1.04); z-index:2; }
  .featured-copy { padding:.9rem; }
  .featured-copy .btn { padding:.55rem .9rem; font-size:.88rem; }
}
@media (max-width:899px) {
  .hero-inner { grid-template-columns:minmax(0,1fr); }
  .featured-carousel { padding-inline:14%; scroll-padding-inline:14%; }
  .featured-card { flex-basis:78%; width:78%; }
}
@media (prefers-reduced-motion:reduce) {
  .featured-card, .featured-carousel { scroll-behavior:auto; transition:none; }
}


/* Carousel navigation fix: leave enough scroll room to center first/last cards */
.featured-carousel {
  box-sizing:border-box;
  padding-left:max(1rem, calc((100% - 72%) / 2));
  padding-right:max(1rem, calc((100% - 72%) / 2));
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  user-select:none;
  -webkit-user-select:none;
}
.featured-carousel.is-pointer-down { cursor:grabbing; scroll-behavior:auto !important; scroll-snap-type:none; }
.featured-carousel.is-pointer-down .featured-card { transition:none; }
.featured-card { scroll-snap-align:center; }
.featured-poster img { -webkit-user-drag:none; user-select:none; }
@media (min-width:900px) {
  #next-up { overflow:visible; }
  .featured-carousel {
    gap:.25rem;
    padding-left:calc((100% - 33.333%) / 2);
    padding-right:calc((100% - 33.333%) / 2);
    scroll-padding-inline:0;
  }
  .featured-card { flex-basis:33.333%; width:33.333%; }
  .featured-copy { padding:.8rem; }
  .featured-poster { aspect-ratio:4/3; }
}
@media (max-width:899px) {
  .featured-carousel { padding-left:11%; padding-right:11%; scroll-padding-inline:0; }
}
#category-other-wrap[hidden] { display:none !important; }
#category-other-required[hidden] { display:none !important; }

/* ---------- Final featured carousel layout ---------- */
@media (min-width:900px) {
  .hero-inner { grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:2rem; }
  #next-up { min-width:0; overflow:visible; }
  .featured-head { max-width:100%; }
  .featured-carousel {
    width:100%;
    gap:.65rem;
    padding:1.35rem 34% 1.75rem;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:0;
  }
  .featured-card {
    flex:0 0 32%;
    width:32%;
    min-width:190px;
    transform:scale(.88);
    opacity:.5;
    filter:saturate(.72) brightness(.88);
    border-radius:22px;
  }
  .featured-card.is-active {
    transform:scale(1);
    opacity:1;
    filter:none;
    z-index:3;
  }
  .featured-poster { aspect-ratio:3 / 2; }
  .featured-copy { padding:1rem; }
  .featured-copy h3 { font-size:1.15rem; }
}
@media (max-width:899px) {
  .featured-carousel {
    padding-left:11%;
    padding-right:11%;
    gap:.8rem;
    touch-action:pan-x pan-y;
    overscroll-behavior-x:contain;
  }
  .featured-card { flex-basis:78%; width:78%; }
}
.featured-carousel.is-pointer-down {
  cursor:grabbing;
  scroll-snap-type:none;
  scroll-behavior:auto;
}
.featured-carousel.is-pointer-down .featured-card { transition:none; }

/* Allow the page to scroll vertically when the finger starts on the carousel. */
@media (max-width:899px) {
  .featured-carousel { touch-action: pan-x pan-y; }
}

@media (max-width:899px) {
  /* Netflix-style mobile carousel: native horizontal swipe + normal page scroll. */
  .featured-carousel {
    width:100%;
    padding:1rem 8% 1.25rem;
    gap:.75rem;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:8%;
    overscroll-behavior-x:contain;
    touch-action:pan-x pan-y;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    cursor:grab;
  }

  .featured-card,
  .featured-card.is-active {
    flex:0 0 84%;
    width:84%;
    min-width:0;
    opacity:1;
    transform:none;
    filter:none;
    scroll-snap-align:center;
    transition:none;
    border-radius:18px;
  }

  .featured-poster { aspect-ratio:16 / 9; }
  .featured-copy { padding:1rem; }
  .featured-copy h3 { font-size:1.08rem; }
  .carousel-controls { display:none; }
}


/* ---------- Share buttons ---------- */
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; }
.hero-actions .btn { margin:0; }
.card-actions { display:flex; align-items:center; gap:.6rem; }
.card-actions > .btn-block { flex:1; min-width:0; }
.btn-share-icon { flex:0 0 auto; width:46px; min-width:46px; height:46px; padding:.55rem; }
.featured-actions { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.featured-actions .btn-share-icon { width:42px; min-width:42px; height:42px; padding:.45rem; }
.detail-cta { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; }
.detail-cta small { flex-basis:100%; }
.share-button { white-space:nowrap; }
@media (max-width:420px) {
  .hero-actions { align-items:stretch; }
  .hero-actions .btn { flex:1 1 auto; }
}


/* Compact paper-plane share icon beside Explore Events */
.hero-actions { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; }
.hero-share-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; min-width:40px; padding:0;
  border:1px solid rgba(255,255,255,.72); border-radius:50%;
  color:#fff; background:rgba(255,255,255,.12);
  cursor:pointer; transition:background .18s ease, transform .18s ease;
}
.hero-share-icon:hover { background:rgba(255,255,255,.24); transform:scale(1.06); }
.hero-share-icon:focus-visible { outline:3px solid #fff; outline-offset:3px; }
@media (max-width:420px) {
  .hero-actions { align-items:center; flex-wrap:nowrap; }
  .hero-actions .btn-sun { flex:0 1 auto; min-width:0; white-space:nowrap; }
  .hero-share-icon { width:36px; height:36px; min-width:36px; }
}


/* Paper-plane share icon over event posters */
.card-poster-wrap, .featured-poster-wrap { position:relative; display:block; }
.card-poster-wrap .card-poster, .featured-poster-wrap .featured-poster { display:block; }
.poster-share-button {
  position:absolute; z-index:5; top:12px; right:12px;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; min-width:40px; padding:0;
  color:#fff; background:rgba(15,23,42,.76);
  border:1px solid rgba(255,255,255,.82); border-radius:50%;
  box-shadow:0 4px 14px rgba(0,0,0,.24);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  cursor:pointer; transition:transform .18s ease, background .18s ease;
}
.poster-share-button:hover { transform:scale(1.08); background:rgba(15,23,42,.94); }
.poster-share-button:focus-visible { outline:3px solid #fff; outline-offset:3px; }


/* Keep the paper-plane share icon on the same row as Register Now */
.detail-cta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.detail-cta > a { order:1; }
.detail-cta > .register-share-icon { order:2; }
.detail-cta > small { order:3; flex-basis:100%; }
.register-share-icon {
 display:inline-flex; align-items:center; justify-content:center;
 width:40px; height:40px; min-width:40px; padding:0;
 border:1px solid var(--border, rgba(100,116,139,.45)); border-radius:50%;
 color:inherit; background:transparent; cursor:pointer;
 transition:background .18s ease, transform .18s ease;
}
.register-share-icon:hover { background:rgba(100,116,139,.12); transform:scale(1.06); }
.register-share-icon:focus-visible { outline:2px solid currentColor; outline-offset:3px; }


/* Share icon overlay on the event detail poster itself */
.detail-poster-wrap { position:relative; display:block; }
.detail-poster-wrap > .poster-share-button {
  position:absolute; z-index:10; top:12px; right:12px;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; min-width:40px; padding:0;
  color:#fff; background:rgba(15,23,42,.78);
  border:1px solid rgba(255,255,255,.85); border-radius:50%;
  box-shadow:0 4px 14px rgba(0,0,0,.24);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
}
.detail-poster-wrap > .poster-share-button:hover { background:rgba(15,23,42,.95); }


/* Modern swipeable Hapn upcoming-events carousel */
.featured-heading-copy { min-width:0; }
.featured-subtitle { margin:.25rem 0 0; color:rgba(255,255,255,.78); font-size:.9rem; }
.featured-head .ticket-label { display:inline-block; }
.featured-carousel {
  display:flex;
  align-items:stretch;
  gap:1rem;
  width:100%;
  padding:1rem max(1rem, calc((100% - 360px) / 2)) 1.25rem;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scroll-padding-inline:1rem;
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.featured-carousel::-webkit-scrollbar { display:none; }
.featured-card {
  flex:0 0 min(360px, 82%);
  width:min(360px, 82%);
  min-width:0;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  border:1px solid rgba(255,255,255,.42);
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 18px 42px rgba(13,24,75,.16);
  transform:scale(.94);
  opacity:.78;
  transition:transform .28s ease, opacity .28s ease, box-shadow .28s ease;
}
.featured-card.is-active {
  transform:scale(1);
  opacity:1;
  box-shadow:0 22px 48px rgba(13,24,75,.24);
}
.featured-poster-wrap { position:relative; }
.featured-poster { display:block; aspect-ratio:16/9; overflow:hidden; background:var(--blue-soft); }
.featured-poster img { display:block; width:100%; height:100%; object-fit:cover; }
.featured-poster-badge {
  position:absolute; left:12px; top:12px; max-width:calc(100% - 76px);
  padding:.35rem .65rem; border-radius:999px; background:rgba(255,255,255,.94);
  color:var(--ink); font-size:.76rem; font-weight:800; box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.featured-copy { min-height:220px; padding:1rem 1.05rem 1.1rem; display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; }
.featured-copy h3 { margin:0; font-size:1.12rem; line-height:1.28; }
.featured-copy h3 a { color:var(--ink); text-decoration:none; }
.featured-copy h3 a:hover { color:var(--blue); }
.featured-date { color:var(--blue); font-size:.86rem; font-weight:800; }
.featured-copy .featured-venue { margin:0; color:var(--muted); font-size:.88rem; }
.featured-copy .featured-description {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
  margin:0; color:var(--muted); font-size:.9rem; line-height:1.5;
}
.featured-actions { margin-top:auto; padding-top:.35rem; width:100%; }
.featured-actions .btn { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:.65rem 1rem; }
.carousel-dots { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.45rem; padding:.15rem 1rem .4rem; }
.carousel-dot {
  width:7px; height:7px; padding:0; border:0; border-radius:999px;
  background:rgba(255,255,255,.45); cursor:pointer; transition:width .22s ease, background .22s ease;
}
.carousel-dot.is-active { width:22px; background:#fff; }
.carousel-dot:focus-visible, .carousel-controls button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.carousel-controls button:disabled { opacity:.45; cursor:not-allowed; }
@media (min-width:900px) {
  .featured-carousel { padding-left:calc((100% - 390px) / 2); padding-right:calc((100% - 390px) / 2); gap:1.2rem; }
  .featured-card { flex-basis:390px; width:390px; }
}
@media (max-width:899px) {
  .featured-carousel { padding:1rem 8% 1.15rem; gap:.8rem; }
  .featured-card { flex-basis:84%; width:84%; transform:none; opacity:1; }
  .featured-card.is-active { transform:none; }
  .carousel-controls { display:none; }
  .carousel-dot { width:6px; height:6px; }
  .carousel-dot.is-active { width:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .featured-carousel { scroll-behavior:auto; }
  .featured-card, .carousel-dot { transition:none; }
}


/* Streaming-app inspired portrait event rail (reference: user's JioHotstar video) */
#next-up .featured-head { margin-bottom:.25rem; }
#next-up .featured-carousel {
  align-items:stretch;
  gap:14px;
  padding:14px max(14px, calc((100% - 290px) / 2)) 20px;
}
#next-up .featured-card {
  flex:0 0 290px;
  width:290px;
  border-radius:16px;
  background:#fff;
  transform:scale(.94);
  opacity:.78;
}
#next-up .featured-card.is-active {
  transform:scale(1);
  opacity:1;
}
#next-up .featured-poster {
  aspect-ratio:2 / 3;
  background:#101426;
}
#next-up .featured-poster img {
  width:100%;
  height:100%;
  object-fit:cover;
}
#next-up .featured-poster-wrap::after {
  content:"";
  pointer-events:none;
  position:absolute;
  inset:35% 0 0;
  background:linear-gradient(180deg, transparent 0%, rgba(7,12,28,.12) 35%, rgba(7,12,28,.72) 100%);
}
#next-up .featured-poster-badge,
#next-up .featured-poster-wrap > .poster-share-button { z-index:2; }
#next-up .featured-copy {
  min-height:205px;
  padding:13px 14px 15px;
  gap:7px;
}
#next-up .featured-copy h3 { font-size:1.04rem; }
#next-up .featured-copy .featured-description { -webkit-line-clamp:2; }
#next-up .carousel-controls { display:flex; gap:8px; }
#next-up .carousel-controls button {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.42);
  color:inherit; background:rgba(255,255,255,.12);
  font-size:1.5rem; line-height:1; cursor:pointer;
}
#next-up .carousel-dot { background:rgba(100,116,139,.35); }
#next-up .carousel-dot.is-active { background:var(--blue, #3545ff); }
@media (min-width:900px) {
  #next-up .featured-carousel {
    padding-left:calc((100% - 310px) / 2);
    padding-right:calc((100% - 310px) / 2);
    gap:18px;
  }
  #next-up .featured-card { flex-basis:310px; width:310px; }
}
@media (max-width:899px) {
  #next-up .featured-carousel { padding:12px 7% 18px; gap:12px; }
  #next-up .featured-card { flex-basis:78%; width:78%; transform:none; opacity:1; }
  #next-up .featured-card.is-active { transform:none; }
  #next-up .featured-poster { aspect-ratio:2 / 3; }
  #next-up .carousel-controls { display:none; }
}
@media (max-width:380px) {
  #next-up .featured-card { flex-basis:84%; width:84%; }
}


/* Hapn streaming-style stacked event cards: one card on top of another */
#next-up .featured-carousel {
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  justify-items:center;
  gap:0;
  padding:18px 16px 22px;
  overflow:hidden;
  scroll-snap-type:none;
  touch-action:pan-y;
  cursor:grab;
  user-select:none;
}
#next-up .featured-carousel.is-dragging { cursor:grabbing; }
#next-up .featured-card {
  grid-area:1 / 1;
  width:min(100%, 340px);
  max-width:340px;
  min-height:0;
  transform:translateX(0) scale(1);
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:transform .34s ease, opacity .34s ease, visibility .34s;
  z-index:0;
}
#next-up .featured-card.is-active {
  transform:translateX(0) scale(1);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:3;
}
#next-up .featured-card.stack-next {
  transform:translateX(22px) translateY(8px) scale(.94);
  opacity:.6;
  visibility:visible;
  z-index:2;
  pointer-events:none;
}
#next-up .featured-card.stack-next-2 {
  transform:translateX(40px) translateY(15px) scale(.88);
  opacity:.3;
  visibility:visible;
  z-index:1;
  pointer-events:none;
}
#next-up .featured-card.stack-prev {
  transform:translateX(-22px) translateY(8px) scale(.94);
  opacity:.45;
  visibility:visible;
  z-index:1;
  pointer-events:none;
}
#next-up .featured-card.stack-prev-2 {
  transform:translateX(-40px) translateY(15px) scale(.88);
  opacity:.2;
  visibility:visible;
  z-index:0;
  pointer-events:none;
}
#next-up .featured-poster { aspect-ratio:2 / 3; }
#next-up .carousel-controls { display:flex; }
@media (max-width:899px) {
  #next-up .featured-carousel { padding:14px 18px 20px; touch-action:pan-y; }
  #next-up .featured-card { width:min(100%, 340px); }
  #next-up .carousel-controls { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  #next-up .featured-card { transition:none; }
}


/* Compact stacked event cards */
#next-up .featured-carousel { padding-top:10px; padding-bottom:14px; }
#next-up .featured-card { width:min(100%, 280px); max-width:280px; }
#next-up .featured-poster { aspect-ratio:3 / 4; }
#next-up .featured-copy { min-height:160px; padding:10px 12px 12px; gap:5px; }
#next-up .featured-copy h3 { font-size:.98rem; }
#next-up .featured-copy .featured-description { -webkit-line-clamp:2; font-size:.84rem; }
#next-up .featured-copy .featured-venue { font-size:.82rem; }
#next-up .featured-actions .btn { min-height:36px; padding:.5rem .85rem; }
@media (min-width:900px) {
  #next-up .featured-card { width:280px; max-width:280px; }
}
@media (max-width:899px) {
  #next-up .featured-carousel { padding:10px 22px 14px; }
  #next-up .featured-card { width:min(100%, 280px); max-width:280px; }
}


/* Poster-only 4:5 stacked carousel with one action underneath */
#next-up .featured-card {
  border:0;
  border-radius:16px;
  overflow:visible;
  background:transparent;
  box-shadow:none;
}
#next-up .featured-card.is-active { box-shadow:none; }
#next-up .featured-poster-wrap {
  aspect-ratio:4 / 5;
  overflow:hidden;
  border-radius:16px;
  background:#e8ebf5;
  box-shadow:0 14px 36px rgba(13,24,75,.2);
}
#next-up .featured-poster {
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:4 / 5;
  overflow:hidden;
}
#next-up .featured-poster img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
#next-up .featured-poster-wrap::after { display:none; }
#next-up .featured-poster-badge { display:none; }
#next-up .featured-actions {
  width:100%;
  margin-top:12px;
  padding:0;
  display:flex;
  justify-content:center;
}
#next-up .featured-actions .btn {
  display:flex;
  width:100%;
  min-height:42px;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-weight:700;
}
#next-up .featured-card .featured-actions { pointer-events:auto; }
#next-up .featured-card:not(.is-active) .featured-actions { visibility:hidden; }
#next-up .featured-card .poster-share-button { top:10px; right:10px; }
@media (max-width:899px) {
  #next-up .featured-card { width:min(100%, 260px); max-width:260px; }
  #next-up .featured-poster-wrap { border-radius:14px; }
}
@media (min-width:900px) {
  #next-up .featured-card { width:260px; max-width:260px; }
}


/* Hapn refreshed mint-and-forest-green mobile-first homepage */
:root {
  --ink:#101d19;
  --blue:#146b50;
  --blue-dark:#0c4938;
  --blue-soft:#dff3e8;
  --sun:#c9f36a;
  --paper:#edf5f0;
  --white:#fff;
  --muted:#56665f;
  --line:#d8e4dc;
  --green:#176d52;
  --green-soft:#e0f3e8;
  --font:Inter, "Avenir Next", Avenir, system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { background:#edf5f0; color:var(--ink); }
.site-header { background:#fff; border-bottom:0; }
.header-inner { height:76px; background:#fff; }
.brand { gap:.8rem; font-size:1.75rem; letter-spacing:-.055em; font-weight:900; }
.brand img {
  width:56px; height:56px; padding:12px; border-radius:17px;
  background:#101d19; filter:none;
}
/* Refined mobile menu control: high-contrast forest circle with a crisp
   three-line icon, a larger touch target, and clear keyboard focus. */
/* Minimal mobile menu: two clean dark strokes, no circle or button fill. */
.nav-toggle {
  position:relative;
  flex:0 0 44px;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:0;
  background:transparent;
  color:#101d19;
  font-size:0;
  line-height:1;
  box-shadow:none;
  transition:opacity .18s ease,transform .18s ease;
}
.nav-toggle::before,
.nav-toggle::after {
  content:"";
  position:absolute;
  right:5px;
  height:3px;
  border-radius:3px;
  background:#101d19;
  transition:width .18s ease,background-color .18s ease;
}
.nav-toggle::before { top:15px; width:25px; }
.nav-toggle::after { top:25px; width:17px; }
.nav-toggle:hover { background:transparent; box-shadow:none; opacity:.72; }
.nav-toggle:active { transform:scale(.96); }
.nav-toggle:focus-visible { outline:2px solid #176d52; outline-offset:1px; border-radius:6px; }
@media (prefers-reduced-motion:reduce) {
  .nav-toggle,.nav-toggle::before,.nav-toggle::after { transition:none; }
}
.hero { padding:32px 0 20px; background:#edf5f0; color:#101d19; }
.hero-inner { display:flex; flex-direction:column; align-items:stretch; gap:36px; }
.hero-intro { width:100%; }
.hero h1 {
  max-width:600px; font-size:clamp(2.7rem, 10vw, 4.4rem); line-height:.99;
  font-weight:900; letter-spacing:-.075em; margin:0 0 22px;
}
.hero h1 span {
  display:inline-block; padding:0 .14em .04em; border-radius:.2em;
  background:#c9f36a; color:#101d19;
}
.hero p { max-width:600px; font-size:clamp(1.08rem, 3.6vw, 1.35rem); line-height:1.5; color:#42534b; margin:0 0 30px; }
.hero-actions { gap:16px; align-items:center; }
.hero-actions .btn-sun {
  min-height:76px; padding:12px 12px 12px 34px; gap:24px; border-radius:999px;
  background:#101d19; color:#fff; font-size:1.12rem; font-weight:800;
}
.hero-actions .btn-sun::after {
  content:"↗"; display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; flex:0 0 54px; border-radius:50%;
  background:#c9f36a; color:#101d19; font-size:1.65rem;
}
.hero-actions .btn-sun:hover { background:#223a31; }
.hero-share-icon {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 78px;
  width:78px; height:78px; border:2px solid #101d19; border-radius:50%;
  color:#101d19; background:transparent;
}
.home-calendar {
  width:100%; padding:20px 18px 18px; border-radius:30px;
  background:#fff; color:#101d19;
}
.home-calendar-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.home-calendar-head h2 { margin:0; font-size:1.2rem; font-weight:850; letter-spacing:-.035em; }
.home-calendar-head button {
  border:0; padding:6px 2px; background:transparent; color:#176d52; font:inherit; font-size:.9rem; font-weight:700; cursor:pointer;
}
.calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.calendar-day {
  display:flex; min-width:0; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; min-height:88px; padding:8px 1px 7px; border:0; border-radius:20px;
  background:transparent; color:#26352e; cursor:pointer; font:inherit;
  transition:background .18s ease, transform .18s ease;
}
.calendar-day:active { transform:scale(.96); }
.calendar-weekday { font-size:.73rem; font-weight:600; }
.calendar-day strong { font-size:1.35rem; line-height:1.2; font-weight:850; }
.calendar-event-dot { width:7px; height:7px; border-radius:50%; background:#cbd8d0; }
.calendar-event-dot.has-events { background:#176d52; }
.calendar-day.is-selected { background:#c9f36a; color:#101d19; }
.calendar-day.is-selected .calendar-event-dot { background:#101d19; }
.featured-section { background:#edf5f0; padding:8px 0 12px; }
#next-up.ticket-ready {
  margin:0 auto; padding:0; background:transparent; border-radius:0; color:#101d19; box-shadow:none;
}
#next-up .featured-head { color:#101d19; padding:0 0 4px; }
#next-up .featured-heading-copy .ticket-label {
  display:block; font-size:clamp(1.55rem, 5vw, 2rem); color:#101d19;
  font-weight:900; letter-spacing:-.06em;
}
#next-up .featured-subtitle { display:none; }
#next-up .carousel-controls button { border-color:#b8c9bf; color:#101d19; background:#fff; }
#next-up .featured-carousel { padding:12px 18px 14px; }
#next-up .featured-card { width:min(100%, 260px); max-width:260px; }
#next-up .featured-poster-wrap { box-shadow:0 10px 24px rgba(16,29,25,.14); }
#next-up .featured-actions .btn { background:#101d19; color:#fff; border-radius:999px; }
#next-up .carousel-dot { background:#c4d2c9; }
#next-up .carousel-dot.is-active { background:#176d52; }
.section { padding:26px 0 48px; }
#events { scroll-margin-top:24px; }
.section-head h2 { color:#101d19; font-size:clamp(1.65rem, 5vw, 2rem); font-weight:900; letter-spacing:-.06em; }
.toolbar { gap:14px; }
.search input { min-height:52px; border:0; border-radius:999px; background:#fff; }
.chip { border-color:#aebeb4; background:transparent; color:#101d19; }
.chip[aria-pressed="true"] { background:#101d19; color:#fff; border-color:#101d19; }
.events-grid { gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.event-card { border:0; border-radius:20px; background:#fff; box-shadow:none; }
.card-poster { aspect-ratio:4 / 5; }
.card-poster img { object-fit:cover; }
.card-body { padding:12px; gap:7px; }
.card-title { font-size:.98rem; }
.card-desc { font-size:.82rem; line-height:1.4; }
.card-meta { font-size:.8rem; }
.event-card .card-actions .btn-primary,
.event-card .card-actions .btn { border-radius:999px; background:#101d19; color:#fff; border-color:#101d19; min-height:42px; font-size:.84rem; }
.site-footer { background:#101d19; }
@media (min-width:768px) {
  .header-inner { height:76px; }
  .brand img { width:58px; height:58px; }
  .hero { padding:46px 0 30px; }
  .hero-inner { max-width:720px; margin:0 auto; gap:34px; }
  .hero h1 { font-size:clamp(3.6rem, 7vw, 5rem); }
  .home-calendar { padding:24px 28px 22px; }
  .calendar-day { min-height:96px; }
  #next-up .featured-card { width:280px; max-width:280px; }
  .events-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
}
@media (max-width:380px) {
  .hero-actions .btn-sun { min-height:64px; padding-left:20px; gap:12px; font-size:1rem; }
  .hero-actions .btn-sun::after { width:44px; height:44px; flex-basis:44px; }
  .hero-share-icon { width:64px; height:64px; flex-basis:64px; }
  .calendar-day { min-height:78px; border-radius:16px; }
  .calendar-weekday { font-size:.65rem; }
  .calendar-day strong { font-size:1.15rem; }
}


/* Poster date + time treatment inspired by the supplied Hapn event-card reference */
.event-card .card-poster-wrap { position:relative; }
.event-card .card-poster {
  position:relative;
  display:block;
  aspect-ratio:4 / 5;
  overflow:hidden;
  background:#e4eee8;
}
.event-card .card-poster .poster-img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.event-card .card-poster .badge {
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  max-width:calc(100% - 66px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:5px 9px;
  border-radius:999px;
  background:#fff;
  color:#17231d;
  font-size:.68rem;
  font-weight:650;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.event-card .card-poster .badge-ended { top:40px; background:#101d19; color:#fff; }
.event-card .poster-share-button {
  position:absolute;
  top:9px;
  right:9px;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid rgba(255,255,255,.85);
  border-radius:50%;
  color:#fff;
  background:#101d19;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.event-card .poster-share-button svg { width:17px; height:17px; }
.event-card .poster-date-overlay {
  position:absolute;
  z-index:2;
  left:10px;
  bottom:10px;
  display:flex;
  align-items:baseline;
  gap:5px;
  max-width:calc(100% - 20px);
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.28);
  pointer-events:none;
}
.event-card .poster-date-overlay > strong {
  font-size:clamp(2rem, 6vw, 2.55rem);
  line-height:.9;
  font-weight:900;
  letter-spacing:-.06em;
}
.event-card .poster-date-side {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-bottom:2px;
  font-size:.66rem;
  font-weight:850;
  letter-spacing:.06em;
}
.event-card .poster-date-side small {
  max-width:150px;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:0;
  line-height:1.2;
  white-space:normal;
}
.event-card .card-body { background:#fff; }
@media (max-width:380px) {
  .event-card .poster-date-overlay > strong { font-size:2rem; }
  .event-card .poster-date-side small { font-size:.6rem; }
}


/* Match reference cards: title, date, time, venue and register button only */
.events-grid { align-items:stretch; }
.event-card { display:flex; flex-direction:column; overflow:hidden; }
.event-card .card-body { display:flex; flex:1; flex-direction:column; gap:6px; padding:11px 12px 12px; }
.event-card .card-title {
  margin:0 0 1px;
  font-size:.9rem;
  line-height:1.28;
  font-weight:750;
  letter-spacing:-.015em;
}
.event-card .meta {
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:0;
  padding:0;
  list-style:none;
  color:#4f5e56;
  font-size:.76rem;
  line-height:1.35;
}
.event-card .meta li { display:flex; align-items:flex-start; gap:5px; }
.event-card .meta li > span:first-child { flex:0 0 auto; }
.event-card .meta li > span:last-child { min-width:0; overflow-wrap:anywhere; }
.event-card .card-desc { display:none !important; }
.event-card .card-actions { margin-top:auto; padding-top:5px; }
.event-card .card-actions .btn { width:100%; justify-content:center; }
.event-card .poster-date-overlay { left:9px; bottom:9px; }
.event-card .poster-date-overlay > strong { font-size:2.15rem; }
.event-card .poster-date-side { font-size:.62rem; }
@media (max-width:767px) {
  .events-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .event-card { border-radius:19px; }
  .event-card .card-body { padding:10px 10px 11px; gap:5px; }
  .event-card .card-title { font-size:.84rem; }
  .event-card .meta { font-size:.7rem; gap:4px; }
  .event-card .card-actions .btn { min-height:40px; font-size:.76rem; }
}


/* High-contrast poster date/time: adaptive contrast panel on both grid and stack */
.event-card .poster-date-overlay,
#next-up .carousel-poster-date {
  left:9px;
  bottom:9px;
  max-width:calc(100% - 18px);
  padding:8px 10px;
  border-radius:12px;
  align-items:baseline;
  gap:6px;
  color:#fff;
  background:linear-gradient(110deg,rgba(8,20,15,.78),rgba(8,20,15,.36));
  text-shadow:0 1px 2px rgba(0,0,0,.24);
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.event-card .poster-date-overlay > strong,
#next-up .carousel-poster-date > strong {
  color:#fff;
  font-size:2.1rem;
  line-height:.9;
  font-weight:900;
  letter-spacing:-.06em;
}
.event-card .poster-date-side,
#next-up .carousel-poster-date .poster-date-side {
  color:#fff;
  gap:3px;
  font-size:.65rem;
  font-weight:850;
}
.event-card .poster-date-side small,
#next-up .carousel-poster-date .poster-date-side small {
  color:#fff;
  font-size:.66rem;
  font-weight:750;
  letter-spacing:0;
  line-height:1.15;
}
#next-up .featured-poster-wrap { position:relative; }
#next-up .carousel-poster-date {
  position:absolute;
  z-index:3;
  display:flex;
  pointer-events:none;
}
#next-up .featured-card:not(.is-active) .carousel-poster-date { opacity:.98; }
@media (max-width:380px) {
  .event-card .poster-date-overlay,
  #next-up .carousel-poster-date { padding:6px 8px; border-radius:10px; }
  .event-card .poster-date-overlay > strong,
  #next-up .carousel-poster-date > strong { font-size:1.9rem; }
}


/* Cleaner poster date: no floating dark pill; use a soft bottom fade instead */
.event-card .card-poster,
#next-up .featured-poster-wrap { position:relative; isolation:isolate; }
.event-card .card-poster::after,
#next-up .featured-poster-wrap::after {
  content:"";
  position:absolute;
  z-index:1;
  left:0; right:0; bottom:0;
  height:34%;
  background:linear-gradient(to top,rgba(8,20,15,.64),rgba(8,20,15,.18) 58%,transparent);
  pointer-events:none;
}
.event-card .poster-date-overlay,
#next-up .carousel-poster-date {
  left:10px;
  bottom:10px;
  max-width:calc(100% - 20px);
  padding:0;
  border-radius:0;
  gap:6px;
  align-items:baseline;
  color:#fff;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  text-shadow:0 1px 5px rgba(0,0,0,.5);
}
.event-card .poster-date-overlay { z-index:3; }
#next-up .carousel-poster-date { z-index:3; }
.event-card .poster-date-overlay > strong,
#next-up .carousel-poster-date > strong {
  color:#fff;
  font-size:clamp(2.15rem,7vw,2.65rem);
  line-height:.88;
  font-weight:950;
  letter-spacing:-.065em;
  text-shadow:0 2px 7px rgba(0,0,0,.38);
}
.event-card .poster-date-side,
#next-up .carousel-poster-date .poster-date-side {
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-bottom:2px;
  color:#fff;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.06em;
  text-shadow:0 1px 5px rgba(0,0,0,.55);
}
.event-card .poster-date-side small,
#next-up .carousel-poster-date .poster-date-side small {
  color:#fff;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:0;
  line-height:1.15;
  text-shadow:0 1px 5px rgba(0,0,0,.65);
}
@media (max-width:380px) {
  .event-card .poster-date-overlay,
  #next-up .carousel-poster-date { left:9px; bottom:9px; }
  .event-card .poster-date-overlay > strong,
  #next-up .carousel-poster-date > strong { font-size:1.9rem; }
}


/* Closed registration: muted mint pill instead of black */
.event-card .btn-disabled,
.event-card .card-actions .btn-disabled {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:40px;
  padding:9px 12px;
  border:0;
  border-radius:999px;
  background:#dfe9e3;
  color:#52635a;
  font-size:.76rem;
  font-weight:750;
  text-align:center;
  box-shadow:none;
  opacity:1;
}
.event-card .btn-disabled::before {
  content:"●";
  margin-right:7px;
  color:#84988c;
  font-size:.58rem;
}
.event-card .btn-disabled:hover { background:#dfe9e3; color:#52635a; }


/* Compact blue homepage hero; keep the Hapn header/logo untouched */
.hero { background:var(--blue) !important; color:#fff !important; }
.hero h1 { color:#fff !important; }
.hero p { color:#eef0ff !important; }
.hero h1 span { background:#c9f36a; color:#101d19; }
.hero-actions .btn-sun { background:#fff; color:var(--blue); }
.hero-actions .btn-sun::after { background:#c9f36a; color:#101d19; }
.hero-share-icon { border-color:#fff; color:#fff; background:transparent; }
@media (max-width:767px) {
  .hero { padding:16px 0 10px !important; }
  .hero-inner { gap:15px !important; }
  .hero h1 { font-size:clamp(2.05rem,7.8vw,2.65rem) !important; line-height:.98 !important; margin:0 0 8px !important; }
  .hero p { font-size:.9rem !important; line-height:1.35 !important; margin:0 0 13px !important; }
  .hero-actions { gap:10px !important; }
  .hero-actions .btn-sun { min-height:46px !important; padding:5px 10px 5px 14px !important; font-size:.84rem !important; }
  .hero-actions .btn-sun::after { width:32px !important; height:32px !important; flex-basis:32px !important; }
  .hero-share-icon { width:46px !important; height:46px !important; min-width:46px !important; flex-basis:46px !important; }
}


/* Event details page — organized to match Hapn mobile reference */
.detail { gap:1.25rem; }
.detail-poster { border:0; border-radius:26px; box-shadow:0 14px 32px rgba(12,30,22,.12); }
.detail-poster img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }
.detail-info h1 { margin:.8rem 0 .25rem; color:var(--ink); font-size:clamp(2rem,7vw,2.65rem); line-height:1.02; letter-spacing:-.045em; }
.detail-pills { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }
.detail-pills .pill { background:#c9f36a; color:#10231b; font-size:.78rem; padding:.45rem .8rem; }
.detail-subtitle { margin:.25rem 0 1.1rem; color:#43544b; }
.info-list { gap:0; padding:.35rem 1rem; margin:1.15rem 0 .8rem; border:0; border-radius:24px; background:#fff; }
.info-list > div { display:flex; align-items:center; gap:.85rem; padding:1rem 0; }
.info-list > div + div { border-top:1px solid #e1e9e4; }
.info-icon { display:flex; align-items:center; justify-content:center; flex:0 0 46px; width:46px; height:46px; border-radius:50%; background:#edf5f0; color:#187456; font-size:1.45rem; font-weight:700; }
.info-copy { min-width:0; }
.info-list dt { display:block; margin:0 0 .18rem; color:#64736b; font-size:.69rem; font-weight:700; letter-spacing:.09em; }
.info-list dd { margin:0; color:#14251e; font-size:.94rem; line-height:1.4; font-weight:700; overflow-wrap:anywhere; }
.detail-quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin:0 0 1.25rem; }
.detail-outline-btn { display:flex; align-items:center; justify-content:center; min-height:48px; padding:.65rem .75rem; border:1.5px solid #17251f; border-radius:999px; color:#17251f; font-size:.82rem; font-weight:700; text-align:center; }
.detail-outline-btn:hover { background:#e5eee8; }
.detail-text-title { margin:1.5rem 0 .5rem; color:#14251e; font-size:1.2rem; }
.detail-text { color:#3c4c44; font-size:.94rem; line-height:1.7; }
.detail-cta { gap:.65rem; }
.detail-cta .btn { min-height:52px; border-radius:999px; }
@media (max-width:767px) {
  .back-link { margin-bottom:1rem; }
  body[data-page="event"] .section { padding-top:1rem; padding-bottom:7rem; }
  body[data-page="event"] .detail { gap:1rem; }
  body[data-page="event"] .detail-poster img { aspect-ratio:4/5; object-fit:cover; }
  body[data-page="event"] .detail-info h1 { font-size:2.35rem; }
  body[data-page="event"] .detail-cta {
    position:fixed; z-index:60; left:0; right:0; bottom:0;
    display:flex; align-items:center; gap:.7rem;
    margin:0; padding:1rem max(16px, calc((100vw - 520px)/2)) calc(1rem + env(safe-area-inset-bottom));
    background:#fff; border-radius:28px 28px 0 0;
    box-shadow:0 -8px 28px rgba(13,31,23,.12);
  }
  body[data-page="event"] .detail-cta::before {
    content:"•  " attr(data-registration-label);
    position:absolute; top:.45rem; left:1.25rem;
    color:#187456; font-size:.75rem; font-weight:700;
  }
  body[data-page="event"] .detail-cta .btn { flex:1; min-width:0; margin-top:1rem; }
  body[data-page="event"] .detail-cta .register-share-icon { width:54px; height:54px; min-width:54px; flex:0 0 54px; border:1.5px solid #17251f; }
  body[data-page="event"] .detail-cta small { display:none; }
}
@media (min-width:900px) {
  .detail { grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:2rem; }
  .detail-poster { position:sticky; top:88px; }
}


/* Event detail polish: countdown, clear icons, and mobile-first sticky registration. */
.detail-pills { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.75rem; }
.pill-countdown { background:#e2f5ee; color:#116149; }
.detail-poster-wrap { position:relative; }
.detail-poster-wrap .poster-share-button { position:absolute; top:1rem; right:1rem; z-index:2; }
.detail-info .info-list { background:#fff; border:1px solid var(--line); border-radius:18px; padding:.35rem 1rem; box-shadow:var(--shadow-sm); }
.detail-info .info-list > div { display:flex; align-items:center; gap:.85rem; padding:.85rem 0; }
.detail-info .info-list > div + div { border-top:1px solid #edf0f6; }
.info-icon { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:50%; background:#eef0ff; color:var(--blue); font-size:1.15rem; }
.info-copy dt { font-size:.72rem; font-weight:800; letter-spacing:.08em; color:var(--muted); }
.info-copy dd { margin:0; font-weight:650; overflow-wrap:anywhere; }
.detail-quick-actions { display:grid; grid-template-columns:1fr; gap:.6rem; margin-top:1rem; }
@media(min-width:520px){ .detail-quick-actions { grid-template-columns:1fr 1fr; } }
.detail-outline-btn { display:flex; align-items:center; justify-content:center; min-height:48px; padding:.65rem .8rem; border:1.5px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); font-weight:700; text-align:center; }
.detail-outline-btn:hover { border-color:var(--blue); background:var(--blue-soft); text-decoration:none; }
.detail-text-title { margin:1.5rem 0 .5rem; font-size:1.2rem; }
.detail-text { color:var(--muted); line-height:1.75; }
.detail-cta { display:flex; align-items:center; gap:.65rem; margin-top:1.25rem; }
.detail-cta .btn { flex:1; }
.register-share-icon { display:grid; place-items:center; width:48px; height:48px; border:1.5px solid var(--line); border-radius:50%; background:#fff; color:var(--ink); cursor:pointer; }
@media(max-width:767px){ body[data-page="event"] .detail-poster img { aspect-ratio:4/5; object-fit:cover; } body[data-page="event"] .detail-cta { position:fixed; z-index:60; left:0; right:0; bottom:0; margin:0; padding:1.15rem 1rem calc(1rem + env(safe-area-inset-bottom)); background:#fff; border-radius:24px 24px 0 0; box-shadow:0 -8px 28px rgba(17,25,54,.12); } body[data-page="event"] .detail-cta::before { content:attr(data-registration-label); position:absolute; top:.35rem; left:1.25rem; color:#12805c; font-size:.72rem; font-weight:800; } body[data-page="event"] .detail-cta .btn { margin-top:.75rem; min-height:50px; } body[data-page="event"] .detail-cta .register-share-icon { width:50px; height:50px; flex:0 0 50px; } body[data-page="event"] .section { padding-bottom:7.5rem; } }


/* Final stacked-card carousel tuning: show a clear layered deck on desktop and mobile. */
#next-up .featured-carousel {
  position:relative;
  min-height:clamp(420px, 42vw, 560px);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  justify-items:center;
  gap:0;
  padding:24px 20px 34px;
  overflow:hidden;
  isolation:isolate;
}
#next-up .featured-card {
  grid-area:1 / 1;
  width:min(76%, 390px);
  max-width:390px;
  transform-origin:center center;
  border-radius:24px;
  box-shadow:0 24px 55px rgba(8,14,65,.22), inset 0 1px 0 rgba(255,255,255,.65);
}
#next-up .featured-card.is-active {
  transform:translateY(-3px) scale(1);
  z-index:5;
}
#next-up .featured-card.stack-next {
  transform:translateX(72px) translateY(10px) scale(.91);
  opacity:.76;
  z-index:4;
}
#next-up .featured-card.stack-prev {
  transform:translateX(-72px) translateY(10px) scale(.91);
  opacity:.68;
  z-index:3;
}
#next-up .featured-card.stack-next-2 {
  transform:translateX(126px) translateY(24px) scale(.82);
  opacity:.42;
  z-index:2;
}
#next-up .featured-card.stack-prev-2 {
  transform:translateX(-126px) translateY(24px) scale(.82);
  opacity:.36;
  z-index:1;
}
#next-up .featured-poster { aspect-ratio:4 / 3; }
#next-up .featured-copy { min-height:160px; padding:1rem 1.1rem 1.1rem; }
#next-up .featured-copy h3 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#next-up .featured-copy p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#next-up .carousel-controls { z-index:10; }
#next-up .carousel-controls button { box-shadow:0 8px 22px rgba(4,8,50,.2); }
@media (min-width:900px) {
  #next-up .featured-carousel { min-height:clamp(440px, 38vw, 570px); }
  #next-up .featured-card { width:min(72%, 390px); }
}
@media (max-width:899px) {
  #next-up .featured-carousel { min-height:450px; padding:20px 8px 28px; overflow:hidden; }
  #next-up .featured-card { width:min(76%, 320px); max-width:320px; }
  #next-up .featured-card.stack-next { transform:translateX(38px) translateY(9px) scale(.92); }
  #next-up .featured-card.stack-prev { transform:translateX(-38px) translateY(9px) scale(.92); }
  #next-up .featured-card.stack-next-2 { transform:translateX(66px) translateY(19px) scale(.84); }
  #next-up .featured-card.stack-prev-2 { transform:translateX(-66px) translateY(19px) scale(.84); }
  #next-up .featured-poster { aspect-ratio:3 / 4; }
  #next-up .featured-copy { min-height:145px; padding:.85rem; }
}
@media (max-width:420px) {
  #next-up .featured-carousel { min-height:420px; }
  #next-up .featured-card { width:min(80%, 290px); }
  #next-up .featured-card.stack-next { transform:translateX(26px) translateY(8px) scale(.91); }
  #next-up .featured-card.stack-prev { transform:translateX(-26px) translateY(8px) scale(.91); }
  #next-up .featured-card.stack-next-2 { transform:translateX(44px) translateY(16px) scale(.83); }
  #next-up .featured-card.stack-prev-2 { transform:translateX(-44px) translateY(16px) scale(.83); }
}


/* Event detail page design — consistent across all event URLs */
body[data-page="event"] {
  --detail-ink:#10201b;--detail-muted:#53635d;--detail-green:#176b50;--detail-mint:#c9f46a;
  background:#eef5f0;color:var(--detail-ink)
}
body[data-page="event"] .site-header{background:rgba(238,245,240,.96);border-bottom:1px solid rgba(16,32,27,.08)}
body[data-page="event"] .section{padding-top:1.25rem;padding-bottom:7rem}
body[data-page="event"] .back-link{color:var(--detail-green);margin-bottom:1rem}
body[data-page="event"] #event-detail{max-width:1050px;margin:0 auto}
body[data-page="event"] .detail{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem}
body[data-page="event"] .detail-poster{position:relative;border:0;border-radius:26px;overflow:hidden;background:#dce8df;box-shadow:0 18px 45px rgba(18,45,33,.13)}
body[data-page="event"] .detail-poster img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;max-height:780px}
body[data-page="event"] .detail-poster-wrap .poster-share-button{position:absolute;top:14px;right:14px;z-index:2;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;color:#fff;background:rgba(10,20,25,.72);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(12px);box-shadow:0 5px 18px rgba(0,0,0,.18)}
body[data-page="event"] .detail-info{min-width:0}
body[data-page="event"] .detail-pills{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.1rem 0 .8rem}
body[data-page="event"] .detail-pills .pill{padding:.45rem .85rem;border:0;background:var(--detail-mint);color:#14231b;font-size:.78rem;font-weight:800}
body[data-page="event"] .detail-pills .pill-countdown{background:transparent;color:var(--detail-muted);padding-left:.2rem}
body[data-page="event"] .detail-pills .pill-countdown::before{content:"";display:inline-block;width:8px;height:8px;margin-right:.45rem;border-radius:50%;background:var(--detail-green)}
body[data-page="event"] .detail-pills .pill-ended{background:#dfe6e1;color:#53635d}
body[data-page="event"] .detail-info h1{margin:.2rem 0 .35rem;font-size:clamp(2rem,6vw,3.35rem);line-height:1.04;letter-spacing:-.055em;font-weight:900;color:var(--detail-ink)}
body[data-page="event"] .detail-subtitle{margin:.3rem 0 1.25rem;color:#3e5048;font-size:1.02rem;line-height:1.55}
body[data-page="event"] .info-list{display:grid;gap:0;margin:1.25rem 0 1rem;padding:.3rem 1.1rem;border:0;border-radius:26px;background:#fff;box-shadow:0 8px 26px rgba(20,52,37,.045)}
body[data-page="event"] .info-list div{display:flex;align-items:center;gap:.85rem;padding:.95rem 0;border-bottom:1px solid #e3ebe5;min-width:0}
body[data-page="event"] .info-list div:last-child{border-bottom:0}
body[data-page="event"] .info-list .info-icon{flex:0 0 48px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#edf5ef;color:var(--detail-green);font-size:1.2rem;font-weight:800}
body[data-page="event"] .info-list .info-copy{display:block;min-width:0}
body[data-page="event"] .info-list dt{margin:0 0 .25rem;color:#66736c;font-size:.68rem;letter-spacing:.12em;font-weight:800}
body[data-page="event"] .info-list dd{margin:0;color:var(--detail-ink);font-size:.98rem;line-height:1.4;font-weight:750;overflow-wrap:anywhere}
body[data-page="event"] .detail-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1rem 0 2rem}
body[data-page="event"] .detail-outline-btn{display:flex;justify-content:center;align-items:center;gap:.35rem;min-height:52px;padding:.65rem .75rem;border:1.5px solid #1c2c25;border-radius:999px;background:transparent;color:var(--detail-ink);text-align:center;font-size:.85rem;font-weight:750;text-decoration:none;line-height:1.25}
body[data-page="event"] .detail-text-title{margin:1.8rem 0 .65rem;color:var(--detail-ink);font-size:1.35rem;letter-spacing:-.035em;font-weight:900}
body[data-page="event"] .detail-text{max-width:70ch;color:#405149;font-size:1rem;line-height:1.8;white-space:pre-line}
body[data-page="event"] .detail-organizers{margin:1rem 0 2rem}
body[data-page="event"] .detail-organizers>h2{margin-bottom:.7rem}
body[data-page="event"] .organizer-card{display:flex;align-items:center;gap:.8rem;max-width:320px;padding:.8rem 1rem;border-radius:20px;background:#fff}
body[data-page="event"] .organizer-avatar{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:#10201b;color:#c9f46a;font-size:1.2rem;font-weight:900}
body[data-page="event"] .organizer-copy{display:grid;gap:.2rem;min-width:0}
body[data-page="event"] .organizer-copy strong{font-size:.95rem;color:var(--detail-ink)}
body[data-page="event"] .organizer-copy small{font-size:.78rem;color:var(--detail-muted)}
body[data-page="event"] .detail-cta{position:fixed;z-index:70;left:0;right:0;bottom:0;display:flex;align-items:center;gap:.7rem;margin:0;padding:1.15rem max(1rem,calc((100vw - 1050px)/2)) calc(1rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid rgba(20,52,37,.08);box-shadow:0 -10px 32px rgba(20,52,37,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body[data-page="event"] .detail-cta::before{content:attr(data-registration-label);position:absolute;top:.35rem;left:max(1.25rem,calc((100vw - 1050px)/2));color:var(--detail-green);font-size:.7rem;font-weight:800}
body[data-page="event"] .detail-cta .btn{order:2;flex:1;display:flex;justify-content:center;align-items:center;min-height:56px;margin-top:.65rem;padding:0 1.25rem;border:0;border-radius:999px;background:#0e1e18;color:#fff;font-size:1rem;font-weight:850;text-decoration:none}
body[data-page="event"] .detail-cta .btn::after{content:"↗";display:grid;place-items:center;width:34px;height:34px;margin-left:auto;border-radius:50%;background:var(--detail-mint);color:#132119;font-size:1.25rem}
body[data-page="event"] .detail-cta .btn-disabled{opacity:.65}
body[data-page="event"] .detail-cta small{display:none}
body[data-page="event"] .detail-cta .register-share-icon{order:1;flex:0 0 56px;width:56px;height:56px;margin-top:.65rem;border:1.5px solid #15261e;border-radius:50%;background:#fff;color:#132119}
body[data-page="event"] .site-footer{padding-bottom:7rem}
@media(min-width:900px){
 body[data-page="event"] .section{padding-top:2rem}
 body[data-page="event"] #event-detail{max-width:1120px}
 body[data-page="event"] .detail{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:start;gap:2.5rem}
 body[data-page="event"] .detail-poster{position:sticky;top:90px}
 body[data-page="event"] .detail-poster img{aspect-ratio:3/4;max-height:calc(100vh - 130px)}
 body[data-page="event"] .detail-info{padding:.6rem 0 8rem}
 body[data-page="event"] .detail-info h1{font-size:clamp(2.5rem,4vw,4rem)}
 body[data-page="event"] .detail-cta{left:50%;right:auto;width:min(600px,calc(100% - 2rem));transform:translateX(-50%);border:1px solid #e4ebe5;border-bottom:0;border-radius:24px 24px 0 0;padding:1.1rem 1.25rem calc(.8rem + env(safe-area-inset-bottom))}
 body[data-page="event"] .detail-cta::before{left:1.5rem}
}
@media(max-width:380px){body[data-page="event"] .detail-quick-actions{grid-template-columns:1fr}body[data-page="event"] .info-list{padding-inline:.85rem}body[data-page="event"] .info-list .info-icon{flex-basis:42px;width:42px;height:42px}}


/* Performance and accessibility: avoid expensive motion for users who request less animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Desktop stacked-carousel correction: preserve complete poster artwork and balance the deck. */
#next-up .featured-carousel {
  min-height:clamp(500px, 43vw, 620px);
  padding:28px 12px 38px;
}
#next-up .featured-card {
  width:min(64%, 340px);
  max-width:340px;
}
#next-up .featured-poster-wrap {
  aspect-ratio:4 / 5;
  background:#e8f1eb;
}
#next-up .featured-poster {
  aspect-ratio:4 / 5;
  background:#e8f1eb;
}
#next-up .featured-poster img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
#next-up .featured-card.stack-next {
  transform:translateX(88px) translateY(12px) scale(.91);
}
#next-up .featured-card.stack-prev {
  transform:translateX(-88px) translateY(12px) scale(.91);
}
#next-up .featured-card.stack-next-2 {
  transform:translateX(148px) translateY(25px) scale(.82);
}
#next-up .featured-card.stack-prev-2 {
  transform:translateX(-148px) translateY(25px) scale(.82);
}
@media (min-width:1200px) {
  #next-up .featured-card { width:min(58%, 330px); max-width:330px; }
  #next-up .featured-card.stack-next { transform:translateX(96px) translateY(12px) scale(.91); }
  #next-up .featured-card.stack-prev { transform:translateX(-96px) translateY(12px) scale(.91); }
  #next-up .featured-card.stack-next-2 { transform:translateX(162px) translateY(25px) scale(.82); }
  #next-up .featured-card.stack-prev-2 { transform:translateX(-162px) translateY(25px) scale(.82); }
}
@media (max-width:899px) {
  #next-up .featured-carousel { min-height:450px; padding:20px 8px 28px; }
  #next-up .featured-card { width:min(76%, 320px); max-width:320px; }
  #next-up .featured-poster-wrap, #next-up .featured-poster { aspect-ratio:4 / 5; }
  #next-up .featured-card.stack-next { transform:translateX(38px) translateY(9px) scale(.92); }
  #next-up .featured-card.stack-prev { transform:translateX(-38px) translateY(9px) scale(.92); }
  #next-up .featured-card.stack-next-2 { transform:translateX(66px) translateY(19px) scale(.84); }
  #next-up .featured-card.stack-prev-2 { transform:translateX(-66px) translateY(19px) scale(.84); }
}


/* Desktop layout balance: give the featured event deck more visual weight. */
@media (min-width: 900px) {
  .featured-section {
    padding: 1.25rem 0 2.25rem;
  }
  #next-up {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
  }
  #next-up .featured-head {
    max-width: 1180px;
    margin-inline: auto;
    margin-bottom: .5rem;
  }
  #next-up .featured-carousel {
    min-height: 600px;
    padding: 22px 0 36px;
    gap: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  #next-up .featured-card {
    flex: 0 0 430px;
    width: 430px;
    max-width: 430px;
  }
  #next-up .featured-card.is-active {
    transform: scale(1.04);
  }
  #next-up .featured-card.stack-next {
    transform: translateX(118px) translateY(14px) scale(.88);
  }
  #next-up .featured-card.stack-prev {
    transform: translateX(-118px) translateY(14px) scale(.88);
  }
  #next-up .featured-card.stack-next-2 {
    transform: translateX(220px) translateY(30px) scale(.76);
  }
  #next-up .featured-card.stack-prev-2 {
    transform: translateX(-220px) translateY(30px) scale(.76);
  }
  #next-up .featured-poster {
    aspect-ratio: 3 / 4;
  }
  #next-up .featured-poster img {
    object-fit: contain;
    background: #edf5f0;
  }
  #next-up .featured-copy {
    min-height: 125px;
  }
}
@media (min-width: 1400px) {
  #next-up .featured-card {
    flex-basis: 460px;
    width: 460px;
    max-width: 460px;
  }
  #next-up .featured-card.stack-next {
    transform: translateX(132px) translateY(14px) scale(.88);
  }
  #next-up .featured-card.stack-prev {
    transform: translateX(-132px) translateY(14px) scale(.88);
  }
  #next-up .featured-card.stack-next-2 {
    transform: translateX(245px) translateY(30px) scale(.76);
  }
  #next-up .featured-card.stack-prev-2 {
    transform: translateX(-245px) translateY(30px) scale(.76);
  }
}


/* Homepage desktop hero: use the wide screen instead of leaving a large empty column. */
@media (min-width: 900px) {
  body[data-page="home"] .hero {
    padding: clamp(42px, 4vw, 64px) 0 clamp(32px, 3vw, 48px);
  }
  body[data-page="home"] .hero-inner {
    width: min(100% - 48px, 1180px);
    max-width: 1180px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, .94fr);
    align-items: center;
    gap: clamp(36px, 5vw, 82px);
  }
  body[data-page="home"] .hero-intro {
    max-width: 610px;
    min-width: 0;
  }
  body[data-page="home"] .hero h1 {
    max-width: 620px;
    font-size: clamp(3.6rem, 5.4vw, 5.2rem);
    line-height: .99;
    letter-spacing: -.055em;
  }
  body[data-page="home"] .hero p {
    max-width: 560px;
    font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  }
  body[data-page="home"] .home-calendar {
    width: 100%;
    max-width: 560px;
    margin: 0;
    align-self: center;
    box-shadow: 0 24px 60px rgba(4, 34, 25, .13);
  }
  body[data-page="home"] .calendar-days {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  body[data-page="home"] .calendar-day {
    min-width: 0;
  }
}
@media (min-width: 1400px) {
  body[data-page="home"] .hero-inner {
    grid-template-columns: minmax(0, 1.04fr) minmax(440px, .96fr);
  }
}


/* Homepage calendar actions: keep the main CTA and share link side by side. */
body[data-page="home"] .calendar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
body[data-page="home"] .calendar-all-events,
body[data-page="home"] .calendar-share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 999px;
  padding: 0 16px;
  font: inherit;
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
body[data-page="home"] .calendar-all-events {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 7px 18px rgba(47,69,255,.22);
}
body[data-page="home"] .calendar-share-link {
  color: var(--blue);
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(47,69,255,.2);
}
body[data-page="home"] .calendar-all-events:hover,
body[data-page="home"] .calendar-share-link:hover {
  transform: translateY(-1px);
}
body[data-page="home"] .calendar-all-events:focus-visible,
body[data-page="home"] .calendar-share-link:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
}
@media (max-width: 380px) {
  body[data-page="home"] .calendar-actions { gap: 8px; }
  body[data-page="home"] .calendar-all-events,
  body[data-page="home"] .calendar-share-link { padding: 0 12px; font-size: .82rem; }
}


/* Homepage hero CTA: a wide event button with a distinct adjacent share action. */
body[data-page="home"] .hero-actions {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin-top: 22px;
}
body[data-page="home"] .hero-view-events {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--sun);
  color: #111936;
  text-decoration: none;
  font-weight: 850;
  font-size: 1rem;
  box-shadow: 0 8px 22px rgba(17,25,54,.14);
  transition: transform .18s ease, box-shadow .18s ease;
}
body[data-page="home"] .hero-view-events span:first-of-type { white-space: nowrap; }
body[data-page="home"] .hero-cta-arrow { font-size: 1.1rem; }
body[data-page="home"] .hero-view-events:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(17,25,54,.18); }
body[data-page="home"] .hero-share-icon {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  color: #fff;
  background: transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
body[data-page="home"] .hero-share-icon:hover { transform: translateY(-2px); background: rgba(255,255,255,.14); }
body[data-page="home"] .hero-action-hint {
  margin-top: 9px;
  font-size: .78rem !important;
  line-height: 1.4;
  color: rgba(255,255,255,.82);
}
body[data-page="home"] .hero-view-events:focus-visible,
body[data-page="home"] .hero-share-icon:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }
@media (max-width: 420px) {
  body[data-page="home"] .hero-actions { gap: 9px; }
  body[data-page="home"] .hero-view-events { min-height: 50px; padding: 8px 12px; gap: 7px; font-size: .88rem; }
  body[data-page="home"] .hero-share-icon { flex-basis: 50px; width: 50px; height: 50px; }
}


/* Event detail poster: show the entire uploaded image without cropping. */
body[data-page="event"] .detail-poster {
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-page="event"] .detail-poster img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  max-height: min(78vh, 900px);
  object-fit: contain;
  object-position: center;
}
@media (min-width: 900px) {
  body[data-page="event"] .detail-poster img {
    max-height: calc(100vh - 130px);
    aspect-ratio: auto;
  }
}
@media (max-width: 899px) {
  body[data-page="event"] .detail-poster img {
    max-height: 78vh;
  }
}


/* Responsive event detail poster sizing: compact on desktop and mobile. */
body[data-page="event"] #event-detail {
  max-width: 1000px;
}
body[data-page="event"] .detail {
  grid-template-columns: minmax(0, .88fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
}
body[data-page="event"] .detail-poster {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  border-radius: 20px;
}
body[data-page="event"] .detail-poster img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(68vh, 680px);
  object-fit: contain;
  object-position: center;
}
@media (min-width: 900px) {
  body[data-page="event"] #event-detail { max-width: 1000px; }
  body[data-page="event"] .detail { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
  body[data-page="event"] .detail-poster { position: sticky; top: 90px; max-width: 420px; }
  body[data-page="event"] .detail-poster img { max-height: min(72vh, 700px); }
}
@media (max-width: 899px) {
  body[data-page="event"] .detail { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  body[data-page="event"] .detail-poster { max-width: min(100%, 430px); border-radius: 18px; }
  body[data-page="event"] .detail-poster img { max-height: 62vh; }
}
@media (max-width: 480px) {
  body[data-page="event"] .detail-poster { max-width: min(100%, 360px); border-radius: 16px; }
  body[data-page="event"] .detail-poster img { max-height: 54vh; }
}


/* ---------- Refined spacing, typography and hero polish ---------- */
:root {
  --container: 1180px;
  --font: "DM Sans", "Segoe UI", Roboto, Arial, sans-serif;
}
.container { padding-left: clamp(1rem, 3vw, 2rem); padding-right: clamp(1rem, 3vw, 2rem); }
body { font-weight: 400; letter-spacing: -0.005em; }
h1, h2, h3 { font-weight: 650; letter-spacing: -0.035em; }
.brand { font-weight: 700; }
.nav a { font-weight: 500; }
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 88% 8%, rgba(123, 139, 255, .48), transparent 35%),
              linear-gradient(125deg, #2638e8 0%, #354bff 52%, #5365ff 100%);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.hero::before {
  content: "";
  position: absolute;
  width: clamp(220px, 32vw, 430px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  right: -9rem;
  top: -11rem;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  width: clamp(150px, 22vw, 300px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  right: -3rem;
  top: -5rem;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; gap: clamp(1.75rem, 4vw, 3.5rem); }
.hero-intro { max-width: 39rem; }
.hero h1 {
  max-width: 10.5ch;
  font-size: clamp(2.35rem, 5.4vw, 4.15rem);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
  margin-bottom: 1.1rem;
}
.hero h1 span { display: inline-block; color: #111936; background: #d7ff68; padding: .02em .12em .06em; border-radius: .18em; }
.hero p {
  max-width: 33rem;
  color: rgba(255,255,255,.86);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 0;
}
.home-calendar {
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.97);
  box-shadow: 0 24px 55px -28px rgba(8, 16, 90, .55);
  border-radius: 22px;
  padding: clamp(1rem, 2.2vw, 1.5rem);
}
.home-calendar-head h2 { font-size: 1.15rem; font-weight: 650; }
.calendar-days { gap: .4rem; }
.calendar-day { border-radius: 13px; min-width: 0; padding: .6rem .25rem; }
.calendar-day strong { font-weight: 650; }
.calendar-actions { margin-top: .85rem; }
.calendar-all-events { font-weight: 600; }
.section { padding-top: clamp(2.25rem, 4vw, 3.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { font-weight: 650; }
.event-card { border-radius: 18px; }
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(390px, .9fr); }
}
@media (max-width: 899px) {
  .hero { padding: 2.6rem 0 2.8rem; }
  .hero h1 { max-width: 12ch; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Mobile scroll seam fix: keep the sticky header and dropdown on a solid,
   pixel-aligned layer so scrolling cannot reveal a hairline gap. */
@media (max-width: 767px) {
  html { overflow-x: clip; }
  body { overflow-x: clip; }
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    isolation: isolate;
    transform: translateZ(0);
    background: #fff;
    border-bottom: 1px solid var(--line);
  }
  .header-inner { background: #fff; }
  .nav {
    top: 100%;
    margin-top: 0;
    transform: none;
    background: #fff;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 20px -14px rgba(17, 25, 54, .3);
    backface-visibility: hidden;
  }
  .nav.open { transform: none; }
  .nav-toggle:active { transform: none; }
}


/* Submit an Event navigation CTA */
.nav a.nav-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .58rem 1rem;
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.nav a.nav-submit:hover { background: #ffbb0d; text-decoration: none; }
@media (max-width: 767px) {
  .nav a.nav-submit { align-self: flex-start; margin-top: .25rem; }
}


/* ---------- PageSpeed: reserve space to prevent mobile layout shifts ---------- */
/* The calendar is populated asynchronously after the events request. Keep its
   day row stable so the hero does not change height when the buttons appear. */
.calendar-days {
  min-height: 4.75rem;
}

/* The featured carousel is inserted after Supabase returns event data. Reserve
   a modest slot for it on phones so the page below does not jump on first load. */
@media (max-width: 899px) {
  .featured-section {
    min-height: 18rem;
  }
}

/* Do not promote every event card to its own compositor layer; this avoids
   unnecessary memory use on lower-end mobile devices. */
.event-card {
  will-change: auto;
}

/* Keep image geometry predictable while posters download. */
.card-poster,
.featured-poster {
  contain: layout paint;
}
.card-poster img,
.featured-poster img {
  display: block;
  width: 100%;
  height: 100%;}


/* Accessibility and mobile reliability improvements (2026-10). */
html { scroll-padding-top: 5rem; }
button, input, select, textarea, a { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; }
button, .btn, .chip, .calendar-all-events, .nav-toggle {
  touch-action: manipulation;
}
@media (max-width: 767px) {
  .container { min-width: 0; }
  .site-header { padding-top: env(safe-area-inset-top, 0px); }
  .nav a, .footer-links a { min-height: 44px; display: flex; align-items: center; }
  .nav-toggle { min-width: 44px; min-height: 44px; }
  input, select, textarea { max-width: 100%; }
  .events-grid, .event-card, .toolbar, .search, .chips { min-width: 0; }
  .search input { min-height: 44px; }
  .chip { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* Mobile-first performance: reserve space for asynchronous event content. */
.featured-section {
  min-height: 18rem;
}
#next-up {
  min-height: 1px;
}
.events-grid .skeleton {
  min-height: 18rem;
}
@media (max-width: 767px) {
  /* Avoid delayed, staggered motion on low-power phones; keep the same layout. */
  .event-card.reveal {
    animation: none;
    animation-delay: 0ms;
  }
  #next-up.ticket-ready {
    animation: none;
  }
}


/* ---------- Instagram-style college fest carousel ---------- */
.fest-carousel { min-width:0; }
.fest-carousel-track { display:grid; grid-auto-columns:minmax(230px, 78%); grid-auto-flow:column; gap:1rem; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding:.25rem .1rem 1rem; scrollbar-width:thin; }
.fest-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow-sm); scroll-snap-align:start; }
.fest-card-cover { display:block; position:relative; aspect-ratio:4/5; overflow:hidden; background:#e9ecff; }
.fest-card-cover img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.fest-card-cover:hover img { transform:scale(1.025); }
.fest-photo-count { position:absolute; right:.75rem; top:.75rem; padding:.25rem .6rem; border-radius:999px; background:rgba(17,25,54,.82); color:#fff; font-size:.78rem; font-weight:700; }
.fest-card-body { padding:1rem; }
.fest-card-body h3,.fest-card-body h2 { margin:.2rem 0 .45rem; font-size:1.1rem; }
.fest-card-body h2 a,.fest-card-body h3 a { color:var(--ink); }
.fest-college { color:var(--blue); font-weight:750; font-size:.84rem; margin:0 0 .3rem; }
.fest-date { color:var(--muted); font-size:.9rem; margin:.3rem 0 .9rem; }
.fest-empty { border:1px dashed var(--line); border-radius:16px; padding:1.5rem; background:#fff; color:var(--muted); }
.fest-empty strong { display:block; color:var(--ink); margin-bottom:.3rem; }
.fest-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:1.2rem; }
.fest-detail-head { padding:1.5rem 0; max-width:760px; }
.fest-detail-head h1 { font-size:clamp(2rem,5vw,3rem); margin:.3rem 0 .7rem; }
.fest-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.fest-gallery figure { margin:0; min-width:0; border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--line); }
.fest-gallery figure:first-child { grid-column:1/-1; }
.fest-gallery img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.fest-gallery figcaption { padding:.4rem .6rem; color:var(--muted); font-size:.78rem; }
.fest-events-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:1rem; margin-top:1rem; }
.fest-event { background:#fff; border:1px solid var(--line); border-radius:14px; padding:1rem; }
.fest-event h3 { font-size:1.05rem; }
.fest-event h3 a { color:var(--ink); }
.fest-event p { color:var(--muted); font-size:.9rem; margin:.35rem 0; }
@media (min-width:600px) { .fest-carousel-track { grid-auto-columns:minmax(230px, 32%); } .fest-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); } .fest-gallery figure:first-child { grid-column:span 2; grid-row:span 2; } }
.activity-editor { display:grid; gap:1rem; margin:.75rem 0 1rem; }
.activity-row { min-width:0; border:1px solid var(--line); border-radius:14px; padding:1rem; background:#fafbff; }
.activity-row legend { padding:0 .4rem; font-weight:800; }
.activity-fields { display:grid; gap:0 .8rem; }
.activity-fields .field { margin-bottom:.8rem; }
.activity-fields input,.activity-fields textarea { min-width:0; }
.optional-event-links { border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem; background:#fff; }
.optional-event-links summary { cursor:pointer; font-weight:700; }
.optional-event-links > p { margin-top:.75rem; }
.activity-card-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.55rem; }
.activity-number { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:10px; background:var(--blue-soft); color:var(--blue); font-weight:800; font-size:.85rem; }
.activity-category { display:inline-block; border-radius:999px; padding:.15rem .6rem; background:var(--blue-soft); color:var(--blue); font-size:.78rem; font-weight:700; }
.activity-description { white-space:pre-line; }
@media (min-width:720px) { .activity-fields { grid-template-columns:1fr 1fr; } .activity-fields .field.full { grid-column:1/-1; } }
@media (prefers-reduced-motion:reduce) { .fest-card-cover img { transition:none; } }

/* Fest activity poster and admin activity manager */
.activity-poster { display:block; width:100%; height:auto; max-height:520px; aspect-ratio:auto; object-fit:contain; object-position:center; border-radius:10px; margin:0 auto .8rem; background:#f2f3f8; }
.fest-action-row { display:flex; flex-wrap:wrap; gap:.65rem; margin:0 0 1.5rem; }
.fest-action-row .btn { min-height:44px; }
.fest-event { min-width:0; }
.fest-event .activity-poster { max-width:100%; }
.activity-manager-card { margin-top:1rem; padding:clamp(1rem,3vw,1.5rem); }
.activity-manager-card h2 { margin-top:0; }
.activity-manager-list { display:grid; gap:1rem; }
.activity-manager-item { display:grid; grid-template-columns:minmax(100px,180px) minmax(0,1fr); gap:1rem; padding:1rem; border:1px solid var(--line); border-radius:14px; background:#fff; }
.activity-manager-poster { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; background:#eef0f8; }
.activity-manager-no-poster { display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.85rem; }
.activity-manager-copy { min-width:0; }
.activity-manager-copy h3 { margin:.2rem 0 .4rem; }
.activity-manager-copy p { overflow-wrap:anywhere; }
.activity-poster-preview { display:block; width:min(100%,360px); max-height:240px; object-fit:contain; margin-top:.75rem; border-radius:10px; background:#f2f3f8; }
@media(max-width:560px) { .activity-manager-item { grid-template-columns:1fr; } .activity-manager-poster { max-height:230px; aspect-ratio:16/9; } }

/* The compact two-line menu is mobile-only; desktop uses the full navigation. */
@media (min-width: 768px) {
  .site-header .nav-toggle { display: none !important; }
}