@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;1,500&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#0a0a0a;
  --ink-2:#141414;
  --paper:#f5f3ee;
  --muted:#8a8a86;
  --muted-2:#5f5f5b;
  --line: rgba(245,243,238,0.10);
  --line-strong: rgba(245,243,238,0.18);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* film-grain texture, fixed, purely ambient */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* soft vignette for depth instead of flat black */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,0.05), transparent 60%);
}

header, section, footer{ position:relative; z-index:2; }

/* scroll reveal */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }
.reveal-delay-5{ transition-delay:.4s; }
.reveal-delay-6{ transition-delay:.48s; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- header / nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,10,0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  max-width:1180px; margin:0 auto;
}
.nav-logo{ display:flex; align-items:center; gap:10px; }
.nav-logo img{ height:34px; width:auto; }
.nav-logo span{
  font-family:'Playfair Display', serif;
  font-weight:600;
  font-size:18px;
  letter-spacing:0.01em;
}
.nav-links{ display:flex; gap:34px; }
.nav-links a{
  position:relative;
  font-size:13.5px;
  letter-spacing:0.03em;
  color:var(--muted);
  transition:color .25s ease;
  padding-bottom:3px;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:var(--paper);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover, .nav-links a.active{ color:var(--paper); }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); transform-origin:left; }
.nav-toggle{ display:none; }

@media (max-width:760px){
  .nav-links{
    position:fixed; inset:0 0 0 0;
    padding-top:76px;
    background:#0a0a0a;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:28px;
    z-index:200;
    isolation:isolate;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ font-size:16px; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px;
    background:none; border:none; cursor:pointer; padding:6px;
    position:relative; z-index:201;
  }
  .nav-toggle span{ width:22px; height:1px; background:var(--paper); }
}

/* ---------- eyebrow / divider ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:20px;
}
.eyebrow .rule{ width:26px; height:1px; background:var(--line-strong); }

.divider{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin:56px 0;
}
.divider .line{ flex:1; max-width:160px; height:1px; background:var(--line); }
.divider .star{ font-size:13px; color:var(--paper); }

/* ---------- typography ---------- */
h1,h2,h3{
  font-family:'Playfair Display', serif;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-0.01em;
  margin:0;
}
h1{ font-size:clamp(38px,6vw,64px); }
h2{ font-size:clamp(26px,4vw,36px); }
h3{ font-size:20px; font-weight:600; }
h1 em, h2 em{ font-style:italic; font-weight:500; }

p{ margin:0; }
.muted{ color:var(--muted); }
.lead{ font-size:16px; line-height:1.75; color:var(--muted); max-width:520px; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding: clamp(90px,12vw,140px) 0 clamp(70px,9vw,100px);
  text-align:center;
  overflow:hidden;
}
.hero-cat-bg{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-46%);
  height:120%;
  width:auto;
  opacity:0.05;
  z-index:0;
  pointer-events:none;
  filter:blur(0.5px);
}
.hero-spotlight{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,20%), rgba(255,255,255,0.06), transparent 60%);
  transition: background .3s ease;
}
.hero > .container{ position:relative; z-index:2; }
.hero .cat-mark{ width:64px; margin:0 auto 28px; opacity:0.9; }
.hero h1{ margin-bottom:22px; }
.hero .lead{ margin:0 auto; text-align:center; }

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero .eyebrow{ animation:fadeUp .8s cubic-bezier(.16,1,.3,1) both; }
.hero h1{ animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .1s both; }
.hero .lead{ animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .2s both; }
.hero .btn{ animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .3s both; }

/* ---------- sections ---------- */
section{ padding: clamp(50px,7vw,90px) 0; }
.section-head{ max-width:560px; margin-bottom:48px; }

/* ---------- stat strip ---------- */
.stat-strip{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
@media (max-width:760px){ .stat-strip{ grid-template-columns:1fr; } }
.stat{
  padding:44px 32px;
  text-align:center;
  border-right:1px solid var(--line);
}
.stat:last-child{ border-right:none; }
.stat .num-big{
  font-family:'Playfair Display', serif;
  font-weight:600;
  font-size:clamp(40px,5vw,58px);
  line-height:1;
  margin-bottom:10px;
}
.stat .label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted);
}

/* ---------- cards / grid ---------- */
.grid-3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:44px;
}
@media (max-width:860px){ .grid-3{ grid-template-columns:1fr; gap:40px; } }

.card{
  padding:28px;
  border-radius:14px;
  border:1px solid transparent;
  transition: border-color .35s ease, background .35s ease, transform .35s ease;
}
.card:hover{
  border-color:var(--line-strong);
  background:var(--ink-2);
  transform:translateY(-4px);
}

.num{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display', serif; font-weight:600; font-size:16px;
  margin-bottom:18px;
  transition: border-color .35s ease, transform .35s ease;
}
.card:hover .num{ border-color:var(--paper); transform:scale(1.08); }

.pill{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; letter-spacing:0.03em;
  border:1px solid var(--line-strong);
  padding:5px 10px; border-radius:100px;
  color:var(--muted);
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.pill:hover{ border-color:var(--paper); color:var(--paper); background:rgba(245,243,238,0.06); }
.pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

/* ---------- ticker ---------- */
.ticker-shell{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:20px 0; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.ticker-track{ display:flex; width:max-content; animation:scroll 34s linear infinite; }
.ticker-track:hover{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .ticker-track{ animation:none; } .ticker-shell{ overflow-x:auto; } }
.ticker-track span.ticker-item{
  display:flex; align-items:center; gap:20px;
  padding:0 20px;
  cursor:default;
}
.ticker-track span.ticker-item::after{ content:"✦"; font-size:8px; color:var(--paper); flex-shrink:0; }
.ticker-swap{
  position:relative;
  width:170px;
  height:22px;
  flex-shrink:0;
}
.ticker-label{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.08em;
  color:var(--muted); white-space:nowrap;
  transition:opacity .3s cubic-bezier(.16,1,.3,1);
}
.ticker-item:hover .ticker-label{ opacity:0; }
.ticker-logo{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s cubic-bezier(.16,1,.3,1);
}
.ticker-item:hover .ticker-logo{ opacity:1; }
.ticker-logo img, .ticker-logo svg{ height:20px; width:auto; max-width:170px; display:block; }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- artist cards ---------- */
.artist-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--line); border:1px solid var(--line);
}
@media (max-width:860px){ .artist-grid{ grid-template-columns:1fr; } }
.artist-card{
  background:var(--ink); padding:34px 28px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center;
  transition:background .35s ease, transform .35s ease;
  position:relative;
}
.artist-card:hover{ background:var(--ink-2); transform:translateY(-3px); }
.artist-avatar{
  width:200px; height:200px; border-radius:50%;
  border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display', serif; font-weight:600; font-size:32px;
  margin:0 auto 18px;
  background: linear-gradient(155deg, rgba(245,243,238,0.08), transparent 70%);
  transition: border-color .35s ease, transform .35s ease;
  overflow:hidden;
  flex-shrink:0;
}
.artist-card:hover .artist-avatar{ border-color:var(--paper); transform:scale(1.04); }
.artist-avatar img{
  width:100%; height:100%; object-fit:cover;
  object-position:center 22%;
  filter:grayscale(1) contrast(1.05);
  transition:filter .5s cubic-bezier(.16,1,.3,1);
}
.artist-card:hover .artist-avatar img{ filter:grayscale(0) contrast(1); }
.artist-genre{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
}

/* ---------- contact ---------- */
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
}
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }
.contact-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.contact-row .k{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.contact-row .v{ font-size:14.5px; text-align:right; }
.contact-row a:hover{ color:var(--muted); }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--paper); color:var(--paper);
  padding:13px 24px; border-radius:100px;
  font-size:13.5px; letter-spacing:0.03em;
  transition: background .25s ease, color .25s ease;
}
.btn:hover{ background:var(--paper); color:var(--ink); }

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:36px 0;
  text-align:center;
}
footer .cat-mark{ width:26px; margin:0 auto 14px; opacity:0.7; }
footer p{ font-size:12px; color:var(--muted-2); letter-spacing:0.02em; }