/* SPEARFISHER — black one-page site. Quiet type, full-bleed reel, compact sections. */
:root{--bg:#050505;--bg2:#0e0e0e;--fg:#F2EFE9;--mut:#8E8A82;--line:rgba(242,239,233,.12);--sans:'Poppins',system-ui,sans-serif;--serif:'Source Serif 4',Georgia,serif;--pad:clamp(18px,4vw,56px);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font:300 17px/1.7 var(--serif);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.lbl{display:block;margin:0 0 22px;font:300 11px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--mut)}
/* header */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:24px var(--pad);transition:background .4s}
header.solid{background:linear-gradient(rgba(5,5,5,.92),rgba(5,5,5,0))}
header .wm{width:clamp(140px,15vw,200px)}
header nav{display:flex;gap:28px}
header nav a{font:300 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#d8d4cc;padding:8px 0;border-bottom:1px solid transparent}
header nav a:hover,header nav a:focus-visible{border-bottom-color:var(--fg);color:var(--fg);outline:none}
/* hero */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#000;padding:0;max-width:none;margin:0}
.hero .reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.05) 35%,rgba(0,0,0,.1) 60%,rgba(0,0,0,.85));pointer-events:none}
.hero .in{position:absolute;z-index:2;left:var(--pad);bottom:clamp(36px,7vh,80px)}
.hero h1{margin:0;font:300 clamp(30px,4.4vw,66px)/1.08 var(--serif);letter-spacing:-.01em}
/* sections */
section{padding:clamp(56px,6vw,84px) var(--pad);max-width:1340px;margin:0 auto}
/* about */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start;max-width:none}
.about figure{margin:0}.about figure img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.lead{font-size:clamp(20px,1.8vw,26px);line-height:1.45;margin:0 0 18px}
.press{margin:28px 0 22px;padding:0 0 0 18px;border-left:1px solid var(--fg)}
.press p{font-style:italic;font-size:1.3em;line-height:1.4;margin:0 0 8px}
.press cite{font:300 11px/1.4 var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.more-bio summary{cursor:pointer;font:300 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;padding:12px 0;border-top:1px solid var(--line);list-style:none}
.more-bio summary::-webkit-details-marker{display:none}.more-bio summary:after{content:" +"}.more-bio[open] summary:after{content:" –"}
.more-bio p{font-size:15.5px;color:#d8d4cc}
/* watch */
.feat{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,40px)}
.feat figure{margin:0}.feat video{width:100%;aspect-ratio:2.39/1;background:#000;display:block}
.feat figcaption,.card{font-family:var(--sans)}
.feat figcaption{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0 0;gap:12px}
.feat b{font-weight:400;font-size:15px}.feat span,.card small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,18px);max-width:1000px;margin:clamp(22px,2.4vw,32px) 0 clamp(22px,2.4vw,32px)}
.card img{width:100%;aspect-ratio:2/3;object-fit:cover;opacity:.86;transition:opacity .3s}
.card:hover img{opacity:1}.card b{display:block;font-weight:400;font-size:12px;line-height:1.3;margin-top:8px}.card small{display:block;margin-top:4px;font-size:10px}
.row{display:grid;grid-template-columns:140px 1fr;gap:20px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.row .lbl{margin:0}
.names{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px 24px;font:300 14px/1.5 var(--sans);color:#d8d4cc}.names li{min-width:0}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px}
.logos img{height:22px;width:auto;max-width:96px;object-fit:contain;filter:grayscale(1) brightness(1.8);opacity:.42}
/* brand films */
.lbl.sub{margin:0 0 14px}
.ads{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px);margin:0 0 clamp(22px,2.4vw,32px)}
.ad{background:none;border:0;padding:0;color:inherit;text-align:left;cursor:pointer;font-family:var(--sans)}
.ad .th{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#000}
.ad img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .3s,transform .6s}
.ad:hover img{opacity:1;transform:scale(1.03)}
.ad .pl{position:absolute;left:12px;bottom:12px;width:34px;height:34px}.ad .pl svg{width:13px}
.ad b{display:block;font-weight:400;font-size:12px;margin-top:8px}
.lb{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:4vw}
.lb[hidden]{display:none}
.lb .fr{width:min(1100px,92vw)}.lb .fr.tall{width:min(420px,80vw)}
.lb video{width:100%;max-height:84vh;display:block;background:#000}
.lb .x{position:absolute;top:18px;right:22px;background:none;border:0;color:var(--fg);font-size:34px;line-height:1;cursor:pointer}
/* listen */
.listen{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,64px);align-items:start}
.top{margin:0;padding:0;list-style:none;font-family:var(--sans)}
.top li{border-top:1px solid var(--line)}.top li:last-child{border-bottom:1px solid var(--line)}
.trk{display:flex;align-items:center;gap:16px;width:100%;padding:12px 0;background:none;border:0;color:inherit;text-align:left;cursor:pointer;font-family:inherit}
.trk .n{font-size:11px;color:var(--mut);width:20px;flex:none}
.trk .tt{flex:1;min-width:0}.trk b{display:block;font-weight:400;font-size:15px}.trk small{display:block;font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk .plays{font-size:12px;color:#cfcbc3;white-space:nowrap}
.pb{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}.pb svg{width:11px;fill:var(--fg)}
.trk:hover .pb,.top li.open .pb{background:var(--fg)}.trk:hover .pb svg,.top li.open .pb svg{fill:#050505}
.emb iframe{display:block;width:100%;border:0;border-radius:12px;margin:0 0 12px}
.disco{display:flex;align-items:center;gap:16px;padding:18px;background:var(--bg2);border:1px solid var(--line);font-family:var(--sans)}
.disco:hover{border-color:var(--mut)}
.pl{flex:none;width:44px;height:44px;border-radius:50%;background:var(--fg);display:grid;place-items:center}.pl svg{width:16px;fill:#050505}
.disco b{display:block;font-weight:400;font-size:15px}.disco small{display:block;font-size:12px;color:var(--mut)}
.dlist{list-style:none;margin:12px 0 0;padding:0;font:300 13px/1.4 var(--sans);color:#cfcbc3}
.dlist li{border-top:1px solid var(--line)}.dlist a{display:block;padding:10px 0}.dlist a:hover{color:var(--fg)}
/* albums */
.albums{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.6vw,22px);font-family:var(--sans)}
.alb img{width:100%;aspect-ratio:1;object-fit:cover}.alb b{display:block;font-weight:400;font-size:13px;margin:10px 0 8px}
.buy{width:100%;background:none;border:1px solid var(--line);color:var(--fg);font:300 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:10px 0;cursor:pointer}
.buy:hover,.buy.on{border-color:var(--fg)}.buy.on{background:var(--fg);color:#050505}
/* contact */
.contact .big{font-size:clamp(22px,3vw,40px);border-bottom:1px solid var(--line)}
.follow{display:flex;gap:26px;margin-top:22px;font:300 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#d8d4cc}
footer{display:flex;align-items:center;gap:14px;padding:30px var(--pad);border-top:1px solid var(--line)}footer img{width:22px}footer .lbl{margin:0}
.menu{display:none;background:none;border:0;padding:8px;cursor:pointer;order:2}
.menu span{display:block;width:22px;height:1px;background:var(--fg);margin:6px 0;transition:transform .3s}
@media (max-width:900px){
 header{padding:16px 18px;flex-wrap:wrap}
 .menu{display:block}
 header nav{display:none;order:3;width:100%;flex-direction:column;gap:0;padding:10px 0 6px}
 header.open{background:rgba(5,5,5,.97)}header.open nav{display:flex}
 header nav a{padding:14px 0;border-bottom:1px solid var(--line)}
 header.open .menu span:first-child{transform:translateY(3.5px) rotate(45deg)}header.open .menu span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
 body{font-size:16px}
 section{padding:56px 18px}
 .hero{height:78svh;min-height:420px}
 .about,.feat,.listen{grid-template-columns:1fr}
 .about figure img{aspect-ratio:4/3}
 .cards{grid-template-columns:repeat(4,1fr);max-width:none}
 .ads{grid-template-columns:repeat(2,1fr)}
 .albums{grid-template-columns:repeat(3,1fr)}
 .row{grid-template-columns:1fr;gap:10px}
 .names{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;font-size:13px}
 .logos{justify-content:center;gap:22px 16px}.logos img{flex:0 0 calc((100% - 32px)/3);max-width:none;height:20px;min-width:0;width:0}
 .trk .plays{font-size:11px}
 .contact .big{font-size:22px;word-break:break-all}
 .follow{flex-wrap:wrap;gap:16px 22px}
}
@media (max-width:520px){.cards{grid-template-columns:repeat(3,1fr)}.albums{grid-template-columns:repeat(2,1fr)}.trk small{max-width:52vw}}

/* on-site playlist */
.pl-list{font-family:var(--sans)}
.pt{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:10px 0;background:none;border:0;border-top:1px solid var(--line);color:inherit;text-align:left;cursor:pointer;font-family:inherit}
.pt img{width:44px;height:44px;object-fit:cover;flex:none}
.pt .pp{position:absolute;left:0;top:10px;width:44px;height:44px;display:grid;place-items:center;background:rgba(0,0,0,.35);opacity:0;transition:opacity .2s}
.pt .pp:before{content:"";border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff;margin-left:3px}
.pt:hover .pp,.pt.on .pp{opacity:1}
.pt.playing .pp:before{border:0;width:10px;height:14px;margin:0;background:linear-gradient(90deg,#fff 0 35%,transparent 35% 65%,#fff 65%)}
.pt .tt{flex:1;min-width:0}.pt b{display:block;font-weight:400;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt small{display:block;font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt .tm{font-size:12px;color:#cfcbc3;white-space:nowrap}
.pt .bar{position:absolute;left:58px;right:0;bottom:0;height:1px;background:transparent}.pt .bar i{display:block;height:100%;width:0;background:var(--fg)}
.pt.on b{color:#fff}
.sec{border-top:1px solid var(--line)}
.sec summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.sec summary::-webkit-details-marker{display:none}.sec summary span:after{content:"  +";color:var(--mut)}.sec[open] summary span:after{content:"  –"}
.sec summary small{font-size:11px;letter-spacing:.1em;color:var(--mut);text-transform:none}
.sec .pt{padding-left:0}
.disco-link{display:block;padding:14px 0;border-top:1px solid var(--line);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.disco-link:hover{color:var(--fg)}
.listen>div,.about>div,.feat>figure{min-width:0}

/* listen: full width, both lists share the playlist row look */
.listen>div+div{margin-top:clamp(24px,3vw,40px)}
.sp .emb iframe{display:block;width:100%;border:0;border-radius:12px;margin:0 0 12px}
.sp .pt .tm{min-width:90px;text-align:right}
/* albums: Buy appears on hover / tap */
.alb{outline:none;position:relative}
.alb .buy{position:absolute;top:8px;right:8px;width:auto;max-width:calc(100% - 16px);line-height:1.3;padding:7px 10px;font-size:10px;letter-spacing:.16em;background:rgba(5,5,5,.72);border-color:rgba(255,255,255,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;pointer-events:none}
.alb:hover .buy,.alb:focus-within .buy{opacity:1;transform:none;pointer-events:auto}
.alb .buy.on{background:var(--fg);color:#050505;border-color:var(--fg)}
.alb b{margin-bottom:0}
/* video lightbox for embeds */
.lb .vf{position:relative;width:100%;aspect-ratio:16/9;background:#000}.lb .vf iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* artist names open a bio popup */
.art{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.art:hover,.art:focus-visible{color:#fff;border-bottom-color:rgba(255,255,255,.5);outline:none}
.lb .fr.bio{width:min(760px,92vw)}
.ab{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,40px);align-items:center;background:#0b0b0b;border:1px solid var(--line);padding:clamp(16px,2.4vw,28px)}
.ab img,.ab .ini{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:#161616}
.ab .ini{display:grid;place-items:center;font:300 48px/1 var(--sans);letter-spacing:.1em;color:#555}
.ab small{display:block;font:300 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.ab h3{font:400 clamp(22px,2.6vw,30px)/1.15 var(--sans);margin:0 0 14px}
.ab p{font:300 14px/1.7 var(--sans);color:#cfcac2;margin:0}
@media (max-width:620px){.ab{grid-template-columns:1fr}.ab img,.ab .ini{aspect-ratio:1;max-height:48vh}}

/* portfolio sits under Listen; credits lists get their own quiet section */
#portfolio .cards{margin-top:0}
.credits{padding-top:clamp(28px,3vw,44px)}

/* portfolio: trailers & brand films use the same 16:9 tile, play button in the corner */
#portfolio .cards,#portfolio .ads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px clamp(12px,1.4vw,18px);max-width:none;margin:0 0 clamp(36px,4vw,56px)}
#portfolio .ad{display:block;min-width:0}
#portfolio .ad img{aspect-ratio:auto}
#portfolio .ad b{font-size:14px;margin-top:12px;line-height:1.3}
#portfolio .ad small{display:block;margin-top:5px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
#portfolio .ad .pl{transition:transform .3s}
#portfolio .ad:hover .pl{transform:scale(1.1)}
@media (max-width:900px){#portfolio .cards,#portfolio .ads{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}#portfolio .ad b{font-size:13px}}

/* keep rows even on every screen */
[data-artists]{grid-template-columns:repeat(5,minmax(0,1fr))!important}
@media (max-width:900px){[data-artists]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.logos{display:grid!important;grid-template-columns:repeat(9,minmax(0,1fr));gap:22px 20px;align-items:center;justify-items:center}
.logos img{width:100%;max-width:96px;height:22px;min-width:0;flex:none}
@media (max-width:900px){.logos{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:620px){.logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 16px}.logos img{height:20px;max-width:none}}
/* trailers + portfolio read as one block */
#watch{padding-bottom:clamp(14px,1.6vw,22px)}
#portfolio{padding-top:clamp(14px,1.6vw,22px)}

/* playlist and Spotify list sit close together */
.listen{gap:clamp(14px,1.8vw,24px)!important}

/* tighter gaps between Portfolio, Listen and Albums */
#portfolio{padding-bottom:clamp(10px,1.4vw,20px)}
#portfolio .ads{margin-bottom:0}
#listen{padding-top:clamp(28px,3vw,40px);padding-bottom:clamp(10px,1.4vw,20px)}
#albums{padding-top:clamp(28px,3vw,40px)}

/* softer play buttons: dimmer than the brand logos */
.ad .pl,#portfolio .ad .pl{background:rgba(200,198,194,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ad .pl svg{fill:#f2f0ec}

/* contact form */
.cf{display:grid;gap:16px;max-width:760px;font-family:var(--sans);margin-top:6px}
.cf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cf label{display:grid;gap:8px}.cf label span{font:300 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mut)}
.cf input,.cf textarea{width:100%;background:transparent;border:1px solid var(--line);color:var(--fg);font:300 15px/1.5 var(--sans);padding:12px 14px;border-radius:0;outline:none;transition:border-color .2s}
.cf input:focus,.cf textarea:focus{border-color:#8a857c}.cf textarea{resize:vertical;min-height:120px}
.cf-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cf button{background:var(--fg);color:#050505;border:0;padding:13px 22px;font:400 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;cursor:pointer}
.cf-note{font-size:12px;color:var(--mut)}.cf-note.err{color:#d98c7a}
.em-line{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:26px 0 0;font-family:var(--sans)}
.em-line .lbl{margin:0}.em{font-size:15px;color:#d8d4cc;user-select:all}
.copy{background:none;border:1px solid var(--line);color:var(--fg);padding:7px 12px;font:300 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;cursor:pointer}
.copy.on{border-color:var(--fg)}
@media (max-width:620px){.cf-row{grid-template-columns:1fr}}

/* headings a touch larger and easier to see */
h2.lbl{font-size:13px;letter-spacing:.34em;color:#a8a39a}
h3.lbl,.lbl.sub{font-size:12px;color:#9a958c}
/* contact: centred and a little larger */
#contact{text-align:center}
#contact .cf{margin:10px auto 0;max-width:820px;text-align:left}
#contact .cf input,#contact .cf textarea{font-size:16px;padding:14px 16px}
#contact .cf label span{font-size:11px}
#contact .cf-foot{justify-content:center}
#contact .cf button{padding:15px 28px;font-size:12px}
#contact .em-line{justify-content:center}
#contact .em{font-size:17px}
#contact .follow{justify-content:center}

#credits .row{grid-template-columns:200px 1fr}
@media (max-width:900px){#credits .row{grid-template-columns:1fr}}

/* footer: name, social links, copyright */
footer{flex-direction:column;justify-content:center;text-align:center;gap:18px;padding:44px var(--pad) 40px}
footer img.fwm{width:auto;height:18px;opacity:.9}
footer .follow{justify-content:center;margin:0;flex-wrap:wrap}
footer .lbl{font-size:10px}
@media (max-width:620px){footer .follow{display:grid;grid-template-columns:repeat(2,auto);gap:16px 34px;justify-content:center}}

/* listen reads as one player */
.listen{gap:0!important}
.listen>div+div{margin-top:0}
.listen>div+div .lbl.sub{margin:16px 0 8px}
.listen>div:first-child .pl-list{margin-bottom:0}

/* album cover actions: Listen + Buy over the art */
.alb .cv{position:relative;display:block}
.alb .acts{position:absolute;top:8px;right:8px;display:flex;gap:6px;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;pointer-events:none}
.alb:hover .acts,.alb:focus-within .acts{opacity:1;transform:none;pointer-events:auto}
.alb .act{font:300 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--fg);padding:7px 10px;background:rgba(5,5,5,.72);border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.alb .act:hover{background:var(--fg);color:#050505;border-color:var(--fg)}
@media (hover:none){.alb .acts{opacity:1;transform:none;pointer-events:auto}}
/* about: more photos */
.more-ph .gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.gph{padding:0;border:0;background:none;cursor:pointer;display:block;overflow:hidden}
.gph img{width:100%;aspect-ratio:1;object-fit:cover;display:block;opacity:.85;transition:opacity .3s,transform .5s}
.gph:hover img{opacity:1;transform:scale(1.03)}
.lb .fr.ph{width:auto;max-width:92vw}.lb .fr.ph img{max-width:92vw;max-height:86vh;display:block;margin:auto}
@media (max-width:620px){.more-ph .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* a little more breathing room between sections */
section{padding-top:clamp(60px,6.5vw,96px);padding-bottom:clamp(60px,6.5vw,96px)}
#watch{padding-bottom:clamp(14px,1.6vw,22px)}
#portfolio{padding-top:clamp(14px,1.6vw,22px);padding-bottom:clamp(40px,4.5vw,64px)}
#listen{padding-top:clamp(40px,4.5vw,64px);padding-bottom:clamp(40px,4.5vw,64px)}
#albums{padding-top:clamp(40px,4.5vw,64px)}
@media (max-width:620px){section{padding-top:60px;padding-bottom:60px}#watch{padding-bottom:16px}#portfolio{padding-top:16px;padding-bottom:44px}#listen,#albums{padding-top:44px}#listen{padding-bottom:44px}}

/* films: two scores, an even row of two */
#portfolio .films{grid-template-columns:repeat(2,minmax(0,1fr))}

/* brand logos: soft grey, brand color on hover */
.logos .lg{display:block;width:100%;max-width:96px;height:22px;background:#d6d3ce;opacity:.5;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;transition:background-color .35s,opacity .35s}
.logos .lg:hover{background:var(--c);opacity:1}
@media (max-width:620px){.logos .lg{height:20px;max-width:none}}
/* thin lines between sections */
main>section+section{border-top:1px solid rgba(255,255,255,.09)}
#portfolio{border-top:0!important}
/* credits: narrower and quieter */
#credits{max-width:1120px}
#credits .row{grid-template-columns:150px 1fr;padding:10px 0;gap:16px}
#credits .names{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px 20px;font-size:13px}#credits .names li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#credits .logos{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 22px}
#credits .logos .lg{height:19px;max-width:84px}
@media (max-width:900px){#credits .row{grid-template-columns:1fr}#credits .names{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){#credits .logos{grid-template-columns:repeat(3,minmax(0,1fr))}#credits .logos .lg{height:18px}}
/* album buttons: bottom left */
.alb .acts{top:auto;bottom:8px;right:auto;left:8px;transform:translateY(4px)}

/* Nov 8: centered headings, side-by-side trailers, centered credits, bigger brands, lighter play buttons */
h2.lbl,h3.lbl,.lbl.sub{text-align:center}
@media (min-width:901px){.feat{grid-template-columns:1fr 1fr!important}}
#credits .row{grid-template-columns:1fr!important;gap:14px;padding:18px 0;justify-items:center}
#credits .row>.lbl{text-align:center}
#credits .names{width:100%;text-align:center}
#credits .logos{width:100%;grid-template-columns:repeat(6,minmax(0,1fr));gap:30px 34px}
#credits .logos .lg{height:30px;max-width:130px}
@media (max-width:900px){#credits .logos{grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 20px}#credits .logos .lg{height:24px}}
@media (max-width:620px){#credits .logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 18px}#credits .logos .lg{height:26px}}
.ad .pl,#portfolio .ad .pl{background:rgba(240,238,234,.2)!important;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* featured trailers live inside Portfolio > Trailers */
#portfolio .feat{margin-bottom:clamp(26px,3vw,40px)}
#portfolio{padding-top:clamp(52px,5.2vw,76px)!important}
@media (max-width:620px){#portfolio{padding-top:48px!important}}
@media (max-width:900px){#portfolio .feat{grid-template-columns:1fr!important;margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad))}#portfolio .feat figcaption{padding-left:var(--pad);padding-right:var(--pad)}}
@media (max-width:620px){#portfolio .feat{margin-left:-18px;margin-right:-18px}#portfolio .feat figcaption{padding-left:18px;padding-right:18px}}
/* headshot: trimmed top/bottom; height matched to the bio column by JS */
.about figure img{aspect-ratio:1/1;object-position:50% 38%}
@media (max-width:900px){.about figure img{aspect-ratio:4/3;height:auto!important}}
/* clean "pages": every section fills at least one screen with its content centered vertically,
   so each menu jump lands on a tidy full page (desktop and phone) */
main>section:not(.hero){min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
main>section:not(.hero)>*{width:100%}
#portfolio{justify-content:flex-start}
/* credits lines up with every other section; only its content is narrower */
#credits{max-width:1340px!important}
#credits>.row{max-width:1000px;margin-left:auto;margin-right:auto}

/* featured trailers grow on hover like the tiles; titles brighten on hover everywhere */
.feat .vw{overflow:hidden}
.feat video{transition:transform .5s ease}
.feat figure:hover video{transform:scale(1.03)}
.feat figcaption b,.ad b,.card b{transition:color .3s}
.feat figure:hover figcaption b,.ad:hover b,.card:hover b{color:#fff}
.ad b,.card b{color:#cfcbc4}
.feat figcaption b{color:#d8d4cc}
/* titles only under the two featured trailers; cards are image-only */
#portfolio .ad b,#portfolio .ad small{display:none}
/* tighter rhythm: drop the full-screen sections, keep even spacing */
main>section:not(.hero){min-height:0}
section:not(.hero){padding-top:clamp(52px,5.2vw,76px);padding-bottom:clamp(52px,5.2vw,76px)}
@media (max-width:620px){main>section:not(.hero){padding-top:48px!important;padding-bottom:48px!important}}
main>section:not(.hero){padding-top:clamp(48px,4.4vw,64px)!important;padding-bottom:clamp(48px,4.4vw,64px)!important}@media (max-width:620px){main>section:not(.hero){padding-top:44px!important;padding-bottom:44px!important}}
#portfolio{border-top:1px solid rgba(255,255,255,.09)!important}

/* albums now sit inside Listen, just under the Spotify list */
.alb-wrap{margin-top:clamp(26px,2.6vw,36px)}
.alb .cv img{filter:brightness(.68) saturate(.9);transition:filter .35s,box-shadow .35s,transform .35s}
.alb:hover .cv img,.alb:focus-within .cv img{filter:none;box-shadow:0 0 28px rgba(255,240,220,.22),0 0 2px rgba(255,255,255,.5);transform:translateY(-2px)}
.alb b{color:#bdb8b0;transition:color .3s}.alb:hover b,.alb:focus-within b{color:#fff}
@media (hover:none){.alb .acts{opacity:0;pointer-events:none}.alb:focus-within .acts{opacity:1;transform:none;pointer-events:auto}}
#albums.alb-wrap{padding:0!important;border:0!important;max-width:none}
/* albums: muted at rest, full color + slight grow on hover/tap (no glow) */
.alb .cv{overflow:hidden}
.alb .cv img{filter:grayscale(.85) brightness(.72)}
.alb:hover .cv img,.alb:focus-within .cv img{filter:none;box-shadow:none;transform:scale(1.03)}
/* featured trailers behave like plain players: no hover grow */
.feat figure:hover video{transform:none}
.feat figure:hover figcaption b{color:#d8d4cc}
/* album actions: cover splits into two big halves, Listen (left) / Buy (right); hovered half lights up */
.alb .acts{inset:0!important;top:0!important;left:0!important;right:0!important;bottom:0!important;display:grid;grid-template-columns:1fr 1fr;gap:0;transform:none!important}
.alb .act{display:flex;align-items:center;justify-content:center;padding:0;border:0;background:rgba(5,5,5,.38);backdrop-filter:none;-webkit-backdrop-filter:none;font-size:11px;letter-spacing:.24em;color:#fff;transition:background .2s,color .2s}
.alb .act+.act{border-left:1px solid rgba(255,255,255,.25)}
.alb .act:hover,.alb .act:focus-visible{background:rgba(242,239,233,.86);color:#050505;outline:none}
.alb .acts{z-index:2}
/* trailer + brand tiles: a bit more lift in brightness on hover */
#portfolio .ad img{transition:opacity .35s,transform .35s,filter .35s}
#portfolio .ad:hover img{opacity:1;filter:brightness(1.18)}
/* brand logos: use the full width with roomier spacing */
#credits>.row:last-child{max-width:none}
#credits .logos{gap:36px clamp(28px,4vw,64px)}
@media (max-width:620px){#credits .logos{gap:28px 22px}}

/* brand logos v2 (real artwork): grey at rest, true colors on hover */
.logos .lg2{position:relative;display:flex;align-items:center;justify-content:center;height:46px;width:100%}
.logos .lg2 img{display:block;width:calc(var(--w) * 1.15);max-width:100%;max-height:40px;object-fit:contain;transition:opacity .35s}
.logos .lg2 .m{opacity:.75}
.logos .lg2 .c{position:absolute;opacity:0}
.logos .lg2:hover .m{opacity:0}.logos .lg2:hover .c{opacity:1}
@media (max-width:620px){.logos .lg2{height:38px}.logos .lg2 img{width:calc(var(--w) * .9);max-height:32px}}
.logos .lg2{height:56px}.logos .lg2 img{width:calc(var(--w) * 1.5);max-height:50px}@media (max-width:620px){.logos .lg2{height:42px}.logos .lg2 img{width:calc(var(--w) * 1.05);max-height:36px}}
/* spacing polish */
#portfolio .feat{margin-bottom:clamp(20px,2.2vw,30px);gap:clamp(16px,2.4vw,32px)}
.feat figcaption{padding-top:10px}
#portfolio .lbl.sub{margin-bottom:14px}
#portfolio .ads,#portfolio .cards{margin-bottom:0}
#portfolio .cards+.lbl.sub{margin-top:clamp(28px,3vw,40px)}
.alb-wrap .lbl.sub{margin-bottom:14px}
#credits .row{padding:16px 0}
@media (max-width:620px){
 .em-line{flex-direction:column;align-items:center;gap:8px;text-align:center}
 .em{font-size:14px;word-break:break-all}
 #portfolio .feat{gap:18px}
 .feat figcaption{padding:8px 18px 0}
 .about figure{margin-bottom:6px}
}
#credits{border-top:0!important;padding-top:clamp(28px,3vw,40px)!important}#contact{padding-bottom:0!important}
.logos .lg2 img{max-height:var(--h,50px)}@media (max-width:620px){.logos .lg2 img{max-height:var(--hm,36px)}}
.logos .lg2 img{height:auto!important;max-width:100%!important;flex:none}
.logos .lg2 img{width:calc(var(--w) * 1.2);max-height:var(--h,40px)}@media (max-width:620px){.logos .lg2 img{width:calc(var(--w) * .85);max-height:var(--hm,28px)}}

/* brands row same width as the other credit rows */
#credits>.row:last-child{max-width:1000px}
/* My Boy play count */
.pt .tpc{flex:none;font-size:11px;color:var(--mut);margin-right:14px;white-space:nowrap}
/* albums as a dropdown, styled like the playlist sections */
#albums.alb-wrap{margin-top:0}
#albums .albums{padding:14px 0 6px}
/* album buttons back to small Listen / Buy chips, bottom left */
.alb .acts{inset:auto!important;top:auto!important;right:auto!important;left:8px!important;bottom:8px!important;display:flex;gap:6px}
.alb .act{display:inline-block;padding:7px 10px;border:1px solid rgba(255,255,255,.55);background:rgba(5,5,5,.72);font-size:10px;letter-spacing:.16em}
.alb .act+.act{border-left:1px solid rgba(255,255,255,.55)}
.alb .act:hover,.alb .act:focus-visible{background:var(--fg);color:#050505;border-color:var(--fg)}
/* brands: keep logos inside their cells, calmer size */
.logos .lg2{min-width:0;overflow:visible}
.logos .lg2 img{width:calc(var(--w) * 1.0);max-height:var(--h,34px)}
#credits .logos{gap:30px 28px}
@media (max-width:620px){.logos .lg2 img{width:calc(var(--w) * .8);max-height:var(--hm,26px)}#credits .logos{gap:24px 16px}}
/* albums dropdown uses the same type as the playlist rows */
#albums summary{font-family:var(--sans)}
#albums summary small{font-family:var(--sans)}
/* featured trailer titles: centered, snug under the players */
.feat figcaption{justify-content:center;text-align:center;padding:8px 0 0!important}
.feat figure{display:flex;flex-direction:column}

/* trailer credits: hidden until "Credits" is clicked */
.crd{margin-top:6px;text-align:center;font-family:var(--sans)}
.crd summary{list-style:none;cursor:pointer;display:inline-block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);padding:4px 0}
.crd summary::-webkit-details-marker{display:none}.crd summary:after{content:" +"}.crd[open] summary:after{content:" –"}
.crd summary:hover{color:var(--fg)}
.crd dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:10px auto 0;max-width:460px;text-align:left;font-size:12px;line-height:1.4}
.crd dt{color:var(--mut);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding-top:2px}
.crd dd{margin:0;color:#d8d4cc}
@media (max-width:620px){.crd dl{padding:0 18px;grid-template-columns:1fr;gap:2px}.crd dd{margin-bottom:8px}}
/* brand logos: tap to colorize on phones too */
.logos .lg2:focus .m,.logos .lg2:active .m{opacity:0}.logos .lg2:focus .c,.logos .lg2:active .c{opacity:1}.logos .lg2{outline:none}
.crd.lbc{margin-top:10px}.crd.lbc dl{max-width:520px}

/* bigger popup player */
.lb .fr{width:min(1400px,94vw)}.lb .fr.tall{width:min(460px,86vw)}
.lb .fr video{max-height:80vh;width:100%;background:#000}
.lb{overflow-y:auto}
/* featured trailers: whole poster is the play target */
.feat .vw{position:relative;cursor:pointer}
.feat .pl.big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;background:rgba(240,238,234,.2);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.feat .pl.big svg{width:20px;fill:#f2efe9}
.feat .vw:hover .pl.big{background:rgba(240,238,234,.35)}
/* 12 collaborators: two even rows of six, 3 across on tablets, 2 on phones */
[data-artists]{grid-template-columns:repeat(6,minmax(0,1fr))!important}
@media (max-width:900px){[data-artists]{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:620px){[data-artists]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
[data-artists]{grid-template-columns:repeat(7,minmax(0,1fr))!important}@media (max-width:900px){[data-artists]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.lb{background:rgba(5,5,5,.96)!important}

/* Thinspace book note in the Albums dropdown */
.book-note{font:300 14px/1.6 var(--sans);color:#cfcbc4;margin:6px 0 16px;max-width:760px}
.book-note b{font-weight:500;color:var(--fg)}
.book-note a{color:var(--fg);border-bottom:1px solid rgba(255,255,255,.35);white-space:nowrap}
.book-note a:hover{border-bottom-color:var(--fg)}
/* Washington Post quote: more presence */
.press p{font-size:clamp(22px,2vw,28px)!important;line-height:1.35}
.press cite{font-size:12px!important;letter-spacing:.2em;color:#d8d4cc!important}
.press cite:first-line{font-weight:500}
.press cite .wp{display:block;font:400 15px/1.3 var(--serif);letter-spacing:.04em;text-transform:none;color:var(--fg);margin-bottom:3px;font-style:normal}

/* Thinspace book: cover + note */
.book-note{display:flex;gap:18px;align-items:center;max-width:820px;margin:8px 0 22px}
.book-note .bk{flex:none;width:clamp(74px,8vw,96px);border-bottom:0!important}
.book-note .bk img{display:block;width:100%;box-shadow:0 6px 18px rgba(0,0,0,.5);transition:transform .3s}
.book-note .bk:hover img{transform:scale(1.03)}
.book-note p{margin:0}
@media (max-width:620px){.book-note{gap:14px;align-items:flex-start}.book-note p{font-size:13.5px}}
/* featured trailers: play button bottom-left like the other cards */
.feat .pl.big{left:14px;top:auto;bottom:14px;transform:none;width:42px;height:42px}
.feat .pl.big svg{width:15px}
/* TV + artist names: a little more breathing room */
#credits .names{gap:10px 28px!important;line-height:1.55}
@media (max-width:620px){#credits .names{gap:8px 18px!important}}

/* Thinspace album + book popup */
.alb .bk-tag{font:300 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-left:6px}
.lb .fr.bkpop{width:min(980px,92vw)}
.bkp{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);align-items:center;font-family:var(--sans)}
.bkp-art{display:flex;gap:14px;align-items:flex-end}
.bkp-art img{display:block;height:clamp(180px,26vw,300px);width:auto;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.bkp-tx small{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--mut)}
.bkp-tx h3{font:400 clamp(26px,3vw,36px)/1.1 var(--serif);margin:8px 0 12px;color:var(--fg)}
.bkp-tx p{font-size:15px;line-height:1.6;color:#d8d4cc;margin:0 0 20px}
.bkp-btns{display:flex;gap:10px;flex-wrap:wrap}
.bkp-btns .act{font:300 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--fg);padding:12px 16px;border:1px solid rgba(255,255,255,.55)}
.bkp-btns .act:hover{background:var(--fg);color:#050505}
@media (max-width:700px){.bkp{grid-template-columns:1fr;text-align:center}.bkp-art{justify-content:center}.bkp-art img{height:170px}.bkp-btns{justify-content:center}}
/* optional changes: narrower Listen rows on desktop, roomier brand logos on phones */
@media (min-width:901px){#listen>*:not(h2){max-width:1000px;margin-left:auto!important;margin-right:auto!important}}
@media (max-width:620px){#credits .logos{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 24px}.logos .lg2 img{width:calc(var(--w) * 1.05);max-height:var(--hm,32px)}}
@media (min-width:901px){#albums.alb-wrap{max-width:1000px!important}}
.press cite .wp{font-size:19px!important;margin-bottom:4px}
.logos .lg2 .c{filter:saturate(.35) brightness(1.04)}
.logos .lg2 .c{filter:saturate(.75) brightness(1.05)}

/* phones: show the first 2 trailers and first 4 brand films, the rest under a toggle; Bluey (vertical) moves up */
.more-mob{display:none}
@media (max-width:620px){
 .more-mob{display:block;margin:14px auto 0;background:none;border:0;border-top:1px solid var(--line);width:100%;padding:14px 0 4px;font:300 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mut);cursor:pointer}
 .more-mob:after{content:" +"}.more-mob.on:after{content:" –"}
 [data-cards]:not(.open) .card:nth-child(n+3){display:none}
 [data-ads] .ad[data-ad]{order:10}
 [data-ads] .ad[data-ad="0"]{order:1}[data-ads] .ad[data-ad="1"]{order:2}[data-ads] .ad[data-ad="2"]{order:3}[data-ads] .ad[data-ad="4"]{order:4}[data-ads] .ad[data-ad="3"]{order:5}
 [data-ads]:not(.open) .ad[data-ad="3"],[data-ads]:not(.open) .ad[data-ad="5"],[data-ads]:not(.open) .ad[data-ad="6"],[data-ads]:not(.open) .ad[data-ad="7"]{display:none}
}
@media (max-width:620px){
 [data-cards]:not(.open) .card:nth-child(n+3),
 [data-ads]:not(.open) .ad[data-ad="3"],[data-ads]:not(.open) .ad[data-ad="5"],[data-ads]:not(.open) .ad[data-ad="6"],[data-ads]:not(.open) .ad[data-ad="7"]{display:none!important}
 .more-mob{margin-bottom:26px}
}

/* album popups with the Spotify player */
.alb{cursor:pointer}
.alb .act{cursor:pointer}
.sp-embed{margin-top:22px}.sp-embed iframe{display:block;width:100%;border:0;border-radius:12px;background:#121212}
.lb .fr.alpop{width:min(720px,92vw)}
.alp-hd{display:flex;gap:16px;align-items:center;font-family:var(--sans)}
.alp-hd img{width:84px;height:84px;object-fit:cover}
.alp-hd small{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--mut)}
.alp-hd h3{font:400 clamp(24px,3vw,32px)/1.1 var(--serif);margin:6px 0 0;color:var(--fg)}
/* breathing room + a thin line before Brand films */
#portfolio .bf-head{margin-top:clamp(44px,4.6vw,64px)!important;padding-top:clamp(30px,3vw,40px);border-top:1px solid rgba(255,255,255,.09);margin-bottom:18px}
@media (max-width:620px){#portfolio .bf-head{margin-top:30px!important;padding-top:26px}}
@media (max-width:620px){#portfolio .bf-head{border-top:0;padding-top:0;margin-top:24px!important}}

/* Spotify player fallback + plain "Listen" label on album hover */
.sp-open{display:none;margin-top:16px;align-self:flex-start;font:400 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#050505;background:#1ed760;padding:14px 20px;border-radius:999px}
.sp-open:hover{background:#3be477}
.sp-embed{display:flex;flex-direction:column}
.sp-embed.blocked iframe{display:none}.sp-embed.blocked .sp-open{display:inline-block}
.alb .acts .act{background:none!important;border:0!important;padding:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;font-size:11px;letter-spacing:.24em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.alb .acts .act:hover{background:none!important;color:#fff}
.alb .acts{left:12px!important;bottom:10px!important}

/* album popup tracklist player */
.atl{margin-top:18px;max-height:56vh;overflow-y:auto;border-top:1px solid var(--line)}
.atr{position:relative;display:grid;grid-template-columns:28px 22px 1fr auto;gap:10px;align-items:center;width:100%;padding:12px 4px;background:none;border:0;border-bottom:1px solid var(--line);color:#d8d4cc;font:300 14px/1.3 var(--sans);text-align:left;cursor:pointer}
.atr:hover,.atr.on{color:#fff}
.atr .an{font-size:12px;color:var(--mut);text-align:right}
.atr .pp{width:10px;height:12px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;opacity:.5}
.atr.playing .pp{border-width:0 3px;border-style:solid;border-color:currentColor;width:10px;opacity:1}
.atr .tm{font-size:12px;color:var(--mut)}
.atr>i{position:absolute;left:0;right:0;bottom:-1px;height:1px}.atr>i>i{display:block;height:100%;width:0;background:var(--fg)}
.sp-more{display:inline-block;margin-top:14px;font:300 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.sp-more:hover{color:var(--fg)}