/* Christian Blandford — shared stylesheet
   Used by: index.html, listen.html, sheet-music.html, contact.html */

:root{
  --bg:#ffffff;
  --bg-soft:#f4f4f3;
  --ink:#111111;
  --ink-soft:#5c5c5c;
  --line:#e3e3e3;
  --accent:#111111;      /* black & white: emphasis via weight, not hue */
  --accent-soft:#c9c9c9;
  --maxw:1080px;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:300;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
.eyebrow{font-family:var(--sans);font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;font-size:.7rem;color:var(--accent)}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;
  max-width:var(--maxw);margin:0 auto;padding:1.1rem 1.5rem}
.brand{font-family:var(--serif);font-size:1.35rem;letter-spacing:.01em}
.brand span{color:var(--accent)}
.navlinks{display:flex;gap:2rem;font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:400}
.navlinks a{color:var(--ink-soft);transition:color .2s}
.navlinks a:hover{color:var(--ink)}
.navlinks a.active{color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:2px}
.menu-btn{display:none;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer}

/* ---------- hero (home only) ---------- */
.hero{min-height:82vh;display:flex;align-items:center;position:relative;
  background-color:var(--bg);
  /* Faded hero image: cream wash over the photo keeps text readable.
     Tune the two rgba alphas (lower = image more visible). */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(244,244,243,.86) 100%),
    url("assets/hero.png");
  background-size:cover;background-position:center;background-repeat:no-repeat;
  padding:0}
.hero .wrap{width:100%}
.hero h1{font-size:clamp(3rem,8vw,6.5rem);font-weight:400;letter-spacing:-.01em}
.hero p.lede{max-width:42ch;margin:1.8rem 0 2.4rem;color:var(--ink-soft);font-size:1.05rem}
.cta{display:flex;gap:1rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.85rem 1.6rem;font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;border:1px solid var(--ink);transition:all .2s}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.alt{border-color:var(--line);color:var(--ink-soft)}
.btn.alt:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---------- page header (inner pages) ---------- */
.page-head{padding:5rem 0 1rem}
.page-head h1{font-size:clamp(2.4rem,6vw,4rem);font-weight:400;margin-top:.6rem}
.page-head .lead{margin-top:1.1rem;max-width:56ch}

/* ---------- sections ---------- */
section{padding:6rem 0}
.section-head{margin-bottom:3rem;max-width:60ch}
.section-head h2{font-size:clamp(2rem,4.5vw,3rem);margin:.5rem 0 0}
.lead{font-size:1.15rem;color:var(--ink-soft)}
.alt-bg{background:var(--bg-soft)}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.portrait{aspect-ratio:4/5;background:
  linear-gradient(135deg,#e8e8e8,#c4c4c4);border:1px solid var(--line);overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}

/* ---------- portrait panels (Listen) ---------- */
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.panel{position:relative;aspect-ratio:2/3;overflow:hidden;
  border:1px solid var(--line);display:block;
  transition:transform .35s ease, box-shadow .35s ease}
.panel:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(0,0,0,.18)}
/* Placeholder art — swap .panel-art background for url(assets/xxx.jpg) when artwork exists */
.panel .panel-art{position:absolute;inset:0;
  background:linear-gradient(160deg,#3a3a3a 0%,#0d0d0d 100%);
  background-size:cover;background-position:center;
  transition:transform .6s ease}
.panel:hover .panel-art{transform:scale(1.05)}
.panel .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.72) 100%)}
.panel .panel-body{position:absolute;left:0;right:0;bottom:0;padding:1.4rem;color:#fff}
.panel .panel-body h3{font-size:1.6rem;color:#fff}
.panel .panel-body .meta{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-top:.35rem}
/* play affordance — for wiring audio excerpts later */
.panel .play{position:absolute;top:50%;left:50%;width:56px;height:56px;
  transform:translate(-50%,-50%) scale(.85);border-radius:50%;
  border:1px solid rgba(255,255,255,.7);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  opacity:0;transition:opacity .3s ease, transform .3s ease;backdrop-filter:blur(2px)}
.panel:hover .play{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---------- streaming chips ---------- */
.platforms{display:flex;gap:.9rem;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.2rem;
  border:1px solid var(--line);background:var(--bg);font-size:.85rem;letter-spacing:.04em;
  transition:all .2s}
.chip:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- sheet music ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,280px));
  gap:1.8rem;justify-content:center}
.card{border:1px solid var(--line);background:var(--bg)}
.card .cover{aspect-ratio:1/1;background:linear-gradient(135deg,#f2f2f2,#d8d8d8);
  display:flex;align-items:center;justify-content:center;color:var(--accent);
  font-family:var(--serif);font-size:2.4rem}
.card .body{padding:1.2rem}
.card h3{font-size:1.35rem}
.card .meta{display:flex;justify-content:space-between;align-items:center;margin-top:.8rem}
.price{font-weight:500;font-family:var(--sans)}
.buy{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

/* ---------- empty state (Projects) ---------- */
.empty{border:1px dashed var(--line);padding:5rem 2rem;text-align:center;
  color:var(--ink-soft);background:var(--bg-soft)}
.empty h3{font-size:1.6rem;margin-bottom:.6rem;color:var(--ink)}

/* ---------- contact ---------- */
.contact{text-align:center;max-width:48ch;margin:0 auto}
.contact h2{font-size:clamp(2rem,5vw,3.2rem)}
.mail{display:inline-block;margin-top:1.4rem;font-family:var(--serif);
  font-size:1.6rem;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:.15rem}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:3rem 0;font-size:.82rem;color:var(--ink-soft)}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.social{display:flex;gap:1.4rem;letter-spacing:.06em;text-transform:uppercase;font-size:.75rem}
.social a:hover{color:var(--accent)}

@media(max-width:820px){
  .navlinks{display:none}
  .navlinks.open{display:flex;position:absolute;flex-direction:column;top:100%;right:1.5rem;
    background:var(--bg);padding:1rem 1.5rem;border:1px solid var(--line);gap:1rem}
  .menu-btn{display:block}
  .about{grid-template-columns:1fr;gap:2.5rem}
  .panels{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr 1fr}
  section{padding:4rem 0}
  .page-head{padding-top:3rem}
}
@media(max-width:520px){
  .panels{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}

/* ---------- player modal (lightbox) ---------- */
/* align-items:flex-start + margin:auto on the player keeps it centred when it
   fits, but lets it scroll without clipping the top when it's taller than the screen */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;
  padding:1.5rem;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .28s ease, visibility .28s ease}
.modal.open{opacity:1;visibility:visible}

.player{position:relative;width:min(940px,100%);aspect-ratio:16/9;margin:auto;
  background:var(--bg);border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:2rem 2.25rem;
  transform:translateY(14px) scale(.985);transition:transform .28s ease}
.modal.open .player{transform:none}

.player-close{position:absolute;top:.6rem;right:.9rem;
  background:none;border:0;cursor:pointer;color:var(--ink-soft);
  font-size:1.6rem;line-height:1;padding:.4rem .6rem;transition:color .2s}
.player-close:hover{color:var(--ink)}

.player-title{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.4rem);margin:0}

/* centre: big play button */
.player-mid{display:flex;align-items:center;justify-content:center;flex:1}
.player-play{width:74px;height:74px;border-radius:50%;border:1px solid var(--accent);
  color:var(--accent);background:none;cursor:pointer;font-size:1.4rem;
  display:flex;align-items:center;justify-content:center;transition:all .25s}
.player-play:hover{background:var(--accent);color:#fff}

/* transport bar */
.player-bar{display:flex;align-items:center;gap:1rem;font-size:.78rem;color:var(--ink-soft)}
.player-track{flex:1;height:3px;background:var(--line);position:relative}
.player-track::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0%;
  background:var(--accent)}
.player-note{text-align:center;font-size:.78rem;color:var(--ink-soft);margin-top:.5rem}

@media(max-width:640px){
  .player{aspect-ratio:auto;min-height:60vh;padding:1.5rem}
  .player-play{width:60px;height:60px}
}

/* ---------- embedded player (YouTube playlist etc.) ---------- */
/* Applied when a panel carries a data-embed URL. */
.player.has-embed{aspect-ratio:auto;justify-content:flex-start;padding:1.25rem}
.player.has-embed .player-mid,
.player.has-embed .player-bar,
.player.has-embed .player-note{display:none}
.player-embed-wrap{width:100%;margin-top:.9rem}
.player-embed{width:100%;aspect-ratio:16/9;border:0;display:block;background:#000}
/* long real titles shouldn't crowd the panel */
.panel .panel-body h3{font-size:clamp(1.1rem,1.55vw,1.6rem)}

/* SoundCloud "set" players need real height to reveal the tracklist,
   rather than the 16:9 shape a YouTube video wants. */
.player-embed-wrap.tall .player-embed{aspect-ratio:auto;height:480px}
@media(max-width:640px){
  .player-embed-wrap.tall .player-embed{height:400px}
}

/* ---------- player description ---------- */
.player-desc{margin-top:1.1rem;font-size:.92rem;line-height:1.65;color:var(--ink-soft)}
.player-desc p{margin:0}
.player-desc a{color:var(--accent);border-bottom:1px solid var(--accent);transition:all .2s}
.player-desc a:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- extras inside the player description (Steam widget, video) ---------- */
.player-extras{display:grid;gap:1.4rem;margin-top:1.4rem}
.extra-label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .5rem}
.extra-steam{width:100%;height:190px;border:0;display:block}
.extra-video{width:100%;aspect-ratio:16/9;border:0;display:block;background:#000}

/* ---------- black & white: emphasis carried by weight, not colour ---------- */
.eyebrow{font-weight:600;color:var(--ink)}
.brand span{font-weight:inherit;color:inherit}
.navlinks a.active{font-weight:600}
.price{font-weight:600}
.buy{font-weight:600}
.extra-label{font-weight:600;color:var(--ink)}
.mail{font-weight:500}
.player-desc a{font-weight:500}
.card h3,.panel .panel-body h3{font-weight:600}
/* links stay legible without colour: underline does the work */
.player-desc a,.mail{border-bottom:1px solid var(--ink);color:var(--ink)}
.player-desc a:hover,.mail:hover{opacity:.6}

/* wordmark: both words identical weight and colour, larger and darker */
.brand{font-size:1.75rem;font-weight:600;color:var(--ink);letter-spacing:0}
.brand span{font-weight:inherit;color:inherit}

/* visually hidden but readable by screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* panel meta: mixed-case labels like "(Game, 2025)" read better without caps */
.panel .panel-body .meta{text-transform:none;letter-spacing:.02em;font-size:.78rem}

/* ---------- cover-art panels ----------
   For light artwork that already carries its own title (album covers).
   Flips the scrim and text to dark, and hides the duplicate overlaid title
   (kept in the DOM for screen readers). */
.panel.cover-art .scrim{
  background:linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(255,255,255,.92) 100%)}
.panel.cover-art .panel-body{color:var(--ink)}
.panel.cover-art .panel-body h3{color:var(--ink)}
.panel.cover-art .panel-body .meta{color:var(--ink-soft);font-weight:600}
.panel.cover-art .play{border-color:rgba(0,0,0,.5);color:#111}

/* ---------- player subtitle ----------
   Second line under the player title, e.g. "(Short Film by Annie Meade)" */
.player-subtitle{font-family:var(--serif);font-style:italic;
  font-size:clamp(1rem,1.9vw,1.35rem);color:var(--ink-soft);
  margin:.4rem 0 0;font-weight:400}

/* ---------- square artwork ----------
   Album covers are 1:1 but tiles are 2:3. Cropping to fill would clip the
   cover's own title/credits at the sides, so fit the whole thing instead
   and letterbox against a colour drawn from the artwork. */
.panel.square-art .panel-art{background-size:contain;background-repeat:no-repeat;
  background-position:center;background-color:#17323e}

/* ---------- rescore disclaimer note ---------- */
.rescore-note{margin:0 0 2.5rem;padding:1rem 1.25rem;
  border-left:2px solid var(--ink);color:var(--ink-soft);
  font-size:.95rem;line-height:1.65}

/* ---------- inline links inside body copy ---------- */
.lead a{color:var(--ink);border-bottom:1px solid var(--ink);transition:opacity .2s}
.lead a:hover{opacity:.55}