/* Shared opening composition derived from the approved KING hero. */
.case-hero{
  position:relative;
  height:100svh;
  min-height:600px;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:0;
  background:#080808;
}
.case-hero .hero-inner{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:none;
  padding:90px 24px 120px;
  color:#f4f1e9;
}
.case-hero .hero-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:min(620px,100%);
  max-width:100%;
  margin:0;
  gap:24px;
  text-align:center;
}
.case-hero .hero-year{
  display:block;
  margin:0;
  color:#fff;
  font:600 13px/1.4 var(--sans,Arial,sans-serif); /* era mono; padronizado em 18/09/2026 */
  letter-spacing:.06em;
  text-transform:uppercase;
}
/* a mesma cor nos oito cases: ano e cargo brancos, descrição branca a 78% */
.case-hero .hero-role>span,.case-hero .hero-title{color:#fff}
.case-hero .hero-role small{color:rgba(255,255,255,.78)}
.case-hero .hero-lockup{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  min-height:0;
  margin:0;
}
.case-hero .hero-lockup img{
  display:block;
  width:var(--case-hero-logo-width,clamp(240px,27vw,390px));
  max-width:100%;
  height:auto;
  max-height:32svh;
  margin:0;
  object-fit:contain;
}
.case-hero .hero-role{
  display:block;
  align-self:auto;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  border:0;
  color:#fff;
  font-family:var(--sans,Arial,sans-serif);
  font-size:inherit;
  line-height:1.1;
  letter-spacing:0;
  text-align:center;
  text-transform:none;
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}
.case-hero .hero-role>b{display:none}
.case-hero .hero-role>span,
.case-hero .hero-title{
  display:block;
  margin:0;
  color:#fff;
  font-size:clamp(28px,3vw,40px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.03em;
  text-transform:none;
}
.case-hero .hero-role small{
  display:block;
  max-width:48ch;
  margin:14px auto 0;
  color:#eee;
  font-size:15px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:0;
  text-transform:none;
}
.case-hero.case-hero--aleda{--case-hero-logo-width:clamp(240px,27vw,390px)}

.case-hero.case-hero--aleda .hero-logo-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--case-hero-logo-width);
  max-width:100%;
}
.case-hero.case-hero--aleda .hero-lockup .hero-logo-mark img{
  width:100%;
  height:auto;
}
.case-hero.case-hero--skull{--case-hero-logo-width:clamp(240px,27vw,390px)}
.case-hero.case-hero--meow{--case-hero-logo-width:clamp(240px,27vw,390px)}
.case-hero.case-hero--nike{--case-hero-logo-width:clamp(240px,27vw,390px)}
.case-hero.case-hero--netflix .hero-lockup{width:fit-content;max-width:100%;gap:clamp(10px,1.2vw,18px)}
.case-hero.case-hero--netflix .hero-lockup h1{
  display:block;
  margin:0;
  font-size:clamp(36px,3.4vw,48px);
  line-height:.86;
  white-space:normal;
  text-align:left;
}
.case-hero.case-hero--netflix .hero-lockup h1 span{display:block;white-space:nowrap}
.case-hero.case-hero--netflix .hero-lockup h1 em{display:block}
.case-hero.case-hero--netflix .hero-n{
  flex:0 0 auto;
  /* a regra geral de .hero-lockup img dá largura de logotipo à imagem (240 a 390 px) e o N
     ficava centrado numa caixa quase vazia, com um vão até o título. O N mede pela altura. */
  width:auto;
  max-height:none;
  height:calc(clamp(36px,3.4vw,48px) * 1.72);
}
@media(max-width:860px){
  .case-hero{
    height:100svh;
    min-height:600px;
  }
  .case-hero .hero-inner{
    padding:88px 24px 132px;
  }
  .case-hero .hero-block{
    width:min(350px,100%);
    gap:22px;
  }
  .case-hero .hero-year{
    font-size:11px;
    letter-spacing:.12em;
  }
  .case-hero .hero-lockup img{
    width:var(--case-hero-logo-width-mobile,min(74vw,300px));
    max-height:26svh;
  }
  .case-hero .hero-role>span,
  .case-hero .hero-title{
    font-size:28px;
  }
  .case-hero .hero-role small{
    max-width:34ch;
    margin-top:12px;
    font-size:14px;
    line-height:1.5;
  }
  .case-hero.case-hero--aleda{--case-hero-logo-width-mobile:min(84vw,330px)}
  .case-hero.case-hero--aleda .hero-logo-mark{width:var(--case-hero-logo-width-mobile)}
  .case-hero.case-hero--skull{--case-hero-logo-width-mobile:min(58vw,230px)}
  .case-hero.case-hero--meow{--case-hero-logo-width-mobile:min(68vw,270px)}
  .case-hero.case-hero--nike{--case-hero-logo-width-mobile:min(76vw,300px)}
  .case-hero.case-hero--netflix .hero-lockup{
    flex-direction:column;
    width:min(320px,100%);
    gap:14px;
  }
  .case-hero.case-hero--netflix .hero-lockup h1{
    font-size:clamp(27px,7.2vw,31px);
    line-height:.92;
    text-align:center;
  }
  .case-hero.case-hero--netflix .hero-lockup h1 span{white-space:nowrap}
  .case-hero.case-hero--netflix .hero-n{
    width:auto;
    height:min(20vw,82px);
  }
}
@media(max-width:360px){
  .case-hero .hero-inner{padding-inline:20px}
  .case-hero .hero-block{gap:18px}
  .case-hero .hero-role>span,
  .case-hero .hero-title{font-size:25px}
  .case-hero .hero-role small{font-size:13px}
}

/* ---- 18/09/2026: a régua das capas, com força, porque cada página tinha regra própria ----
   ano 13 px sans, cargo 40 px, descrição 15 px a 78%; logo com a mesma largura máxima nos oito */
.case-hero .hero-year{font:600 13px/1.4 var(--sans,Arial,sans-serif)!important;letter-spacing:.06em!important;text-transform:none!important;color:#fff!important;margin:0!important}
.case-hero .hero-role>span,.case-hero .hero-title{font:700 clamp(28px,3vw,40px)/1.1 var(--sans,Arial,sans-serif)!important;letter-spacing:-.03em!important;text-transform:none!important;color:#fff!important}
.case-hero .hero-role small{font:400 15px/1.6 var(--sans,Arial,sans-serif)!important;color:rgba(255,255,255,.78)!important;text-transform:none!important;letter-spacing:0!important;max-width:48ch;margin:14px auto 0}
.case-hero .hero-lockup img:not(.hero-n){width:var(--case-hero-logo-width,clamp(240px,27vw,390px))!important;height:auto!important;max-height:32svh!important}
.case-hero.case-hero--aleda .hero-logo-mark{width:var(--case-hero-logo-width)!important}
@media(max-width:860px){
  .case-hero .hero-role>span,.case-hero .hero-title{font-size:28px!important}
  .case-hero .hero-role small{font-size:14px!important;max-width:34ch}
  .case-hero .hero-lockup img:not(.hero-n){width:var(--case-hero-logo-width-mobile,min(74vw,300px))!important;max-height:26svh!important}
}

/* Netflix (18/09/2026): o N ganha a presença dos logos das outras capas e o nome da festa
   desce pra baixo dele, pequeno, numa linha só */
.case-hero.case-hero--netflix .hero-lockup{flex-direction:column!important;align-items:center!important;gap:clamp(14px,1.4vw,22px)!important;width:auto!important}
.case-hero.case-hero--netflix .hero-n{height:clamp(150px,14vw,210px)!important;width:auto!important}
.case-hero.case-hero--netflix .hero-lockup h1{font-size:clamp(15px,1.3vw,20px)!important;line-height:1.1!important;letter-spacing:.08em!important;text-align:center!important;white-space:nowrap!important}
.case-hero.case-hero--netflix .hero-lockup h1 span,.case-hero.case-hero--netflix .hero-lockup h1 em{display:inline!important}
.case-hero.case-hero--netflix .hero-lockup h1 em::before{content:" "}
@media(max-width:860px){.case-hero.case-hero--netflix .hero-n{height:130px!important}}