/* Reset, typography, layout primitives, nav, and the auth gate. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.modal-open { overflow: hidden; }

[hidden] { display: none !important; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-bright); }

img { max-width: 100%; display: block; }

/* Visible focus for keyboard users, suppressed for mouse clicks. */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── TYPE ─────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-base); font-weight: 600; }
h1 .accent, h2 .accent { color: var(--gold); }

.label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-mute);
}

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
}

.dim { color: var(--text-dim); }
.mute { color: var(--text-mute); }
.small { font-size: var(--fs-sm); }
.mono { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* ── LAYOUT ───────────────────────────────────────────────────────────────── */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-7) var(--sp-5) var(--sp-8); }
.wrap-narrow { max-width: var(--maxw-narrow); }

.page-head { margin-bottom: var(--sp-6); }
.page-head h1 { margin-bottom: var(--sp-2); }
.page-head p { color: var(--text-dim); max-width: 62ch; }

.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.row-end { display: flex; gap: var(--sp-3); align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.grow { flex: 1; min-width: 0; }

.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-5); align-items: start; }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .wrap { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 22px; }
}

/* ── NAV ──────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0 var(--sp-5);
  background: rgba(17, 17, 19, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.nav-logo span { color: var(--gold); }

.nav-links { display: flex; gap: var(--sp-1); align-items: center; list-style: none; }
.nav-links a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
}
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current='page'] { color: var(--gold); }

.nav-right { display: flex; gap: var(--sp-3); align-items: center; }
.nav-email {
  font-size: var(--fs-sm);
  color: var(--text-mute);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  /* The nav is sticky, not fixed, so growing to two rows simply pushes the page
     down — no body offset to keep in sync. Links drop to their own scrollable
     row rather than disappearing: hidden links left the hub as the only way to
     move between panels, which is most of the traffic on a phone. */
  .nav {
    height: auto;
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    gap: var(--sp-2);
  }
  .nav-email { display: none; }

  .nav-links {
    order: 3;
    width: 100%;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding-top: var(--sp-1);
    border-top: 1px solid var(--border);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { padding: var(--sp-2) var(--sp-3) var(--sp-1); white-space: nowrap; }
}

/* Horizontal scroll strip of section links, used on mobile in place of nav-links. */
.subnav {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }

/* ── AUTH GATE ────────────────────────────────────────────────────────────── */

/* Shown while the initial auth check runs, and again if the user is not allowed in.
   Nothing else on the page renders until this resolves. */
.gate {
  max-width: 400px;
  margin: 12vh auto;
  padding: 0 var(--sp-4);
  text-align: center;
}
.gate h1 { margin-bottom: var(--sp-3); }
.gate p { color: var(--text-dim); margin-bottom: var(--sp-5); }
.gate .btn { width: 100%; }
.gate-note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-mute); }

.gate-auth { max-width: 380px; margin-top: 8vh; }

/* "or" divider with a rule either side. */
.gate-or {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-mute);
}
.gate-or::before, .gate-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.spinner {
  width: 26px;
  height: 26px;
  margin: 0 auto;
  border: 2px solid var(--border-gold);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading { padding: var(--sp-8) 0; text-align: center; color: var(--text-mute); }
.loading .spinner { margin-bottom: var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}