/* ──────────────────────────────────────────────
   DJ GQ WORLDWIDE — base.css
   Shared chrome for INTERIOR pages: design tokens, reset,
   the left-rail VISUALS, the separate-scroll region, footer, placeholder.
   Nav GEOMETRY lives in nav.css (shared by every page); this file only
   adds the rail's background/width on top of it. Page-specific styles
   live in each page's own *.css.
   ────────────────────────────────────────────── */

:root{
  --bg:    #0B0B0B;
  --bg-2:  #111110;
  --ink:   #F3EFE7;
  --ink-2: #B6B0A4;
  --ink-3: #7C766A;
  --dim:   rgba(255,255,255,.62);
  --line:  rgba(255,255,255,.14);
  --accent:#C9A24B;
  --body:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad:   clamp(22px, 4vw, 48px);
  --maxw:  1180px;
  --rail:  clamp(178px, 17vw, 230px);
}

*, *::before, *::after { box-sizing: border-box; }
html{ background: var(--bg); scroll-behavior: smooth; }
body{
  margin: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
::selection{ background: var(--accent); color: #0B0B0B; }

.eyebrow{
  font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 500; color: var(--dim);
}
em{ font-style: italic; color: var(--accent); }
b{ font-weight: 600; color: var(--ink); }

/* ── Left rail — VISUALS only (geometry comes from nav.css) ──────── */
.nav{ bottom: 0; width: var(--rail); background: var(--bg); }

/* ── Scroll region — the ONLY thing that scrolls ──── */
.scroll{
  position: fixed; top: 0; right: 0; bottom: 0;
  left: var(--rail);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Footer ───────────────────────────────────── */
.afoot{
  max-width: var(--maxw); margin: 0 auto;
  padding: 40px var(--pad);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
}
.afoot__brand{ display: inline-flex; align-items: center; }
.afoot__brand img{ height: clamp(58px, 7vw, 88px); width: auto; display: block; }
.afoot__links{ display: flex; gap: 24px; }
.afoot__links a{ font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); transition: color .2s ease; }
.afoot__links a:hover{ color: var(--accent); }
.afoot__copy{ font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* ── Placeholder / "coming soon" interior pages ──── */
.placeholder{
  min-height: 80svh;
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(64px, 12vh, 140px) var(--pad) clamp(48px, 8vw, 90px);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
.ph__eyebrow{
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  font-weight: 500; color: var(--accent); margin: 0 0 18px;
}
.ph__title{
  font-size: clamp(48px, 9vw, 116px); font-weight: 600;
  letter-spacing: -.02em; line-height: .95; margin: 0 0 22px; color: var(--ink);
}
.ph__lead{
  font-size: clamp(17px, 1.6vw, 21px); font-weight: 300; line-height: 1.6;
  color: var(--ink-2); max-width: 46ch; margin: 0 0 34px;
}
.ph__cta{
  display: inline-flex; align-items: center; gap: .55em;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--dim); padding-bottom: 6px;
  transition: color .25s ease, border-color .25s ease;
}
.ph__cta:hover{ color: var(--accent); border-color: var(--accent); }

/* ── Mobile (≤680px): rail → fixed top bar ──── */
@media (max-width: 680px){
  .nav{
    bottom: auto; right: 0; width: auto;
    border-bottom: 1px solid var(--line);
  }
  .scroll{ left: 0; top: 70px; }
  .afoot{ flex-direction: column; align-items: flex-start; gap: 16px; }
}