/* 11/12: a second, static surface inside the unchanged 09/10 outer card.
   Existing artwork nodes, caption fitting, controls and fades are reused. */
@media (max-width: 600px) {
  html:is(#hero-directions,[data-proo-home-release])[data-artwork-layout="nested"] .proo-static-hero__card {
    /* Bezel on top and sides only; the footer boundary gets no added gap. */
    --nested-artwork-gap: 3px;
    --nested-artwork-side: calc(var(--inset-artwork-side) + var(--nested-artwork-gap));
    --nested-artwork-radius: max(0px, calc(var(--inset-artwork-radius) - var(--nested-artwork-gap)));
    /* The caption circle is anchored to the fold; balance its clearance
       against the actual outer-card bottom, which ends one side inset sooner. */
    --nested-artwork-footer: calc(var(--inset-artwork-footer) - var(--inset-artwork-side));
    /* Concentric pill/inner-card corners, independent of the outer bezel. */
    --nested-pill-inset: max(0px, calc(var(--nested-artwork-radius) - var(--finalist-pill-height) / 2));
    --nested-number-inset: calc(var(--nested-pill-inset) + var(--three-card-mobile-label-offset, .32rem));
    --nested-artwork-bg: #202022;
  }
  html:is(#hero-directions,[data-proo-home-release])[data-artwork-layout="nested"]
  :is(.proo-static-hero__card--software, .proo-static-hero__card--formation) {
    /* Retain the inner surface and all geometry, but let the outer card's
       current theme colour show through. Restore colour through this token. */
    --nested-artwork-bg: transparent;
  }
  html:is(#hero-directions,[data-proo-home-release])[data-artwork-layout="nested"] .proo-static-hero__card::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: var(--nested-artwork-gap) var(--nested-artwork-side) var(--nested-artwork-footer) !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: var(--nested-artwork-radius) !important;
    background: var(--nested-artwork-bg) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    mask: none !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  html:is(#hero-directions,[data-proo-home-release])[data-artwork-layout="nested"] .proo-static-hero__slide:first-child .proo-static-hero__responsive-mark {
    inset: var(--nested-artwork-gap) var(--nested-artwork-side) var(--nested-artwork-footer) !important;
    border-radius: var(--nested-artwork-radius) !important;
    z-index: 2 !important;
  }
  html:is(#hero-directions,[data-proo-home-release])[data-artwork-layout="nested"] .proo-static-hero__hands {
    inset: calc(48px + var(--nested-artwork-gap)) var(--nested-artwork-side) calc(var(--nested-artwork-footer) + 8px) !important;
    z-index: 2 !important;
  }
  html:is(#hero-directions,[data-proo-home-release])[data-artwork-layout="nested"] .proo-static-hero__formation-globe {
    inset: calc(24px + var(--nested-artwork-gap)) calc(3% + var(--nested-artwork-side)) calc(var(--nested-artwork-footer) + 24px) !important;
    z-index: 2 !important;
  }
  html:is(#hero-directions,[data-proo-home-release])[data-artwork-layout="nested"] .proo-static-hero__card > .proo-static-hero__card-number {
    top: calc(var(--nested-artwork-gap) + var(--nested-number-inset)) !important;
    left: calc(var(--nested-artwork-side) + var(--nested-number-inset)) !important;
  }
  html:is(#hero-directions,[data-proo-home-release])[data-artwork-layout="nested"] .proo-static-hero__card > .proo-static-hero__card-kind {
    top: calc(var(--nested-artwork-gap) + var(--nested-pill-inset)) !important;
    right: calc(var(--nested-artwork-side) + var(--nested-pill-inset)) !important;
  }
  html:is(#hero-directions,[data-proo-home-release])[data-artwork-layout="nested"] .proo-static-hero__card > .proo-card-info {
    /* Same physical outer-card inset at the right and bottom; the existing
       inner-artwork footer formula gives this same clearance above. */
    right: var(--inset-footer-gap) !important;
  }
}