/* Isolated scroll-effect laboratory.
   Only this test page loads this file.
   Production CSS is intentionally untouched. */

/* Keep footer clearance inside the final gradient, not on solid-colour main
   or body padding. Preserve extra mobile anchor clearance when required. */
html body:is(.info-cites-page,.ipci-editorial-page),
html body:is(.info-cites-page,.ipci-editorial-page) .study-making-main {
  padding-bottom: 0 !important;
}
html body:is(.info-cites-page,.ipci-editorial-page) .study-making-article > .study-making-section:last-child {
  padding-bottom: max(var(--fixed-footer-h,30px),var(--mobile-anchor-tail,0px)) !important;
}

html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-making-section .test-hero-limited-figure > img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

/* Narrow single-column content: 60% of the text frame, captions included.
   Shrink the outer media container once, never both container and image.
   Cinematic backgrounds and desktop composition are deliberately excluded. */
@media (max-width: 980px) {
  body:is(.info-cites-page,.ipci-editorial-page) { --test-single-image-width: 60%; }
  html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-pair > .study-media-stack,
  html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-pair > .study-figure,
  html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-section-content > .study-media-stack,
  html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-section-content > .study-figure,
  html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-centered-figure {
    width: var(--test-single-image-width) !important;
    max-width: var(--test-single-image-width) !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-self: start !important;
  }
  html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-media-stack > .study-figure,
  html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-centered-figure > .study-figure {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-making-section .study-figure img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}
@media (max-width: 900px) {
  body:is(.info-cites-page,.ipci-editorial-page) { --test-single-image-width: 95%; }
}
@media (max-width: 700px) {
  html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-gallery > .study-figure {
    width: var(--test-single-image-width) !important;
    max-width: var(--test-single-image-width) !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-self: start !important;
  }
}

/* Caption width includes its padding and never exceeds the image container. */
html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-figure > figcaption {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}


/* STEP 1 — only fade timing between the lower sticky bar and the title bar.
   No zoom, no later release/scroll logic yet. */
@media (min-width: 981px) {
  body:is(.info-cites-page,.ipci-editorial-page) .cinematic-backdrop,
  body:is(.info-cites-page,.ipci-editorial-page) .scroll-effect-backdrop,
  body:is(.info-cites-page,.ipci-editorial-page) [data-scroll-effect-bg] {
    --test-bg-fade: 0;
    --test-content-fade: 0;
  }

  body:is(.info-cites-page,.ipci-editorial-page) .cinematic-backdrop::after,
  body:is(.info-cites-page,.ipci-editorial-page) .scroll-effect-backdrop::after,
  body:is(.info-cites-page,.ipci-editorial-page) [data-scroll-effect-bg]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(234,240,244,var(--test-bg-fade));
    z-index: 2;
  }

  body:is(.info-cites-page,.ipci-editorial-page) .test-scroll-content-fade {
    opacity: var(--test-content-fade, 0);
    transform: translateY(calc((1 - var(--test-content-fade, 0)) * 28px));
    will-change: opacity, transform;
  }
}


/* TEST — Sticky navigation is visible from the first render.
   It must not wait for a scroll threshold. */
.content-sticky-nav,
.section-switcher,
.study-making-nav,
.sticky-nav,
[data-sticky-nav] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}


/* TEST — title starts below the permanently visible sticky navigation. */
body:is(.info-cites-page,.ipci-editorial-page) {
  --test-sticky-stack-height: 0px;
}

body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero,
body:is(.info-cites-page,.ipci-editorial-page) .page-title,
body:is(.info-cites-page,.ipci-editorial-page) .title-bar {
  padding-top: calc(
    var(--test-sticky-stack-height) + var(--test-title-extra-gap, 18px)
  ) !important;
}


/* STEP 1B — lower chapter navigation is permanently fixed from first render. */
body:is(.info-cites-page,.ipci-editorial-page) {
  --test-chapter-nav-height: var(--content-sticky-two, 62px);
}

body:is(.info-cites-page,.ipci-editorial-page) .study-making-nav.content-sticky-nav.test-always-sticky {
  display: block !important;
  position: fixed !important;
  top: calc(var(--header-h) + 58px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 930 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* Reserve the space occupied by the permanently visible lower sticky bar.
   This moves the complete blue title area content downward, not only the text. */
body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero {
  padding-top: calc(var(--test-chapter-nav-height) + 8px) !important;
}

/* Cancel the earlier experimental title-offset rule. */
body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero,
body:is(.info-cites-page,.ipci-editorial-page) .page-title,
body:is(.info-cites-page,.ipci-editorial-page) .title-bar {
  --test-sticky-stack-height: 0px !important;
}


/* CLEAN PERMANENT CHAPTER NAV
   No scroll trigger, no JS activation, no auto-hide class. */
body:is(.info-cites-page,.ipci-editorial-page) {
  --test-upper-switcher-h: 58px;
  --test-chapter-nav-h: var(--content-sticky-two, 62px);
}

body:is(.info-cites-page,.ipci-editorial-page) .study-making-nav.content-sticky-nav.test-permanent-chapter-nav {
  display: block !important;
  position: fixed !important;
  top: calc(var(--header-h) + var(--test-upper-switcher-h)) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 930 !important;
  height: var(--test-chapter-nav-h) !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  transition: none !important;
}

/* The blue title/hero starts below the permanently visible chapter bar. */
body:is(.info-cites-page,.ipci-editorial-page) .study-making-main {
  padding-top: var(--test-chapter-nav-h) !important;
}


/* CITES certificate — cropped to the yellow document border, smaller in-page view. */
.cites-certificate-figure {
  width: 66.6667% !important;
  max-width: 66.6667% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.cites-certificate-figure .cites-certificate-zoomable {
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  cursor: zoom-in;
}
@media (max-width: 760px) {
  .cites-certificate-figure {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* EFFECT STEP A
   Background layer only. Normal text and content images keep their existing layout. */
@media (min-width: 981px) {
  body:is(.info-cites-page,.ipci-editorial-page) {
    --effect-title-bottom: 0px;
    --effect-lower-sticky-bottom: 0px;
  }

  body:is(.info-cites-page,.ipci-editorial-page) .effect-section {
    position: relative;
    isolation: isolate;
    min-height: 0 !important;
  }

  body:is(.info-cites-page,.ipci-editorial-page) .effect-backdrop {
    position: sticky;
    top: var(--effect-title-bottom);
    z-index: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin-bottom: -100vh;
    margin-bottom: -100dvh;
    overflow: hidden;
    pointer-events: none;
  }

  body:is(.info-cites-page,.ipci-editorial-page) .effect-backdrop-stage {
    position: absolute;
    inset: 0;
    left: 50%;
    width: var(--frame-width);
    max-width: var(--frame-max);
    transform: translateX(-50%);
    overflow: hidden;
    background: #dfe5e2;
  }

  body:is(.info-cites-page,.ipci-editorial-page) .effect-backdrop-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
  }

  body:is(.info-cites-page,.ipci-editorial-page) .effect-backdrop-wash {
    position: absolute;
    inset: 0;
    background: rgba(239,243,241,var(--effect-fade,0));
  }

  /* The existing section content remains in its established layout.
     Only its visibility is controlled during the requested interval. */
  body:is(.info-cites-page,.ipci-editorial-page) .effect-section > .study-making-inner {
    position: relative;
    z-index: 2;
    opacity: var(--effect-content,0);
    transform: translateY(calc((1 - var(--effect-content,0)) * 30px));
    will-change: opacity, transform;
  }
}

@media (max-width: 980px), (prefers-reduced-motion: reduce) {
  body:is(.info-cites-page,.ipci-editorial-page) .effect-backdrop {
    display: none !important;
  }
  body:is(.info-cites-page,.ipci-editorial-page) .effect-section > .study-making-inner {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* EFFECT STEP B — only the background plane becomes full viewport width.
   Timing, fade, sticky behavior and content geometry stay unchanged. */
@media (min-width: 981px) {
  body:is(.info-cites-page,.ipci-editorial-page) .effect-backdrop-stage {
    left: 50% !important;
    width: 100vw !important;
    max-width: none !important;
    transform: translateX(-50%) !important;
  }
}


/* EFFECT STEP C — extended scroll corridor.
   During the fade interval the background is held under the navigation and
   travels slowly from lower sticky-bar edge to header edge. */
@media (min-width: 981px) {
  body:is(.info-cites-page,.ipci-editorial-page) .effect-backdrop.effect-transitioning {
    top: var(--effect-held-top, 0px) !important;
  }

  body:is(.info-cites-page,.ipci-editorial-page) .effect-backdrop.effect-transition-complete {
    top: var(--effect-held-top, 0px) !important;
  }
}


/* EFFECT STEP D — content enters later/lower; background gently zooms while fading. */
@media (min-width: 981px) {
  body:is(.info-cites-page,.ipci-editorial-page) .effect-backdrop-image {
    transform: scale(var(--effect-zoom, 1)) !important;
    transform-origin: 50% 50% !important;
    will-change: transform;
  }

  body:is(.info-cites-page,.ipci-editorial-page) .effect-section > .study-making-inner {
    /* Start substantially lower, then settle into the original position. */
    transform: translateY(calc((1 - var(--effect-content, 0)) * 1050px)) !important;
    opacity: var(--effect-content-opacity, var(--effect-content, 0)) !important;
    will-change: opacity, transform;
  }
}


/* EFFECT STEP I — content enters fully opaque from below.
   No text fade. Background zoom continues until the sticky image is released
   by the end of the section. */
@media (min-width: 981px) {
  body:is(.info-cites-page,.ipci-editorial-page) .effect-section > .study-making-inner {
    opacity: var(--effect-content-opacity, 0) !important;
    transform: translateY(calc((1 - var(--effect-content, 0)) * 1050px)) !important;
    will-change: transform;
  }

  body:is(.info-cites-page,.ipci-editorial-page) .effect-backdrop-image {
    transform: scale(var(--effect-zoom, 1)) !important;
    transform-origin: 50% 50% !important;
    will-change: transform;
  }
}


/* EFFECT STEP K — readability over the cinematic background. */
@media (min-width: 981px) {
  /* Large text boxes: 80% opacity + 5px backdrop blur. */
  body:is(.info-cites-page,.ipci-editorial-page) .effect-section .study-prose,
  body:is(.info-cites-page,.ipci-editorial-page) .effect-section .study-text,
  body:is(.info-cites-page,.ipci-editorial-page) .effect-section .study-card,
  body:is(.info-cites-page,.ipci-editorial-page) .effect-section .text-box {
    background: rgba(239, 243, 241, 0.80) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
  }

  /* Figure captions: same width as image, 2mm gap, 2mm inner spacing,
     80% opacity and 3px blur. */
  body:is(.info-cites-page,.ipci-editorial-page) .effect-section .study-figure {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body:is(.info-cites-page,.ipci-editorial-page) .effect-section .study-figure > img {
    width: 100% !important;
    display: block !important;
  }

  body:is(.info-cites-page,.ipci-editorial-page) .effect-section .study-figure > figcaption {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 2mm !important;
    padding: 2mm !important;
    background: rgba(239, 243, 241, 0.80) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    color: #173047 !important;
  }
}


/* EFFECT STEP N — exact end of content.
   The next blue section follows the real last content item after a fixed 15mm gap.
   No arbitrary min-height is used. */
@media (min-width: 981px) {
  body:is(.info-cites-page,.ipci-editorial-page) .effect-section {
    min-height: 0 !important;
    padding-bottom: calc(10mm + var(--effect-tail-extra, 0px)) !important;
  }

  /* Let the section height be determined by its real content plus 15mm.
     The cinematic backdrop remains visually sticky, but does not create
     additional document height. */
  body:is(.info-cites-page,.ipci-editorial-page) .effect-section > .study-making-inner {
    margin-bottom: 0 !important;
  }
}


/* DESIGN STEP R — global 10mm vertical rhythm for the CITES test page.
   This changes only layout spacing; scroll/fade/zoom logic stays untouched. */
@media (min-width: 981px) {
  body:is(.info-cites-page,.ipci-editorial-page) {
    --cites-vertical-gap: 10mm;
  }

  /* Permanent sticky navigation -> first hero content */
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero-inner {
    padding-top: var(--cites-vertical-gap) !important;
    padding-bottom: var(--cites-vertical-gap) !important;
  }

  /* Every following colour section begins and ends with the same 10mm rhythm. */
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-section > .study-making-inner {
    padding-top: var(--cites-vertical-gap) !important;
    padding-bottom: var(--cites-vertical-gap) !important;
  }

  /* Section heading -> section content */
  body:is(.info-cites-page,.ipci-editorial-page) .study-section-head {
    margin-bottom: var(--cites-vertical-gap) !important;
  }

  /* No additional outer margin between colour sections:
     their own 10mm inner spacing defines the transition. */
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Hero figure and copy should not create an extra bottom gap beyond the 10mm frame. */
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero-copy,
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero .hero-figure {
    margin-bottom: 0 !important;
  }

  /* Effect sections already carry a dynamic tail compensation.
     Its fixed design gap is exactly 10mm. */
  body:is(.info-cites-page,.ipci-editorial-page) .effect-section {
    padding-bottom: calc(10mm + var(--effect-tail-extra, 0px)) !important;
  }
}


/* DESIGN STEP S — clean hero start below the permanent lower sticky bar. */
@media (min-width: 981px) {
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero {
    margin-top: 0 !important;
    background: #173d59 !important;
  }

  body:is(.info-cites-page,.ipci-editorial-page) .study-making-main {
    background: #173d59;
  }

  body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero-inner {
    box-sizing: border-box !important;
    padding-top: 10mm !important;
    padding-bottom: 10mm !important;
    margin-top: 0 !important;
  }

  /* Remove inherited offsets that were adding extra empty space above the title. */
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero-copy,
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero-copy > :first-child,
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero .hero-figure {
    margin-top: 0 !important;
  }
}


/* DESIGN STEP T
   Blue field begins with the hero; the site header and both navigation bars
   retain their original translucency. Hero content begins exactly 10mm below
   the lower edge of the lower sticky bar. */
@media (min-width: 981px) {
  body:is(.info-cites-page,.ipci-editorial-page) {
    --cites-blue: #173d59;
    --cites-gap: 10mm;
  }

  /* Lower chapter bar: more translucent, with the original blur unchanged. */
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-nav.content-sticky-nav {
    background-color: rgba(230,238,243,.50) !important;
  }

  /* The hero owns one continuous, scrolling gradient, extended behind the
     in-flow header and upper switcher. Never paint onto the glass bars. */
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-main {
    background: var(--cites-blue) !important;
  }

  body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero {
    position: relative;
    z-index: 0;
    overflow: visible !important;
    background: transparent !important;
  }

  body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero::before {
    content: "";
    position: absolute;
    inset: calc(-1 * (var(--header-h) + var(--test-upper-switcher-h))) 0 0;
    z-index: -1;
    pointer-events: none;
    background: var(--gerbeth-blue-gradient);
  }

  /* Hero is not allowed to inherit any old top spacing. */
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-main,
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero,
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero-inner {
    margin-top: 0 !important;
  }

  /*
   * The lower sticky bar is fixed and therefore outside document flow.
   * Reserve exactly its height + 10mm before the hero content.
   * --test-chapter-nav-h is already the permanent lower-bar height.
   */
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-main {
    padding-top: 0 !important;
  }

  html body:is(.info-cites-page,.ipci-editorial-page):not(.home-page) .study-making-hero {
    padding-top: 0 !important;
  }

  html body:is(.info-cites-page,.ipci-editorial-page):not(.home-page) .study-making-hero .study-making-hero-inner {
    padding-top: calc(var(--test-chapter-nav-h) + var(--cites-gap)) !important;
    padding-bottom: var(--cites-gap) !important;
  }

  /* In-flow grid items share the top inset and contribute their full height. */
  html body:is(.info-cites-page,.ipci-editorial-page):not(.home-page) .study-making-hero .study-making-hero-inner > .hero-figure {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    align-items: flex-start !important;
    margin-top: 0 !important;
  }

  html body:is(.info-cites-page,.ipci-editorial-page):not(.home-page) .study-making-hero .study-making-hero-inner {
    grid-template-columns: minmax(0,1fr) min(40%,460px) !important;
    align-items: start !important;
  }

  /* Both hero columns must start on the exact same horizontal line. */
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero-copy,
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero .hero-figure {
    align-self: start !important;
    margin-top: 0 !important;
  }

  body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero-copy > :first-child,
  body:is(.info-cites-page,.ipci-editorial-page) .study-making-hero .hero-figure > :first-child {
    margin-top: 0 !important;
  }
}

/* Natural image proportions at every width; no height cap or clipping. */
html body:is(.info-cites-page,.ipci-editorial-page):not(.home-page) .study-making-hero {
  height: auto !important;
  max-height: none !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}
html body:is(.info-cites-page,.ipci-editorial-page):not(.home-page) .study-making-hero .study-making-hero-inner {
  height: auto !important;
  max-height: none !important;
  padding-bottom: 1cm !important;
}
html body:is(.info-cites-page,.ipci-editorial-page):not(.home-page) .study-making-hero .study-making-hero-inner > .hero-figure {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  justify-self: end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}
html body:is(.info-cites-page,.ipci-editorial-page):not(.home-page) .study-making-hero .study-making-hero-inner > .hero-figure img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}
@media (max-width: 980px) {
  html body:is(.info-cites-page,.ipci-editorial-page):not(.home-page) .study-making-hero .study-making-hero-inner {
    grid-template-columns: minmax(0,1fr) !important;
    row-gap: 1cm !important;
    padding-top: calc(var(--test-chapter-nav-h) + 1cm) !important;
    margin-top: 0 !important;
  }
  html body:is(.info-cites-page,.ipci-editorial-page) .study-making-main,
  html body:is(.info-cites-page,.ipci-editorial-page):not(.home-page) .study-making-hero {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  html body:is(.info-cites-page,.ipci-editorial-page):not(.home-page) .study-making-hero .study-making-hero-inner > .hero-figure {
    position: static !important;
    /* Match 40% of the 980px breakpoint's 94%-wide frame: 368.48px.
       Moving below the copy must never enlarge the image to 460px. */
    width: min(95%,368.48px) !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-self: end !important;
  }
}

/* Tablet pairs: retain the editorial left/right arrangement. Equal tracks
   minus the gap leave each text box comfortably above 1/3 of the frame.
   Phones keep their existing single-column, centered-image layout. */
@media (min-width: 701px) and (max-width: 1366px) {
  html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-making-section .study-pair {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 1cm !important;
    align-items: start !important;
  }
  html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-making-section .study-pair > * {
    min-width: 0 !important;
    box-sizing: border-box !important;
    grid-row: 1 !important;
    order: initial !important;
  }
  html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-making-section .study-pair > .study-prose {
    width: 100% !important;
    max-width: none !important;
    grid-column: 1 !important;
    overflow-wrap: anywhere;
  }
  html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-making-section .study-pair > :is(.study-media-stack, .study-figure) {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 2 !important;
  }
  html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-making-section .study-pair.media-left > .study-prose {
    grid-column: 2 !important;
  }
  html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-making-section .study-pair.media-left > :is(.study-media-stack, .study-figure) {
    grid-column: 1 !important;
  }
}

/* Content figures and their width-limited wrappers move together, captions
   included. Hero and cinematic backgrounds deliberately remain untouched. */
html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-making-section [data-image-placement] {
  margin-left: var(--image-placement-left, 0) !important;
  margin-right: var(--image-placement-right, auto) !important;
  justify-self: var(--image-placement-self, start) !important;
}
html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-making-section [data-image-placement="left"] {
  --image-placement-left: 0;
  --image-placement-right: auto;
  --image-placement-self: start;
}
html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-making-section [data-image-placement="right"] {
  --image-placement-left: auto;
  --image-placement-right: 0;
  --image-placement-self: end;
}
html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-making-section [data-image-placement="center"] {
  --image-placement-left: auto;
  --image-placement-right: auto;
  --image-placement-self: center;
}
@media (max-width: 700px) {
  html body:is(.info-cites-page,.ipci-editorial-page).study-making-page .study-making-section [data-image-placement] {
    --image-placement-left: auto;
    --image-placement-right: auto;
    --image-placement-self: center;
  }
}

/* Below 900px the original navigation becomes a single 48px row. Do not
   reserve the desktop two-row height, nor a second copy of that clearance. */
@media (max-width: 900px) {
  body:is(.info-cites-page,.ipci-editorial-page) {
    --test-chapter-nav-h: 48px;
    --test-upper-switcher-h: var(--mobile-info-h,54px);
  }
}