/* ============ OPARÁ — design system ============ */
:root{
  --bg:#0b0b09;
  --bg-2:#12110d;
  --surface:#17150f;
  --surface-2:#211e14;
  --text:#f2f2f2;
  --muted:#a89e8a;
  --warm:#776c68;
  --accent:#f4d240;
  --accent-2:#e0a91c;
  --ink:#171404;
  --hairline:#2e2a1c;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Archivo","Segoe UI",Arial,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px;}
section{padding:88px 0;}

.display{
  font-family:"Archivo Black","Arial Black",Arial,sans-serif;
  font-weight:400;
  letter-spacing:0.01em;
  line-height:0.98;
  text-transform:uppercase;
  text-wrap:balance;
  margin:0;
}
.kicker{
  font-size:0.72rem;font-weight:700;letter-spacing:0.28em;
  text-transform:uppercase;color:var(--accent-2);margin:0 0 14px;
}
.lead{color:var(--muted);line-height:1.75;font-size:1.05rem;max-width:58ch;}

/* ---------- header ---------- */
header.site{
  position:fixed;top:0;left:0;right:0;z-index:90;
  transition:background 0.3s ease, border-color 0.3s ease;
  border-bottom:1px solid transparent;
}
header.site.scrolled{
  background:rgba(11,11,9,0.82);
  backdrop-filter:blur(12px);
  border-color:var(--hairline);
}
.nav{display:flex;align-items:center;gap:16px;max-width:1140px;margin:0 auto;padding:16px 24px;}
.brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  font-family:"Archivo Black",Arial,sans-serif;font-size:1.1rem;letter-spacing:0.03em;
}
.brand .dot{
  width:36px;height:36px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;flex:none;
  transition:transform 0.3s ease;
}
.brand:hover .dot{transform:rotate(180deg);}
.brand .dot svg{width:20px;height:20px;}
nav.menu{margin-left:auto;display:flex;gap:2px;align-items:center;flex-wrap:wrap;}
nav.menu a{
  text-decoration:none;font-size:0.85rem;font-weight:600;color:var(--muted);
  padding:8px 13px;border-radius:8px;transition:color 0.15s, background 0.15s;
}
nav.menu a:hover{color:var(--text);background:var(--surface);}
nav.menu a[aria-current="page"]{color:var(--accent);}
nav.menu a.cta-nav{color:var(--ink);background:var(--accent);font-weight:700;margin-left:6px;}
nav.menu a.cta-nav:hover{background:var(--accent-2);color:var(--ink);}
@media (max-width:840px){
  .nav{flex-wrap:wrap;padding:12px 16px;}
  nav.menu{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
  nav.menu::-webkit-scrollbar{display:none;}
  nav.menu a{white-space:nowrap;}
}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:92vh;display:flex;align-items:flex-end;
  overflow:hidden;padding:0;
}
.hero .bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  animation:kenburns 18s ease-in-out infinite alternate;
  filter:saturate(1.05);
}
@keyframes kenburns{from{transform:scale(1);}to{transform:scale(1.09);}}
.hero .shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(11,11,9,0.35) 0%, rgba(11,11,9,0.15) 40%, rgba(11,11,9,0.92) 88%, var(--bg) 100%);
}
.hero .wrap{position:relative;z-index:2;padding-bottom:120px;padding-top:160px;width:100%;}
.hero h1{font-size:clamp(2.8rem,9vw,6.4rem);}
.hero h1 .hl{color:var(--accent);}
.hero .sub{
  font-size:clamp(1rem,2.2vw,1.2rem);color:rgba(242,242,242,0.85);
  max-width:52ch;margin:22px 0 0;line-height:1.65;
}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;}
.hero.short{min-height:64vh;}
.hero.short .wrap{padding-bottom:90px;}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;border-radius:999px;text-decoration:none;
  font-weight:700;font-size:0.95rem;
  transition:transform 0.15s ease, background 0.15s ease, border-color 0.15s;
}
.btn:hover{transform:translateY(-2px);}
.btn.primary{background:var(--accent);color:var(--ink);}
.btn.primary:hover{background:var(--accent-2);}
.btn.ghost{border:1.5px solid rgba(242,242,242,0.35);color:var(--text);}
.btn.ghost:hover{border-color:var(--accent);}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

/* ---------- marquee ---------- */
.marquee{
  background:var(--accent);color:var(--ink);
  overflow:hidden;padding:16px 0;white-space:nowrap;
  transform:rotate(-1.2deg) scale(1.02);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.marquee .track{
  display:inline-flex;gap:0;
  animation:marquee 26s linear infinite;
}
.marquee span{
  font-family:"Archivo Black",Arial,sans-serif;
  font-size:1.15rem;letter-spacing:0.06em;text-transform:uppercase;
  padding:0 18px;
}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease, transform 0.7s ease;}
.rv.in{opacity:1;transform:none;}
.rv.d1{transition-delay:0.08s;} .rv.d2{transition-delay:0.16s;} .rv.d3{transition-delay:0.24s;}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none;}
  .hero .bg{animation:none;}
  .marquee .track{animation:none;}
  html{scroll-behavior:auto;}
}

/* ---------- stats ---------- */
.stats{background:var(--bg-2);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:64px 0;}
.stats .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:36px 20px;text-align:center;}
.stat b{
  display:block;font-family:"Archivo Black",Arial,sans-serif;font-weight:400;
  font-size:clamp(2.2rem,5vw,3.4rem);color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1;
}
.stat span{
  display:block;font-size:0.78rem;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;margin-top:10px;color:var(--muted);
}

/* ---------- section intro ---------- */
.section-intro{max-width:640px;margin-bottom:48px;}
.section-intro h2{font-size:clamp(1.9rem,4.5vw,3rem);margin-bottom:16px;}
.section-intro p{color:var(--muted);line-height:1.7;margin:0;}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;}
.card{
  background:var(--surface);border:1px solid var(--hairline);border-radius:18px;
  padding:28px 24px;transition:transform 0.2s ease, border-color 0.2s ease;
}
.card:hover{transform:translateY(-4px);border-color:var(--accent);}
.card .ic{
  width:46px;height:46px;border-radius:12px;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.card .ic svg{width:22px;height:22px;stroke:var(--accent);}
.card h3{font-size:1.08rem;margin:0 0 8px;font-weight:700;}
.card p{font-size:0.92rem;color:var(--muted);line-height:1.6;margin:0;}

/* ---------- project tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;}
.tile{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:340px;border-radius:20px;overflow:hidden;text-decoration:none;
  background-size:cover;background-position:center;
  isolation:isolate;
}
.tile::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(11,11,9,0.05) 30%, rgba(11,11,9,0.9) 100%);
  transition:background 0.25s ease;
}
.tile::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:inherit;background-size:cover;background-position:center;
  transition:transform 0.45s ease;
}
.tile:hover::after{transform:scale(1.06);}
.tile > *{position:relative;z-index:2;}
.tile .tag{
  position:absolute;top:20px;left:22px;
  font-size:0.68rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  background:var(--accent);color:var(--ink);
  padding:6px 12px;border-radius:999px;
}
.tile h3{
  font-family:"Archivo Black",Arial,sans-serif;font-weight:400;
  font-size:1.5rem;margin:0;padding:0 22px 6px;text-transform:uppercase;line-height:1.05;
}
.tile p{font-size:0.88rem;color:rgba(242,242,242,0.75);line-height:1.55;margin:0;padding:0 22px 20px;}
.tile .go{
  padding:0 22px 22px;font-weight:700;font-size:0.85rem;color:var(--accent);
  letter-spacing:0.08em;text-transform:uppercase;
}
.tile:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}

/* ---------- galleries ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.gallery figure{
  margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/3;
  background:var(--surface);
}
.gallery img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.5s ease, filter 0.4s ease;
}
.gallery figure:hover img{transform:scale(1.07);filter:saturate(1.15);}
.gallery figure.tall{aspect-ratio:3/4;grid-row:span 1;}

/* ---------- video embed ---------- */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;}
.video-embed{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--hairline);}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------- quote band ---------- */
.quote-band{
  background:linear-gradient(150deg, var(--accent) 0%, var(--accent-2) 100%);
  color:var(--ink);padding:80px 0;
}
.quote-band blockquote{
  margin:0;max-width:900px;
  font-family:"Archivo Black",Arial,sans-serif;
  font-size:clamp(1.4rem,3.6vw,2.4rem);
  line-height:1.25;text-transform:uppercase;
}
.quote-band cite{
  display:block;margin-top:22px;font-family:"Archivo",Arial,sans-serif;
  font-style:normal;font-weight:700;font-size:0.8rem;
  letter-spacing:0.2em;text-transform:uppercase;opacity:0.7;
}

/* ---------- album grid & timeline ---------- */
.disc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;}
.album{
  display:block;text-decoration:none;border-radius:16px;overflow:hidden;
  background:var(--surface);border:1px solid var(--hairline);
  transition:transform 0.2s ease, border-color 0.2s ease;
}
.album:hover{transform:translateY(-4px);border-color:var(--accent);}
.album img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.album .meta{padding:13px 15px 15px;}
.album .title{font-weight:700;font-size:0.94rem;line-height:1.3;}
.album .artist{font-size:0.78rem;color:var(--muted);margin-top:3px;}

.timeline{border-left:2px solid var(--hairline);padding-left:30px;max-width:660px;}
.trelease{position:relative;padding-bottom:26px;}
.trelease::before{
  content:"";position:absolute;left:-36px;top:7px;width:10px;height:10px;
  border-radius:50%;background:var(--accent);
}
.trelease .year{font-size:0.72rem;font-weight:700;letter-spacing:0.16em;color:var(--accent-2);}
.trelease .name{font-weight:700;font-size:1rem;margin-top:2px;}
.trelease .work{font-size:0.88rem;color:var(--muted);}

/* ---------- artist cards ---------- */
.artists{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;}
.artist{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--surface);border:1px solid var(--hairline);border-radius:20px;
  overflow:hidden;transition:transform 0.2s ease, border-color 0.2s ease;
}
.artist:hover{transform:translateY(-4px);border-color:var(--accent);}
.artist img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.artist .meta{padding:18px 20px 20px;}
.artist h3{
  font-family:"Archivo Black",Arial,sans-serif;font-weight:400;
  font-size:1.2rem;margin:0 0 6px;text-transform:uppercase;
}
.artist p{font-size:0.86rem;color:var(--muted);line-height:1.55;margin:0;}
.artist .go{margin-top:12px;font-weight:700;font-size:0.78rem;color:var(--accent);letter-spacing:0.1em;text-transform:uppercase;}

/* ---------- contact boxes ---------- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;}
.cbox{background:var(--surface);border:1px solid var(--hairline);border-radius:18px;padding:26px 24px;}
.cbox h3{font-size:0.7rem;font-weight:700;letter-spacing:0.24em;text-transform:uppercase;color:var(--accent-2);margin:0 0 12px;}
.cbox p,.cbox a{font-size:1rem;line-height:1.6;margin:0;color:var(--text);}
.cbox a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--accent);}
.cbox .sub{color:var(--muted);font-size:0.86rem;margin-top:4px;}

.social-row{display:flex;gap:10px;flex-wrap:wrap;}
.social-row a{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--hairline);
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:border-color 0.15s, transform 0.15s;
}
.social-row a:hover{border-color:var(--accent);transform:translateY(-2px);}
.social-row svg{width:20px;height:20px;}

/* ---------- waves & footer ---------- */
.wave-top{height:70px;margin-bottom:-1px;}
.wave-top svg{width:100%;height:100%;display:block;}

footer.site{
  border-top:1px solid var(--hairline);
  padding:56px 0 60px;background:var(--bg-2);
}
footer.site .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;}
@media (max-width:720px){footer.site .cols{grid-template-columns:1fr;}}
footer.site h4{
  font-size:0.7rem;font-weight:700;letter-spacing:0.24em;text-transform:uppercase;
  color:var(--accent-2);margin:0 0 14px;
}
footer.site p, footer.site a{color:var(--muted);font-size:0.9rem;line-height:1.8;margin:0;}
footer.site a{text-decoration:none;}
footer.site a:hover{color:var(--accent);}
footer.site .brandline{
  font-family:"Archivo Black",Arial,sans-serif;font-size:1.3rem;color:var(--text);
  text-transform:uppercase;margin-bottom:10px;
}
footer.site .fine{margin-top:44px;padding-top:22px;border-top:1px solid var(--hairline);
  font-size:0.78rem;color:var(--warm);text-align:center;}