@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Roboto+Slab:ital,wght@0,700;0,800;0,900;1,900&display=swap');

:root{
  --ink:#243f7b;
  --paper:#f8f6ef;
  --red:#e94045;
  --muted:#667293;
  --line:#243f7b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
.site-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:2px solid var(--ink);position:sticky;top:0;background:rgba(248,246,239,.95);backdrop-filter:blur(10px);z-index:10}
.logo{font-family:'Roboto Slab',serif;font-size:24px;font-weight:900;letter-spacing:-.04em}.logo span{color:var(--red)}
.logo em{font-style:italic}
nav{display:flex;gap:28px;align-items:center;font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.nav-cta{background:var(--ink);color:var(--paper);padding:12px 16px}
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 76px);align-items:center;gap:5vw;padding:7vw 5vw}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;margin:0 0 18px}
h1,h2{font-family:'Roboto Slab',serif;text-transform:uppercase;font-weight:900;line-height:.94;margin:0}
h1{font-size:clamp(54px,6.8vw,105px);letter-spacing:-.045em}
h1 em,h2 em{font-style:normal;color:var(--red)}
h2{font-size:clamp(48px,6vw,88px)}
.hero-text{font-size:18px;line-height:1.6;max-width:620px;margin:30px 0}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.button{display:inline-block;padding:15px 22px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:12px;border:2px solid var(--ink)}
.button.primary{background:var(--red);color:var(--paper)}
.button.secondary{background:transparent}
.button.big{font-size:14px;padding:19px 25px}
.video-wrap,.video-large{position:relative;background:#000;overflow:hidden}
.video-wrap{aspect-ratio:16/9;box-shadow:14px 14px 0 var(--red)}
.video-large{aspect-ratio:16/9;max-width:1100px;margin:auto}
iframe{width:100%;height:100%;border:0}
.media-artwork{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);gap:30px;align-items:start;max-width:1100px;margin:36px auto 0}
.brand-artwork,.gig-poster{display:block;width:100%;height:auto}
.brand-artwork{border:2px solid var(--paper)}
.gig-poster{border:2px solid var(--red)}
.media-socials{display:flex;align-items:end;justify-content:space-between;gap:30px;max-width:1100px;margin:36px auto 0;padding:30px;border:2px solid var(--paper)}
.media-socials .eyebrow{margin-bottom:12px}
.media-socials h3{font-family:'Roboto Slab',serif;font-size:clamp(25px,3vw,42px);font-weight:900;line-height:1.05;margin:0}
.social-actions{display:flex;flex-wrap:wrap;gap:12px}
.media-socials .button.secondary{border-color:var(--paper);color:var(--paper)}
.strip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;padding:2px;background:var(--ink)}
.strip span{min-width:0;background:var(--paper);font-family:'Roboto Slab',serif;font-weight:900;font-size:clamp(11px,1.1vw,17px);padding:17px 8px;text-align:center;white-space:nowrap}
.strip .more,.artist-grid .more{color:var(--red)}
.section{padding:9vw 5vw}
.about{display:grid;grid-template-columns:1fr 1fr;gap:8vw}
.copy{font-size:20px;line-height:1.65;max-width:650px}
.dark{background:var(--ink);color:var(--paper)}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:45px}
.text-link{font-weight:800;text-transform:uppercase;font-size:12px;border-bottom:2px solid var(--red);padding-bottom:5px}
.artists{border-bottom:2px solid var(--ink)}
.artist-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:55px;border-top:2px solid var(--ink);border-left:2px solid var(--ink)}
.artist-grid div{font-family:'Roboto Slab',serif;font-weight:900;text-transform:uppercase;font-size:25px;padding:25px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.muted{color:var(--muted);font-size:13px;margin-top:22px}
.gig-placeholder{margin-top:40px;border:2px dashed #999;padding:35px;display:flex;flex-direction:column;gap:8px}
.gig-placeholder span{color:var(--muted)}
.book{background:var(--ink);color:var(--paper);padding:8vw 5vw;display:grid;grid-template-columns:1fr 1fr;gap:8vw}
.book-copy{font-size:20px;line-height:1.5;max-width:600px}
.small{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.book-copy .small{display:block;margin-top:16px}
footer{background:var(--red);color:var(--paper);padding:30px 5vw;display:flex;align-items:center;justify-content:space-between;gap:25px;flex-wrap:wrap}
footer .logo span{color:var(--ink)}
.socials{display:flex;gap:20px;font-size:12px;font-weight:700;text-transform:uppercase}
footer p{margin:0;color:rgba(248,246,239,.8);font-size:12px}
@media(max-width:850px){
  nav a:not(.nav-cta){display:none}
  .hero,.about,.book{grid-template-columns:1fr}
  .site-header{height:64px;padding:0 20px}
  .logo{font-size:20px}
  nav{gap:0}
  .nav-cta{padding:10px 12px;font-size:11px}
  .hero{min-height:0;gap:42px;padding:48px 20px 38px}
  .hero .eyebrow{margin-bottom:14px}
  h1{font-size:clamp(48px,14vw,72px);line-height:.96}
  h2{font-size:clamp(39px,11.5vw,55px)}
  .hero-text{font-size:16px;line-height:1.55;margin:24px 0}
  .actions{gap:10px}
  .actions .button{width:100%;text-align:center}
  .video-wrap{box-shadow:8px 8px 0 var(--red)}
  .section{padding:68px 20px}
  .about{gap:30px}
  .copy{font-size:17px;line-height:1.6}
  .artist-grid{grid-template-columns:repeat(2,1fr)}
  .artist-grid{margin-top:34px}
  .artist-grid div{font-size:19px;padding:19px 14px}
  .section-heading{align-items:start;flex-direction:column}
  .section-heading{gap:16px;margin-bottom:30px}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip span{font-size:16px;padding:12px 10px}
  .media-artwork{grid-template-columns:1fr;gap:20px;max-width:520px;margin-top:24px}
  .gig-poster{max-width:360px;margin:auto}
  .media-socials{align-items:start;flex-direction:column;gap:24px;margin-top:24px;padding:24px 20px}
  .media-socials h3{font-size:29px}
  .social-actions{width:100%;flex-direction:column}
  .social-actions .button{width:100%;text-align:center}
  .book{gap:30px;padding:68px 20px}
  .book-copy{font-size:17px}
  .book .button.big{width:100%;padding:17px 12px;text-align:center}
  footer{align-items:flex-start;flex-direction:column;padding:28px 20px;gap:18px}
  .socials{flex-wrap:wrap;gap:12px 18px}
}
@media(min-width:851px) and (max-width:1100px){
  .strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:380px){
  .site-header{padding:0 16px}
  .logo{font-size:18px}
  .nav-cta{padding:9px 10px;font-size:10px}
  .hero,.section,.book{padding-left:16px;padding-right:16px}
  .book .button.big{font-size:12px}
}