@font-face{ font-family:'Anton'; src:url('../fonts/Anton.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../fonts/Inter-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../fonts/Inter-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../fonts/Inter-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../fonts/Inter-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../fonts/Inter-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Lora'; src:url('../fonts/Lora-Italic.woff2') format('woff2'); font-weight:400 600; font-style:italic; font-display:swap; }

:root{
  --bg:#0c0c0b;
  --bg-soft:#141310;
  --card:#1b1916;
  --card-line:#332f28;
  --red:#c1444a;
  --gold:#c89a5f;
  --white:#f4f2ee;
  --gray:#a19c93;
  --gray-dim:#6f6a62;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter', sans-serif;
  background:var(--bg);
  color:var(--white);
  line-height:1.5;
}
a{ color:inherit; }

.topnav{
  position:sticky; top:0; z-index:50;
  background:rgba(12,12,11,0.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--card-line);
  padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
}
.topnav .brand{ font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase; text-decoration:none; transition:color 0.15s; }
.topnav .brand:hover{ color:var(--gold); }
.topnav .links{ display:flex; gap:18px; flex-wrap:wrap; }
.topnav .links a{
  font-size:11px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--gray); text-decoration:none; white-space:nowrap;
}
.topnav .links a:hover{ color:var(--gold); }

.hero{
  max-width:1180px; margin:0 auto; padding:64px 24px 56px;
  display:flex; align-items:flex-end; gap:48px; justify-content:space-between;
}
.hero-text{ flex:1; min-width:280px; }
.hero .kicker{
  font-weight:600; font-size:12px; letter-spacing:2.6px; text-transform:uppercase; color:var(--gold);
  margin-bottom:14px;
}
.hero h1{
  font-family:'Anton', sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(48px, 7.4vw, 92px); line-height:0.94; letter-spacing:0.5px;
}
.hero h1 .accent{ color:var(--red); }
.hero .lead{
  font-family:'Lora', serif; font-style:italic; font-weight:400;
  font-size:clamp(15px,1.9vw,19px); color:#dcd9d2; max-width:520px; margin-top:20px; line-height:1.6;
}
.hero .stat{ margin-top:26px; display:flex; gap:30px; flex-wrap:wrap; }
.hero .stat .n{ font-family:'Anton',sans-serif; font-size:30px; color:var(--white); line-height:1; }
.hero .stat .l{ font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--gray-dim); margin-top:6px; font-weight:600;}

.hero-photo{
  flex:none; width:270px; position:relative;
}
.hero-photo img{
  width:100%; height:340px; object-fit:cover; object-position:38% 12%;
  border:1px solid var(--card-line); display:block; filter:saturate(0.92);
}
.hero-photo .tag{
  position:absolute; bottom:14px; left:14px; right:14px;
  font-size:9px; letter-spacing:1.6px; text-transform:uppercase; color:var(--gold); font-weight:600;
}
.hero-photo::before{
  content:''; position:absolute; top:-10px; left:-10px; right:14px; bottom:14px;
  border:1px solid var(--red); z-index:-1;
}

@media (max-width:820px){
  .hero{ flex-direction:column-reverse; align-items:flex-start; gap:32px; }
  .hero-photo{ width:200px; }
  .hero-photo img{ height:250px; }
}

.instrument-section{ max-width:1180px; margin:0 auto; padding:44px 24px 10px; scroll-margin-top:70px; }
.instrument-hdr{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--card-line); padding-bottom:14px; margin-bottom:26px;
}
.instrument-title{
  font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(24px,3.6vw,34px); color:var(--red); letter-spacing:0.3px;
}
.instrument-count{
  font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--gray-dim); font-weight:600;
  white-space:nowrap;
}

.m-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:22px; padding-bottom:20px; }
.m-card{ background:var(--card); border:1px solid var(--card-line); }
.m-photo{
  width:100%; aspect-ratio:1/1; position:relative; overflow:hidden; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center;
}
.m-photo img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.m-mono{
  font-family:'Anton',sans-serif; font-size:15px; color:var(--gray-dim); letter-spacing:1px;
  z-index:1; opacity:0; padding:8px 14px; border:1px solid var(--card-line); border-radius:100px;
}
.m-photo.noimg .m-mono{ opacity:1; }
.m-icon{ width:56px; height:56px; opacity:0.85; }
.m-icon img{ width:100%; height:100%; object-fit:contain; position:static; }

.m-body{ padding:16px 16px 18px; }
.m-name{ font-weight:700; font-size:14.5px; color:var(--white); }
.m-credits{ margin-top:9px; display:flex; flex-wrap:wrap; gap:5px; }
.chip{
  font-size:9.5px; letter-spacing:0.3px; color:var(--gray); font-weight:500;
  background:var(--bg-soft); border:1px solid var(--card-line); padding:3px 7px;
}

footer{
  margin-top:70px; border-top:1px solid var(--card-line);
  padding:46px 24px 40px; max-width:980px; margin-left:auto; margin-right:auto;
}
footer .f-kicker{
  font-weight:600; font-size:11px; letter-spacing:2.4px; text-transform:uppercase; color:var(--gold);
  margin-bottom:10px;
}
footer h2{ font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(28px,4vw,42px); text-transform:uppercase; }
footer .f-rows{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
footer .f-row{ display:flex; gap:20px; align-items:baseline; flex-wrap:wrap; }
footer .f-row .k{
  width:170px; font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--gray-dim); font-weight:600;
}
footer .f-row .v{ font-size:15px; color:var(--white); font-weight:500; }
footer .f-row .v a{ text-decoration:none; }
footer .f-row .v a:hover{ color:var(--gold); }
footer .f-bottom{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--card-line);
  font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--gray-dim); font-weight:500;
}

@media (max-width:640px){
  .topnav .links{ display:none; }
  footer .f-row .k{ width:100%; }
}