/* =========================================================================
   giacomopasquali.it — main stylesheet
   Direction: STAGE PORTRAIT — dark cinematic, photo-driven, Apple-bold caps.
   Reference: Valentin Cheval portfolio (massive caps overlay on dark portrait,
   single warm-orange "stage light" accent, sparse UI).
   ========================================================================= */

@import url('./fonts.css');

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* ---- COLOR — surface (dark, photographic) ---- */
  --canvas:           #0a0a0a;        /* near-black warm */
  --canvas-soft:      #0e0e0e;
  --surface-1:        #141414;        /* elevated, sections */
  --surface-2:        #1a1a1a;        /* cards */
  --surface-3:        #222222;        /* hover state */

  /* ---- COLOR — text on dark ---- */
  --text-primary:     #ffffff;
  --text-strong:      #ffffff;
  --text-body:        rgba(255, 255, 255, 0.72);
  --text-muted:       rgba(255, 255, 255, 0.55);
  --text-dim:         rgba(255, 255, 255, 0.32);
  --text-faint:       rgba(255, 255, 255, 0.18);

  /* ---- COLOR — borders / hairlines ---- */
  --hairline:         rgba(255, 255, 255, 0.08);
  --hairline-strong:  rgba(255, 255, 255, 0.18);
  --hairline-bright:  rgba(255, 255, 255, 0.28);

  /* ---- COLOR — accent (the stage light) ---- */
  --accent:           #56b99a;        /* mint — primary accent */
  --accent-bright:    #6acaaa;        /* hover / glow */
  --accent-deep:      #3fa080;        /* pressed */
  --accent-glow:      rgba(86, 185, 154, 0.55);

  /* Inverse — for dark text on light buttons */
  --on-light:         #0a0a0a;
  --on-accent:        #ffffff;

  /* ---- TYPOGRAPHY — Apple-style stack (resolves to SF Pro on Apple) ---- */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter Tight', system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text',    'Inter Tight', system-ui, sans-serif;

  /* ---- TYPOGRAPHY — fluid scale ---- */
  --t-caption:    clamp(0.6875rem, 0.65rem + 0.16vw, 0.75rem);    /* 11–12 */
  --t-eyebrow:    clamp(0.75rem,   0.72rem + 0.14vw, 0.8125rem);  /* 12–13 */
  --t-body-sm:    clamp(0.875rem,  0.85rem + 0.12vw, 0.9375rem);  /* 14–15 */
  --t-body:       clamp(0.9375rem, 0.91rem + 0.16vw, 1rem);       /* 15–16 */
  --t-body-lg:    clamp(1rem,      0.95rem + 0.23vw, 1.125rem);   /* 16–18 */
  --t-lead:       clamp(1.125rem,  1.06rem + 0.31vw, 1.25rem);    /* 18–20 */
  --t-lead-lg:    clamp(1.25rem,   1.13rem + 0.47vw, 1.5rem);     /* 20–24 */

  --t-display-sm: clamp(2rem,     1.65rem + 1.7vw, 3rem);         /* 32–48 */
  --t-display-md: clamp(2.5rem,   1.9rem + 2.7vw, 4rem);          /* 40–64 */
  --t-display-lg: clamp(3.5rem,   2.5rem + 4.7vw, 6.5rem);        /* 56–104 */
  --t-display-xl: clamp(4.5rem,   3rem + 7vw,    10rem);          /* 72–160 */
  --t-hero:       clamp(4rem,     2rem + 12vw,   13rem);          /* 64–208 */

  /* ---- TYPOGRAPHY — line-height & tracking ---- */
  --lh-display:   0.92;
  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.4;
  --lh-body:      1.5;
  --lh-prose:     1.65;

  --tr-display-tight: -0.045em;
  --tr-display:       -0.025em;
  --tr-tight:         -0.015em;
  --tr-normal:        0;
  --tr-wide:          0.06em;
  --tr-wider:         0.12em;

  /* ---- TYPOGRAPHY — weight ---- */
  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;
  --w-bold:       700;          /* Apple's heaviest editorial */

  /* ---- SPACING ---- */
  --s-1:  0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5:  1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
  --s-12: 3rem;     --s-14: 3.5rem;  --s-16: 4rem;    --s-20: 5rem;
  --s-24: 6rem;     --s-32: 8rem;    --s-40: 10rem;

  --section-y:    clamp(4rem, 3rem + 5vw, 8rem);
  --section-y-lg: clamp(5.5rem, 4rem + 7vw, 11rem);

  /* ---- LAYOUT ---- */
  --container-max:  1440px;
  --container-px:   clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --content-prose:  640px;

  /* ---- BORDERS ---- */
  --bw-hairline:  1px;
  --bw-rule:      1px;
  --bw-strong:    1.5px;

  /* ---- RADII ---- */
  --rad-none:  0;
  --rad-xs:    4px;
  --rad-sm:    6px;
  --rad-md:    8px;
  --rad-lg:    12px;
  --rad-xl:    16px;
  --rad-2xl:   24px;
  --rad-pill:  9999px;
  --rad-full:  9999px;

  /* ---- SHADOWS ---- */
  --shadow-photo:        0 30px 80px rgba(0, 0, 0, 0.55);
  --shadow-card-hover:   0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-glow-accent:  0 0 0 1px rgba(86, 185, 154, 0.40), 0 0 36px rgba(86, 185, 154, 0.20);

  /* ---- MOTION ---- */
  --dur-instant:  80ms;
  --dur-fast:     140ms;
  --dur-base:     240ms;
  --dur-slow:     480ms;
  --dur-slower:   800ms;

  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emphasis:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Z-INDEX ---- */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   1;
  --z-sticky: 100;
  --z-overlay:200;
  --z-modal:  300;

  color-scheme: dark;
}

/* -------------------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  background-color: var(--canvas);
}

/* Lenis smooth-scroll required reset (matches official lenis.css) */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped body {
  overflow: clip;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button { cursor: pointer; -webkit-appearance: none; appearance: none; }
textarea { resize: vertical; }

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

ul, ol { list-style: none; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  background-color: var(--accent);
  color: var(--text-primary);
}

/* -------------------------------------------------------------------------
   3. BASE TYPOGRAPHY
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--text-primary);
}

h1 {
  font-size: var(--t-display-xl);
  letter-spacing: var(--tr-display-tight);
  line-height: var(--lh-display);
}
h2 { font-size: var(--t-display-md); }
h3 { font-size: var(--t-display-sm); }
h4 { font-size: var(--t-lead-lg); font-weight: var(--w-semibold); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); }
h5 { font-size: var(--t-lead); font-weight: var(--w-semibold); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); }
h6 { font-size: var(--t-body-lg); font-weight: var(--w-semibold); line-height: var(--lh-normal); letter-spacing: 0; }

p { color: var(--text-body); line-height: var(--lh-prose); }

strong, b { font-weight: var(--w-semibold); color: var(--text-strong); }
em, i { font-style: italic; }

a {
  color: var(--text-primary);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.7; }

/* -------------------------------------------------------------------------
   4. UTILITIES
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.container-prose {
  width: 100%;
  max-width: var(--content-prose);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section-lg { padding-block: var(--section-y-lg); }

/* Eyebrow — minimal small caps label */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-muted);
}
.eyebrow--ink     { color: var(--text-primary); }
.eyebrow--accent  { color: var(--accent); }

/* A11y */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background-color: var(--text-primary);
  color: var(--canvas);
  border-radius: var(--rad-pill);
  font-size: var(--t-body-sm);
  font-weight: var(--w-medium);
  z-index: var(--z-modal);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

/* Reveal — fade + tiny lift */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-slower) var(--ease-emphasis),
    transform var(--dur-slower) var(--ease-emphasis);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Visibility helpers */
@media (max-width: 767px)  { .hide-mobile  { display: none !important; } }
@media (min-width: 768px)  { .hide-desktop { display: none !important; } }


/* =========================================================================
   CUSTOM CURSOR — premium awwwards-style
   Outer ring (lerps with delay) + inner dot (instant).
   Hidden on touch devices and reduced-motion.
   ========================================================================= */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button, input, textarea, select, label { cursor: none; }
}

.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.cursor.is-ready { opacity: 1; }

.cursor__ring,
.cursor__dot {
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.cursor__ring {
  width: 36px; height: 36px;
  border: 1.5px solid #ffffff;
  margin: -18px 0 0 -18px;
  transition:
    width 240ms var(--ease-out),
    height 240ms var(--ease-out),
    margin 240ms var(--ease-out),
    background-color 240ms var(--ease-out),
    border-color 240ms var(--ease-out);
}
.cursor__dot {
  width: 5px; height: 5px;
  background-color: #ffffff;
  margin: -2.5px 0 0 -2.5px;
}

/* States */
.cursor.is-hover .cursor__ring {
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  background-color: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.50);
}
.cursor.is-click .cursor__ring {
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor { display: none !important; }
  body, a, button, input, textarea, select, label { cursor: auto !important; }
}


/* =========================================================================
   MAGNETIC CTA — buttons pull toward cursor when nearby
   JS sets --mx-offset / --my-offset on the data-magnetic element.
   ========================================================================= */
[data-magnetic] {
  transform: translate3d(var(--mag-x, 0), var(--mag-y, 0), 0);
  transition: transform 400ms var(--ease-emphasis);
  will-change: transform;
}
[data-magnetic] .btn__label,
[data-magnetic] .btn__arrow {
  display: inline-block;
  transform: translate3d(var(--mag-lx, 0), var(--mag-ly, 0), 0);
  transition: transform 500ms var(--ease-emphasis);
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  [data-magnetic] { transform: none; transition: none; }
  [data-magnetic] .btn__label,
  [data-magnetic] .btn__arrow { transform: none; transition: none; }
}


/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.7rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  letter-spacing: -0.005em;
  color: var(--canvas);
  background-color: var(--text-primary);
  border: 1px solid var(--text-primary);
  border-radius: var(--rad-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  user-select: none;
  min-height: 42px;
}
.btn:hover { background-color: rgba(255, 255, 255, 0.88); }
.btn:active { transform: scale(0.97); }

.btn__arrow { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Outline — secondary, on dark */
.btn--outline {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--hairline-strong);
}
.btn--outline:hover {
  background-color: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

/* Accent — primary action with stage-light glow */
.btn--accent {
  background-color: var(--accent);
  color: var(--text-primary);
  border-color: var(--accent);
}
.btn--accent:hover {
  background-color: var(--accent-bright);
  border-color: var(--accent-bright);
  box-shadow: var(--shadow-glow-accent);
}

/* Tertiary text-only link with underline */
.btn--text {
  background-color: transparent;
  color: var(--text-primary);
  border: none;
  border-radius: 0;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--text-primary);
  min-height: 0;
}
.btn--text:hover {
  background: transparent;
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.btn--sm  { padding: 0.5rem 1rem;    font-size: var(--t-body-sm); min-height: 36px; }
.btn--lg  { padding: 0.95rem 1.6rem; font-size: var(--t-body-lg); min-height: 52px; }
.btn--block { display: flex; width: 100%; }


/* =========================================================================
   NAV — floating glass pill (Apple Liquid Glass)
   ========================================================================= */
.nav {
  position: fixed;
  top: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - clamp(1.5rem, 1rem + 3vw, 3rem));
  max-width: calc(var(--container-max) - clamp(0px, 1vw, 24px));
  z-index: var(--z-sticky);
  background: rgba(18, 18, 18, 0.50);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 -1px 0 rgba(0, 0, 0, 0.20) inset;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(18, 18, 18, 0.68);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -1px 0 rgba(0, 0, 0, 0.25) inset;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: 0.4rem;
  padding-inline: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  min-height: 52px;
}

/* Logo gets a touch more left padding so it sits comfortably in the pill */
.nav__logo { padding-inline-start: 0.5rem; }

.nav__logo {
  display: inline-flex;
  align-items: center;
  color: var(--text-primary);
  border: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav__logo img {
  display: block;
  height: clamp(24px, 2.2vw, 32px);
  width: auto;
  object-fit: contain;
}
.nav__logo:hover { opacity: 0.7; }

.nav__menu { flex: 0; display: flex; }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.nav__link {
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  font-weight: var(--w-medium);
  color: var(--text-muted);
  padding-block: 0.25rem;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--text-primary); opacity: 1; }

.nav .btn { padding: 0.55rem 1.1rem; min-height: 38px; }

/* Mobile hamburger */
.nav__toggle {
  width: 42px;
  height: 42px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--rad-pill);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav__toggle:hover { border-color: var(--text-primary); }
.nav__toggle-bar {
  display: block;
  width: 16px;
  height: 1.5px;
  background-color: var(--text-primary);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}


/* =========================================================================
   DRAWER (mobile)
   ========================================================================= */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  visibility: hidden;
}
.drawer.is-open { pointer-events: auto; visibility: visible; }
.drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color var(--dur-base) var(--ease-out);
}
.drawer.is-open .drawer__backdrop { background-color: rgba(0, 0, 0, 0.65); }
.drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background-color: var(--surface-1);
  border-left: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  padding: var(--s-6) var(--s-6) var(--s-8);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-emphasis);
  overflow-y: auto;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s-6);
}
.drawer__brand {
  font-family: var(--font-display);
  font-size: var(--t-body-lg);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
}
.drawer__close {
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: var(--w-regular);
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--rad-pill);
}
.drawer__close:hover { border-color: var(--text-primary); }

.drawer__list { display: flex; flex-direction: column; }
.drawer__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  font-family: var(--font-display);
  font-size: var(--t-display-sm);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-display-tight);
  color: var(--text-primary);
  border-bottom: 1px solid var(--hairline);
  transition: padding-left var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.drawer__link:hover { padding-left: var(--s-2); color: var(--accent); opacity: 1; }
.drawer__link-num {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-dim);
}

.drawer__cta { margin-block: var(--s-8); }

.drawer__social {
  display: flex;
  flex-direction: column;
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline);
  margin-top: auto;
}
.drawer__social a {
  display: flex;
  justify-content: space-between;
  padding-block: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  color: var(--text-body);
  border-bottom: 1px solid var(--hairline);
}
.drawer__social a:last-child { border-bottom: none; }
.drawer__social a:hover { color: var(--accent); opacity: 1; }


/* =========================================================================
   HERO — STAGE PORTRAIT (full-bleed photo backdrop, Cheval-style)
   Constrained to exactly viewport height on desktop so all content
   (scroll cue + side-column CTAs) is always above the fold.
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background-color: var(--canvas);
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
/* On mobile (no side column beside main), allow content to grow naturally */
@media (max-width: 1023px) {
  .hero {
    height: auto;
    max-height: none;
    min-height: 100dvh;
  }
}

/* Full-bleed photo backdrop — with parallax wrapper */
.hero__photo-bg {
  position: absolute;
  inset: -3% -3% -3% -3%;
  z-index: 0;
  overflow: hidden;
  transform: translate3d(var(--px-bg, 0), var(--py-bg, 0), 0);
  transition: transform 600ms var(--ease-out);
  will-change: transform;
}
.hero__photo-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 0%;
  display: block;
  transform-origin: 50% 0%;
  animation: ken-burns 38s ease-in-out infinite;
  will-change: transform;
}
@keyframes ken-burns {
  0%   { transform: scale(1.18) translate(0, 0); }
  50%  { transform: scale(1.28) translate(-1%, 0.8%); }
  100% { transform: scale(1.18) translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__photo-bg img { animation: none; transform: scale(1.18); }
}

/* Mobile: shift the hero photo focal point left so the subject sits in the
   visible frame even after the crop induced by the narrow viewport. */
@media (max-width: 767px) {
  .hero__photo-bg img { object-position: 30% 0%; }
}

/* Static layered overlays — vertical darkening only (for nav + headline
   legibility). No more decorative colored wash — the spotlight does the
   focal effect, this layer just guarantees text readability. */
.hero__photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Top fade for nav legibility */
    linear-gradient(180deg, rgba(10, 10, 10, 0.45) 0%, rgba(10, 10, 10, 0) 18%),
    /* Bottom fade for headline legibility */
    linear-gradient(180deg, rgba(10, 10, 10, 0) 55%, rgba(10, 10, 10, 0.78) 100%);
}

/* Mouse-following warm spotlight — stage light tracking the cursor */
/* Soft photographic spotlight — always-on dark mask with a soft "hole"
   around the cursor. Like aiming a flashlight at a print: the photo is
   visible everywhere, just dimmer outside the cursor's reach. No synthetic
   colored glow. Default position is center so static state still feels intentional. */
.hero__spotlight {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  background: radial-gradient(
    circle 560px at var(--mx, 50%) var(--my, 50%),
    rgba(8, 8, 8, 0)    0%,
    rgba(8, 8, 8, 0)    18%,
    rgba(8, 8, 8, 0.18) 50%,
    rgba(8, 8, 8, 0.38) 85%,
    rgba(8, 8, 8, 0.48) 100%
  );
  will-change: background;
}
@media (prefers-reduced-motion: reduce) {
  /* Keep the soft vignette but JS skips cursor tracking — stays centered. */
  .hero__spotlight { will-change: auto; }
}

/* Animated film grain — drifts continuously for celluloid feel */
.hero__grain {
  position: absolute;
  top: -6%; left: -6%;
  width: 112%; height: 112%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.20;
  mix-blend-mode: overlay;
  background-size: 240px 240px;
  animation: grain-shift 8s steps(10) infinite;
  will-change: transform;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-2%, -3%); }
  20%  { transform: translate(-4%, 1%); }
  30%  { transform: translate(2%, -5%); }
  40%  { transform: translate(-2%, 4%); }
  50%  { transform: translate(-4%, 2%); }
  60%  { transform: translate(4%, 0%); }
  70%  { transform: translate(0%, 3%); }
  80%  { transform: translate(1%, 5%); }
  90%  { transform: translate(-3%, 2%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__grain { animation: none; }
}

/* Content sits above the photo.
   Top padding clears the floating glass nav (≈12-20px gap + 52px height) PLUS
   a generous buffer so the eyebrow caption ("WHAT I DO") is never overlapped
   by the pill, even when cursor parallax shifts the side column.
   Bottom padding lifts the bottom zone (headline + scroll cue + side CTAs)
   away from the viewport edge. */
.hero__content {
  position: relative;
  z-index: 4;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-block:
    clamp(6.25rem, 5rem + 2vw, 7.75rem)
    clamp(2.25rem, 1.5rem + 2.5vw, 4rem);
}

.hero__layout {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 1024px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: var(--s-10);
    align-items: stretch;
  }
}

.hero__main {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
  min-width: 0;
  min-height: 0;
}

/* Top intro line — "Hi, this is Giacomo Pasquali" */
.hero__intro {
  font-family: var(--font-body);
  font-size: var(--t-lead-lg);
  font-weight: var(--w-regular);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-muted);
}
.hero__intro strong {
  color: var(--text-primary);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-tight);
}

/* Massive headline pinned at the bottom of the main column.
   Capped to a fraction of viewport height so the scroll cue + side CTAs
   always remain above the fold on standard laptop heights (768–900px). */
.hero__headline {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: min(var(--t-hero), 13dvh);
  font-weight: var(--w-bold);
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--text-primary);
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
  transform: translate3d(var(--px-headline, 0), var(--py-headline, 0), 0);
  transition: transform 700ms var(--ease-out);
  will-change: transform;
}
@media (max-width: 1023px) {
  .hero__headline {
    font-size: min(var(--t-hero), 16vw);
  }
}
.hero__headline-line {
  display: block;
  white-space: nowrap;
}
.hero__headline-line--accent {
  color: var(--accent);
  text-shadow: 0 0 60px rgba(86, 185, 154, 0.45), 0 2px 12px rgba(0, 0, 0, 0.50);
}

/* Right column — services, bio, CTAs (floats over photo, no card bg)
   Tightened spacing so both CTAs always sit above the fold on 800-900px viewports. */
.hero__side {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
  align-self: start;
  transform: translate3d(var(--px-side, 0), var(--py-side, 0), 0);
  transition: transform 600ms var(--ease-out);
  will-change: transform;
}
@media (min-width: 1024px) {
  .hero__side {
    align-self: start;
    justify-content: flex-start;
    gap: var(--s-12);
  }
}

.hero__services {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero__services-title {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}
.hero__services-list {
  display: flex;
  flex-direction: column;
}
.hero__services-list li {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  color: var(--text-primary);
  letter-spacing: var(--tr-tight);
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--hairline-strong);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.hero__services-list li:last-child { border-bottom: none; }

.hero__side-divider {
  margin-top: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline-strong);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.hero__bio {
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  line-height: 1.45;
  color: var(--text-body);
  max-width: 40ch;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  margin: 0;
}
.hero__bio strong { color: var(--text-primary); font-weight: var(--w-semibold); }
.hero__bio-nobreak { white-space: nowrap; }

.hero__cta-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: 0;
}
.hero__cta-block .btn {
  min-height: 44px;
  padding: 0.7rem 1.1rem;
  font-size: var(--t-body-sm);
}

/* Scroll cue at bottom-left */
.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-muted);
  margin-top: var(--s-4);
  align-self: start;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.hero__scroll:hover { color: var(--text-primary); opacity: 1; }
/* Mobile / touch: swipe-to-scroll is intuitive — the cue is redundant noise. */
@media (hover: none), (max-width: 767px) {
  .hero__scroll { display: none; }
}
.hero__scroll-arrow {
  display: inline-block;
  font-family: var(--font-body);
  color: var(--accent);
  animation: bounce-down 2.4s var(--ease-emphasis) infinite;
}
@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-arrow { animation: none; }
}

/* Hero motion — staggered headline reveal on load */
@keyframes hero-line-rise {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
.hero__headline-line {
  animation: hero-line-rise 1.1s var(--ease-emphasis) both;
}
.hero__headline-line:nth-child(1) { animation-delay: 0.20s; }
.hero__headline-line:nth-child(2) { animation-delay: 0.32s; }
.hero__headline-line:nth-child(3) { animation-delay: 0.46s; }
@media (prefers-reduced-motion: reduce) {
  .hero__headline-line { animation: none; opacity: 1; transform: none; }
}

/* Mobile: lighten the headline scale + tighten layout so photo + content coexist */
@media (max-width: 767px) {
  .hero { min-height: 100dvh; }
  .hero__photo-overlay {
    background:
      linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 22%),
      linear-gradient(180deg, rgba(10, 10, 10, 0) 35%, rgba(10, 10, 10, 0.85) 100%),
      radial-gradient(ellipse 60% 50% at 80% 40%, rgba(86, 185, 154, 0.16), transparent 65%);
  }
  .hero__layout { gap: var(--s-6); }
}


/* =========================================================================
   SECTION HEAD (kept for cascade — minimal dark variant)
   ========================================================================= */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: clamp(2rem, 1.5rem + 3vw, 4rem);
  max-width: 720px;
}
.section-head--split { flex-direction: column; align-items: flex-start; }
@media (min-width: 1024px) {
  .section-head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-12);
    max-width: none;
  }
  .section-head--split > div { max-width: 720px; }
}
.section-head__title {
  font-family: var(--font-display);
  font-size: var(--t-display-md);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display-tight);
  color: var(--text-primary);
}
.section-head__title em {
  font-style: normal;
  color: var(--accent);
}
.section-head__sub {
  font-size: var(--t-body);
  line-height: var(--lh-prose);
  color: var(--text-body);
  max-width: 38ch;
}
.section-head__inline-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(86, 185, 154, 0.35);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.section-head__inline-link:hover { border-bottom-color: var(--accent); }

/* In-section sub-header (used to introduce the hire form inside Services).
   Smaller scale, extra top margin to detach from the services grid above. */
.section-head--inset {
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
}
.section-head__title--md {
  font-size: var(--t-display-sm);
}


/* =========================================================================
   PROFILE — dark cascade (minimal redesign for now)
   ========================================================================= */
.profile {
  background-color: var(--canvas);
  position: relative;
  border-top: 1px solid var(--hairline);
}
.profile__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-bottom: clamp(3rem, 2rem + 5vw, 6rem);
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
@media (min-width: 768px) { .profile__stats { grid-template-columns: repeat(3, 1fr); } }

.stat {
  padding: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--rad-xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}
.stat:hover { border-color: var(--hairline-strong); }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);
  font-weight: var(--w-bold);
  line-height: 0.95;
  letter-spacing: var(--tr-display-tight);
  color: var(--text-primary);
  font-feature-settings: "tnum";
}
.stat__suffix { color: var(--accent); margin-left: 0.05em; }
.stat__label {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-muted);
}

.profile__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
}

.profile__body { max-width: 100%; }

/* Accent highlight inside profile text — overrides default <em> italic.
   Used for brand-name / role moments (SoundBetter, Boutique Tones, etc). */
.profile .hl,
.profile__lead .hl,
.profile__paragraphs .hl,
.profile__pullquote .hl {
  color: var(--accent);
  font-style: normal;
  font-weight: var(--w-semibold);
}

/* =========================================================================
   PROFILE — Brand cards (endorsements + partners)
   Staggered scroll reveal + premium hover lift with mint accent transition
   ========================================================================= */
.brands__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
}
@media (min-width: 640px) {
  .brands__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .brands__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
}

/* The card itself — minimal, dark surface, hairline border — compact variant */
.brand-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: clamp(0.875rem, 0.7rem + 0.45vw, 1.15rem) clamp(1rem, 0.8rem + 0.5vw, 1.25rem);
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--rad-lg);
  overflow: hidden;
  height: 100%;                /* fill the parent <li> grid cell */
  text-decoration: none;       /* anchor reset */
  color: inherit;              /* anchor reset */
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  isolation: isolate;
}
.brand-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.brand-card:hover {
  background-color: var(--surface-2);
  border-color: var(--accent);
  transform: translateY(-3px);
}
.brand-card:hover .brand-card__name { color: var(--accent); }

.brand-card__name {
  font-family: var(--font-display);
  font-size: var(--t-body-lg);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  transition: color var(--dur-base) var(--ease-out);
}
.brand-card__role {
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}
.brand-card__tag {
  margin-top: var(--s-1);
  align-self: flex-start;
  padding: 0.15rem 0.5rem;
  font-family: var(--font-body);
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--accent);
  background-color: rgba(86, 185, 154, 0.10);
  border: 1px solid rgba(86, 185, 154, 0.25);
  border-radius: var(--rad-pill);
}
/* Partner variant — slightly less prominent tag */
.brand-card--partner .brand-card__tag {
  color: var(--text-muted);
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--hairline-strong);
}

/* Staggered reveal — IO adds .is-visible, each card uses --i for delay */
.reveal-stagger {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms var(--ease-emphasis),
    transform 700ms var(--ease-emphasis);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal-stagger.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-stagger {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.profile__lead {
  font-family: var(--font-display);
  font-size: var(--t-display-sm);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display-tight);
  color: var(--text-primary);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
  max-width: none;
}
.profile__lead strong { color: var(--accent); font-weight: var(--w-bold); }

/* Multi-column magazine layout on desktop — fills horizontal space without
   sacrificing readability. Each column stays at a comfortable line-length. */
.profile__paragraphs {
  columns: 1;
  column-gap: clamp(2rem, 1rem + 2vw, 3.5rem);
}
@media (min-width: 768px) {
  .profile__paragraphs { columns: 2; }
}
.profile__paragraphs p {
  font-size: var(--t-body);
  line-height: var(--lh-prose);
  color: var(--text-body);
  margin-bottom: var(--s-4);
  break-inside: avoid;
}
.profile__paragraphs p:last-child { margin-bottom: 0; }
.profile__paragraphs strong { color: var(--text-primary); font-weight: var(--w-semibold); }

.profile__highlights-card {
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--rad-xl);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.profile__highlights-title {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}
.profile__highlights-list { display: flex; flex-direction: column; }
.highlight {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--hairline);
}
.highlight:last-child { border-bottom: none; padding-bottom: 0; }
.highlight:first-child { padding-top: 0; }
.highlight__name {
  font-family: var(--font-body);
  font-size: var(--t-body-lg);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-tight);
  color: var(--text-primary);
}
.highlight__role { font-size: var(--t-body-sm); color: var(--text-muted); }


/* =========================================================================
   WORK / DISCOGRAPHY — dark cascade
   ========================================================================= */
.work {
  background-color: var(--canvas-soft);
  border-top: 1px solid var(--hairline);
}
.work__featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--rad-xl);
  margin-bottom: var(--s-12);
}
@media (min-width: 768px) {
  .work__featured { grid-template-columns: minmax(220px, 1fr) 2fr; gap: var(--s-10); align-items: center; }
}
.work__featured-art {
  position: relative;
  aspect-ratio: 1;
  background-color: var(--surface-2);
  border-radius: var(--rad-lg);
  overflow: hidden;
  max-width: 360px;
}
.work__featured-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work__featured-meta { display: flex; flex-direction: column; gap: var(--s-3); }
.work__featured-kicker {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--accent);
}
.work__featured-title {
  font-family: var(--font-display);
  font-size: var(--t-display-sm);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-display-tight);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
.work__featured-artist {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-weight: var(--w-medium);
  color: var(--text-body);
}
.work__featured-stats {
  display: flex;
  gap: var(--s-6);
  flex-wrap: wrap;
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-muted);
}
.work__featured-stats strong { color: var(--text-primary); font-weight: var(--w-bold); }

.work__tracks {
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--rad-xl);
  overflow: hidden;
}
.track {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--s-4);
  padding: var(--s-4) clamp(1rem, 0.75rem + 1vw, 1.5rem);
  border-bottom: 1px solid var(--hairline);
  align-items: center;
  color: var(--text-primary);
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.track:hover { background-color: var(--surface-2); opacity: 1; }
.track:hover .track__title { color: var(--accent); }
.track:last-child { border-bottom: none; }
@media (min-width: 768px) {
  .track { grid-template-columns: 36px 56px 1fr 1fr 110px 80px; }
}
.track__num {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-dim);
  font-feature-settings: "tnum";
}
.track__art {
  width: 56px; height: 56px;
  background-color: var(--surface-2);
  border-radius: var(--rad-sm);
  flex-shrink: 0;
  overflow: hidden;
  display: none;
}
.track__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 768px) { .track__art { display: block; } }
.track__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.track__title {
  font-family: var(--font-body);
  font-size: var(--t-body-lg);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-tight);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.track__artist {
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.track__year {
  display: none;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-muted);
}
@media (min-width: 768px) { .track__year { display: block; } }
.track__pop {
  display: none;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-primary);
  align-items: center;
  gap: var(--s-2);
}
@media (min-width: 768px) { .track__pop { display: flex; } }
.track__pop-bar {
  flex: 1;
  height: 2px;
  background-color: var(--hairline);
  position: relative;
  min-width: 40px;
  border-radius: var(--rad-pill);
}
.track__pop-bar::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--p, 50%);
  background-color: var(--accent);
  border-radius: var(--rad-pill);
}
.track__action {
  display: none;
  justify-self: end;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-primary);
}
@media (min-width: 768px) { .track__action { display: inline; } }

.work__skeleton {
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--rad-xl);
  overflow: hidden;
}
.work__skeleton-row {
  height: 76px;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
}
.work__skeleton-row:last-child { border-bottom: none; }
.work__skeleton-row::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.03) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) { .work__skeleton-row::after { animation: none; } }

.work__cta { margin-top: var(--s-10); display: flex; justify-content: center; }
.work__cta .btn[hidden] { display: none; }


/* =========================================================================
   SERVICES — dark cascade
   ========================================================================= */
.services { background-color: var(--canvas); border-top: 1px solid var(--hairline); }

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-bottom: clamp(2rem, 1.5rem + 3vw, 4rem);
}
@media (min-width: 768px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }

.service {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--rad-xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.service:hover { background-color: var(--surface-2); border-color: var(--hairline-strong); }

.service__num {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--accent);
  font-feature-settings: "tnum";
}
.service__title {
  font-family: var(--font-display);
  font-size: var(--t-lead-lg);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-display-tight);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
.service__copy { font-size: var(--t-body); line-height: var(--lh-prose); color: var(--text-body); }

/* Mobile compaction — pulls each card height down by ~30% so the section
   reads quickly on phones. Desktop keeps the richer breathing room. */
@media (max-width: 767px) {
  .services__grid {
    gap: var(--s-2);
    margin-bottom: var(--s-6);
  }
  .service {
    padding: var(--s-4) var(--s-4) var(--s-5);
    gap: var(--s-2);
    border-radius: var(--rad-lg);
  }
  .service__title {
    font-size: var(--t-lead);
    line-height: var(--lh-tight);
  }
  .service__copy {
    font-size: var(--t-body-sm);
    line-height: var(--lh-snug);
  }
}

.services__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  padding-top: var(--s-4);
}
.services__cta-meta {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-muted);
  margin-left: auto;
}


/* =========================================================================
   TONES — full bleed dark, accent wordmark
   ========================================================================= */
.tones {
  background-color: #000000;
  color: var(--text-primary);
  padding-block: clamp(5rem, 4rem + 6vw, 11rem);
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--hairline);
}
.tones::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(86, 185, 154, 0.18), transparent 70%);
  pointer-events: none;
  z-index: var(--z-below);
}

.tones__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
  text-align: center;
}
.tones__kicker {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  color: var(--text-muted);
  display: inline-flex;
  gap: var(--s-3);
  align-items: center;
}
.tones__kicker .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.4; }
.tones__kicker strong { color: var(--text-primary); font-weight: var(--w-semibold); }

/* Boutique Tones sub-brand takeover — gold (#c19b5a) replaces mint as
   --accent strictly inside this section. The override cascades to every
   descendant (the wordmark dot, the CTA button + glow, the artists chip,
   etc.), so the entire visual mood of Tones reads as "different brand"
   without touching the rest of the site. */
.tones {
  --accent:        #c19b5a;
  --accent-bright: #d4ad6b;
  --accent-deep:   #a3814a;
  --accent-glow:   rgba(193, 155, 90, 0.55);
}

/* Logo stage — 3D perspective container, holds the gold halo behind the
   monogram so we can tilt them together on mouse-move. */
.tones__logo-stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  perspective: 900px;
  transform-style: preserve-3d;
  will-change: transform;
  isolation: isolate;
}
.tones__logo-halo {
  position: absolute;
  inset: -40%;
  /* Pre-blurred soft gradient — no `filter: blur()` so the GPU isn't asked
     to rasterize a huge blurred layer every paint. */
  background:
    radial-gradient(circle at center,
      rgba(193, 155, 90, 0.50) 0%,
      rgba(193, 155, 90, 0.22) 30%,
      rgba(193, 155, 90, 0.05) 55%,
      rgba(193, 155, 90, 0) 75%);
  pointer-events: none;
  z-index: 0;
  /* GSAP sets opacity/scale at runtime; keep hidden initially to avoid flash */
  opacity: 0;
  transform: scale(0.7) translateZ(0);
  will-change: opacity, transform;
}
.tones__logo {
  position: relative;
  display: block;
  height: clamp(80px, 56px + 5vw, 144px);
  width: auto;
  object-fit: contain;
  z-index: 1;
  /* Single drop-shadow keeps it cheap to repaint during the scroll-scrub.
     The gold glow lift is already covered by .tones__logo-halo behind. */
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
  will-change: transform, opacity;
  transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
  .tones__logo-halo { opacity: 0.4; transform: scale(1); }
}

/* Mobile / touch — strip the GPU-expensive bits that were there only to
   support the desktop 3D mouse-tilt (which doesn't run on touch anyway):
   no 3D context, no drop-shadow, smaller and simpler halo. This keeps the
   bloom animation cheap to composite frame-by-frame on integrated mobile
   GPUs, eliminating the scroll hesitation when the section enters viewport. */
@media (hover: none), (max-width: 767px) {
  .tones__logo-stage {
    perspective: none;
    transform-style: flat;
    isolation: auto;
  }
  .tones__logo-halo {
    inset: -20%;
    background: radial-gradient(circle at center,
      rgba(193, 155, 90, 0.32) 0%,
      rgba(193, 155, 90, 0) 70%);
  }
  .tones__logo {
    filter: none;
  }
}

.tones__wordmark {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2.5rem + 8vw, 10rem);
  font-weight: var(--w-bold);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--text-primary);
  margin: 0;
  text-transform: uppercase;
  max-width: 14ch;
}
.tones__wordmark span { color: var(--accent); }

.tones__pitch {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-weight: var(--w-regular);
  line-height: var(--lh-snug);
  color: var(--text-body);
  max-width: 44ch;
}
.tones__pitch strong { color: var(--text-primary); font-weight: var(--w-semibold); }

/* Artists collaborator list — "Official & signature packs" */
.tones__artists {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  width: 100%;
  max-width: 720px;
}
.tones__artists-eyebrow {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  color: var(--accent);
  border: 1px solid rgba(193, 155, 90, 0.30);
  border-radius: var(--rad-pill);
  background-color: rgba(193, 155, 90, 0.06);
}
.tones__artists-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
@media (min-width: 640px) {
  .tones__artists-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5) var(--s-10);
  }
}
.tones__artists-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.tones__artists-list strong {
  font-family: var(--font-display);
  font-size: var(--t-lead-lg);
  font-weight: var(--w-bold);
  color: var(--text-primary);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
}
.tones__artists-list span {
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  color: var(--text-muted);
  letter-spacing: var(--tr-tight);
}
.tones__artists-meta {
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  font-style: italic;
  color: var(--text-dim);
  margin: 0;
}


/* =========================================================================
   ENDORSEMENTS — typographic list, dark
   ========================================================================= */
.endorsements { background-color: var(--canvas); }

.endorsements__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--rad-xl);
  overflow: hidden;
}
@media (min-width: 768px) { .endorsements__list { grid-template-columns: repeat(2, 1fr); } }

.endorsement-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--s-3);
  padding: var(--s-4) clamp(1rem, 0.75rem + 1vw, 1.5rem);
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
  transition: background-color var(--dur-fast) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
}
.endorsement-row:hover { background-color: var(--surface-2); padding-left: clamp(1.25rem, 1rem + 1.25vw, 1.75rem); }
@media (min-width: 768px) {
  .endorsement-row { grid-template-columns: 28px 1fr auto; gap: var(--s-4); }
  .endorsement-row:nth-child(odd) { border-right: 1px solid var(--hairline); }
  .endorsement-row:nth-last-child(2),
  .endorsement-row:last-child { border-bottom: none; }
}
@media (max-width: 767px) { .endorsement-row:last-child { border-bottom: none; } }
.endorsement-row__num {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-dim);
  font-feature-settings: "tnum";
}
.endorsement-row__name {
  font-family: var(--font-body);
  font-size: var(--t-body-lg);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-tight);
  color: var(--text-primary);
}
.endorsement-row__role { font-family: var(--font-body); font-size: var(--t-body-sm); color: var(--text-muted); }


/* =========================================================================
   CONTACT — dark cascade
   ========================================================================= */
.contact { background-color: var(--canvas); border-top: 1px solid var(--hairline); }

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-10);
}
@media (min-width: 1024px) { .contact__grid { grid-template-columns: 1.5fr 1fr; gap: clamp(3rem, 2rem + 4vw, 5rem); } }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--rad-xl);
}
.form__row { display: flex; flex-direction: column; gap: var(--s-2); }
.form__label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-primary);
}
.form__hint { font-weight: var(--w-regular); text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.form__note {
  margin: var(--s-1) 0 0 0;
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}
.form__note strong { color: var(--accent); font-weight: var(--w-semibold); }
.form__input {
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--text-primary);
  background-color: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--rad-md);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.form__input::placeholder { color: var(--text-dim); }
.form__input:focus { outline: none; border-color: var(--accent); background-color: var(--surface-3); }
.form__input:invalid:not(:placeholder-shown) { border-color: var(--accent); }

.form__input--select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23ffffff' d='M6 7.5 0 1.5 1.5 0 6 4.5 10.5 0 12 1.5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.form__input--select option { background-color: var(--surface-2); color: var(--text-primary); }

.form__textarea { font-family: var(--font-body); resize: vertical; min-height: 7rem; }

.form__file {
  padding: 0.5rem 0;
  background: transparent;
  border: none;
  color: var(--text-body);
  font-size: var(--t-body-sm);
}
.form__file::file-selector-button {
  margin-right: var(--s-3);
  padding: 0.5rem 0.875rem;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--rad-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.form__file::file-selector-button:hover { background: var(--text-primary); color: var(--canvas); border-color: var(--text-primary); }

.form__honeypot { position: absolute !important; left: -10000px; top: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__feedback {
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  min-height: 1.5em;
}
.form__feedback.is-success { color: #4ade80; }
.form__feedback.is-error   { color: var(--accent-bright); }
[data-submit].is-loading { opacity: 0.6; pointer-events: none; }

.contact__side { display: flex; flex-direction: column; gap: var(--s-4); }
.contact__card {
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--rad-xl);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.contact__email {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-tight);
  color: var(--text-primary);
  word-break: break-all;
  border-bottom: 1px solid transparent;
  width: max-content;
  max-width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.contact__email:hover { border-bottom-color: var(--accent); color: var(--accent); opacity: 1; }
.contact__studio { font-family: var(--font-body); font-size: var(--t-body-lg); line-height: var(--lh-snug); color: var(--text-body); }
.contact__socials { display: flex; flex-direction: column; }
.contact__socials a {
  display: flex;
  justify-content: space-between;
  padding-block: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  color: var(--text-body);
  border-bottom: 1px solid var(--hairline);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.contact__socials a:last-child { border-bottom: none; }
.contact__socials a:hover { color: var(--accent); padding-left: var(--s-2); opacity: 1; }

/* Alternative-action card (e.g. "Prefer Fiverr?" in the hire-form aside). */
.contact__alt-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-tight);
  color: var(--text-primary);
  border-bottom: 1px solid transparent;
  width: max-content;
  max-width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.contact__alt-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.contact__alt-title {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
.contact__alt-meta {
  margin-top: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

/* Highlight variant — used on the "Even better / reach me right here" card
   inside the hire aside. Subtle mint inflection without screaming. */
.contact__card--highlight {
  background-color: rgba(86, 185, 154, 0.05);
  border-color: rgba(86, 185, 154, 0.30);
}
.contact__card--highlight .eyebrow { color: var(--accent); }


/* =========================================================================
   FOOTER — dark
   ========================================================================= */
.site-footer { background-color: var(--canvas-soft); border-top: 1px solid var(--hairline); }

.site-footer__main {
  padding-top: clamp(3rem, 2.5rem + 3vw, 5rem);
  padding-bottom: var(--s-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-10);
}
@media (min-width: 768px) {
  .site-footer__main { grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s-8); }
}

.site-footer__brand { max-width: 360px; display: flex; flex-direction: column; gap: var(--s-3); }
.site-footer__brand-name {
  font-family: var(--font-display);
  font-size: var(--t-display-sm);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-display-tight);
  color: var(--text-primary);
  line-height: var(--lh-tight);
}
.site-footer__brand-name span { color: var(--text-muted); font-weight: var(--w-regular); }
.site-footer__tagline { font-family: var(--font-body); font-size: var(--t-body-sm); color: var(--text-muted); }

.site-footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-primary);
  margin-bottom: var(--s-3);
}
.site-footer__col ul { display: flex; flex-direction: column; gap: var(--s-2); }
.site-footer__col a {
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  color: var(--text-body);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer__col a:hover { color: var(--accent); opacity: 1; }

.site-footer__bottom {
  border-top: 1px solid var(--hairline);
  padding-block: var(--s-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-muted);
  font-weight: var(--w-medium);
}
.site-footer__bottom strong { color: var(--text-primary); font-weight: var(--w-semibold); }


/* =========================================================================
   GSAP ANIMATIONS — split helpers, flash prevention, 3D tilt context
   ========================================================================= */

/* Letter-clip mask used on hero headline lines.
   overflow:hidden creates the slide-up reveal effect when chars translateY
   from 115% to 0%. Padding/margin offset gives descender clearance without
   altering the visual line spacing. */
.split-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.split-char,
.split-word {
  display: inline-block;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Hide GSAP-animated elements that lack the .reveal class (their CSS already
   sets opacity:0). Without this they'd briefly paint at final state before
   JS wraps them and applies gsap.set() starting positions. */
.gsap-pending .hero__intro,
.gsap-pending .hero__scroll,
.gsap-pending .hero__side > *,
.gsap-pending .hero__headline-line,
.gsap-pending .section-head__title {
  visibility: hidden;
}

/* Brand cards — full 3D context so the rotationX/rotationY tilt feels physical
   rather than flat. Perspective on the grid keeps cards parallel under the
   same projection plane. */
.brands__grid {
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
.brand-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* When GSAP is active, neutralize the CSS transitions that would otherwise
   smooth (and lag) GSAP's frame-by-frame transform/opacity updates. The
   visual lift, color, and border-color hover effects continue to live in
   CSS — only the transform transition is killed so GSAP owns motion. */
html.gsap-active .reveal,
html.gsap-active .reveal-stagger {
  transition: none;
}
html.gsap-active .brand-card {
  transition-property: background-color, border-color;
}
html.gsap-active .brand-card:hover {
  /* GSAP applies its own lift via gsap.quickTo on `y` — kill the CSS lift
     so the two don't fight. Background and border-color hover still apply. */
  transform: none;
}

/* Disable the legacy CSS keyframe reveal on hero headline lines — GSAP now
   owns the per-character cascade. Without this kill, the CSS would re-fade
   the entire line while GSAP is busy choreographing the letters within. */
html.gsap-active .hero__headline-line {
  animation: none;
}


/* =========================================================================
   DISCOGRAPHY — symmetric 4×3 grid of equal cards, artwork-dominant
   ========================================================================= */

.discography__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
@media (min-width: 480px)  { .discography__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .discography__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
@media (min-width: 1440px) { .discography__grid { grid-template-columns: repeat(4, 1fr); } }

/* Base card — full-bleed clickable, dark surface, hairline border */
.track-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--rad-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.track-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.track-card:hover {
  background-color: var(--surface-2);
  border-color: var(--accent);
}

/* When GSAP is in control of transforms, kill the CSS transition on transform
   so it doesn't smooth (lag) the per-frame quickTo updates on hover. */
html.gsap-active .track-card {
  transition-property: background-color, border-color;
}

/* ---- Artwork tile (square, dominant) ---- */
.track-card__art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--canvas);
}
.track-card__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);                /* prevents subpixel edge bleed */
  transition: transform var(--dur-slow) var(--ease-emphasis);
}
.track-card:hover .track-card__art img { transform: scale(1.06); }

/* Subtle dark gradient at the bottom of the artwork for visual depth */
.track-card__art::after {
  content: "";
  position: absolute;
  inset: 50% 0 0 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.45) 100%);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.track-card:hover .track-card__art::after { opacity: 0.9; }

/* ---- Wildcard "POPULAR" badge ---- */
.track-card__badge {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-family: var(--font-body);
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--accent);
  background-color: rgba(86, 185, 154, 0.12);
  border: 1px solid rgba(86, 185, 154, 0.35);
  border-radius: var(--rad-pill);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
}

/* ---- Centered play-icon overlay (revealed on hover) ---- */
.track-card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--accent);
  color: #0a0a0a;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-emphasis);
  z-index: 2;
  box-shadow: 0 12px 32px rgba(86, 185, 154, 0.35);
}
.track-card__play svg {
  margin-left: 3px;        /* nudge the play triangle visually centered */
}
.track-card:hover .track-card__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---- Info block beneath the artwork ---- */
.track-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  flex: 1;
}
.track-card__title {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--text-primary);
  /* Truncate to 2 lines max */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.track-card__artist {
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  /* Truncate to 1 line */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.track-card__year { color: var(--text-dim); }
.track-card__artist-more {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.35rem;
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  color: var(--text-dim);
  border: 1px solid var(--hairline);
  border-radius: var(--rad-pill);
  vertical-align: middle;
}

/* ---- Monthly listeners line — the big mint stat ---- */
.track-card__listeners {
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  color: var(--text-muted);
  font-feature-settings: "tnum";
}
.track-card__listeners strong {
  font-family: var(--font-display);
  font-size: var(--t-lead-lg);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  color: var(--accent);
  line-height: 1;
}

/* ---- Skeleton state (visible until the JSON loads) ---- */
.track-card--skeleton {
  pointer-events: none;
  background-color: var(--surface-1);
  aspect-ratio: 4 / 5;
  animation: track-card-pulse 1.6s var(--ease-out) infinite;
}
@keyframes track-card-pulse {
  0%   { opacity: 0.55; }
  50%  { opacity: 0.85; }
  100% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .track-card--skeleton { animation: none; opacity: 0.7; }
}

/* ---- Empty / error state ---- */
.discography__empty {
  grid-column: 1 / -1;
  padding: clamp(2rem, 1.5rem + 2vw, 4rem);
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--rad-xl);
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--t-body);
}

/* ---- Bottom CTA row ---- */
.discography__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  text-align: center;
}
@media (min-width: 768px) {
  .discography__cta { flex-direction: row; justify-content: center; gap: var(--s-5); }
}
.discography__cta-meta {
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  color: var(--text-dim);
  font-style: italic;
}


/* =========================================================================
   DISCOGRAPHY — mobile list-row layout (<600px)
   Below 600px we drop the square-grid in favour of a Spotify/Apple-Music-
   style row: small artwork thumb on the left, stacked text on the right.
   Halves the section height while keeping every track visible.
   ========================================================================= */
@media (max-width: 599px) {
  .discography__grid {
    gap: var(--s-2);
    perspective: none;          /* no 3D context needed on touch */
  }

  .track-card {
    flex-direction: row;
    align-items: stretch;
    min-height: 96px;
    border-radius: var(--rad-lg);
    transform-style: flat;
    will-change: auto;
  }

  .track-card__art {
    flex: 0 0 96px;
    width: 96px;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .track-card:hover .track-card__art img { transform: scale(1.001); }
  .track-card__art::after { display: none; }   /* no overlay gradient on the thumb */
  .track-card__play { display: none; }         /* no hover state on touch */

  /* Wildcard "POPULAR" badge — shrink and move so it doesn't crowd the thumb */
  .track-card__badge {
    top: 4px;
    left: 4px;
    padding: 0.1rem 0.4rem;
    font-size: 9px;
    letter-spacing: 0.06em;
  }

  .track-card__info {
    flex: 1;
    min-width: 0;               /* allow text truncation inside flex child */
    padding: var(--s-3) var(--s-4);
    gap: 2px;
    justify-content: center;
  }
  .track-card__title {
    font-size: var(--t-body);
    -webkit-line-clamp: 1;
  }
  .track-card__artist {
    font-size: var(--t-caption);
  }
  .track-card__listeners {
    margin-top: 4px;
    padding-top: 0;
    border-top: none;
    gap: 0.3rem;
    font-size: var(--t-caption);
  }
  .track-card__listeners strong {
    font-size: var(--t-body);
  }
  /* Hide the trailing " monthly listeners" label — too long for the row.
     The mint number alone communicates the metric in this compact view. */
  .track-card__listeners span {
    color: var(--text-dim);
  }

  /* Skeleton placeholder also shifts to the row shape so the layout
     doesn't reflow when real cards swap in. */
  .track-card--skeleton {
    aspect-ratio: auto;
    height: 96px;
  }
}