/* Character face row + left profile drawer */
.cast-refresh{padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(72px,8vw,116px)}
.cast-refresh .section-heading{margin-bottom:24px}
.cast-face-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.cast-face{
  --accent:#075fc3;
  position:relative;
  appearance:none;
  display:block;
  min-width:0;
  padding:0;
  border:2px solid var(--navy);
  background:var(--paper);
  text-align:left;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 0 0 var(--navy);
  transition:transform .22s ease,box-shadow .22s ease;
}
.cast-face--alex{--accent:#075fc3}
.cast-face--nico{--accent:#e1aa00}
.cast-face--dorian{--accent:#ed6657}
.cast-face--jace{--accent:#0b5a38}
.cast-face__portrait{
  display:block;
  height:350px;
  overflow:hidden;
  background:#eee;
  border-bottom:2px solid var(--navy);
}
.cast-face__portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
  transform:scale(1.02);
  transition:transform .34s cubic-bezier(.2,.7,.2,1),filter .34s ease;
}
.cast-face__number{
  position:absolute;
  z-index:2;
  top:12px;
  left:12px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:var(--paper);
  border:2px solid var(--navy);
  box-shadow:3px 3px 0 var(--navy);
  font-size:10px;
  font-weight:1000;
}
.cast-face__copy{
  display:block;
  padding:16px 18px 5px;
}
.cast-face__copy b{
  display:block;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:clamp(29px,2.7vw,45px);
  line-height:.9;
  text-transform:uppercase;
}
.cast-face__copy small{
  display:block;
  margin-top:8px;
  color:var(--accent);
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.cast-face__open{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:12px 18px 18px;
  padding-top:12px;
  border-top:1px solid rgba(7,27,45,.25);
  font-size:10px;
  font-weight:1000;
  letter-spacing:.08em;
}
.cast-face__open::after{
  content:"";
  width:28px;
  height:5px;
  background:var(--accent);
  transition:width .22s ease;
}

@media (hover:hover) and (pointer:fine){
  .cast-face:hover{
    transform:translateY(-7px) rotate(-.25deg);
    box-shadow:7px 7px 0 var(--navy);
  }
  .cast-face:nth-child(even):hover{transform:translateY(-7px) rotate(.25deg)}
  .cast-face:hover .cast-face__portrait img{
    transform:scale(1.07) translateY(-4px);
    filter:saturate(1.06) contrast(1.025);
  }
  .cast-face:hover .cast-face__open::after{width:64px}
}

/* Drawer */
.cast-drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:79;
  background:rgba(7,19,30,.58);
  backdrop-filter:blur(3px);
}
.cast-drawer-backdrop[hidden]{display:none}
.cast-drawer{
  --drawer-accent:#075fc3;
  position:fixed;
  z-index:80;
  top:0;
  left:0;
  width:min(980px,88vw);
  height:100dvh;
  padding:0 0 0 48px;
  background:var(--paper);
  color:var(--navy);
  border:0;
  border-right:3px solid var(--navy);
  box-shadow:14px 0 0 rgba(7,27,45,.14);
  transform:translateX(-104%);
  visibility:hidden;
  transition:transform .34s cubic-bezier(.22,.75,.16,1),visibility .34s;
  overflow:hidden;
}
.cast-drawer.is-open{
  transform:translateX(0);
  visibility:visible;
}
.cast-drawer__rail{
  position:absolute;
  inset:0 auto 0 0;
  width:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 0;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  background:var(--drawer-accent);
  color:#fff;
  border-right:2px solid var(--navy);
  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
}
.cast-drawer__rail b{font-size:10px}
.cast-drawer__close{
  position:absolute;
  z-index:5;
  right:18px;
  top:18px;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:2px solid var(--navy);
  background:var(--paper);
  color:var(--navy);
  box-shadow:3px 3px 0 var(--navy);
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.cast-drawer__close:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--navy)}
.cast-drawer__body{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(320px,.92fr) minmax(0,1.08fr);
}
.cast-drawer__figure{
  position:relative;
  min-height:0;
  height:100%;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:color-mix(in srgb,var(--drawer-accent) 16%,white);
  border-right:2px solid var(--navy);
}
.cast-drawer__figure::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,transparent 0 58%,rgba(255,255,255,.58) 58% 59%,transparent 59%),
    linear-gradient(180deg,rgba(255,255,255,.36),transparent 44%);
  pointer-events:none;
}
.cast-drawer__figure::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:7%;
  height:2px;
  background:var(--navy);
  opacity:.28;
}
.cast-drawer__figure img{
  position:relative;
  z-index:1;
  width:82%;
  max-width:360px;
  max-height:84%;
  object-fit:contain;
  object-position:center center;
  filter:drop-shadow(0 18px 18px rgba(7,19,30,.15));
  transition:transform .28s ease;
}
.cast-drawer[data-character="alex"] .cast-drawer__figure img{
  width:88%;
  clip-path:inset(0 4% 0 7%);
  transform:translateX(2%) scale(.95);
}
.cast-drawer[data-character="nico"] .cast-drawer__figure img{
  width:84%;
  clip-path:inset(0 2% 0 2%);
  transform:scale(.96);
}
.cast-drawer[data-character="dorian"] .cast-drawer__figure img{
  width:86%;
  clip-path:inset(0 5% 0 2%);
  transform:translateX(-1%) scale(.95);
}
.cast-drawer[data-character="jace"] .cast-drawer__figure img{
  width:87%;
  clip-path:inset(0 5% 0 2%);
  transform:translateX(-1%) scale(.95);
}
.cast-drawer__index{
  position:absolute;
  z-index:2;
  left:18px;
  top:22px;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:72px;
  line-height:.8;
  color:var(--drawer-accent);
  -webkit-text-stroke:1px var(--navy);
  opacity:.94;
}
.cast-drawer__info{
  min-width:0;
  max-height:100%;
  overflow:auto;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:74px clamp(28px,4.4vw,58px) 42px;
}
.cast-drawer__kicker{
  margin:0 0 11px;
  color:var(--drawer-accent);
  font-size:10px;
  font-weight:1000;
  letter-spacing:.16em;
}
.cast-drawer__info h3{
  margin:0;
  max-width:520px;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:clamp(60px,6.6vw,98px);
  line-height:.82;
  text-transform:uppercase;
  letter-spacing:-.03em;
}
.cast-drawer__nick{
  margin:12px 0 18px;
  color:var(--drawer-accent);
  font-size:18px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.cast-drawer__chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:0 0 22px;
}
.cast-drawer__chips span{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border:2px solid var(--navy);
  background:#fff;
  box-shadow:2px 2px 0 var(--navy);
  font-size:9px;
  font-weight:1000;
  letter-spacing:.08em;
}
.cast-drawer__chips span:first-child{
  background:var(--drawer-accent);
  color:#fff;
}
.cast-drawer__lede{
  max-width:520px;
  margin:0 0 24px;
  font-size:17px;
  line-height:1.52;
}
.cast-drawer__facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  max-width:560px;
}
.cast-drawer__facts div{
  min-height:98px;
  padding:13px 14px 14px;
  border:2px solid var(--navy);
  border-left:8px solid var(--drawer-accent);
  background:#fff;
  box-shadow:3px 3px 0 rgba(7,27,45,.12);
}
.cast-drawer__facts div:first-child{grid-column:1/-1;min-height:auto}
.cast-drawer__facts span{
  display:block;
  margin-bottom:8px;
  color:var(--drawer-accent);
  font-size:8px;
  font-weight:1000;
  letter-spacing:.14em;
}
.cast-drawer__facts b{
  display:block;
  font-size:13px;
  line-height:1.35;
}
.cast-drawer__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.cast-drawer__actions:empty{display:none}
.cast-drawer__actions a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:10px 13px;
  border:2px solid var(--navy);
  background:var(--drawer-accent);
  color:white;
  text-decoration:none;
  font-size:11px;
  font-weight:1000;
  box-shadow:3px 3px 0 var(--navy);
}
body.cast-drawer-open{overflow:hidden}

@media(max-width:1020px){
  .cast-face-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cast-face__portrait{height:390px}
  .cast-drawer{width:min(940px,94vw)}
  .cast-drawer__body{grid-template-columns:minmax(290px,.85fr) minmax(0,1.15fr)}
}
@media(max-width:760px){
  .cast-face-row{grid-template-columns:1fr 1fr;gap:8px}
  .cast-face__portrait{height:260px}
  .cast-face__copy{padding:12px 12px 4px}
  .cast-face__copy b{font-size:30px}
  .cast-face__open{margin:10px 12px 14px}
  .cast-drawer{
    width:100%;
    padding-left:0;
    border-right:0;
    overflow:auto;
  }
  .cast-drawer__rail{display:none}
  .cast-drawer__body{
    height:auto;
    min-height:100%;
    grid-template-columns:1fr;
  }
  .cast-drawer__figure{
    min-height:420px;
    height:420px;
    border-right:0;
    border-bottom:2px solid var(--navy);
  }
  .cast-drawer__figure img{max-height:365px;width:min(62%,320px)}
  .cast-drawer__info{max-height:none;overflow:visible;padding:38px 20px 44px}
  .cast-drawer__info h3{font-size:64px}
  .cast-drawer__facts{grid-template-columns:1fr}
  .cast-drawer__facts div:first-child{grid-column:auto}
}
@media(max-width:430px){
  .cast-face-row{grid-template-columns:1fr}
  .cast-face__portrait{height:350px}
}
@media(prefers-reduced-motion:reduce){
  .cast-face,.cast-face__portrait img,.cast-face__open::after,.cast-drawer,.cast-drawer__figure img{transition:none!important}
}