/* ==========================================================================
   03. COMPONENTS — the reusable design system
   Every future page (Work, Music, Video, About, Credits, Contact, and the
   Project template) should be built from these blocks rather than inventing
   new patterns. See /style-guide.html for a live reference of all of them.
   ========================================================================== */

/* ---------- homepage section wiring (restores exact original spacing/backgrounds) ---------- */
#selected-work{padding:0; border-bottom:1px solid var(--line);}
#listen{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
#press{border-bottom:1px solid var(--line);}
#final-cta{border-bottom:1px solid var(--line);}

/* ---------- playlist player (now-playing bar + clickable track list) ---------- */
.playlist-player{border:1px solid var(--line); background:var(--paper-2);}

.playlist-player .now-playing{
  display:flex; align-items:center; gap:18px; padding:22px 24px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--paper-2); z-index:2;
}
.playlist-player .now-playing .art{width:54px; height:54px; flex:none; overflow:hidden; border:1px solid var(--line);}
.playlist-player .now-playing .art img{width:100%; height:100%; object-fit:cover; display:block;}
.playlist-player .now-playing .art.ph-block .ph-label .t,
.playlist-player .now-playing .art.ph-block .ph-label .m{display:none;}
.playlist-player .now-playing .info{flex:1; min-width:0;}
.playlist-player .now-playing .status{font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:4px;}
.playlist-player .now-playing .track-title{font-family:var(--font-display); font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.playlist-player .now-playing .track-sub{font-family:var(--font-mono); font-size:10px; color:var(--mid); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.playlist-player .now-playing .play-btn{
  width:40px; height:40px; flex:none; border-radius:50%; border:1px solid var(--line); background:none; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px;
  transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.playlist-player .now-playing .play-btn:hover{border-color:var(--accent); color:var(--accent);}
.playlist-player .now-playing .transport{flex:2; display:flex; align-items:center; gap:10px; min-width:120px;}
.playlist-player .now-playing .scrub{flex:1; height:2px; background:var(--line); position:relative; cursor:pointer;}
.playlist-player .now-playing .scrub .fill{position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--accent);}
.playlist-player .now-playing .scrub .knob{position:absolute; top:50%; left:0%; width:8px; height:8px; border-radius:50%; background:var(--ink); transform:translate(-50%,-50%);}
.playlist-player .now-playing .time{font-family:var(--font-mono); font-size:9.5px; color:var(--mid); flex:none;}
@media(max-width:560px){
  .playlist-player .now-playing{flex-wrap:wrap;}
  .playlist-player .now-playing .transport{order:3; width:100%; flex-basis:100%; margin-top:4px;}
}

/* Scrolls past ~6 rows so a long tracklist doesn't stretch the homepage. The cut
   row at the fold is deliberate — it signals there's more below. */
.playlist-player .playlist{max-height:420px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent;}
.playlist-player .playlist::-webkit-scrollbar{width:6px;}
.playlist-player .playlist::-webkit-scrollbar-track{background:transparent;}
.playlist-player .playlist::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}
.playlist-player .playlist:hover::-webkit-scrollbar-thumb{background:var(--mid);}
.playlist-track{
  display:flex; align-items:center; gap:14px; padding:13px 24px; cursor:pointer;
  border-bottom:1px solid var(--line); transition:background var(--dur-fast) ease;
}
.playlist-track:last-child{border-bottom:none;}
.playlist-track:hover{background:rgba(241,236,225,.03);}
.playlist-track.active{background:rgba(179,63,53,.10);}
.playlist-track .thumb{width:38px; height:38px; flex:none; overflow:hidden; border:1px solid var(--line);}
.playlist-track .thumb img{width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(28%); transition:filter var(--dur-fast) ease;}
.playlist-track:hover .thumb img,
.playlist-track.active .thumb img{filter:grayscale(0%);}
.playlist-track .thumb.ph-block .ph-label{display:none;}
.playlist-track .num{font-family:var(--font-mono); font-size:10px; color:var(--mid); width:18px; flex:none;}
.playlist-track.active .num{color:var(--accent);}
.playlist-track .meta{flex:1; min-width:0;}
.playlist-track .name{font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.playlist-track .proj{font-family:var(--font-mono); font-size:10px; color:var(--mid); margin-top:2px;}
.playlist-track .dur{font-family:var(--font-mono); font-size:10px; color:var(--mid); flex:none;}
.playlist-track .dur.spotify-tag{color:#1DB954; letter-spacing:.04em; text-transform:uppercase; font-size:9.5px;}
.playlist-track:hover .dur.spotify-tag{color:#1ed760;}

.btn--large{padding:22px 56px; font-size:13px; letter-spacing:.14em;}

/* ---------- contact form ---------- */
.msg-form{display:flex; flex-direction:column; gap:18px; text-align:left; max-width:480px; margin:0 auto;}
.msg-form label{font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mid); margin-bottom:8px; display:block;}
.msg-form input, .msg-form textarea{
  width:100%; background:var(--paper-2); border:1px solid var(--line); color:var(--ink);
  font-family:var(--font-body); font-size:15px; padding:13px 16px; transition:border-color var(--dur-fast) ease;
}
.msg-form input:focus, .msg-form textarea:focus{outline:none; border-color:var(--accent);}
.msg-form textarea{resize:vertical; min-height:130px;}
.msg-form button{align-self:flex-start; margin-top:6px;}
.msg-form .form-note{font-family:var(--font-mono); font-size:10.5px; color:var(--mid); margin-top:-4px;}

/* ---------- site-wide bottom CTA ---------- */
.cta-strip{border-top:1px solid var(--line); padding:64px 0; text-align:center;}

.mega-title{font-family:var(--font-display); font-weight:700; font-size:clamp(40px,9vw,110px); line-height:0.95; letter-spacing:0.01em; text-transform:uppercase; text-align:center;}

/* ---------- accent button variant ---------- */
.btn--accent{border-color:var(--accent); color:var(--accent);}
.btn--accent:hover{background:var(--accent); color:var(--ink);}

/* ---------- framed portrait ---------- */
.portrait-frame{position:relative; overflow:hidden;}
.portrait-frame img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- bio (two-column, with highlighted key terms) ---------- */
.bio-split{display:grid; grid-template-columns:1fr; gap:48px;}
@media(min-width:860px){.bio-split{grid-template-columns:1fr 0.62fr;}}
.bio-split .portrait-frame{aspect-ratio:3/4;}
.bio-split .bio-side{display:flex; flex-direction:column; gap:18px;}
/* Not sticky: pinning made the portrait appear to slide down the page as the
   bio scrolled past it. It now sits where it is placed. The column is left to
   stretch (no align-self:start) so .bio-aside can push to its foot and land
   alongside the closing paragraphs. */
@media(min-width:860px){.bio-split .bio-side{order:2;}}
/* margin-top:auto drops it to the bottom of the flex column on desktop; on a
   single-column layout there is nothing to push against, so it just flows. */
.bio-aside{margin:0;}
@media(min-width:860px){.bio-aside{margin-top:auto; padding-top:32px;}}
.bio-aside img{width:100%; display:block; aspect-ratio:2/3; object-fit:cover;}
.bio-aside figcaption{font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--mid); margin-top:10px;}
.bio-text p{font-family:var(--font-body); font-size:20px; line-height:1.8; color:var(--mid); margin:0;}
.bio-text p .hl{color:var(--ink); font-weight:700; text-transform:uppercase; letter-spacing:.01em; font-style:normal;}
.bio-stats{display:flex; gap:56px; flex-wrap:wrap; padding-top:32px; border-top:1px solid var(--line); margin-top:8px;}

/* ---------- bio inline imagery ---------- */
.bio-figure{margin:0;}
.bio-figure img{width:100%; display:block; border:1px solid var(--line);}
/* Wide closing image on the About page — content width, no border, so it reads
   as a plate rather than another framed figure inside the column. */
.bio-plate{margin:clamp(44px,4.5vw,64px) 0 0;}
.bio-plate img{width:100%; display:block;}
.bio-plate figcaption{font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--mid); margin-top:14px; text-align:center;}

.bio-figure figcaption{font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--mid); margin-top:10px;}
.bio-duo{display:grid; grid-template-columns:1fr; gap:16px;}
@media(min-width:640px){.bio-duo{grid-template-columns:1fr 1fr;}}
.bio-duo img{width:100%; aspect-ratio:4/5; object-fit:cover; display:block; border:1px solid var(--line);}

/* ---------- featured release (reusable, editorial — not a poster card) ---------- */
.featured-release{padding:130px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.featured-release-grid{display:grid; grid-template-columns:1fr; gap:56px; align-items:center;}
@media(min-width:900px){.featured-release-grid{grid-template-columns:0.52fr 1fr; gap:80px;}}
.featured-release .art{aspect-ratio:1/1; overflow:hidden; max-width:480px;}
.featured-release .art img{width:100%; height:100%; object-fit:cover; display:block;}
/* Tracking eases off as the tag grows — .16em was tuned for 11px and reads
   stretched at this size. */
.featured-release-tag{font-family:var(--font-mono); font-weight:500; font-size:clamp(14px,1.5vw,17px); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:20px;}
.featured-release-title{font-family:var(--font-display); font-weight:700; font-size:clamp(34px,5vw,56px); line-height:1; text-transform:uppercase; margin-bottom:10px;}
.featured-release-sub{font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--mid); text-transform:uppercase; margin-bottom:28px;}
.featured-release-copy{font-family:var(--font-body); font-size:17px; line-height:1.85; color:var(--mid); max-width:520px; margin-bottom:32px;}
.featured-release-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- artist / albums teaser (homepage, permanent) ---------- */
.artist-teaser{padding:110px 0;}
.artist-teaser-head{text-align:center; max-width:640px; margin:0 auto 64px;}
.artist-teaser-grid{display:grid; grid-template-columns:1fr; gap:48px; max-width:900px; margin:0 auto;}
@media(min-width:720px){.artist-teaser-grid{grid-template-columns:1fr 1fr;}}
.album-tile{display:block; text-align:center;}
.album-tile .art{aspect-ratio:1/1; overflow:hidden; margin-bottom:22px; border:1px solid var(--line); transition:border-color var(--dur-fast) ease;}
.album-tile:hover .art{border-color:var(--accent);}
.album-tile .art img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease;}
.album-tile:hover .art img{transform:scale(1.03);}
.album-tile .tag{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:8px;}
.album-tile .name{font-family:var(--font-display); font-weight:700; font-size:22px; text-transform:uppercase; margin-bottom:4px;}
.album-tile .desc{font-family:var(--font-mono); font-size:11.5px; color:var(--mid); text-transform:uppercase; letter-spacing:.04em;}

/* ---------- artist page: full album feature ---------- */
.album-feature{padding:100px 0; border-bottom:1px solid var(--line);}
.album-feature:last-of-type{border-bottom:none;}
.album-feature-grid{display:grid; grid-template-columns:1fr; gap:56px;}
@media(min-width:900px){.album-feature-grid{grid-template-columns:0.5fr 1fr; gap:80px;}}
.album-feature .art{aspect-ratio:1/1; max-width:520px;}
.album-feature .art img{width:100%; height:100%; object-fit:cover; display:block;}
.album-feature-eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:16px;}
.album-feature-title{font-family:var(--font-display); font-weight:700; font-size:clamp(36px,5.5vw,60px); line-height:1; text-transform:uppercase; margin-bottom:8px;}
.album-feature-sub{font-family:var(--font-mono); font-size:12.5px; color:var(--mid); text-transform:uppercase; letter-spacing:.06em; margin-bottom:30px;}
.album-feature-copy{font-family:var(--font-body); font-size:17px; line-height:1.85; color:var(--mid); margin-bottom:14px;}
.album-feature-actions{display:flex; gap:14px; flex-wrap:wrap; margin:32px 0;}
.album-feature-note{font-family:var(--font-mono); font-size:10.5px; color:var(--mid); letter-spacing:.02em; border-top:1px solid var(--line); padding-top:18px; margin-top:26px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; padding:14px 30px; border:1px solid var(--line);
  transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.btn:hover{border-color:var(--accent); color:var(--accent);}
.btn--solid{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.btn--solid:hover{background:var(--accent); border-color:var(--accent); color:var(--ink);}
/* On a light section --ink is near-black, so the default hover put dark text on
   the accent red (3.2:1 — fails AA for text this small). Use the section's paper
   colour instead, which lifts it to 5.2:1. */
.light .btn--solid:hover{color:var(--paper);}
.btn--link{
  display:inline-block; border:none; padding:0; padding-bottom:3px;
  border-bottom:1px solid rgba(241,236,225,.5);
}
.btn--link:hover{border-color:var(--accent); color:var(--accent);}

/* ---------- generic placeholder block (imagery not yet supplied) ---------- */
.ph-block{position:relative; overflow:hidden; background:linear-gradient(135deg, var(--paper-2), var(--paper)); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
.ph-block::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg, transparent, transparent 26px, rgba(241,236,225,0.03) 26px, rgba(241,236,225,0.03) 27px);}
.ph-block .ph-label{position:relative; z-index:1; text-align:center; padding:20px;}
.ph-block .ph-label .t{font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--mid); letter-spacing:.02em;}
.ph-block .ph-label .m{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mid); opacity:.6; margin-top:6px;}

/* ---------- hero (homepage) ---------- */
.hero{position:relative; height:84svh; min-height:520px; overflow:hidden; background:var(--ink);}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 62%; filter:grayscale(20%) brightness(.72);}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,14,10,.55) 0%, transparent 45%);}
.hero-name{position:absolute; left:0; right:0; bottom:64px; z-index:2; text-align:center; color:var(--ink);}
.hero-name h1{font-size:clamp(40px,9vw,110px); line-height:0.95; letter-spacing:0.01em; text-transform:uppercase;}
.hero-name .role{font-family:var(--font-display); font-weight:600; font-size:clamp(20px,3.4vw,38px); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); opacity:.85; margin-top:14px;}
.hero-links{display:flex; gap:26px; justify-content:center; margin-top:22px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;}
.hero-links a{border-bottom:1px solid rgba(241,236,225,.5); padding-bottom:3px; transition:border-color var(--dur-fast) ease;}
.hero-links a:hover{border-color:var(--ink);}

/* ---------- Evolution feature (flagship cinematic plate) ----------
   Replaces the old two-column card. No border, no panel: the artwork is the
   whole statement and the type sits in clear space above and below it. The
   plate is contained rather than full-bleed on purpose — the poster strip
   directly above is already edge-to-edge, so a second full-bleed band would
   blur the boundary between the two sections. */
.evo{text-align:center;}
.evo-title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(44px,8vw,104px); line-height:.98;
  letter-spacing:.02em; text-transform:uppercase;
}
.evo-meta{
  font-family:var(--font-mono); font-size:clamp(10px,1vw,11.5px);
  letter-spacing:.22em; text-transform:uppercase; color:var(--mid);
}
.evo-role{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(12.5px,1.5vw,16px); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink);
}
.evo-title + .evo-meta{margin-top:20px;}
.evo-meta + .evo-role{margin-top:20px;}

/* 16:9 on mobile shows the full frame so the title lockup in the artwork is
   never cropped; the wider 21:9 crop only kicks in where there's room for it. */
.evo-plate{margin-top:clamp(34px,4.5vw,58px); aspect-ratio:16/9; overflow:hidden;}
@media(min-width:900px){.evo-plate{aspect-ratio:21/9;}}
.evo-plate img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}

.evo-note{
  font-family:var(--font-body); font-style:italic;
  font-size:clamp(15px,1.7vw,19px); color:var(--mid);
  margin-top:clamp(26px,3vw,38px);
}
.evo-note span{font-style:normal; text-transform:uppercase; letter-spacing:.06em; color:var(--ink);}

/* Understated text links rather than buttons — the artwork carries the weight. */
.evo-actions{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:16px 36px; margin-top:clamp(24px,2.6vw,32px);
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
}
.evo-actions a{padding-bottom:4px; border-bottom:1px solid; transition:color var(--dur-fast) ease, border-color var(--dur-fast) ease;}
.evo-actions a.is-primary{color:var(--ink); border-bottom-color:var(--ink);}
.evo-actions a.is-secondary{color:var(--mid); border-bottom-color:var(--line);}
.evo-actions a:hover{color:var(--accent); border-bottom-color:var(--accent);}

/* ---------- contact: representation blocks ----------
   Replaces a stack of inline styles. The old version spaced everything at 8px,
   so the two agents ran together and the three groups read as one lump. Each
   group is now a .rep-block separated by a hairline and generous space, and the
   two agents sit side by side where there's room rather than stacking. */
.rep{max-width:640px; margin:0 auto; text-align:center;}
.rep-block + .rep-block{
  margin-top:clamp(52px,6vw,78px);
  padding-top:clamp(52px,6vw,78px);
  border-top:1px solid var(--line);
}
.rep-block .eyebrow{justify-content:center; font-size:12px; margin-bottom:clamp(20px,2.4vw,26px);}
.rep-logo{max-width:180px; margin:0 auto clamp(22px,2.6vw,28px);}
.rep-logo img{width:100%; display:block;}
.rep-name{
  font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2.4vw,23px);
  color:var(--ink); margin-bottom:clamp(26px,3vw,34px);
}
.rep-people{display:grid; grid-template-columns:1fr; gap:26px; margin-bottom:clamp(28px,3.2vw,36px);}
@media(min-width:560px){.rep-people{grid-template-columns:repeat(2,1fr); gap:34px;}}
.rep-person .n{font-family:var(--font-mono); font-weight:500; font-size:15px; color:var(--ink); margin-bottom:9px;}
.rep-person a{font-family:var(--font-mono); font-size:13.5px; color:var(--mid); line-height:1.85; transition:color var(--dur-fast) ease;}
.rep-person a:hover{color:var(--accent);}
.rep-address{
  font-family:var(--font-mono); font-size:13px; color:var(--mid); line-height:1.85;
  margin-bottom:clamp(24px,2.8vw,30px);
}

/* ---------- page header (interior pages — Work, Music, Credits, etc.) ---------- */
.page-header{padding:64px 0 60px; border-bottom:1px solid var(--line);}
.page-header h1{font-size:clamp(38px,6vw,72px); line-height:0.98; text-transform:uppercase;}
.page-header p{color:var(--mid); font-size:15px; margin-top:16px; max-width:520px; line-height:1.6;}

.page-header--photo{position:relative; overflow:hidden; padding:150px 0 90px; border-bottom:none;}
.page-header--photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 55%; filter:grayscale(55%) brightness(.82) saturate(.75);}
.page-header--photo::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, var(--paper) 0%, rgba(10,14,26,.25) 45%, rgba(10,14,26,.1) 100%);}
.page-header--photo .wrap{position:relative; z-index:1;}
.page-header--photo h1{color:var(--ink); text-shadow:0 2px 20px rgba(0,0,0,.75), 0 4px 40px rgba(0,0,0,.5);}

/* ---------- poster grid / poster card ---------- */
.poster-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line);}
@media(min-width:640px){.poster-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:960px){.poster-grid{grid-template-columns:repeat(5,1fr);}}
.poster-card{position:relative; aspect-ratio:2/3; overflow:hidden; background:var(--paper-2);}
.poster-card img{width:100%; height:100%; object-fit:cover; filter:grayscale(20%) brightness(.92); transition:transform .5s ease, filter var(--dur-med) ease;}
.poster-card:hover img{transform:scale(1.05); filter:grayscale(0%) brightness(1);}
.poster-card .cap{position:absolute; left:0; right:0; bottom:0; padding:16px 14px; background:linear-gradient(to top, rgba(0,0,0,.85), transparent); opacity:0; transition:opacity var(--dur-fast) ease;}
.poster-card:hover .cap{opacity:1;}
.poster-card .cap .t{font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink);}
.poster-card .cap .m{font-family:var(--font-mono); font-size:9.5px; color:var(--gold); margin-top:3px; letter-spacing:.04em;}
.poster-card .cap .view{font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); opacity:.7; margin-top:8px;}
.poster-card .cap .tag{font-family:var(--font-mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:5px;}

.poster-grid.square{gap:18px; background:transparent;}
.poster-grid.square .poster-card{aspect-ratio:1/1; border:1px solid var(--line);}

/* legacy poster-grid/poster-card names are used directly in markup —
   no aliasing needed. */

/* ---------- work page filters ---------- */
.filter-row{display:flex; gap:10px; flex-wrap:wrap; padding:28px 0; border-bottom:1px solid var(--line);}
.filter-row button{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  background:none; border:1px solid var(--line); color:var(--mid); padding:9px 16px; cursor:pointer;
  transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.filter-row button:hover{color:var(--ink); border-color:var(--ink);}
.filter-row button.active{color:var(--paper); background:var(--ink); border-color:var(--ink);}

/* ---------- featured / now scoring ---------- */
#featured, .featured{background:var(--paper-2); color:var(--ink);}
.featured .eyebrow{color:var(--gold);}
.featured-grid{display:grid; grid-template-columns:1fr; gap:48px; align-items:center;}
@media(min-width:900px){.featured-grid{grid-template-columns:0.85fr 1fr;}}
.featured-badge{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(163,130,44,.4); padding:9px 16px; margin-bottom:22px;}
.featured-title{font-size:clamp(34px,5vw,58px); line-height:1; text-transform:uppercase; margin-bottom:10px;}
.featured-network{font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:rgba(241,236,225,.6); margin-bottom:26px;}
.featured-copy{font-family:var(--font-body); font-size:16px; line-height:1.8; color:rgba(241,236,225,.82); max-width:480px;}
.featured-copy strong{color:var(--ink); font-weight:500;}
.featured-link{display:inline-block; margin-top:26px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid rgba(241,236,225,.5); padding-bottom:3px;}
.featured-img{position:relative; aspect-ratio:4/3; overflow:hidden; background:#000;}
.featured-img img{width:100%; height:100%; object-fit:cover; filter:grayscale(15%) brightness(.88);}

/* ---------- project hero (individual project template) ---------- */
.project-hero{position:relative; padding:170px 0 70px; overflow:hidden; border-bottom:1px solid var(--line);}
.project-hero-grid{display:grid; grid-template-columns:1fr; gap:44px; align-items:start;}
@media(min-width:860px){.project-hero-grid{grid-template-columns:0.62fr 1fr;}}
.project-hero .poster{aspect-ratio:2/3; max-width:420px;}
.project-hero-title{font-size:clamp(36px,6vw,72px); line-height:0.98; text-transform:uppercase; margin-bottom:14px;}
.project-hero-sub{font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--gold); text-transform:uppercase; margin-bottom:6px;}
.project-hero-composer{color:var(--mid); font-size:15px; margin-bottom:22px;}
.project-hero-actions{display:flex; gap:12px; flex-wrap:wrap;}

/* ---------- project metadata strip ---------- */
.meta-strip{display:grid; grid-template-columns:repeat(2,1fr); gap:28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0;}
@media(min-width:640px){.meta-strip{grid-template-columns:repeat(4,1fr);}}
.meta-strip .item .lbl{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mid); margin-bottom:6px;}
.meta-strip .item .val{font-family:var(--font-display); font-weight:600; font-size:14px;}

/* ---------- audio player (custom) ---------- */
.audio-player{background:var(--paper-2); border:1px solid var(--line); padding:22px 24px; display:flex; align-items:center; gap:18px;}
.audio-player .art{width:56px; height:56px; flex:none; background:var(--paper); border:1px solid var(--line);}
.audio-player .body{flex:1; min-width:0;}
.audio-player .title-row{display:flex; justify-content:space-between; gap:12px; font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--mid); margin-bottom:8px;}
.audio-player .title-row .track-name{color:var(--ink); font-family:var(--font-display); font-size:12.5px; letter-spacing:0; text-transform:none;}
.audio-player .transport{display:flex; align-items:center; gap:14px;}
.audio-player .play-btn{
  width:34px; height:34px; flex:none; border-radius:50%; border:1px solid var(--line); background:none; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color var(--dur-fast) ease;
}
.audio-player .play-btn:hover{border-color:var(--accent); color:var(--accent);}
.audio-player .scrub{flex:1; height:2px; background:var(--line); position:relative; cursor:pointer;}
.audio-player .scrub .fill{position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--accent);}
.audio-player .scrub .knob{position:absolute; top:50%; left:0%; width:8px; height:8px; border-radius:50%; background:var(--ink); transform:translate(-50%,-50%);}
.audio-player .time{font-family:var(--font-mono); font-size:9.5px; color:var(--mid); flex:none; min-width:34px;}

.embed-frame{max-width:640px; margin:0 auto; border:1px solid var(--line); background:var(--paper-2); padding:4px;}
.embed-frame iframe{width:100%; height:352px; border:none; display:block;}

/* ---------- track list ---------- */
.track-list{border-top:1px solid var(--line);}
.track-list .track{
  display:flex; align-items:center; gap:16px; padding:16px 4px; border-bottom:1px solid var(--line);
  transition:background var(--dur-fast) ease;
}
.track-list .track:hover{background:var(--paper-2);}
.track-list .num{font-family:var(--font-mono); font-size:11px; color:var(--mid); width:26px; flex:none;}
.track-list .name{font-family:var(--font-body); font-size:15px; flex:1;}
.track-list .dur{font-family:var(--font-mono); font-size:10.5px; color:var(--mid); flex:none;}

/* ---------- video cards ---------- */
.video-grid{display:grid; grid-template-columns:1fr; gap:28px;}
@media(min-width:720px){.video-grid{grid-template-columns:repeat(2,1fr);}}
.video-card{display:block;}
.video-card .thumb{aspect-ratio:16/9; position:relative;}
.video-card .thumb iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-card .thumb .play{
  position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(241,236,225,.6); display:flex; align-items:center; justify-content:center;
  transition:border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.video-card:hover .thumb .play{border-color:var(--accent); background:rgba(179,63,53,.15);}
.video-card .cat{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-top:16px;}
.video-card .t{font-family:var(--font-display); font-weight:600; font-size:16px; margin-top:6px;}

/* Feature variant — the lead behind-the-scenes film. Full content width and a
   larger title so it reads as the main event rather than one of a grid. */
.video-card--feature .cat{font-size:11px; letter-spacing:.14em; margin-top:22px;}
.video-card--feature .t{font-size:clamp(20px,2.6vw,30px); line-height:1.15; margin-top:10px;}
.video-card--feature + .video-grid{margin-top:clamp(48px,5vw,72px);}

.press-grid{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
@media(min-width:640px){.press-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1020px){.press-grid{grid-template-columns:repeat(3,1fr);}}
.press-card{background:var(--paper); padding:30px 26px; display:flex; flex-direction:column; gap:14px; transition:background var(--dur-fast) ease;}
.press-card:hover{background:var(--paper-2);}
/* Blank filler cell for grids with an awkward card count (e.g. 3 cards at the
   2-column width leave a hole the gap rules draw as a pale rectangle). Hidden
   by default and only shown at 2 columns — at 1 or 3 columns a 3-card grid
   already fills its rows, and an unhidden spacer would sit alone in a row of
   its own. Any grid using it needs a count that's odd at 2 columns only. */
.press-card--spacer{pointer-events:none; display:none;}
@media(min-width:640px) and (max-width:1019px){.press-card--spacer{display:flex;}}
.press-card--spacer:hover{background:var(--paper);}

/* Press thumbnail — real imagery. Same 16/10 frame as the placeholder, so the
   two can be swapped one-for-one as photos arrive. */
.press-card .thumb{aspect-ratio:16/10; overflow:hidden; border:1px solid var(--line); background:var(--paper-2);}
.press-card .thumb img{width:100%; height:100%; object-fit:cover; filter:grayscale(35%) brightness(.9); transition:transform .5s ease, filter var(--dur-med) ease;}
.press-card:hover .thumb img{transform:scale(1.04); filter:grayscale(0%) brightness(1);}

/* Press placeholder — a deliberate masthead panel rather than an empty grey
   box, so a card without a photo still reads as designed. */
.press-card .ph-block{aspect-ratio:16/10; flex-direction:column; gap:0;}
.press-card .ph-block .ph-label{padding:22px 18px;}
.press-card .ph-block .ph-label .t{font-size:18px; font-weight:700; letter-spacing:.01em; color:var(--ink); opacity:.72; text-transform:uppercase;}
.press-card .ph-block .ph-label .t::after{content:""; display:block; width:26px; height:2px; background:var(--accent); margin:11px auto 0; opacity:.85;}
.press-card .ph-block .ph-label .m{margin-top:11px; font-size:9px; letter-spacing:.16em; opacity:.75;}
.press-card:hover .ph-block .ph-label .t{opacity:.9;}

.press-card .t{font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1.35;}
.press-card .m{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);}
.press-card .link{margin-top:auto; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid rgba(241,236,225,.4); padding-bottom:2px; align-self:flex-start;}

/* ---------- biography sections ---------- */
.bio-copy{max-width:720px; margin:0 auto; text-align:center;}
.bio-copy p{font-size:clamp(17px,2vw,20px); line-height:1.75; color:var(--ink); margin:0 0 24px;}
/* Work titles: tracked caps rather than italic. Caps make the italic redundant
   (it barely registers at uppercase) and tracking matches the .eyebrow and hero
   role treatments, so titles read as part of the same system. */
.bio-copy em{font-style:normal; color:var(--accent); text-transform:uppercase; letter-spacing:.06em;}
/* Titles keep their italic (correct for film/TV titles) but drop the accent
   colour. For a long trailing list, colouring every title turns the paragraph
   red and the accent stops meaning "this one matters". */
.bio-copy em.quiet{color:inherit;}
/* Sits under the closing paragraph, which already carries 24px of margin. */
.bio-copy .btn{margin-top:14px;}

.bio-section{display:grid; grid-template-columns:1fr; gap:20px; padding:44px 0; border-bottom:1px solid var(--line);}
@media(min-width:760px){.bio-section{grid-template-columns:220px 1fr;}}
.bio-section h3{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:500;}
.bio-section .copy p{font-family:var(--font-body); font-size:16px; line-height:1.85; color:rgba(241,236,225,.88); margin:0 0 18px;}
.bio-section .copy p:last-child{margin-bottom:0;}

/* ---------- career timeline ---------- */
.timeline{border-left:1px solid var(--line); margin-left:6px; padding-left:30px;}
.timeline .entry{position:relative; padding-bottom:34px;}
.timeline .entry:last-child{padding-bottom:0;}
.timeline .entry::before{content:""; position:absolute; left:-35px; top:6px; width:9px; height:9px; border-radius:50%; background:var(--accent);}
.timeline .entry .yr{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--gold); margin-bottom:4px;}
.timeline .entry .desc{font-family:var(--font-body); font-size:15px; color:rgba(241,236,225,.85); line-height:1.6;}

/* ---------- credits table ---------- */
.credits-cols{display:grid; grid-template-columns:1fr; gap:0 56px;}
@media(min-width:900px){.credits-cols{grid-template-columns:1fr 1fr;}}
.credits-group{margin-bottom:52px;}
.credits-group:last-child{margin-bottom:0;}
.credits-group h3{font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:0; text-transform:uppercase; color:var(--accent); margin-bottom:22px;}
.credits-table{width:100%; border-collapse:collapse;}
.credits-table tr{border-bottom:1px solid var(--line);}
.credits-table td{padding:13px 10px; font-size:14px; vertical-align:top;}
.credits-table td:first-child{padding-left:0; font-family:var(--font-mono); font-size:11.5px; color:var(--mid); width:64px;}
.credits-table td.title{font-family:var(--font-display); font-weight:600; color:var(--ink);}
.credits-table td.title a:hover{color:var(--accent);}
.credits-table td.prod{color:var(--mid); font-size:13px;}
.credits-table td.role{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--gold); text-align:right; padding-right:0;}

/* ---------- previous / next project nav ---------- */
.prev-next{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line);}
.prev-next a{padding:34px 30px; transition:background var(--dur-fast) ease;}
.prev-next a:hover{background:var(--paper-2);}
.prev-next a.next{text-align:right; border-left:1px solid var(--line);}
.prev-next .lbl{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mid); margin-bottom:8px;}
.prev-next .name{font-family:var(--font-display); font-weight:700; font-size:18px; text-transform:uppercase;}
@media(max-width:640px){.prev-next{grid-template-columns:1fr;} .prev-next a.next{border-left:none; border-top:1px solid var(--line); text-align:left;}}

/* ---------- contact / rep card ---------- */
.contact-grid{display:grid; grid-template-columns:1fr; gap:56px;}
@media(min-width:900px){.contact-grid{grid-template-columns:1fr 0.75fr;}}
.rep-card{background:var(--paper-2); border:1px solid var(--line); padding:34px;}
.rep-card .lbl{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:16px;}
.rep-card .name{font-family:var(--font-display); font-weight:700; font-size:19px; margin-bottom:4px;}
.rep-card .agency{color:var(--mid); font-size:13.5px; margin-bottom:18px;}
.rep-card .line{font-size:13.5px; color:var(--mid); line-height:1.7; font-family:var(--font-body);}
.rep-card a.mail{color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px;}

.social-row{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
.social-row a{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); padding:10px 16px; color:var(--mid); transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.social-row a:hover{border-color:var(--accent); color:var(--accent);}

/* ---------- about teaser (homepage) ---------- */
.about-grid{display:grid; grid-template-columns:1fr; gap:44px; align-items:center;}
@media(min-width:900px){.about-grid{grid-template-columns:0.75fr 1fr;}}
.about-grid .ph-block{aspect-ratio:4/5;}
.about-copy-teaser p{font-family:var(--font-body); font-size:16px; line-height:1.8; color:rgba(241,236,225,.85); margin:0 0 22px;}
.about-copy-teaser .name{font-size:clamp(26px,3.4vw,38px); text-transform:uppercase; margin-bottom:6px;}
.about-copy-teaser .role{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:22px;}

/* ---------- final CTA ---------- */
.final-cta{text-align:center;}
.final-cta h2{font-size:clamp(30px,5vw,54px); line-height:1.05; text-transform:uppercase;}
.final-cta .cta-link{display:inline-block; margin-top:30px; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--line); padding:16px 34px; transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease;}
.final-cta .cta-link:hover{border-color:var(--accent); color:var(--accent);}