/* HBO case study — a DARK treatment of the same .ee-hp design system.
   Loads AFTER css/home.css: we only flip the palette tokens, then add HBO-specific
   components. That's the whole cohesion idea — same system, lights down. */

/* ── palette flip: same tokens, cinematic dark values ────────────────────────── */
.ee-hp--night{
  --paper:#0B0B0D; --panel:#141417; --ink:#F3F0EA; --muted:#9C958A; --faint:#6E6860;
  --blue:#6FB0E6; --blue-2:#9FD0FF; --brick:#C8503C; --brick-ink:#B5432F;
  --rule:rgba(255,255,255,.13); --rule-soft:rgba(255,255,255,.07);
}
.ee-hp--night::before{display:none}            /* the light paper-dot texture doesn't belong on black */
.ee-hp--night .nav a{opacity:.82;transition:color .2s,border-color .2s,opacity .2s}
.ee-hp--night .nav a:hover{opacity:1}

/* ── hero ────────────────────────────────────────────────────────────────────── */
.hbo-hero{position:relative;padding:clamp(52px,8vw,104px) 0 clamp(36px,4.5vw,64px);overflow:hidden}
.hbo-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 80% 12%,rgba(200,80,60,.16),transparent 55%),
             radial-gradient(80% 70% at 8% 92%,rgba(63,134,206,.12),transparent 60%)}
.hbo-hero>*{position:relative;z-index:1}
.hbo-hero__logo{width:clamp(118px,16vw,186px);height:auto;margin-bottom:clamp(26px,3.4vw,42px);
  filter:drop-shadow(0 6px 30px rgba(0,0,0,.5))}
.hbo-h1{font-size:clamp(32px,5vw,62px);line-height:1.07;letter-spacing:-.02em;font-weight:500;
  margin:clamp(14px,2vw,24px) 0 0;max-width:19ch;text-wrap:balance}
.hbo-h1 em{font-style:italic;color:var(--blue)}
.hbo-lede{color:var(--muted);font-size:clamp(17px,1.5vw,21px);line-height:1.6;
  max-width:62ch}
/* .ee-hp p{margin:0} (home.css) outranks a lone .hbo-lede, so scope the gap
   under .hbo-hero to win the cascade */
.hbo-hero .hbo-lede{margin-top:clamp(52px,6.2vw,84px)}
.hbo-lede strong{color:var(--ink);font-weight:600}
.hbo-meta{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,58px);margin-top:clamp(28px,3.4vw,44px);
  padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--rule-soft)}
.hbo-meta__l{font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.hbo-meta__v{margin-top:8px;font-size:clamp(16px,1.3vw,19px);color:var(--ink)}

/* ── campaign grid ───────────────────────────────────────────────────────────── */
.hbo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px);
  padding-bottom:clamp(56px,8vw,104px)}
.hbo-card{position:relative;display:block;border:1px solid var(--rule);background:var(--panel);
  overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.hbo-card:hover{transform:translateY(-4px);border-color:rgba(200,80,60,.5);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.hbo-card__art{position:relative;aspect-ratio:16/9;overflow:hidden}
.hbo-card__art img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.03);
  transition:transform .5s,filter .3s}
.hbo-card:hover .hbo-card__art img{transform:scale(1.05);filter:saturate(1) contrast(1.05)}
.hbo-card__art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,13,0) 42%,rgba(11,11,13,.86))}
.hbo-card__play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);
  width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);
  display:grid;place-items:center;opacity:0;transition:.3s}
.hbo-card:hover .hbo-card__play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.hbo-card__play::before{content:"";border-left:13px solid #fff;border-top:8px solid transparent;
  border-bottom:8px solid transparent;margin-left:4px}
.hbo-card__cap{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:clamp(15px,1.5vw,22px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.hbo-card__t{font-size:clamp(19px,1.8vw,26px);font-weight:500;letter-spacing:-.01em;line-height:1.05}
.hbo-card__n{font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

@media(max-width:900px){.hbo-grid{grid-template-columns:repeat(2,1fr)}}
/* Seven show cards stacked ran the length of the phone; swipe them instead. */
@media(max-width:560px){
  .hbo-grid{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;
    scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;
    margin-right:calc(var(--pad, 20px) * -1);padding-right:var(--pad, 20px)}
  .hbo-grid::-webkit-scrollbar{display:none}
  .hbo-grid>.hbo-card{flex:0 0 82%;scroll-snap-align:start}
}