@import url('/assets/home-premium-v13.css?v=1');
@import url('/assets/nav-unified-v1.css?v=1');

:root{
  --cast-bg:#080806;
  --cast-panel:#11100d;
  --cast-gold:#b18a4d;
  --cast-cream:#eadfc7;
  --cast-muted:#9d917d;
  --cast-line:rgba(177,138,77,.27);
  --cast-max:1420px;
}

body.characters-page{
  margin:0;
  background:
    radial-gradient(circle at 50% -15%,#29231a 0,#0b0a08 34%,#070705 76%);
  color:var(--cast-cream);
  font-family:Georgia,"Times New Roman",serif;
}

.cast-hero{
  max-width:var(--cast-max);
  margin:auto;
  padding:94px 4vw 66px;
}

.cast-hero h1{
  margin:14px 0 24px;
  font-size:clamp(62px,8vw,116px);
  line-height:.84;
  letter-spacing:-.045em;
  font-weight:400;
}

.cast-hero .deck{
  max-width:820px;
  margin:0;
  color:#afa28c;
  font-size:19px;
  line-height:1.7;
}

.cast-featured{
  max-width:var(--cast-max);
  margin:auto;
  padding:12px 4vw 28px;
  display:grid;
  grid-template-columns:1.2fr .9fr .9fr;
  gap:18px;
}

.cast-secondary{
  max-width:var(--cast-max);
  margin:auto;
  padding:0 4vw 110px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.cast-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:#11100d;
  border:1px solid var(--cast-line);
  color:inherit;
  text-decoration:none;
  box-shadow:0 18px 42px rgba(0,0,0,.30);
  overflow:hidden;
}

.cast-card:hover .cast-art{
  transform:scale(1.018);
}

.cast-art-wrap{
  overflow:hidden;
  border-bottom:1px solid var(--cast-line);
  background:#080806;
}

.cast-art{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center top;
  transition:transform .5s ease-out;
}

.cast-card.primary .cast-art{
  aspect-ratio:4/5.4;
}

.cast-copy{
  padding:24px 24px 27px;
}

.cast-role{
  color:#8f7044;
  font:9px Arial,sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.cast-copy h2{
  margin:9px 0 10px;
  font-size:31px;
  font-weight:400;
  line-height:1;
}

.cast-card.primary .cast-copy h2{
  font-size:39px;
}

.cast-copy p{
  margin:0;
  color:#978b77;
  font-size:13px;
  line-height:1.65;
}

.cast-footer{
  max-width:var(--cast-max);
  margin:0 auto 100px;
  padding:28px 4vw 0;
  border-top:1px solid var(--cast-line);
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:60px;
}

.cast-footer h2{
  margin:8px 0 0;
  font-size:36px;
  font-weight:400;
}

.cast-footer p{
  margin:0;
  color:#958a76;
  line-height:1.7;
  font-size:15px;
}

@media(max-width:1050px){
  .cast-featured{
    grid-template-columns:1fr 1fr;
  }
  .cast-featured .primary{
    grid-column:1/-1;
    max-width:620px;
  }
  .cast-secondary{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:650px){
  .cast-hero,.cast-featured,.cast-secondary,.cast-footer{
    padding-left:20px;
    padding-right:20px;
  }
  .cast-featured,.cast-secondary,.cast-footer{
    grid-template-columns:1fr;
  }
  .cast-featured .primary{
    grid-column:auto;
  }
}