:root {
  --bg: #090909;
  --bg-2: #141414;
  --fg: #ffffff;
  --fg-muted: rgba(255,255,255,0.55);
  --fg-faint: rgba(255,255,255,0.30);
  --line: rgba(255,255,255,0.12);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --logo-size: 60px;
  --code-size: 76px;
  --countdown-size: 42px;
  --code-weight: 900;
  --countdown-weight: 300;
  --text-weight: 400;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  background: radial-gradient(120% 120% at 50% 18%, #121212 0%, var(--bg) 62%);
  color: var(--fg);
  font-family: 'Cairo', system-ui, sans-serif;
  font-weight: var(--text-weight);
  -webkit-font-smoothing: antialiased;
  /* Only the horizontal axis is clipped. Clipping the vertical axis was
     hiding the countdown on short mobile viewports. */
  overflow-x: hidden;
  overflow-y: auto;
}

[hidden] { display: none !important; }

.site-menu {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px clamp(18px, 5vw, 58px);
  background: rgba(9,9,9,0.78);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.site-menu__brand,
.site-menu a {
  color: var(--fg);
  text-decoration: none;
}

.site-menu__brand {
  font-size: 15px;
  font-weight: var(--text-weight);
  letter-spacing: 0.20em;
}

.site-menu nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
}

.site-menu nav a {
  font-size: 12px;
  color: var(--fg-muted);
}

.stage {
  /* svh = the SMALL viewport height, i.e. with the mobile browser chrome
     visible. Using vh or dvh here pushed content past the fold on phones.
     The vh line is the fallback for browsers without svh support. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1.45vh, 14px);
  padding: 24px;
  text-align: center;
}

/* ---------- WNW mark ----------
   The glow is a drop-shadow on the glyph itself, so it hugs the shape
   instead of lighting up a rectangle around it. The light sweep is
   clipped to the same paths inside the SVG. */
.mark {
  width: var(--logo-size);
  height: auto;
  display: block;
  animation: breathe 6s var(--ease) infinite;
  will-change: filter, transform;
}

.mark .sweep { animation: sweep 7s ease-in-out infinite; }

@keyframes breathe {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255,255,255,0.20)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 5px rgba(255,255,255,0.42)); transform: scale(1.03); }
}

@keyframes sweep {
  0%          { transform: translateX(0); }
  22%, 100%   { transform: translateX(2000px); }
}

@media (prefers-reduced-motion: reduce) {
  .mark { animation: none; filter: drop-shadow(0 0 3px rgba(255,255,255,0.28)); }
  .mark .sweep { display: none; }
  .cta { animation: none; }
}

/* ---------- 0409 ---------- */
.brand {
  margin: 0;
  font-size: var(--code-size);
  font-weight: var(--code-weight);
  letter-spacing: 0.12em;
  text-indent: 0.12em;         /* re-centres against the trailing tracking */
  color: var(--fg);
  direction: ltr;
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
}

.poster {
  width: min(88vw, 360px);
  margin: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.045);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.34);
  animation: fadeUp 0.7s var(--ease);
}

.poster img {
  display: block;
  width: 100%;
  max-height: min(40svh, 430px);
  object-fit: cover;
}

/* ---------- countdown ---------- */
.panel { width: 100%; display: grid; place-items: center; }

.state { width: 100%; display: flex; flex-direction: column; align-items: center; }

.countdown {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-size: var(--countdown-size);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  line-height: 1;
}

.digits {
  font-size: 1em;
  font-weight: var(--countdown-weight);
  letter-spacing: 0.01em;
}

.sep {
  font-size: 0.78em;
  font-weight: var(--countdown-weight);
  color: var(--fg-faint);
  padding: 0 0.08em;
  position: relative;
  top: -0.03em;
}

body :where(h1, h2, h3, p, a, label, input, select, textarea, button, small, em, strong) {
  font-weight: var(--text-weight);
}

.full-note { margin: 0; font-size: clamp(16px, 4vw, 21px); font-weight: var(--text-weight); letter-spacing: 0.04em; }

/* ---------- admin-managed content ---------- */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.bg-layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--bg-dim, 0.55);
}

.mark--custom { object-fit: contain; }

.announce {
  margin: 0;
  max-width: 44ch;
  font-size: 12.5px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}

.social { display: flex; gap: 18px; align-items: center; }

.social a {
  color: var(--fg-muted);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: color 0.35s var(--ease), text-shadow 0.35s var(--ease);
}

.social a:hover {
  color: var(--fg);
  text-shadow: 0 0 10px rgba(255,255,255,0.45);
}

.future-site {
  background: #0d0d0d;
  border-top: 1px solid var(--line);
}

.future-band {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
  padding: 84px 0;
  text-align: center;
}

.future-band h2 {
  margin: 0 0 18px;
  font-size: clamp(24px, 4vw, 42px);
  font-weight: var(--text-weight);
}

.future-band p {
  max-width: 68ch;
  margin: 0 auto;
  color: var(--fg-muted);
  line-height: 1.9;
}

.future-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.future-grid article {
  min-height: 150px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: 14px;
}

/* ---------- buttons ---------- */
.cta {
  position: relative;
  isolation: isolate;
  appearance: none;
  cursor: pointer;
  background: transparent;
  color: var(--fg);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 999px;
  padding: 15px 44px;
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--text-weight);
  letter-spacing: 0.10em;
  overflow: hidden;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
  animation: fadeUp 0.7s var(--ease);
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fg);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}

.cta:hover::before, .cta:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.cta:hover, .cta:focus-visible { color: #000; border-color: #fff; }
.cta:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 3px; }
.cta:disabled { opacity: 0.5; cursor: default; }

.cta--block { width: 100%; margin-top: 4px; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0,0,0,0.74);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.3s var(--ease);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 36px 28px 28px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  text-align: center;
  animation: modalIn 0.42s var(--ease);
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.modal-close {
  position: absolute;
  top: 12px; left: 14px;
  padding: 6px;
  background: none; border: none;
  color: var(--fg-muted);
  font-size: 22px; line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: var(--fg); }

.modal-title { margin: 0 0 22px; font-size: 18px; font-weight: var(--text-weight); letter-spacing: 0.03em; }

#reserveForm { display: flex; flex-direction: column; gap: 16px; text-align: right; }
#reserveForm label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--fg-muted); }

#reserveForm input {
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s var(--ease);
}
#reserveForm input:focus { border-color: rgba(255,255,255,0.55); }

.form-error { margin: 0; font-size: 12.5px; color: #ff8a8a; text-align: right; }

.qr-wrap {
  width: 176px;
  margin: 0 auto 18px;
  padding: 16px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 14px;
}

.serial { margin: 0 0 10px; font-size: 15px; font-weight: var(--text-weight); letter-spacing: 0.08em; direction: ltr; }
.hint { margin: 0 0 20px; font-size: 12px; line-height: 1.6; color: var(--fg-muted); }

/* ---------- form requirements ---------- */
#reserveForm label i { font-style: normal; color: rgba(255,255,255,0.4); }

.req-note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--fg-faint);
}

@media (max-width: 640px) {
  .site-menu {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 18px;
  }

  .site-menu nav {
    width: 100%;
    justify-content: space-between;
  }

  .future-grid {
    grid-template-columns: 1fr;
  }
}