.dv-case-kicker {
  margin: 0 0 20px;
  color: var(--case-muted);
  font-family: var(--font-secondary, Arial, sans-serif);
  font-size: 15px;
  line-height: 1.4;
  font-style: italic;
}

.dv-case-prose {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dv-case-prose p {
  margin: 0;
}

.dv-case-overview__main .dv-case-prose--challenge {
  color: var(--case-ink);
}

.dv-case-scope__heading .dv-case-kicker {
  margin-top: 20px;
  margin-bottom: 0;
}

.dv-case-scope__items--single {
  padding-top: 0;
}

.dv-case-scope__item--single {
  align-items: start;
}

.dv-case-scope__item--single .dv-case-prose {
  color: var(--case-paper-ink);
}

.dv-case-judgement__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dv-case-reflection__lead {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dv-case-reflection__lead p {
  margin: 0;
}

.dv-case-showcase__heading--compact {
  min-height: clamp(260px, 24vw, 430px);
}

/* case detail template No.2 — opt in with `template: 2` in cases/case-data.js.
   Scope decision: No.2 has NO Challenge kicker. Only the Judgement kicker is
   promoted to display size; a Challenge kicker (which every other source md
   still carries) keeps the default 15px muted treatment. */
.dv-case-body.case-template-no-2 .dv-case-judgement > .dv-case-kicker {
  color: #fff;
  font-size: 23px;
  line-height: 1.55;
  margin-bottom: 4px;
}

.dv-case-body.case-template-no-2 .dv-case-judgement > .dv-case-kicker + .dv-case-judgement__intro {
  margin-top: 4px;
}

.dv-case-body.case-template-no-2 .dv-case-next {
  position: relative;
  isolation: isolate;
}

.dv-case-body.case-template-no-2 .dv-case-next__hotspot {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.dv-case-body.case-template-no-2 .dv-case-judgement > .dv-case-kicker {
  margin-bottom: 20px;
}

.dv-case-body.case-template-no-2 .dv-case-tilted-card {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: clamp(255px, 24vw, 360px);
  aspect-ratio: 1416 / 1500;
  margin: 0;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  perspective: 800px;
  will-change: transform, opacity;
}

.dv-case-body.case-template-no-2 .dv-case-tilted-card.is-visible {
  visibility: visible;
}

.dv-case-body.case-template-no-2 .dv-case-tilted-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.dv-case-body.case-template-no-2 .dv-case-tilted-card__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
  will-change: transform;
  transform: translateZ(0);
  /* The cover sits behind the Next Case copy — half opacity keeps the two
     lines readable. Lives on the <img>, NOT on .dv-case-tilted-card, because
     the card's opacity is driven frame-by-frame by the JS spring. */
  opacity: 0.5;
}

/* Desktop: Reflection matched down to Challenge's 23px / 1.55 (detail.css
   ships them at 23px vs 30px by default — that gap read as two different
   body-copy scales sitting one screen apart). Challenge is the reference;
   if Challenge's desktop size ever changes, change this with it. */
.dv-case-body.case-template-no-2 .dv-case-reflection__lead {
  font-size: 23px;
  line-height: 1.55;
}

/* Judgement card: drop the "JUDGEMENT · 0N" label, move the large index
   number up to where the label used to sit (top-left), and center the
   title in the space that frees up. Targets the same span/h3/strong the
   default template already renders — no HTML change, so template No.1
   keeps the original label + bottom-anchored number until it adopts No.2. */
.dv-case-body.case-template-no-2 .dv-case-judgement-card__head {
  position: relative;
  justify-content: center;
}

.dv-case-body.case-template-no-2 .dv-case-judgement-card__head span {
  display: none;
}

/* top/left match .dv-case-judgement-card__head's own padding (48px here,
   32px <=1100px, 24px <=680px — see the matching overrides below) so the
   number lands where in-flow content would normally start, not flush
   against the card border. Absolute positioning's 0/0 origin is the
   padding EDGE (outside the padding), not the padding's inner content
   edge, so it has to be spelled out explicitly at each breakpoint. */
.dv-case-body.case-template-no-2 .dv-case-judgement-card__head strong {
  position: absolute;
  top: 48px;
  left: 48px;
  margin-top: 0;
}

@media (max-width: 1100px) {
  .dv-case-body.case-template-no-2 .dv-case-judgement-card__head strong {
    top: 32px;
    left: 32px;
  }
}

@media (max-width: 680px) {
  .dv-case-kicker {
    font-size: 14px;
  }

  .dv-case-body.case-template-no-2 .dv-case-judgement > .dv-case-kicker {
    font-size: 23px;
  }

  .dv-case-body.case-template-no-2 .dv-case-tilted-card {
    width: 255px;
  }

  /* Mobile: Challenge is the reference size for this template's Chinese body
     copy (20px / 35px line-height below 680px — one step lighter and more
     open than the earlier 22px/1.5). Without this it inherits the
     display-scale .dv-case-h3 ramp from detail.css — clamp(24px, 7vw, 32px)
     / 1.14 — which renders far larger and tighter than the rest of the
     Chinese body copy. */
  .dv-case-body.case-template-no-2 .dv-case-overview__main .dv-case-h3 {
    font-size: 20px;
    line-height: 1.75;
  }

  /* Reflection follows Challenge down to the same 20px / 35px line-height.
     Base detail.css ships mobile Reflection at 26px, which no longer
     matches once Challenge moves — if Challenge's mobile size changes
     again, change this with it. */
  .dv-case-body.case-template-no-2 .dv-case-reflection__lead {
    font-size: 20px;
    line-height: 1.75;
  }

  /* Below 1100px the card collapses to a single column and .dv-case-judgement-card__head
     goes to min-height: auto, so the absolutely-positioned index number no
     longer has 400px of room to clear — give the title enough top margin to
     sit below it instead of overlapping. */
  .dv-case-body.case-template-no-2 .dv-case-judgement-card__head h3 {
    margin-top: 88px;
  }

  /* Matches .dv-case-judgement-card__head's 24px padding at this width —
     see the top/left comment on the base rule above. */
  .dv-case-body.case-template-no-2 .dv-case-judgement-card__head strong {
    top: 24px;
    left: 24px;
  }

  .dv-case-prose {
    gap: 16px;
  }

  .dv-case-reflection__lead {
    gap: 20px;
  }
}

/* Touch adaptation for case detail template No.2. Touch devices have no
   reliable hover state, so the cover stays inside the module behind the copy. */
@media (hover: none) and (pointer: coarse) {
  .dv-case-body.case-template-no-2 .dv-case-next {
    overflow: hidden;
  }

  .dv-case-body.case-template-no-2 .dv-case-tilted-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(76vw, 307px);
    height: auto;
    transform: translate3d(-50%, -50%, 0) !important;
    visibility: visible !important;
    opacity: 0.3 !important;
  }

  .dv-case-body.case-template-no-2 .dv-case-tilted-card__inner {
    transform: none !important;
  }

  /* On touch the container already carries the approved 0.3 fade — don't
     stack the hover-only 50% on top of it. */
  .dv-case-body.case-template-no-2 .dv-case-tilted-card__img {
    opacity: 1;
  }
}