/* =============================================================================
   Media page only. (Framework, .kicker, .sec-head, the listen player are in
   site.css.)
   ============================================================================= */

/* Media has its own inline Spotify player in the Music section, so the site-wide
   footer player is redundant here — drop it (and reclaim the space the fixed bar
   reserves via body padding-bottom in site.css). It stays on every other page. */
body.media .audiobar{display:none}
body.media{padding-bottom:0}

.intro{padding:clamp(48px,8vw,88px) 0 clamp(20px,3vw,30px)}
.intro .kicker{display:block;margin-bottom:16px}
.intro h1{font-size:clamp(2.4rem,6vw,3.6rem);margin-bottom:16px}
.intro p{color:var(--dim);max-width:56ch;font-size:1.05rem}

/* a "press play" strip can sit at the top of the Music section */
.music .player{max-width:540px;margin-bottom:clamp(30px,4vw,44px)}

/* music */
.albums{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.album{transition:transform .18s ease}
.album:hover{transform:translateY(-4px)}
.album .cover{aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line-soft);margin-bottom:18px;background:#0e0e0e}
.album .cover img{width:100%;height:100%;object-fit:cover}
.album h3{font-size:1.28rem;color:#fff;font-weight:400;letter-spacing:.02em}
.album .yr{font-size:.82rem;color:var(--faint);letter-spacing:.1em;margin:5px 0 10px}
.album p{font-size:.9rem;color:var(--dim)}
.album .listen{display:inline-block;margin-top:14px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-lt)}
@media(max-width:760px){.albums{grid-template-columns:1fr;gap:34px;max-width:420px}}

/* video grid (shared by the auto-pulled Watch & Listen cards) */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.video-grid{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:600px){.video-grid{grid-template-columns:1fr;gap:34px}}
/* Shown by js/media.js when the playlist feed is unavailable: a link to the playlist
   on YouTube, spanning the grid in place of the cards. No static cards to maintain. */
.yt-fallback{grid-column:1/-1;margin:0;color:var(--dim);font-size:1rem}
.yt-fallback[hidden]{display:none}
.yt-fallback a{color:var(--brass-lt);border-bottom:1px solid transparent;padding-bottom:2px}
.yt-fallback a:hover{color:#fff;border-color:var(--brass)}

/* Watch & Listen cards — link out to YouTube (auto-pulled from the channel feed) */
.ytcard{display:block;color:inherit}
.ytcard-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--line-soft);
  background:#0e0e0e center/cover no-repeat;overflow:hidden}
.ytcard-thumb::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,20,20,.5),rgba(20,20,20,.12));transition:background .2s ease}
.ytcard:hover .ytcard-thumb::before{background:linear-gradient(0deg,rgba(20,20,20,.32),rgba(20,20,20,.04))}
.ytcard .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;
  background:rgba(201,168,106,.94);display:grid;place-items:center;transition:transform .18s ease,background .18s ease}
.ytcard:hover .play{transform:translate(-50%,-50%) scale(1.06);background:var(--brass-lt)}
.ytcard .play::after{content:"";margin-left:5px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #181205}
.ytcard-title{display:block;margin-top:12px;font-size:1rem;color:#fff;font-weight:400;line-height:1.2}
.ytcard:hover .ytcard-title{color:var(--brass-lt)}
.ytcard-sub{display:block;margin-top:3px;font-size:.9rem;color:var(--dim)}
.ytcard-sub em{font-style:italic}
.yt-note{grid-column:1/-1;color:var(--dim);padding:16px 0;font-size:.95rem}
.yt-note a{color:var(--brass-lt);border-bottom:1px solid transparent;padding-bottom:2px}
.yt-note a:hover{color:#fff;border-color:var(--brass)}

.vid{margin:0}
.lite{position:relative;display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--line-soft);
  background:#0e0e0e center/cover no-repeat;cursor:pointer;padding:0;overflow:hidden}
.lite::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,20,20,.5),rgba(20,20,20,.12));transition:background .2s ease}
.lite:hover::before{background:linear-gradient(0deg,rgba(20,20,20,.34),rgba(20,20,20,.04))}
.lite .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;
  background:rgba(201,168,106,.94);display:grid;place-items:center;transition:transform .18s ease,background .18s ease}
.lite:hover .play{transform:translate(-50%,-50%) scale(1.06);background:var(--brass-lt)}
.lite .play::after{content:"";margin-left:5px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #181205}
.vid iframe{width:100%;aspect-ratio:16/9;display:block;border:1px solid var(--line-soft)}
.vid figcaption{margin-top:14px;font-size:1rem;color:#fff;font-weight:400}
.vid figcaption span{color:var(--dim);font-size:.9rem}

/* YouTube playlists (full albums): square album-cover facade, click to load the
   whole playlist. Reuses .lite/.play from the video facade above. */
.pl-grid{display:flex;flex-wrap:wrap;gap:26px;justify-content:center}
.pl{margin:0;flex:0 1 320px}
.pl .lite{aspect-ratio:1/1}          /* album cover is square; the loaded player is 16:9 */
.pl iframe{width:100%;aspect-ratio:16/9;display:block;border:1px solid var(--line-soft)}
.pl figcaption{margin-top:14px;font-size:1rem;color:#fff;font-weight:400}
.pl figcaption span{color:var(--dim);font-size:.9rem}
@media(max-width:760px){.pl{flex:1 1 100%;max-width:360px}}
.yt-sub{margin-top:24px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.yt-sub a{color:var(--brass-lt);border-bottom:1px solid transparent;padding-bottom:2px}
.yt-sub a:hover{color:#fff;border-color:var(--brass)}

/* photos */
.photos{background:var(--ink-2)}
.gallery-feature{display:block;width:100%;margin:0 0 16px;padding:0;border:1px solid var(--line-soft);background:none;cursor:zoom-in;overflow:hidden}
.gallery-feature img{width:100%;height:auto;display:block;transition:transform .35s ease,opacity .2s ease}
.gallery-feature:hover img{transform:scale(1.02);opacity:.94}
.gallery{columns:2;column-gap:16px}
@media(min-width:900px){.gallery{columns:3}}
@media(max-width:560px){.gallery{columns:1}}
.gallery button{display:block;width:100%;margin:0 0 16px;padding:0;border:1px solid var(--line-soft);background:none;cursor:zoom-in;overflow:hidden;break-inside:avoid}
.gallery img{width:100%;height:auto;transition:transform .3s ease,opacity .2s ease}
.gallery button:hover img{transform:scale(1.03);opacity:.92}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.94);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px)}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;border:1px solid var(--line)}
.lb-close{position:absolute;top:18px;right:22px;background:none;border:0;color:var(--text);font-size:2rem;line-height:1;cursor:pointer;font-family:inherit}
.lb-close:hover{color:var(--brass-lt)}