/* --------------------------------------------------------------------------
   Prologue / level-stepper visual QA pass · 2026-08-11
   Fixes only the stage-navigation geometry and fills the intentional empty
   mentor-rail area with an approved Premium Noir investigation visual.
   -------------------------------------------------------------------------- */

/* Stage navigation: number, label and lock each get their own optical zone. */
.content-stepper {
  grid-template-columns: repeat(7, minmax(76px, 1fr));
  overflow: hidden;
  align-items: stretch;
}
.content-stepper .step {
  position: relative;
  min-width: 0;
  height: 76px;
  padding: 10px 7px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
.content-stepper .step .step-num {
  display: block;
  width: 100%;
  margin: 0;
  font: 500 16px/1 var(--serif);
  letter-spacing: .035em;
  color: #f2ede2;
  font-variant-numeric: tabular-nums;
}
.content-stepper .step .step-label {
  display: block;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10.5px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: inherit;
}
.content-stepper .step .step-lock {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  opacity: .5;
}
.content-stepper .step .step-lock svg {
  width: 11px;
  height: 11px;
}
.content-stepper .step.current .step-num,
.content-stepper .step.current .step-label {
  color: var(--gold-300);
}
.content-stepper .step.locked-step .step-num,
.content-stepper .step:disabled .step-num {
  color: #777b7f;
}

/* Prologue mentor rail: use the empty lower area as a semantic investigation visual. */
.mentor-card-prologue {
  display: flex;
  flex-direction: column;
  min-height: 860px;
  overflow: hidden;
}
.mentor-card-prologue .mentor-section {
  flex: 0 0 auto;
}
.mentor-card-prologue .mentor-actions {
  padding-bottom: 14px;
}
.mentor-investigation-visual {
  position: relative;
  flex: 1 1 auto;
  min-height: 220px;
  margin: 0 -20px -20px;
  border-top: 1px solid rgba(216,163,67,.16);
  overflow: hidden;
  background: #05090c;
}
.mentor-investigation-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,9,12,.62) 0%, rgba(5,9,12,.06) 28%, rgba(5,9,12,.05) 72%, rgba(5,9,12,.72) 100%),
    radial-gradient(circle at 72% 48%, transparent 0 34%, rgba(4,8,11,.34) 76%, rgba(4,8,11,.74) 100%);
}
.mentor-investigation-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  object-position: 55% 50%;
  filter: saturate(.88) contrast(1.08) brightness(.88);
}

/* Laptop: keep all seven stages in one controlled row where space permits. */
@media (max-width: 1360px) and (min-width: 1181px) {
  .content-stepper { grid-template-columns: repeat(7, minmax(72px, 1fr)); }
  .content-stepper .step { height: 74px; padding-left: 5px; padding-right: 5px; }
  .content-stepper .step .step-label { font-size: 10px; }
  .content-stepper .step .step-num { font-size: 15px; }
}

/* Tablet and narrower: horizontal stage rail instead of broken multi-row numbering. */
@media (max-width: 1180px) {
  .content-stepper {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .content-stepper .step {
    flex: 0 0 112px;
    min-width: 112px;
    height: 72px;
    scroll-snap-align: start;
  }
  .mentor-card-prologue { min-height: 760px; }
}

@media (max-width: 980px) {
  .mentor-card-prologue { min-height: auto; }
  .mentor-investigation-visual { min-height: 260px; margin-top: 4px; }
  .mentor-investigation-visual img { min-height: 260px; }
}

@media (max-width: 680px) {
  .content-stepper .step { flex-basis: 104px; min-width: 104px; height: 68px; }
  .content-stepper .step .step-label { font-size: 10px; }
  .mentor-investigation-visual { min-height: 210px; }
  .mentor-investigation-visual img { min-height: 210px; }
}

/* --------------------------------------------------------------------------
   Prologue reference refinement · 2026-08-11
   Scope: #/level-00 only. Adds a cinematic hero background, increases the
   stage typography slightly, enlarges the scene visual and places the quote
   on the LEFT side of the image as requested. Other levels are untouched.
   -------------------------------------------------------------------------- */

.prologue-level-layout .prologue-hero {
  position: relative;
  isolation: isolate;
  min-height: 286px;
  padding: 28px 30px 24px;
  overflow: hidden;
  border: 1px solid rgba(216,163,67,.18);
  background: #05090c;
}
.prologue-level-layout .prologue-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("assets/levels/prologue-investigation-still.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 76% 50%;
  filter: saturate(.82) contrast(1.08) brightness(.72);
  transform: scale(1.025);
}
.prologue-level-layout .prologue-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,7,10,.99) 0%, rgba(3,7,10,.96) 30%, rgba(3,7,10,.70) 55%, rgba(3,7,10,.26) 82%, rgba(3,7,10,.18) 100%),
    linear-gradient(180deg, rgba(3,7,10,.18) 0%, rgba(3,7,10,.08) 56%, rgba(3,7,10,.78) 100%);
}
.prologue-level-layout .prologue-hero .level-kicker,
.prologue-level-layout .prologue-hero h1,
.prologue-level-layout .prologue-hero > p,
.prologue-level-layout .prologue-hero .level-meta {
  position: relative;
  z-index: 1;
}
.prologue-level-layout .prologue-hero h1 {
  max-width: 690px;
  margin-bottom: 12px;
  font-size: clamp(38px, 3.25vw, 50px);
  line-height: 1.04;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,.72);
}
.prologue-level-layout .prologue-hero > p {
  max-width: 650px;
  font-size: 15px;
  line-height: 1.55;
  color: #e2ddd4;
  text-shadow: 0 1px 12px rgba(0,0,0,.8);
}
.prologue-level-layout .prologue-hero .level-meta {
  max-width: 780px;
  margin-top: 26px;
}
.prologue-level-layout .prologue-hero .level-meta-block > span {
  font-size: 11px;
}
.prologue-level-layout .prologue-hero .level-meta-block > strong {
  font-size: 13px;
  line-height: 1.35;
}

/* Slightly larger, optically aligned prologue stages. */
.prologue-stepper {
  grid-template-columns: repeat(7, minmax(86px, 1fr));
}
.prologue-stepper .step {
  height: 88px;
  padding: 12px 9px 10px;
  gap: 7px;
}
.prologue-stepper .step .step-num {
  font-size: 20px;
  line-height: 1;
  letter-spacing: .025em;
}
.prologue-stepper .step .step-label {
  font-size: 12.5px;
  line-height: 1.18;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  text-wrap: balance;
}
.prologue-stepper .step .step-lock {
  top: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
}
.prologue-stepper .step .step-lock svg {
  width: 12px;
  height: 12px;
}

/* Scene composition: larger visual with the quotation INSIDE the image, left. */
.prologue-scene-card {
  padding: 24px 26px 26px;
}
.prologue-scene-card > h2 {
  font-size: clamp(28px, 2.25vw, 34px);
  line-height: 1.08;
  margin-bottom: 14px;
}
.prologue-scene-card > .lead-copy {
  max-width: 960px;
  font-size: 15px;
  line-height: 1.72;
}
.prologue-scene-feature {
  margin-top: 22px;
  padding-top: 0;
  border-top: 0;
}
.prologue-scene-visual {
  position: relative;
  width: 100%;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid rgba(216,163,67,.22);
  border-radius: 8px;
  background: #05090c;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015), 0 18px 44px rgba(0,0,0,.22);
}
.prologue-scene-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,6,8,.34) 0%, rgba(3,6,8,.06) 44%, transparent 72%),
    linear-gradient(180deg, rgba(2,5,8,.04), rgba(2,5,8,.12));
}
.prologue-scene-visual > .source-image,
.prologue-scene-visual > .source-video,
.prologue-scene-visual > .featured-media {
  display: block;
  width: 100%;
  height: 470px;
  max-height: none;
  object-fit: cover;
  object-position: center 54%;
  filter: saturate(.92) contrast(1.05) brightness(.86);
}
.prologue-scene-quote {
  position: absolute;
  right: 24px;
  left: auto;
  bottom: 24px;
  z-index: 2;
  width: min(300px, 42%);
  margin: 0 !important;
  padding: 20px 20px 18px 22px !important;
  border: 1px solid rgba(216,163,67,.44) !important;
  border-left: 1px solid rgba(216,163,67,.72) !important;
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(5,8,10,.94), rgba(8,10,11,.82)) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.018);
  backdrop-filter: blur(7px);
  color: #f0dfba !important;
  font: 500 16px/1.5 var(--serif) !important;
}
.prologue-scene-quote::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 28px;
  width: 42px;
  height: 1px;
  background: var(--gold-400, #d8a343);
  box-shadow: 0 0 12px rgba(216,163,67,.45);
}
.prologue-scene-quote p {
  margin: 0;
}
.prologue-quote-mark {
  display: block;
  margin-bottom: 3px;
  color: var(--gold-300, #efc66c);
  font: 600 38px/.8 var(--serif);
}

/* Right mentor rail readability only for the prologue. */
.mentor-card-prologue .mentor-section h3 {
  font-size: 17px;
}
.mentor-card-prologue .mentor-section p,
.mentor-card-prologue .mentor-section li {
  font-size: 12.5px;
  line-height: 1.62;
}
.mentor-card-prologue .mentor-investigation-visual {
  min-height: 270px;
}
.mentor-card-prologue .mentor-investigation-visual img {
  min-height: 270px;
}

@media (max-width: 1360px) and (min-width: 1181px) {
  .prologue-level-layout .prologue-hero { min-height: 270px; padding: 25px 26px 22px; }
  .prologue-level-layout .prologue-hero h1 { font-size: 40px; max-width: 610px; }
  .prologue-stepper { grid-template-columns: repeat(7, minmax(78px,1fr)); }
  .prologue-stepper .step { height: 84px; padding-left: 6px; padding-right: 6px; }
  .prologue-stepper .step .step-num { font-size: 19px; }
  .prologue-stepper .step .step-label { font-size: 11.5px; }
  .prologue-scene-visual { min-height: 440px; }
  .prologue-scene-visual > .source-image,
  .prologue-scene-visual > .source-video,
  .prologue-scene-visual > .featured-media { height: 440px; }
  .prologue-scene-quote { width: min(270px, 44%); font-size: 15px !important; right: 20px; left: auto; bottom: 20px; }
}

@media (max-width: 1180px) {
  .prologue-level-layout .prologue-hero { min-height: 250px; }
  .prologue-level-layout .prologue-hero h1 { max-width: 72%; font-size: clamp(34px,5vw,44px); }
  .prologue-level-layout .prologue-hero > p { max-width: 72%; }
  .prologue-stepper .step { flex-basis: 122px; min-width: 122px; height: 82px; }
  .prologue-stepper .step .step-num { font-size: 19px; }
  .prologue-stepper .step .step-label { font-size: 11.5px; }
  .prologue-scene-visual { min-height: 430px; }
  .prologue-scene-visual > .source-image,
  .prologue-scene-visual > .source-video,
  .prologue-scene-visual > .featured-media { height: 430px; }
}

@media (max-width: 680px) {
  .prologue-level-layout .prologue-hero {
    min-height: 300px;
    padding: 22px 20px;
  }
  .prologue-level-layout .prologue-hero::before { background-position: 66% center; }
  .prologue-level-layout .prologue-hero::after {
    background: linear-gradient(90deg, rgba(3,7,10,.98) 0%, rgba(3,7,10,.84) 64%, rgba(3,7,10,.52) 100%), linear-gradient(180deg, rgba(3,7,10,.1), rgba(3,7,10,.74));
  }
  .prologue-level-layout .prologue-hero h1,
  .prologue-level-layout .prologue-hero > p { max-width: 100%; }
  .prologue-level-layout .prologue-hero h1 { font-size: 34px; }
  .prologue-level-layout .prologue-hero .level-meta { grid-template-columns: 1fr; gap: 9px; margin-top: 20px; }
  .prologue-stepper .step { flex-basis: 112px; min-width: 112px; height: 78px; }
  .prologue-stepper .step .step-num { font-size: 18px; }
  .prologue-stepper .step .step-label { font-size: 11px; }
  .prologue-scene-card { padding: 20px; }
  .prologue-scene-visual { min-height: 390px; }
  .prologue-scene-visual > .source-image,
  .prologue-scene-visual > .source-video,
  .prologue-scene-visual > .featured-media { height: 390px; object-position: 58% center; }
  .prologue-scene-quote {
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: auto;
    max-width: 310px;
    padding: 16px 16px 14px 18px !important;
    font-size: 14px !important;
  }
}

/* --------------------------------------------------------------------------
   Prologue scene composition refinement · 2026-08-17
   Scope: #/level-00 only.
   The quote is moved out of the photo and into the left-side negative space
   of the scene block. The scene image occupies the right side. The mentor
   investigation image is enlarged so the center and right columns feel
   optically balanced at desktop/laptop widths.
   -------------------------------------------------------------------------- */

.prologue-level-layout .prologue-scene-visual {
  display: grid;
  grid-template-columns: minmax(220px, .38fr) minmax(0, 1fr);
  min-height: 500px;
  align-items: stretch;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 26%, rgba(216,163,67,.07), transparent 32%),
    linear-gradient(145deg, #070b0e 0%, #040709 100%);
}

.prologue-level-layout .prologue-scene-visual::after {
  display: none;
}

.prologue-level-layout .prologue-scene-media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid rgba(216,163,67,.18);
}

.prologue-level-layout .prologue-scene-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,7,9,.18) 0%, transparent 22%),
    linear-gradient(180deg, transparent 72%, rgba(3,6,8,.16) 100%);
}

.prologue-level-layout .prologue-scene-media > .source-image,
.prologue-level-layout .prologue-scene-media > .source-video,
.prologue-level-layout .prologue-scene-media > .featured-media {
  display: block;
  width: 100%;
  height: 500px;
  max-height: none;
  object-fit: cover;
  object-position: center 54%;
  filter: saturate(.92) contrast(1.05) brightness(.88);
}

.prologue-level-layout .prologue-scene-quote {
  position: relative;
  inset: auto;
  align-self: center;
  width: auto;
  max-width: 300px;
  margin: 34px 30px !important;
  padding: 26px 26px 24px !important;
  border: 1px solid rgba(216,163,67,.42) !important;
  border-left: 1px solid rgba(216,163,67,.72) !important;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(8,11,13,.96), rgba(5,8,10,.88)) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.018);
  color: #f1dfb6 !important;
  font-family: var(--font-editorial, "TT Norms Pro Serif", Georgia, serif) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.58 !important;
}

.prologue-level-layout .prologue-scene-quote::before {
  left: 26px;
  width: 52px;
}

.prologue-level-layout .prologue-quote-mark {
  margin-bottom: 12px;
  font-size: 44px;
}

/* Enlarge the right-rail detective still so the card visually reaches
   the same lower rhythm as the main scene card. */
.mentor-card-prologue .mentor-investigation-visual {
  flex: 1 1 auto;
  min-height: 360px;
  margin-top: 0;
  overflow: hidden;
  border-top: 1px solid rgba(216,163,67,.14);
  background: #040709;
}

.mentor-card-prologue .mentor-investigation-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  object-position: 54% 50%;
  transform: scale(1.04);
  filter: saturate(.92) contrast(1.06) brightness(.88);
}

.mentor-card-prologue {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1360px) and (min-width: 1181px) {
  .prologue-level-layout .prologue-scene-visual {
    grid-template-columns: minmax(210px, .36fr) minmax(0, 1fr);
    min-height: 470px;
  }

  .prologue-level-layout .prologue-scene-media > .source-image,
  .prologue-level-layout .prologue-scene-media > .source-video,
  .prologue-level-layout .prologue-scene-media > .featured-media {
    height: 470px;
  }

  .prologue-level-layout .prologue-scene-quote {
    right: auto;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: 270px;
    margin: 28px 24px !important;
    padding: 22px 21px 20px !important;
    font-size: 15.5px !important;
  }

  .mentor-card-prologue .mentor-investigation-visual,
  .mentor-card-prologue .mentor-investigation-visual img {
    min-height: 330px;
  }
}

@media (max-width: 1180px) {
  .prologue-level-layout .prologue-scene-visual {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .prologue-level-layout .prologue-scene-quote {
    order: 1;
    max-width: none;
    margin: 20px !important;
    font-size: 16px !important;
  }

  .prologue-level-layout .prologue-scene-media {
    order: 2;
    border-left: 0;
    border-top: 1px solid rgba(216,163,67,.18);
  }

  .prologue-level-layout .prologue-scene-media > .source-image,
  .prologue-level-layout .prologue-scene-media > .source-video,
  .prologue-level-layout .prologue-scene-media > .featured-media {
    height: 430px;
  }

  .mentor-card-prologue .mentor-investigation-visual,
  .mentor-card-prologue .mentor-investigation-visual img {
    min-height: 300px;
  }
}

@media (max-width: 680px) {
  .prologue-level-layout .prologue-scene-quote {
    margin: 16px !important;
    padding: 20px 18px 18px !important;
    font-size: 15px !important;
  }

  .prologue-level-layout .prologue-scene-media > .source-image,
  .prologue-level-layout .prologue-scene-media > .source-video,
  .prologue-level-layout .prologue-scene-media > .featured-media {
    height: 330px;
  }

  .mentor-card-prologue .mentor-investigation-visual,
  .mentor-card-prologue .mentor-investigation-visual img {
    min-height: 250px;
  }
}

/* ==========================================================================
   Prologue metadata strip + right-rail quote · 2026-08-17
   Scope: #/level-00 only
   ========================================================================== */

/* Reference-style status / artifact / materials strip */
.prologue-level-layout .prologue-meta-strip {
  width: 100%;
  max-width: none !important;
  margin-top: 24px !important;
  padding: 13px 16px;
  display: grid !important;
  grid-template-columns: .82fr 1.65fr .92fr;
  gap: 0 !important;
  align-items: stretch;
  border: 1px solid rgba(216,163,67,.26);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(12,16,19,.94), rgba(7,11,14,.95));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 12px 32px rgba(0,0,0,.18);
}

.prologue-level-layout .prologue-meta-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  gap: 14px;
  align-items: center;
  padding: 2px 24px;
}

.prologue-level-layout .prologue-meta-item:first-child {
  padding-left: 4px;
}

.prologue-level-layout .prologue-meta-item + .prologue-meta-item {
  border-left: 1px solid rgba(150,158,162,.24);
}

.prologue-level-layout .prologue-meta-icon {
  width: 46px;
  height: 46px;
  display: grid !important;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(216,163,67,.48);
  border-radius: 50%;
  color: var(--gold-300, #e8bc5f) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(216,163,67,.09), rgba(216,163,67,.018) 66%, transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018);
}

.prologue-level-layout .prologue-meta-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.65;
}

.prologue-level-layout .prologue-meta-copy {
  min-width: 0;
}

.prologue-level-layout .prologue-meta-copy > span {
  display: block;
  margin: 0 0 3px !important;
  color: #bfc1c1 !important;
  font-family: var(--font-primary, "TT Hoves Pro", "Manrope", sans-serif);
  font-size: 13px !important;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .005em;
}

.prologue-level-layout .prologue-meta-copy > strong {
  display: block;
  margin: 0 !important;
  color: var(--gold-300, #e8bc5f) !important;
  font-family: var(--font-primary, "TT Hoves Pro", "Manrope", sans-serif);
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Main scene now uses the whole photo area — no quote overlay. */
.prologue-level-layout .prologue-scene-visual {
  display: block !important;
  min-height: 500px;
}

.prologue-level-layout .prologue-scene-media {
  width: 100%;
  height: 100%;
  border-left: 0 !important;
}

.prologue-level-layout .prologue-scene-media > .source-image,
.prologue-level-layout .prologue-scene-media > .source-video,
.prologue-level-layout .prologue-scene-media > .featured-media {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center 54%;
}

/* Quote is now below the right-rail detective image. */
.mentor-card-prologue .mentor-prologue-quote {
  position: relative;
  margin: 0 !important;
  padding: 21px 22px 23px;
  border: 0 !important;
  border-top: 1px solid rgba(216,163,67,.22) !important;
  border-radius: 0;
  background:
    radial-gradient(circle at 82% 100%, rgba(216,163,67,.055), transparent 33%),
    linear-gradient(145deg, rgba(8,11,13,.98), rgba(4,7,9,.98)) !important;
  color: #e9dfcc !important;
  box-shadow: none;
  font-family: var(--font-editorial, "TT Norms Pro Serif", Georgia, serif) !important;
  font-size: 15.5px !important;
  font-weight: 400 !important;
  line-height: 1.56 !important;
}

.mentor-card-prologue .mentor-prologue-quote::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  width: 48px;
  height: 1px;
  background: var(--gold-400, #d8a343);
  box-shadow: 0 0 10px rgba(216,163,67,.35);
}

.mentor-card-prologue .mentor-prologue-quote p {
  margin: 0;
}

.mentor-card-prologue .mentor-prologue-quote-mark {
  display: block;
  margin-bottom: 8px;
  color: var(--gold-300, #efc66c);
  font-family: var(--font-editorial, "TT Norms Pro Serif", Georgia, serif);
  font-size: 38px;
  font-weight: 600;
  line-height: .72;
}

/* Keep the detective image visually substantial above the quote. */
.mentor-card-prologue .mentor-investigation-visual {
  flex: 0 0 auto;
  min-height: 340px;
}
.mentor-card-prologue .mentor-investigation-visual img {
  min-height: 340px;
  object-position: 56% 50%;
}

/* Hide obsolete scene-quote rules if old cached markup ever survives. */
.prologue-level-layout .prologue-scene-quote {
  display: none !important;
}

@media (max-width: 1360px) and (min-width: 1181px) {
  .prologue-level-layout .prologue-meta-strip {
    grid-template-columns: .8fr 1.65fr .9fr;
    padding: 12px 13px;
  }
  .prologue-level-layout .prologue-meta-item {
    grid-template-columns: 42px minmax(0,1fr);
    gap: 10px;
    padding: 2px 15px;
  }
  .prologue-level-layout .prologue-meta-icon {
    width: 40px;
    height: 40px;
  }
  .prologue-level-layout .prologue-meta-icon svg {
    width: 21px;
    height: 21px;
  }
  .prologue-level-layout .prologue-meta-copy > span {
    font-size: 11.5px !important;
  }
  .prologue-level-layout .prologue-meta-copy > strong {
    font-size: 13.5px !important;
  }
  .mentor-card-prologue .mentor-investigation-visual,
  .mentor-card-prologue .mentor-investigation-visual img {
    min-height: 315px;
  }
  .mentor-card-prologue .mentor-prologue-quote {
    padding: 18px 19px 20px;
    font-size: 14.5px !important;
  }
}

@media (max-width: 900px) {
  .prologue-level-layout .prologue-meta-strip {
    grid-template-columns: 1fr;
    padding: 5px 15px;
  }
  .prologue-level-layout .prologue-meta-item {
    padding: 12px 2px !important;
  }
  .prologue-level-layout .prologue-meta-item + .prologue-meta-item {
    border-left: 0;
    border-top: 1px solid rgba(150,158,162,.20);
  }
}

@media (max-width: 680px) {
  .prologue-level-layout .prologue-meta-item {
    grid-template-columns: 40px minmax(0,1fr);
    gap: 11px;
  }
  .prologue-level-layout .prologue-meta-icon {
    width: 38px;
    height: 38px;
  }
  .prologue-level-layout .prologue-meta-copy > span {
    font-size: 12px !important;
  }
  .prologue-level-layout .prologue-meta-copy > strong {
    font-size: 14px !important;
  }
  .prologue-level-layout .prologue-scene-visual,
  .prologue-level-layout .prologue-scene-media > .source-image,
  .prologue-level-layout .prologue-scene-media > .source-video,
  .prologue-level-layout .prologue-scene-media > .featured-media {
    min-height: 0;
    height: 340px;
  }
  .mentor-card-prologue .mentor-prologue-quote {
    font-size: 15px !important;
  }
}