/* Friends Sound — styles */
@font-face{font-family:"Big Shoulders";src:url(fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Big Shoulders";src:url(fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#F4F7FA; --ink:#0A1F44; --muted:#52668A; --line:#C9D6E6;
  --cobalt:#1F3FD1; --cobalt-line:#4F6FE3;
  --sky:#8FCBFF; --sky-soft:#BFE0FF; --ice:#E3EEFA;
  --display:"Big Shoulders",Impact,"Arial Narrow",sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Archivo",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6}
img{display:block;max-width:100%}
a{color:var(--cobalt)} a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:50;background:#fff;padding:10px 14px}
.label{margin:0;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cobalt)}
.muted{color:var(--muted)}
.h-sm{margin:0;font:900 26px/1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.h-lg{margin:0;font:900 34px/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.h-xl{margin:0;font:900 clamp(28px,3vw,36px)/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.h-xxl{margin:0;font:900 clamp(36px,4vw,46px)/.95 var(--display);text-transform:uppercase}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border:0;background:var(--cobalt);color:#fff;font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--ink);color:#fff}

/* placeholder when no photo yet */
.ph{background:var(--sky);display:flex;align-items:flex-end;padding:12px}
.ph span{font:600 10px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:.5}

/* header */
.top{border-bottom:1px solid var(--line);background:rgba(244,247,250,.94);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.top-in{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{font:900 22px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.nav{display:flex;gap:28px;flex-wrap:wrap}
.nav a{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:12px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--cobalt);color:var(--cobalt)}

/* hero */
.hero{background:var(--cobalt);color:#fff;overflow:hidden}
.hero-in{display:flex;flex-wrap:wrap;gap:32px 48px;align-items:center;padding-top:40px;padding-bottom:40px}
.hero-copy{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:14px}
.kicker-serif{margin:0;font:italic 18px/1.2 var(--serif);color:var(--sky-soft)}
.hero-title{margin:0;font:900 clamp(32px,3.6vw,46px)/.95 var(--display);letter-spacing:.01em;text-transform:uppercase}
.sky{color:var(--sky)}
.hero-lead{margin:0;max-width:440px;font-size:15px;color:var(--ice)}
.hero-photo-link{flex:0 1 340px;min-width:0;display:flex;flex-direction:column;gap:8px;text-decoration:none}
.hero-photo{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero-cap{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sky-soft)}
.hero-photo-link:hover .hero-cap{color:#fff}
.marquee{border-top:1px solid var(--cobalt-line);overflow:hidden;padding:10px 0;white-space:nowrap}
.marquee-track{display:inline-block;font:700 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--sky-soft);animation:marq 70s linear infinite}
.marquee .dot{margin:0 16px;color:var(--sky)}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* statement */
.statement{display:flex;flex-wrap:wrap;gap:16px 40px;padding-top:56px;padding-bottom:56px}
.statement .label{flex:0 0 140px;padding-top:8px}
.statement-text{flex:1 1 520px;min-width:0;max-width:760px;margin:0;font:400 clamp(20px,2vw,24px)/1.35 var(--serif)}
.statement-text em{color:var(--cobalt)}

/* roster */
.roster{border-top:1px solid var(--line);padding:56px 0 88px}
.roster-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 24px;margin-bottom:32px}
.count{font:italic 400 22px var(--serif);color:var(--cobalt);text-transform:none;letter-spacing:0}
.filters{display:flex;flex-wrap:wrap;gap:22px}
.filter{min-height:40px;padding:0;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;font:700 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.filter:hover{color:var(--ink)}
.filter[aria-pressed="true"]{color:var(--cobalt);border-bottom-color:var(--cobalt)}

.roster-body{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.roster-list{flex:999 1 560px;min-width:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.row{border-bottom:1px solid var(--line)}
.row a{display:flex;align-items:baseline;gap:20px;padding:11px 0;color:var(--ink);text-decoration:none}
.row-num{flex:0 0 22px;font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.row-name{flex:0 1 auto;font:700 22px/1.15 var(--display);letter-spacing:.04em;text-transform:uppercase;transition:color .15s}
.row-tag{flex:1 1 160px;text-align:right;font:italic 16px/1.3 var(--serif);color:var(--muted)}
.row.is-active .row-name,.row a:hover .row-name,.row a:focus-visible .row-name{color:var(--cobalt)}
.preview{flex:0 1 260px;min-width:0;position:sticky;top:84px;display:flex;flex-direction:column;gap:8px}
.preview-photo{margin-bottom:6px}
.preview-img{width:100%;height:auto;max-height:380px;object-fit:cover}
.preview-img.ph{aspect-ratio:4/5;height:auto}
.preview-name{margin:0;font:900 22px/1.05 var(--display);letter-spacing:.03em;text-transform:uppercase}
@media (max-width:860px){.preview{display:none}}

/* artist cards */
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:32px 20px}
.grid-small{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));max-width:720px}
.card a{display:flex;flex-direction:column;gap:4px;color:var(--ink);text-decoration:none}
.card-photo{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ice);margin-bottom:10px}
.card-img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card a:hover .card-img{transform:scale(1.03)}
.card-cat{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cobalt)}
.card-name{font:900 22px/1.05 var(--display);letter-spacing:.02em;text-transform:uppercase;transition:color .15s}
.card a:hover .card-name{color:var(--cobalt)}
.card-tag{font:italic 16px/1.25 var(--serif);color:var(--muted)}
@media (prefers-reduced-motion:reduce){.card-img{transition:none}.card a:hover .card-img{transform:none}}

/* cta */
.cta{background:var(--ice);border-top:1px solid var(--line)}
.cta-in{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between;padding-top:56px;padding-bottom:56px}
.cta-title{margin:0;font:900 clamp(32px,3.6vw,42px)/1 var(--display);text-transform:uppercase}
.cta-side{flex:0 1 460px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.cta-side p{margin:0;font-size:15px;color:var(--muted)}

/* artist page */
.a-main{padding-top:32px;padding-bottom:72px;display:flex;flex-direction:column;gap:24px}
.back{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-decoration:none;align-self:flex-start}
.back:hover{color:var(--cobalt)}
.a-grid{display:flex;flex-wrap:wrap;gap:40px 56px;align-items:flex-start}
.a-photo-wrap{flex:0 1 420px;min-width:0;width:100%}
.a-photo{width:100%;height:auto;max-height:560px;object-fit:cover}
.a-photo.ph{aspect-ratio:4/5}
.a-info{flex:1 1 380px;min-width:0;max-width:600px;display:flex;flex-direction:column;gap:10px;padding-top:8px}
.a-name{margin:0;font:900 clamp(38px,4.4vw,56px)/.95 var(--display);letter-spacing:.01em;text-transform:uppercase;overflow-wrap:break-word}
.a-tag{margin:0;font:italic 22px/1.25 var(--serif);color:var(--cobalt)}
.bio-text{margin-top:14px;padding-top:20px;border-top:1px solid var(--line)}
.bio-text p{margin:0 0 1em;font-size:16px;line-height:1.7;color:#22385E}
.a-videos{padding-bottom:72px;display:flex;flex-direction:column;gap:20px}
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:20px}
.video{aspect-ratio:16/9;background:var(--ice)}
.video iframe{width:100%;height:100%;border:0;display:block}
.also{border-top:1px solid var(--line);padding:56px 0 72px}
.also .h-sm{margin-bottom:24px}

/* contact */
.c-head{padding-top:56px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.c-body{display:flex;flex-wrap:wrap;gap:48px 64px;padding-top:48px;padding-bottom:88px}
.c-info{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:32px}
.c-block{display:flex;flex-direction:column;gap:6px}
.c-big{margin:0;font:400 22px/1.25 var(--serif);color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
a.c-big:hover{color:var(--cobalt)}
address{font-style:normal;font-size:15px;line-height:1.6;color:var(--muted)}
.c-form{flex:1 1 520px;min-width:0;background:#fff;border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;gap:24px}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px 24px}
.f{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.f.wide{grid-column:1/-1}
.opt{font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);font-size:12px}
.f input,.f select,.f textarea{font:400 15px/1.4 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:8px 0;min-height:40px;border-radius:0;letter-spacing:0;text-transform:none}
.f textarea{resize:vertical;border:1px solid var(--ink);padding:10px}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--cobalt)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--muted)}
.consent input{width:16px;height:16px;margin-top:2px;flex:0 0 auto;accent-color:var(--cobalt)}
.c-form .btn{align-self:flex-start}
.hp{position:absolute;left:-9999px}

/* simple pages */
.simple{padding-top:72px;padding-bottom:96px;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.lead{margin:0;font:400 22px/1.35 var(--serif)}
.prose{max-width:680px}.prose h2{font:900 20px/1.1 var(--display);letter-spacing:.04em;text-transform:uppercase;margin:28px 0 6px}.prose p{margin:0 0 10px}

/* footer */
.foot{border-top:1px solid var(--line)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 24px;padding-top:28px;padding-bottom:32px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.foot-nav{display:flex;flex-wrap:wrap;gap:24px}.foot-nav a{color:var(--ink);text-decoration:none}.foot-nav a:hover{color:var(--cobalt)}

@media (max-width:640px){
  .wrap{padding-left:20px;padding-right:20px}
  .nav{gap:20px}
  .hero-in{padding-top:28px;padding-bottom:28px}
  .hero-photo-link{display:none}
  .a-photo{max-height:420px}
  .row a{gap:12px;flex-wrap:wrap}
  .row-name{font-size:19px}
  .row-tag{flex-basis:100%;text-align:left;padding-left:34px;font-size:14px;margin-top:-6px}
  .statement{padding-top:40px;padding-bottom:40px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
  .grid-small{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 10px}
  .grid-small .card-name{font-size:15px}
  .card-name{font-size:18px}.card-tag{font-size:14px}
  .c-form{padding:20px}
}