/* ──────────────────────────────────────────────
   DJ GQ WORLDWIDE — Home
   Full-bleed hero + centered logo. Nav geometry is shared in nav.css;
   on Home the nav simply floats transparently over the photo (no rail).
   ────────────────────────────────────────────── */

:root{
  --ink:   #FFFFFF;
  --dim:   rgba(255,255,255,.62);
  --line:  rgba(255,255,255,.22);
  --body:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad:   clamp(22px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body{ margin: 0; height: 100%; }
body{
  min-height: 100svh;
  background: #000;
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-y: auto;
}
img{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }

/* ── Background photo ─────────────────────────── */
.bg{ position: fixed; inset: 0; z-index: 0; }
.bg__img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
/* soft scrim — keeps the nav legible, photo otherwise untouched */
.bg__scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 24%),
    radial-gradient(120% 90% at 0% 0%, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 42%);
}
.bg[data-fallback="1"] .bg__img{ display: none; }
.bg[data-fallback="1"]{ background: radial-gradient(ellipse at 30% 20%, #1c1c1c, #000); }

/* ── Stage (centered logo) ──────── */
.stage{
  position: relative; z-index: 5;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: clamp(14px, 2.4vw, 26px);
  padding: clamp(58px, 9vh, 104px) var(--pad) clamp(40px, 7vh, 64px);
  text-align: center;
}
.stage__logo{
  width: min(500px, 70vw);
  max-height: 30svh;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 30px rgba(0,0,0,.45));
}

/* ── Mobile ───────────────────────────────────── */
@media (max-width: 680px){
  .stage__logo{ width: min(440px, 82vw); }
}