/* ============================================================
   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.5);   /* footer, secondary labels */
  --subtle:   rgba(240,237,230,0.55);  /* 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 { opacity: 0.65; }
.nav-contact:hover { opacity: 1; color: var(--text); }

/* ── Nav-back badge ──────────────────────────────────────────
   Circular chevron badge, matching the approved reference
   (arrow-options.html v3, "small links" spec). CSS-only via
   pseudo-elements (a masked shape for the chevron, so its
   color is controllable, plus a plain circle) rather than
   changing markup — this class is used on every detail page
   across the site, so a CSS-only approach means zero HTML
   edits were needed anywhere for this to take effect.
   Deliberately overrides the opacity-fade hover from the base
   rule above with its own explicit hover treatment instead,
   since the badge needs a color/position change, not a fade.
   ──────────────────────────────────────────────────────────── */
.nav-back {
  position: relative;
  padding-left: 30px;
  transition: none;
}
.nav-back:hover { opacity: 1; }
.nav-back::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: rgba(240,237,230,0.08);
  transition: background 0.2s ease, transform 0.2s ease;
}
.nav-back::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background-color: var(--text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'%3E%3C/polyline%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.nav-back:hover::before { background: var(--accent); transform: translateX(-5px); }
.nav-back:hover::after  { background-color: var(--bg); transform: translateX(-5px); }


/* ── 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: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  padding-right: 30px;
}
.cta-link:hover { opacity: 1; }
.cta-link::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: rgba(240,237,230,0.08);
  transition: background 0.2s ease, transform 0.2s ease;
}
.cta-link::after {
  content: '';
  position: absolute;
  right: 5px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background-color: var(--text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'%3E%3C/polyline%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.cta-link:hover::before { background: var(--accent); transform: translateX(5px); }
.cta-link:hover::after  { background-color: var(--bg); transform: translateX(5px); }


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

/* Footer social icons — quiet, secondary to the Contact link in
   the nav. Icon + visible name (not just hover) since hover
   context doesn't exist on mobile — a visitor needs to know
   which link is which without relying on a rollover state. */
.footer-icons {
  display: flex;
  align-items: center;
  gap: 24px;
}
.footer-icon {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-icon:hover { color: #ffffff; }
.footer-icon svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }


/* ── 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; }
}