/* ==========================================================================
   CHALK — "Man's Best Friend" film page (loaded only on mans-best-friend.html)
   Depends on styles.css (tokens + components). Cinematic, dark, film-first.
   ========================================================================== */

/* ---------- Film grain overlay ------------------------------------------ */
#grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.5;mix-blend-mode:overlay}

/* ---------- FILM HERO --------------------------------------------------- */
.mbf-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;isolation:isolate;
  padding:9rem clamp(1.25rem,5.7vw,4rem) clamp(3rem,7vw,6rem)}
.mbf-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.mbf-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#000000cc 0%,#00000040 32%,#00000059 62%,#000000e6 100%)}
.mbf-hero__inner{position:relative;z-index:2;max-width:960px}
.mbf-hero__eyebrow{display:inline-block;margin-bottom:1.1rem;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(.8rem,1.05vw,1rem);letter-spacing:.22em;
  background-image:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.mbf-hero__title{color:var(--white);font-size:clamp(3rem,11vw,9.5rem);line-height:.88;
  letter-spacing:-.01em;margin:0 0 1.5rem;text-shadow:0 4px 40px #000000a6}
.mbf-hero__title em{color:var(--white)}
.mbf-hero__logline{font-family:var(--font-accent);font-style:italic;text-transform:none;
  color:#f2efec;font-size:clamp(1.15rem,2.2vw,1.9rem);line-height:1.3;
  max-width:640px;margin:0 0 2.25rem;text-shadow:0 2px 24px #000000a6}
.mbf-hero__actions{display:flex;align-items:center;gap:clamp(1.25rem,3vw,2.25rem);flex-wrap:wrap}
.mbf-hero__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(.7rem,.95vw,.85rem);letter-spacing:.12em;color:var(--ink);opacity:.85}
.mbf-hero__meta span{position:relative;padding-right:1.4rem}
.mbf-hero__meta span::after{content:'';position:absolute;right:0;top:50%;width:5px;height:5px;
  border-radius:50%;background:var(--amber);transform:translateY(-50%)}
.mbf-hero__meta span:last-child::after{display:none}
.mbf-hero__meta span:last-child{padding-right:0}

/* ---------- PLAY BUTTON (Vimeo facade) ---------------------------------- */
.mbf-play{position:relative;display:inline-flex;align-items:center;gap:1rem;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(.85rem,1.1vw,1rem);letter-spacing:.06em;color:var(--white);
  padding:.4rem .4rem;transition:color .3s var(--ease-out)}
.mbf-play__disc{position:relative;width:clamp(62px,7vw,84px);height:clamp(62px,7vw,84px);
  border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--purple);color:#fff;transition:transform .35s var(--ease-out),filter .35s var(--ease-out)}
.mbf-play__disc svg{width:34%;height:34%;margin-left:8%}
.mbf-play__disc::before{content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--purple)}
@media (prefers-reduced-motion:no-preference){
  .mbf-play__disc::before{animation:mbfPulse 2.6s var(--ease-out) infinite}
}
@keyframes mbfPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}
.mbf-play:hover .mbf-play__disc{transform:scale(1.06);filter:brightness(1.1)}
.mbf-play:hover{color:var(--amber)}

/* ---------- VIMEO LIGHTBOX --------------------------------------------- */
.mbf-modal{position:fixed;inset:0;z-index:10000;display:none;
  align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);
  background:#000000f2;backdrop-filter:blur(8px);opacity:0;transition:opacity .35s var(--ease-out)}
.mbf-modal.is-open{display:flex}
.mbf-modal.is-visible{opacity:1}
.mbf-modal__frame{position:relative;width:100%;max-width:1200px;aspect-ratio:16/9;
  background:#000;border-radius:var(--r-card);overflow:hidden;box-shadow:0 40px 120px #000}
.mbf-modal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mbf-modal__close{position:absolute;top:clamp(.75rem,3vw,1.5rem);right:clamp(.75rem,3vw,1.5rem);
  width:48px;height:48px;border-radius:50%;background:var(--glass);backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;color:#fff;z-index:2;
  transition:background-color .3s var(--ease-out)}
.mbf-modal__close:hover{background:#ffffff26}
.mbf-modal__close svg{width:20px;height:20px}

/* ---------- SYNOPSIS / STORY ------------------------------------------- */
.mbf-story{background:var(--black);padding-block:clamp(4rem,9vw,8rem)}
.mbf-story__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,5vw,5rem);align-items:start}
@media (max-width:860px){.mbf-story__grid{grid-template-columns:1fr;gap:1.5rem}}
.mbf-story__lead{font-family:var(--font-accent);font-style:italic;text-transform:none;
  color:var(--ink);font-size:clamp(1.5rem,2.8vw,2.4rem);line-height:1.28;margin:0}
.mbf-story__body p{font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.62;color:var(--ink-60);margin-bottom:1.4rem}
.mbf-story__dedication{margin-top:2rem;padding-top:1.75rem;border-top:1px solid var(--hairline);
  font-family:var(--font-accent);font-style:italic;color:var(--ink);
  font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.4}

/* ---------- STILLS GALLERY (mosaic) ------------------------------------ */
.mbf-stills{background:var(--black-raised);padding-block:clamp(4rem,9vw,8rem)}
.mbf-stills__head{margin-bottom:clamp(2rem,4vw,3rem)}
.mbf-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.6rem,1.4vw,1.1rem)}
.mbf-gallery figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r-card);
  background:var(--card-dark);aspect-ratio:16/9}
.mbf-gallery img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease-out);filter:saturate(.96)}
.mbf-gallery figure:hover img{transform:scale(1.05)}
.mbf-gallery figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(.8rem,1.4vw,1.25rem);font-family:var(--font-accent);font-style:italic;
  color:#f2efec;font-size:clamp(.8rem,1vw,1rem);
  background:linear-gradient(#0000,#000000b3);opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);pointer-events:none}
.mbf-gallery figure:hover figcaption{opacity:1;transform:none}
@media (min-width:800px){
  .mbf-gallery{grid-template-columns:repeat(6,1fr)}
  .mbf-gallery .g-third{grid-column:span 2}
  .mbf-gallery .g-half{grid-column:span 3}
  .mbf-gallery .g-full{grid-column:span 6;aspect-ratio:21/8}
}

/* ---------- CREDITS ---------------------------------------------------- */
.mbf-credits{background:var(--black);padding-block:clamp(4rem,9vw,8rem)}
.mbf-credits__grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.5rem) clamp(2rem,5vw,4rem);margin-top:clamp(1.5rem,3vw,2.5rem)}
@media (max-width:760px){.mbf-credits__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.mbf-credits__grid{grid-template-columns:1fr}}
.mbf-credit dt{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:.72rem;letter-spacing:.16em;color:var(--ink);opacity:.55;margin-bottom:.4rem}
.mbf-credit dd{font-family:var(--font-display);font-weight:600;color:var(--ink);
  font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.25}

/* ---------- MORE FILMS (reuses shared .thumb component) ---------------- */
.mbf-more{background:var(--black-raised);padding-block:clamp(4rem,9vw,8rem)}
.mbf-more__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.5vw,1.25rem);
  margin-top:clamp(2rem,4vw,3rem)}
@media (max-width:900px){.mbf-more__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.mbf-more__grid{grid-template-columns:1fr}}
.mbf-more__grid .thumb{aspect-ratio:4/5}

/* ---------- CTA -------------------------------------------------------- */
.mbf-cta{background:var(--black);text-align:center;padding-block:clamp(4rem,8vw,7rem)}
.mbf-cta .tag-pill{margin-bottom:2rem}
.mbf-cta h2{font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.12;max-width:820px;
  margin:0 auto 1.25rem;color:#fff}
.mbf-cta h2 em{color:#fff}
.mbf-cta p{font-family:var(--font-ui);color:var(--ink-60);max-width:600px;margin:0 auto 2.5rem}

/* ---------- Section header helper -------------------------------------- */
.mbf-secttl{font-size:clamp(2rem,5vw,3.4rem);line-height:.95;margin:0}
.mbf-secttl em{color:var(--ink)}