/* The Saint (1997) EPK — de-framed layout.
   Replaces the old <frameset> (left menu frame + content frame) with a real
   persistent sidebar so each section is a normal, standalone page.
   The left navigation is rendered at 2x the original size.
   Image paths are relative to this file (/_compat/) -> ../epk/images/. */

body.epk-body { margin: 0; background: #000; }

.epk-layout-wrap {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
  background: #000;
}

/* ---- Left navigation (doubled) ---------------------------------------- */
.epk-nav {
  flex: 0 0 auto;
  width: 300px;
  box-sizing: border-box;
  padding: 16px 0 16px 18px;
  background: #000;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
  overflow-y: auto;
}
.epk-nav a {
  display: block;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 264px auto; /* 132px native -> 2x */
  width: 264px;
}
.epk-logo   { height: 112px; background-image: url(../epk/images/menu_top.jpg); } /* 56*2 */
.epk-bottom { height: 84px;  background-image: url(../epk/images/menu_bot.jpg); margin-top: 8px; } /* 42*2 */
.epk-nav .nav-btn { height: 76px; } /* 38*2 */

.n-prod   { background-image: url(../epk/images/prod_off.jpg); }
.n-prod:hover   { background-image: url(../epk/images/prod_hi.jpg); }
.n-cast   { background-image: url(../epk/images/cast_off.jpg); }
.n-cast:hover   { background-image: url(../epk/images/cast_hi.jpg); }
.n-filmm  { background-image: url(../epk/images/filmm_off.jpg); }
.n-filmm:hover  { background-image: url(../epk/images/filmm_hi.jpg); }
.n-vis    { background-image: url(../epk/images/vis_off.jpg); }
.n-vis:hover    { background-image: url(../epk/images/vis_hi.jpg); }
.n-soundt { background-image: url(../epk/images/soundt_off.jpg); }
.n-soundt:hover { background-image: url(../epk/images/soundt_hi.jpg); }
.n-good   { background-image: url(../epk/images/good_off.jpg); }
.n-good:hover   { background-image: url(../epk/images/good_hi.jpg); }

/* Active (current section) — placed after :hover so it always wins, matching
   the original behaviour where the current button stayed in its "on" state. */
.n-prod.active   { background-image: url(../epk/images/prod_on.jpg); }
.n-cast.active   { background-image: url(../epk/images/cast_on.jpg); }
.n-filmm.active  { background-image: url(../epk/images/filmm_on.jpg); }
.n-vis.active    { background-image: url(../epk/images/vis_on.jpg); }
.n-soundt.active { background-image: url(../epk/images/soundt_on.jpg); }
.n-good.active   { background-image: url(../epk/images/good_on.jpg); }

/* ---- Content area ----------------------------------------------------- */
.epk-main {
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
}
/* Copy pages: 35px margin around the text from the surrounding page. */
.epk-main.epk-copy { padding: 35px; box-sizing: border-box; }

/* ---- Visuals sub-navigation (Clips / Stills) -------------------------- */
.vis-subnav {
  display: flex;
  gap: 14px;
  padding: 26px 0 14px 35px;
}
.vis-subnav a {
  display: block;
  width: 198px; height: 57px;           /* 132x38 native -> 1.5x */
  background-repeat: no-repeat;
  background-size: 198px auto;
  text-decoration: none;
}
.vis-clips  { background-image: url(../epk/images/b_clips_off.gif); }
.vis-clips:hover  { background-image: url(../epk/images/b_clips_hi.gif); }
.vis-stills { background-image: url(../epk/images/b_stills_off.gif); }
.vis-stills:hover { background-image: url(../epk/images/b_stills_hi.gif); }
.vis-clips.active  { background-image: url(../epk/images/b_clips_on.gif); }
.vis-stills.active { background-image: url(../epk/images/b_stills_on.gif); }

/* ---- Cast page -------------------------------------------------------- */
.cast-wrap {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  padding: 35px;
  box-sizing: border-box;
}
.cast-box { flex: 0 0 auto; }
.cast-box img {
  width: 418px;            /* 209px native -> 2x (doubled cast box) */
  height: auto;
  display: block;
  border: 3px solid #2a2a2a;
  background: #0a0a0a;
  box-shadow: 0 8px 34px rgba(0, 0, 0, 0.7);
}
.cast-list { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; }
.cast-list a {
  display: block;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 270px auto;   /* 207px native -> ~1.3x */
  width: 270px;
  text-decoration: none;
}
.cb-val   { height: 74px; background-image: url(../epk/images/b_val_off.gif); }
.cb-val:hover   { background-image: url(../epk/images/b_val_on.gif); }
.cb-shue  { height: 65px; background-image: url(../epk/images/b_shue_off.gif); }
.cb-shue:hover  { background-image: url(../epk/images/b_shue_on.gif); }
.cb-rade  { height: 65px; background-image: url(../epk/images/b_rade_off.gif); }
.cb-rade:hover  { background-image: url(../epk/images/b_rade_on.gif); }
.cb-more  { height: 77px; background-image: url(../epk/images/b_more_off.gif); }
.cb-more:hover  { background-image: url(../epk/images/b_more_on.gif); }
.cast-list a.active { filter: brightness(1.35); }

.cast-bio {
  flex: 1 1 340px;
  min-width: 300px;
  color: #fff;
  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.5;
}
.cast-bio h2 { font-size: 22px; margin: 0 0 6px; color: #FFFE01; }
.cast-bio .cast-panel { display: none; }
.cast-bio .cast-panel.active { display: block; }
.cast-bio img { float: left; margin: 4px 16px 8px 0; border: 1px solid #333; }