/* ============================================================
   B2 skin for .ee-hp gallery / craft pages (page.css + show.css +
   hbo.css). Load LAST, after those stylesheets. Retint + retype +
   reharmonize to Direction B2 WITHOUT changing page structure —
   same low-touch approach as css/liv-b2.css. Fonts load from Google
   for evaluation (self-host is a follow-up).
   ============================================================ */
@import url('fonts-b2.css');

.ee-hp{
  /* accent: red/blue -> Land green (auto-recolors kick dots, buttons, hovers) */
  --brick:#094C24;--brick-ink:#06371a;--blue:#094C24;--blue-2:#0b5d2e;
  --b-ink:#191612;--b-sea:#0C2340;--b-green:#094C24;
  --b-serif:"Instrument Serif",Georgia,serif;
  --b-sans:"Sen",ui-sans-serif,system-ui,Arial,sans-serif;
  font-family:var(--b-sans);
}
.ee-hp:not(.ee-hp--night){background:#F8F7F3}
.ee-hp:not(.ee-hp--night)::before{display:none}   /* drop the dotted paper texture (light pages only) */

/* ── nav ─────────────────────────────────────────────────── */
.ee-hp .brand__n{background:none!important;-webkit-text-fill-color:var(--b-ink)!important;color:var(--b-ink);font-family:var(--b-sans);font-weight:700}
.ee-hp .brand__t{font-family:var(--b-sans);color:var(--muted)}
.ee-hp .nav,.ee-hp .nav__grp,.ee-hp .nav__menu{font-family:var(--b-sans)}
.ee-hp .nav a{color:var(--b-ink)}
.ee-hp .nav a:hover{color:var(--b-green)}
.js-nav .ee-hp .navbtn{display:none!important}

/* ── footer ──────────────────────────────────────────────── */
.ee-hp .sitefoot__brand{background:none!important;-webkit-text-fill-color:var(--b-ink)!important;color:var(--b-ink);font-family:var(--b-sans)}
.ee-hp .sitefoot__role,.ee-hp .sitefoot__nav{font-family:var(--b-sans)}
.ee-hp .sitefoot__nav a:hover{color:var(--b-green)}
.ee-hp .social a{background:none!important;color:var(--b-ink);min-width:44px;min-height:44px}
.ee-hp .social a:hover{background:none!important;color:var(--b-green)}
.ee-hp .social svg{fill:currentColor}

/* ── page hero ───────────────────────────────────────────── */
.ee-hp .kick{font-family:var(--b-sans);color:var(--b-green)}
.ee-hp .page-h1{font-family:var(--b-serif);font-weight:400;letter-spacing:-.006em;color:var(--b-sea)}
.ee-hp .page-lede{font-family:var(--b-sans);color:var(--muted)}

/* ── reel / film gallery ─────────────────────────────────── */
.ee-hp .reel__n{font-family:var(--b-sans);color:var(--b-green)}
.ee-hp .reel__count{font-family:var(--b-sans);color:var(--faint)}
.ee-hp .reel__desc{font-family:var(--b-sans)}
.ee-hp .film__t{font-family:var(--b-serif);font-weight:400;font-size:clamp(17px,1.5vw,22px);letter-spacing:0;line-height:1.15;color:var(--b-sea)}
.ee-hp .film__meta{font-family:var(--b-sans);color:var(--b-green)}
.ee-hp .film__dur{font-family:var(--b-sans)}
.ee-hp .film__phk{font-family:var(--b-serif)}

/* ── buttons ─────────────────────────────────────────────── */
.ee-hp .btn{font-family:var(--b-sans)}

/* ── back-to-home link (B2 addition) ─────────────────────── */
.ee-hp .b2-back{display:flex;width:fit-content;align-items:center;gap:8px;font-family:var(--b-sans);font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--b-green);text-decoration:none;margin-bottom:clamp(14px,1.8vw,22px)}
.ee-hp .b2-back::before{content:"\2190";font-size:14px;line-height:1}
.ee-hp .b2-back:hover{color:var(--b-sea)}

/* ── HBO / night pages: keep the dark cinematic surface, apply B2 type +
   a legible mint-green accent (Land is too dark on black) ──────────── */
.ee-hp--night{--blue:#8fe0aa;--blue-2:#a8ecbf;--brick:#8fe0aa}
.ee-hp--night .brand__n{-webkit-text-fill-color:#fff!important;color:#fff}
.ee-hp--night .brand__t{color:rgba(255,255,255,.7)}
.ee-hp--night .nav a{color:rgba(255,255,255,.9)}
.ee-hp--night .nav a:hover{color:#8fe0aa}
.ee-hp--night .sitefoot__brand{-webkit-text-fill-color:#fff!important;color:#fff}
.ee-hp--night .sitefoot__role{color:rgba(255,255,255,.6)}
.ee-hp--night .sitefoot__nav a{color:rgba(255,255,255,.85)}
.ee-hp--night .sitefoot__nav a:hover{color:#8fe0aa}
.ee-hp--night .social a{color:rgba(255,255,255,.85)}
.ee-hp--night .social a:hover{color:#8fe0aa}
.ee-hp--night .kick{color:#8fe0aa}
.ee-hp--night .hbo-h1{font-family:var(--b-serif);font-weight:400;letter-spacing:-.006em}
.ee-hp--night .hbo-h1 em{color:#8fe0aa}
.ee-hp--night .hbo-lede{font-family:var(--b-sans)}
.ee-hp--night .hbo-meta__l{font-family:var(--b-sans);color:#8fe0aa}
.ee-hp--night .hbo-meta__v{font-family:var(--b-serif)}
.ee-hp--night .hbo-card__t{font-family:var(--b-serif);font-weight:400}
.ee-hp--night .hbo-card__n{font-family:var(--b-sans)}
.ee-hp--night .lbl,.ee-hp--night .seclbl{font-family:var(--b-sans)}
.ee-hp--night .b2-back{color:#8fe0aa}
.ee-hp--night .b2-back:hover{color:#fff}

/* ── gallery-page lightbox (css/lightbox.css .lb__) -> B2, to match the
   .lv lightbox on home/LIV: Instrument Serif title, Sen body, mint kicker ── */
.lb__info{font-family:"Sen",ui-sans-serif,system-ui,Arial,sans-serif}
.lb__t{font-family:"Instrument Serif",Georgia,serif;font-weight:400}
.lb__k{color:#8fd6a8}

/* ── thumbnail play buttons: hidden until hover/focus (reduce clutter) ── */
.film__play{opacity:0}
.hbo-card__play{opacity:0;transition:opacity .3s,transform .3s}
.hbo-card:hover .hbo-card__play,.hbo-card:focus-visible .hbo-card__play{opacity:1}
/* touch devices (no hover): keep the play affordance visible */
@media(hover:none){.film__play,.hbo-card__play{opacity:1}}

/* ── HBO deep show pages (dark gallery): B2 type + mint accent on the
   show-hero + reel/film grid; film titles stay white on the dark surface ── */
.ee-hp--night .show-back{font-family:var(--b-sans);color:#8fe0aa}
.ee-hp--night .show-back:hover{color:#fff}
.ee-hp--night .show-lede{font-family:var(--b-sans);color:rgba(255,255,255,.72)}
.ee-hp--night .reel__n{color:#8fe0aa}
.ee-hp--night .reel__count{color:rgba(255,255,255,.5)}
.ee-hp--night .reel__desc{font-family:var(--b-sans);color:rgba(255,255,255,.68)}
.ee-hp--night .film__t{color:#fff}
.ee-hp--night .film__meta{color:#8fe0aa}

/* ── work-page CTA (promos / trailers / advertising / archive) ── */
.wk-cta{padding:clamp(46px,6vw,90px) 0;text-align:center;border-top:1px solid var(--b-line,rgba(25,22,18,.13))}
.wk-cta__h{font-family:var(--b-serif,"Instrument Serif",Georgia,serif);font-weight:400;font-size:clamp(25px,3.4vw,42px);line-height:1.14;color:var(--b-sea,#0C2340);max-width:22ch;margin:0 auto}
.wk-cta__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(24px,3vw,36px)}
.wk-cta__btn{font-family:var(--b-sans,"Sen",sans-serif);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:14px 30px;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;border-radius:2px;transition:transform .2s,background .2s,color .2s,border-color .2s}
.wk-cta__btn--fill{background:var(--b-green,#094C24);color:#fff}.wk-cta__btn--fill:hover{transform:translateY(-2px)}
.wk-cta__btn--out{border:1px solid var(--b-line,rgba(25,22,18,.13));color:var(--b-ink,#191612)}.wk-cta__btn--out:hover{border-color:var(--b-green,#094C24);color:var(--b-green,#094C24)}
.wk-cta__btn:focus-visible{outline:2px solid var(--b-green,#094C24);outline-offset:3px}