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

.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 (click-to-load YouTube facade) */
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:760px){.video-grid{grid-template-columns:1fr;gap:34px}}
.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}
.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)}