/* ============================================================
   Identity Alley — Global Design System
   ============================================================
   Single source of truth for shared visual language.
   Every page on identityalley.com links to this file first.
   Section stylesheets (music.css, community.css) load after
   and override the section-level tokens below.

   To make a sitewide change:
   - Nav or footer layout  → edit here
   - Link / CTA style      → edit .cta-link here
   - Fonts                 → edit --font-* here
   - Add a new section     → add a new section CSS file,
                             override --bg and --accent in :root
   ============================================================ */


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


/* ── Design tokens ──────────────────────────────────────────
   --text, --text-dim, --subtle, --border are the base text
   family and adapt to each section via override.

   --bg and --accent are section-level: each section CSS
   overrides these in its own :root block so components
   automatically pick up the right colors.
   ──────────────────────────────────────────────────────── */
:root {
  /* Typography */
  --font-display: 'map-roman-compressed', Georgia, serif;
  --font-body:    'normalidad-wide', 'Arial Narrow', Arial, sans-serif;

  /* Text family — override per section if needed */
  --text:     #f0ede6;
  --text-dim: rgba(240,237,230,0.2);   /* footer, secondary labels */
  --subtle:   rgba(240,237,230,0.35);  /* descriptions, muted links */
  --border:   rgba(240,237,230,0.08);  /* dividers */

  /* Section tokens — each section CSS overrides these */
  --bg:     #0e0e0e;   /* default: gateway shell */
  --accent: #f0ede6;   /* default: neutral; sections set gold, sage, etc. */
}


/* ── Body ── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}


/* ── Nav ────────────────────────────────────────────────────
   Default: section-style nav (music, community, detail pages)
   Padding-based, 48px logo.
   Gateway (index.html) overrides to fixed-height taller nav.
   ──────────────────────────────────────────────────────── */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 80px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 100;
}

.nav-logo img {
  height: 48px;
  display: block;
}

/* Both nav link types share a base — differ only in case/tracking */
.nav-back,
.nav-contact {
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  transition: opacity 0.2s;
}
.nav-back    { letter-spacing: 0.08em; }
.nav-contact { letter-spacing: 0.2em; text-transform: uppercase; }

.nav-back:hover,
.nav-contact:hover { opacity: 0.65; }


/* ── Container ── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
}


/* ── Eyebrow ────────────────────────────────────────────────
   Small uppercase label above headings.
   Uses --accent so it's automatic per section.
   ──────────────────────────────────────────────────────── */
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
}


/* ── CTA link ───────────────────────────────────────────────
   Universal call-to-action link style.
   Used for "View Project →", "Get in touch", etc.
   Change here and it updates every CTA across the whole site.
   ──────────────────────────────────────────────────────── */
.cta-link {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(240,237,230,0.35);
  padding-bottom: 4px;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.cta-link:hover { opacity: 0.65; }


/* ── Footer ── */
footer {
  padding: 36px 80px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer p,
footer a {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  text-decoration: none;
}
footer a {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.2s;
}
footer a:hover { color: var(--text); }


/* ── Responsive ── */
@media (max-width: 1024px) {
  nav           { padding: 24px 40px; }
  .nav-logo img { height: 44px; }
  .container    { padding: 0 40px; }
  footer        { padding: 32px 40px; }
}

@media (max-width: 768px) {
  nav           { padding: 20px 24px; }
  .nav-logo img { height: 40px; }
  .container    { padding: 0 24px; }
  footer        { padding: 28px 24px; flex-direction: column; gap: 12px; }
}