/* Definer Hi-Life memories: shared look for the hub, the event pages and admin */
:root{
  --night:#050807; --night-2:#0B110F; --paper:#EDEFEA; --muted:#A9B1AA; --saffron:#F2B544; --window:#FFD58A;
  --line:rgba(237,239,234,.10);
  --display:'Unbounded',system-ui,sans-serif; --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --pad:clamp(16px,5vw,72px); --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--paper);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--saffron);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top bar */
.top{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 16px) var(--pad) 16px;transition:background .3s,border-color .3s;border-bottom:1px solid transparent;
  background:linear-gradient(180deg,rgba(5,8,7,.75),rgba(5,8,7,0))}
.top.solid{background:rgba(5,8,7,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;min-width:0}
.wordmark{font:700 19px var(--display);letter-spacing:-.02em;white-space:nowrap}
.wordmark span{color:var(--saffron)}
.brand small{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--saffron);border-radius:999px;color:var(--saffron);font:500 14px var(--mono);text-decoration:none;background:rgba(5,8,7,.45);transition:background .2s,color .2s,border-color .2s;white-space:nowrap;cursor:pointer}
.pill:hover,.pill:focus-visible{background:var(--saffron);color:var(--night)}
.pill.solid{background:var(--saffron);color:var(--night)}
.pill.solid:hover,.pill.solid:focus-visible{background:var(--paper);border-color:var(--paper)}

/* buttons tinted by the festival colour (--c) */
.act{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c,var(--saffron)) 60%,transparent);font:500 14px var(--mono);text-decoration:none;color:var(--paper);background:transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.act:hover,.act:focus-visible{background:var(--c,var(--saffron));color:var(--night)}
.act.up,.act.fill{background:var(--c,var(--saffron));border-color:var(--c,var(--saffron));color:var(--night)}
.act.up:hover,.act.up:focus-visible,.act.fill:hover,.act.fill:focus-visible{background:var(--paper);border-color:var(--paper)}
.act.ghost{border-style:dashed}

/* loading + error */
.skel{border-radius:12px;background:linear-gradient(90deg,#0d1311,#141c19,#0d1311);background-size:200% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.err{padding:24px;border-radius:16px;border:1px solid rgba(226,85,123,.5);color:#F3C2CF}
.err a{color:var(--saffron)}

/* lightbox (photos, videos and reels) */
.lb{position:fixed;inset:0;z-index:60;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:rgba(3,5,4,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lb[hidden]{display:none}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px}
.lb-cap{min-width:0;font:500 13px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-cap b{color:var(--paper);font-weight:500}
.lb-x,.lb-nav{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(237,239,234,.25);background:rgba(5,8,7,.6);cursor:pointer;transition:background .2s,color .2s}
.lb-x:hover,.lb-nav:hover,.lb-x:focus-visible,.lb-nav:focus-visible{background:var(--paper);color:var(--night)}
.lb-stage{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;padding:0 76px}
#lbMedia{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;width:100%;height:100%;min-height:0}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-stage iframe.wide{width:min(100%,1100px);aspect-ratio:16/9;max-height:100%;border:0;border-radius:10px;background:#000}
.lb-stage iframe.tall{height:100%;max-height:820px;aspect-ratio:9/16;max-width:100%;border:0;border-radius:12px;background:#fff}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%)}
.lb-prev{left:14px}.lb-next{right:14px}
.lb-foot{display:flex;justify-content:center;padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 16px)}
@media (max-width:760px){
  .brand small{display:none}
  .pill{padding:0 14px}
  .lb-stage{padding:0 8px}
  .lb-foot{justify-content:space-between;align-items:center;gap:8px}
  .lb-nav{position:static;transform:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.skel{animation:none}}

/* WhatsApp share */
.wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid #25D366;background:#25D366;color:#06210F;font:600 14px var(--body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.wa:hover,.wa:focus-visible{background:#3BE077;border-color:#3BE077}
.wa svg{flex:none}
.wa.ico{width:44px;padding:0}
.copy{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(237,239,234,.3);background:rgba(5,8,7,.45);color:var(--paper);font:500 13px var(--mono);cursor:pointer;transition:background .2s,color .2s}
.copy:hover,.copy:focus-visible{background:var(--paper);color:var(--night)}
.topacts{display:flex;align-items:center;gap:8px}
@media (prefers-reduced-motion:reduce){.wa,.copy{transition:none}}