/* Shared by the landing page, the passcode page and the gallery. */
:root{color-scheme:dark;
  --bg:#0b0c0e;--surface:#15171b;--fg:#f2f3f5;--mute:#9aa1ac;--line:rgba(255,255,255,.09);--card:#181b20;
  --acc:#ff6b5e;--accfg:#1a0705;--err:#ff8a80;--glass:rgba(12,13,15,.72);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -12px rgba(0,0,0,.6);
  --ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.center{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px;padding-bottom:max(24px,env(safe-area-inset-bottom));
  background:radial-gradient(900px 520px at 50% -12%,color-mix(in srgb,var(--acc) 17%,transparent),transparent 70%),var(--bg)}

.panel{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:38px 28px 30px;text-align:center;animation:rise .6s var(--ease) both}
.logo{width:190px;max-width:68%;height:auto;margin:0 auto 26px;display:block}
h1{font-size:1.4rem;line-height:1.25;letter-spacing:-.015em;font-weight:700;margin:0 0 6px}
p{margin:0 0 22px;color:var(--mute)}
label{display:block;text-align:left;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin:0 0 8px}

input{width:100%;height:54px;font:inherit;font-size:1.1rem;padding:0 16px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--bg) 60%,var(--surface));color:var(--fg);box-shadow:0 1px 2px rgba(16,24,40,.05) inset;transition:border-color .2s,box-shadow .2s}
input::placeholder{color:var(--mute);opacity:.8}
input:focus-visible{outline:0;border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent)}
button:focus-visible,a:focus-visible{outline:3px solid var(--acc);outline-offset:3px}

.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:54px;margin-top:14px;border:0;border-radius:14px;color:var(--accfg);font:inherit;font-weight:700;letter-spacing:.005em;cursor:pointer;text-decoration:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 90%,#fff),var(--acc));
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 10px 24px -8px color-mix(in srgb,var(--acc) 60%,transparent);transition:transform .15s var(--ease),filter .2s,box-shadow .2s}
.primary:hover{filter:brightness(1.06)}
.primary:active{transform:translateY(1px) scale(.995)}
.err{margin:16px 0 0;color:var(--err);font-size:.92rem;min-height:1.4em}

ul.events{list-style:none;margin:0;padding:0;text-align:left}
ul.events a{display:block;padding:8px;margin-top:10px;border:1px solid var(--line);border-radius:20px;color:var(--fg);text-decoration:none;font-weight:600;overflow:hidden;background:var(--surface);transition:border-color .25s,transform .35s var(--ease),box-shadow .35s}
ul.events a:hover{border-color:color-mix(in srgb,var(--acc) 55%,var(--line));transform:translateY(-3px);box-shadow:var(--shadow)}
.covers{display:grid;grid-template-columns:1fr 1fr;gap:4px;border-radius:14px;overflow:hidden}
.covers img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--card);transition:transform .7s var(--ease)}
ul.events a:hover .covers img{transform:scale(1.06)}
.ename{display:block;padding:14px 6px 2px;font-size:1.08rem;letter-spacing:-.01em}
.cta{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 2px;height:50px;border-radius:14px;color:var(--accfg);font-weight:700;
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 90%,#fff),var(--acc));box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 10px 24px -10px color-mix(in srgb,var(--acc) 60%,transparent)}
ul.events a:hover .cta span{transform:translateX(3px)}
.cta span{display:inline-block;transition:transform .25s var(--ease)}

@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}