/* ── Phatt Music Co. — Global styles ──────────────────────────────────────
   Foundation for all pages. Edit the :root custom properties to change
   site-wide colours, spacing or typography. Every page links this file.      */

/* ── Font declarations ───────────────────────────────────────────────────────
   Unified family aliases for the Neue Haas Grotesk woff2 files already
   bundled in /assets/ by the Framer export. Using a single family name
   + font-weight lets us write font-family: 'Neue Haas Grotesk' everywhere
   without referencing Framer's verbose per-weight family names.               */
@font-face {
  font-family: 'Neue Haas Grotesk';
  src: url('/assets/ml8WBou3qLRVFQzTmsYLrcQlG3s.woff2') format('woff2');
  font-weight: 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Neue Haas Grotesk';
  src: url('/assets/GOW5fAs7vHkKuMlMQBmQpkLcM.woff2') format('woff2');
  font-weight: 600; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Neue Haas Grotesk';
  src: url('/assets/tmLwqa5rh55YXw6gAs9GB7y6CY.woff2') format('woff2');
  font-weight: 500; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Neue Haas Grotesk';
  src: url('/assets/7v88vbNPUPh3PX8XhEqCZvmuic.woff2') format('woff2');
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Neue Haas Grotesk';
  src: url('/assets/inIMhNoSTVaOORQ92TwWBstZZh8.woff2') format('woff2');
  font-weight: 300; font-display: swap; font-style: normal;
}

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  /* Background — the signature dark radial gradient */
  --gradient: radial-gradient(77% 50% at 50% -16%, rgb(84, 84, 84) 0%, rgb(0, 0, 0) 100%);

  /* Colour palette */
  --color-white:          #fff;
  --color-black:          #000;
  --color-text:           #fff;
  --color-text-muted:     rgb(145, 145, 145);
  --color-border-subtle:  rgba(255, 255, 255, 0.25);

  /* Typography */
  --font: 'Neue Haas Grotesk', sans-serif;

  /* Layout — page canvas */
  --canvas-max-width:   1440px;
  --canvas-pad-h:       80px;     /* desktop horizontal padding */
  --canvas-pad-h-md:    40px;     /* tablet */
  --canvas-pad-h-sm:    24px;     /* mobile */
  --canvas-pad-top:     80px;
  --canvas-pad-bottom:  160px;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after   { box-sizing: border-box; }
html                     { overflow-x: hidden; }
html, body               { margin: 0; padding: 0; min-height: 100%; }
h1, h2, h3, h4, h5, h6,
p, figure, ul, ol        { margin: 0; padding: 0; list-style: none; }

/* ── Base ────────────────────────────────────────────────────────────────── */
body {
  font-family:            var(--font);
  font-size:              16px;
  color:                  var(--color-text);
  background-image:       var(--gradient);
  background-repeat:      no-repeat;
  background-attachment:  fixed;
  background-size:        100% 100%;
  background-position:    center top;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
img { display: block; max-width: 100%; }

/* ── Page canvas ─────────────────────────────────────────────────────────────
   Add class="page-canvas" to the main content wrapper on each page.
   Provides the centred max-width layout and consistent padding.               */
.page-canvas {
  max-width: var(--canvas-max-width);
  margin:    0 auto;
  padding:   var(--canvas-pad-top) var(--canvas-pad-h) var(--canvas-pad-bottom);
  position:  relative;
}
@media (max-width: 900px) {
  .page-canvas {
    padding-left:  var(--canvas-pad-h-md);
    padding-right: var(--canvas-pad-h-md);
  }
}
@media (max-width: 600px) {
  .page-canvas {
    padding-left:  var(--canvas-pad-h-sm);
    padding-right: var(--canvas-pad-h-sm);
  }
}

/* ── Shared footer ───────────────────────────────────────────────────────────
   Used on all pages. Add <footer class="site-footer"> inside .page-canvas.   */
.site-footer {
  margin-top:      120px;
  padding-top:     40px;
  border-top:      1px solid rgba(255, 255, 255, 0.10);
  display:         flex;
  gap:             40px;
  flex-wrap:       wrap;
  justify-content: space-between;
  align-items:     flex-start;
}
.footer-brand   { flex: 1; min-width: 180px; }
.footer-tagline {
  font-size:   clamp(12px, 1.2vw, 14px);
  font-weight: 400;
  color:       rgb(145, 145, 145);
  margin:      0 0 8px;
}
.footer-email {
  font-size:       clamp(13px, 1.3vw, 15px);
  font-weight:     600;
  color:           #fff;
  text-decoration: none;
  transition:      opacity 0.15s;
}
.footer-email:hover { opacity: 0.7; }
.footer-col         { min-width: 110px; }
.footer-col-heading {
  font-size:      clamp(11px, 1.1vw, 13px);
  font-weight:    700;
  color:          rgba(255, 255, 255, 0.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin:         0 0 12px;
}
.footer-link {
  display:         block;
  font-size:       clamp(13px, 1.3vw, 15px);
  font-weight:     400;
  color:           rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-bottom:   8px;
  transition:      color 0.15s;
}
.footer-link:hover { color: #fff; }