/* ===================================================================
   Bill Masters Productions — studio home
   Shares the cinematic dark/ember language of the film pages.
   =================================================================== */

:root{
  --bg:#0b0a09; --bg-2:#100e0c; --bg-elev:#16130f;
  --text:#ece3d4; --text-soft:#cabfae; --muted:#948977;
  --ember:#e08a45; --ember-2:#b5632e; --gold:#e9bd7e; --cream:#f4ecdc;
  --line:rgba(233,189,126,0.14); --line-soft:rgba(233,189,126,0.08);
  --serif-display:"Cormorant Garamond", Georgia, serif;
  --serif-body:"EB Garamond", Georgia, serif;
  --sans:"Inter", system-ui, -apple-system, sans-serif;
  --maxw:1160px; --pad:clamp(1.25rem,5vw,4rem);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--serif-body);
  font-size:clamp(1.02rem,.55vw + .95rem,1.2rem); line-height:1.72; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
h1,h2,h3{ font-family:var(--serif-display); font-weight:600; line-height:1.06; margin:0; }
p{ margin:0 0 1.15em; color:var(--text-soft); }
em{ font-style:italic; color:var(--text); }

.eyebrow{ font-family:var(--serif-body); text-transform:uppercase; letter-spacing:.42em;
  font-size:.78rem; color:var(--muted); margin:0 0 1.4em; font-weight:500; }
.eyebrow--ember{ color:var(--ember); }

.btn{ --_bg:transparent; --_fg:var(--cream); --_bd:var(--line);
  display:inline-flex; align-items:center; gap:.6em; font-family:var(--sans); font-weight:500;
  font-size:.94rem; letter-spacing:.03em; text-decoration:none; padding:.85em 1.7em;
  border:1px solid var(--_bd); border-radius:2px; background:var(--_bg); color:var(--_fg);
  transition:transform .25s, background .25s, border-color .25s, color .25s; }
.btn--ember{ --_bg:linear-gradient(180deg,var(--ember),var(--ember-2)); --_fg:#1a0f07; --_bd:transparent;
  box-shadow:0 10px 40px -12px rgba(224,138,69,.6); font-weight:600; }
.btn--ember:hover{ transform:translateY(-2px); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }

/* ---------- Nav ---------- */
.nav{ position:fixed; inset:0 0 auto 0; z-index:50; pointer-events:none; transition:background .35s;
  background:linear-gradient(180deg, rgba(11,10,9,.97) 0%, rgba(11,10,9,.82) 38%, rgba(11,10,9,.42) 70%, rgba(11,10,9,0) 100%); }
.nav.is-scrolled{ background:linear-gradient(180deg, rgba(11,10,9,.98) 0%, rgba(11,10,9,.86) 55%, rgba(11,10,9,0) 100%); backdrop-filter:blur(8px); }
.nav__inner{ max-width:var(--maxw); margin:0 auto; padding:1.15rem var(--pad) 2.3rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; pointer-events:none; }
.nav__brand, .nav__links{ pointer-events:auto; }
.nav__brand{ font-family:var(--serif-display); font-weight:600; font-size:1.5rem; color:var(--cream);
  text-decoration:none; letter-spacing:.02em; display:flex; align-items:baseline; gap:.5rem;
  white-space:nowrap; flex-wrap:nowrap; }
.nav__brand span{ font-family:var(--sans); font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem); }
.nav__links a{ font-family:var(--sans); font-size:.86rem; letter-spacing:.04em; color:var(--text-soft); text-decoration:none; transition:color .2s; }
.nav__links a:hover{ color:var(--gold); }
/* hamburger (mobile only) */
.nav__toggle{ display:none; position:relative; z-index:60; background:none; border:0; cursor:pointer;
  padding:.4rem; pointer-events:auto; }
.nav__toggle span{ display:block; width:24px; height:2px; background:var(--cream); margin:5px 0;
  transition:transform .3s ease, opacity .3s ease; }
.nav__toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2){ opacity:0; }
.nav__toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:92svh; display:flex; align-items:center; overflow:hidden; background:var(--bg); }
/* Rotating still, darkened, sitting UNDER the ember glow */
.hero__bg{ position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s ease; }
.hero__bg.is-loaded{ opacity:.42; }
/* Ember color glow shines through/over the photo; plus a scrim to keep text legible */
.hero__glow{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(60% 55% at 18% 18%, rgba(224,138,69,.22), rgba(224,138,69,0) 60%),
    radial-gradient(70% 60% at 85% 90%, rgba(181,99,46,.20), rgba(181,99,46,0) 62%),
    linear-gradient(180deg, rgba(11,10,9,.60) 0%, rgba(11,10,9,.40) 42%, rgba(11,10,9,.72) 100%); }
.hero__inner{ position:relative; z-index:2; padding-block:clamp(7rem,16vh,10rem); }
.hero__logo-wrap{ margin:0; line-height:0; }
.hero__logo{ width:min(640px,94%); height:auto; margin-left:-2%;
  filter:drop-shadow(0 8px 40px rgba(224,138,69,.18)); }
.hero__tag{ max-width:34ch; margin:1.4rem 0 2.6rem; font-size:clamp(1.1rem,1.4vw,1.35rem); color:var(--text-soft); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }
.hero__scroll{ position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%);
  width:24px; height:38px; border:1px solid var(--line); border-radius:14px; z-index:2; }
.hero__scroll span{ position:absolute; top:8px; left:50%; width:3px; height:7px; border-radius:2px;
  background:var(--gold); transform:translateX(-50%); animation:scroll 1.8s ease-in-out infinite; }
@keyframes scroll{ 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0;transform:translate(-50%,12px)} }

.section{ padding-block:clamp(4.5rem,10vw,8rem); }

/* ---------- Films ---------- */
.films{ background:var(--bg-2); }
.films h2{ font-size:clamp(1.9rem,3.5vw,2.8rem); color:var(--cream); margin-bottom:2.6rem; }
.film-card{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.film-card__art{ position:relative; }
.film-card__art img{ width:100%; height:100%; object-fit:cover; }
.film-card__body{ padding:clamp(1.75rem,3.5vw,3rem) clamp(1.5rem,3vw,2.5rem) clamp(1.75rem,3.5vw,3rem) 0; }
.film-card__status{ font-family:var(--sans); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ember); margin:0 0 1rem; }
.film-card__title{ font-family:var(--serif-display); font-size:clamp(2rem,4vw,3rem); color:var(--cream); line-height:1; margin:0 0 .3em; }
.film-card__sub{ font-family:var(--serif-body); text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; color:var(--muted); margin:0 0 1.4rem; }
.film-card__desc{ font-size:1.02rem; margin-bottom:1.8rem; }
.film-card__more{ margin-top:2.5rem; font-family:var(--sans); font-size:.86rem; letter-spacing:.03em; color:var(--muted); }

/* ---------- About ---------- */
.about{ background:var(--bg); }
.about__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.about h2{ font-size:clamp(1.9rem,3.5vw,2.8rem); color:var(--cream); }
.about__portrait{ margin:2rem 0 0; max-width:340px; }
.about__portrait img{ width:100%; border-radius:6px; }
.about__portrait figcaption{ font-family:var(--serif-display); font-style:italic; font-size:1.3rem; color:var(--gold); margin-top:.9rem; }
@media (max-width:820px){ .about__portrait{ max-width:280px; } }

/* ===================================================================
   Music page (/music/)
   =================================================================== */
.mus-head{ padding:clamp(7rem,15vh,10rem) var(--pad) clamp(2rem,5vw,3rem); text-align:center; }
.mus-head h1{ font-size:clamp(2.4rem,6vw,4rem); color:var(--cream); }
.mus-head p{ max-width:56ch; margin:1.2rem auto 0; color:var(--text-soft); }
.mus-wrap{ max-width:900px; margin:0 auto; padding:0 var(--pad) clamp(4rem,9vw,7rem); }

.track{ background:var(--bg-elev); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:2rem; }
.track__player{ position:relative; aspect-ratio:16/9; cursor:pointer; background:#000; }
.track__player img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.track__player:hover img{ transform:scale(1.03); }
.track__play{ position:absolute; inset:0; margin:auto; width:88px; height:62px; display:flex; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; }
.track__play svg path:first-child{ fill:rgba(11,10,9,.65); transition:fill .25s; }
.track__player:hover .track__play svg path:first-child{ fill:var(--ember); }
.track__player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.track__body{ padding:clamp(1.4rem,3vw,2rem); }
.track__title{ font-family:var(--serif-display); font-size:clamp(1.6rem,3vw,2.3rem); color:var(--cream); margin:0 0 .2em; }
.track__artist{ font-family:var(--serif-body); font-style:italic; color:var(--gold); font-size:1.15rem; margin:0 0 1rem; }
.track__meta{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; font-family:var(--sans); font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 1.2rem; }
.track__desc{ margin-bottom:1.2rem; }
.track__links{ display:flex; flex-wrap:wrap; gap:.8rem; }

.artist-note{ border:1px solid var(--line); border-left-width:3px; border-radius:4px;
  background:rgba(181,99,46,.07); padding:1.3rem 1.5rem; margin-top:2.5rem; }
.artist-note strong{ display:block; font-family:var(--sans); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ember); margin-bottom:.6rem; }
.artist-note p{ margin:0; font-size:.95rem; }
.mus-soon{ text-align:center; color:var(--muted); font-size:.95rem; margin-top:2.5rem; }

/* ---------- Footer ---------- */
.footer{ background:var(--bg-2); border-top:1px solid var(--line-soft); text-align:center; padding-block:clamp(3.5rem,8vw,6rem); }
.footer__logo{ width:min(340px,72%); height:auto; margin:0 auto .8rem; }
.footer__tag{ font-family:var(--sans); font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); margin:0; }
.footer__meta{ color:var(--muted); font-size:.88rem; margin:1.6rem 0 0; }
.footer__copy{ font-family:var(--sans); font-size:.78rem; letter-spacing:.05em; color:#5f574b; margin:.6rem 0 0; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } .hero__scroll span{ animation:none; } html{ scroll-behavior:auto; } }

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .film-card{ grid-template-columns:1fr; }
  .film-card__art img{ height:auto; aspect-ratio:16/9; }
  .film-card__body{ padding:0 clamp(1.5rem,5vw,2.2rem) clamp(2rem,6vw,2.6rem); }
  .about__grid{ grid-template-columns:1fr; }

  /* hamburger + full-screen slide-in menu */
  .nav__toggle{ display:block; }
  .nav__brand{ font-size:1.2rem; }
  .nav__brand span{ font-size:.55rem; letter-spacing:.26em; }
  .nav__links{
    position:fixed; inset:0 0 auto 0; top:0; height:100svh;
    padding:5.5rem var(--pad) 2.5rem;
    flex-direction:column; align-items:flex-start; gap:1.6rem;
    background:rgba(11,10,9,.97); backdrop-filter:blur(14px);
    transform:translateY(-100%); transition:transform .4s ease;
  }
  .nav__links.is-open{ transform:none; }
  .nav__links a{ font-size:1.15rem; }
}

/* very narrow phones — keep "Bill Masters Productions" on one line */
@media (max-width:430px){
  .nav__brand{ font-size:1.02rem; gap:.4rem; }
  .nav__brand span{ font-size:.48rem; letter-spacing:.16em; }
  .nav__inner{ padding-left:1rem; padding-right:1rem; }
}