/*
  HIMART Wide Editorial Layout — TEST ONLY v12
  Purpose: validate the index.html WORKS interaction pattern inside a case study:
  a sticky major-title rail on the left while evidence/content scrolls on the right.

  Contract
  - < 1600px: no layout override; the canonical Himart design system remains unchanged.
  - >= 1600px: 01–04 major sections opt into the wide editorial split.
  - Left major title is CSS-sticky, matching the index.html WORKS principle (no JS position control).
  - Title-only collision spacing remains 0px.
  - Major chapter rhythm is 200px and is applied to the whole incoming chapter.
  - Inside each chapter, both rails begin at the exact same authored top line: no top margin is allowed on the left major-title head or the first right-rail content unit.
  - Every medium-title unit owns a 1px weak divider + 40px divider-to-title inset.
  - As CSS sticky containment pushes the title upward, a test-only runtime variable progressively dims it.
  - Every major section paints black edge-to-edge; the editorial rails remain centered inside a max 1600px canvas.
  - Magnetic reveal is applied at subsection / medium-title unit level, not to nested child components.
  - Hero, navigation, footer typography, color and component internals remain owned by the canonical design system.
  - Existing DOM order is preserved. The test only removes the visual box of .hm-wrap with display:contents at wide sizes.
*/

@media (min-width:1600px){
  html body.himart-page-body.hm-wide-editorial-test{
    --hm-wide-title-collision-gap:0px;
    --hm-wide-major-content-gap:200px;
    --hm-wide-left-min:400px;
    --hm-wide-left-max:440px;
    --hm-wide-column-gap-min:80px;
    --hm-wide-column-gap-max:100px;
    --hm-wide-right-max:1060px;
    --hm-wide-edge-min:64px;
    --hm-wide-rise-distance:56px;
    --hm-wide-rise-overshoot:-7px;
  }

  /* Full-bleed black section plane + centered editorial rails. */
  html body.himart-page-body.hm-wide-editorial-test #live-main > :is(#brand,#data,#journey,#direction).hm-section{
    position:relative!important;
    isolation:isolate!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding-right:0!important;
    padding-left:0!important;
    display:grid!important;
    grid-template-columns:
      minmax(var(--hm-wide-edge-min),1fr)
      minmax(var(--hm-wide-left-min),var(--hm-wide-left-max))
      minmax(var(--hm-wide-column-gap-min),var(--hm-wide-column-gap-max))
      minmax(0,var(--hm-wide-right-max))
      minmax(var(--hm-wide-edge-min),1fr)!important;
    column-gap:0!important;
    grid-auto-flow:row!important;
    grid-auto-rows:auto!important;
    align-items:start!important;
    overflow:visible!important;
    background:#000!important;
  }

  html body.himart-page-body.hm-wide-editorial-test #live-main > :is(#brand,#data,#journey,#direction).hm-section::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0 50%;
    width:100vw;
    transform:translateX(-50%);
    background:#000;
    pointer-events:none;
  }

  /*
    01 keeps the canonical Hero-to-content opening space.
    02–04 keep only the requested 200px major-chapter gap.
    No additional internal top inset is allowed after that boundary.
  */
  html body.himart-page-body.hm-wide-editorial-test #live-main > #brand.hm-section{
    padding-top:var(--hm-section-padding-top)!important;
  }
  html body.himart-page-body.hm-wide-editorial-test #live-main > :is(#data,#journey,#direction).hm-section{
    padding-top:var(--hm-wide-major-content-gap)!important;
  }

  html body.himart-page-body.hm-wide-editorial-test #live-main > :is(#brand,#data,#journey,#direction).hm-section > .hm-wrap{
    display:contents!important;
    background:transparent!important;
  }

  html body.himart-page-body.hm-wide-editorial-test #live-main > :is(#brand,#data,#journey,#direction).hm-section > .hm-wrap > *{
    grid-column:4!important;
    min-width:0!important;
    width:100%!important;
  }

  /* Sticky major-title rail: all authored top spacing is removed for 01–04. */
  html body.himart-page-body.hm-wide-editorial-test #live-main > :is(#brand,#data,#journey,#direction).hm-section > .hm-wrap > .hm-section-head{
    grid-column:2!important;
    position:sticky!important;
    top:14vh!important;
    align-self:start!important;
    width:100%!important;
    min-width:0!important;
    height:fit-content!important;
    margin:0!important;
    padding:0!important;
    z-index:3!important;
    will-change:opacity,transform;
  }

  html body.himart-page-body.hm-wide-editorial-test #live-main > #brand.hm-section > .hm-wrap > .hm-section-head{
    grid-row:1 / span 2!important;
  }
  html body.himart-page-body.hm-wide-editorial-test #live-main > #data.hm-section > .hm-wrap > .hm-section-head{
    grid-row:1 / span 1!important;
  }
  html body.himart-page-body.hm-wide-editorial-test #live-main > #journey.hm-section > .hm-wrap > .hm-section-head{
    grid-row:1 / span 4!important;
  }
  html body.himart-page-body.hm-wide-editorial-test #live-main > #direction.hm-section > .hm-wrap > .hm-section-head{
    grid-row:1 / span 5!important;
  }

  html body.himart-page-body.hm-wide-editorial-test #live-main > :is(#brand,#data,#journey,#direction).hm-section .hm-section-head .hm-section-title{
    width:100%!important;
    max-width:440px!important;
  }
  html body.himart-page-body.hm-wide-editorial-test #live-main > :is(#brand,#data,#journey,#direction).hm-section .hm-section-head .hm-section-desc{
    max-width:32ch!important;
  }

  /*
    FIRST RIGHT-RAIL CONTENT — ZERO TOP MARGIN CONTRACT.
    The 200px chapter gap lives on the section itself. Everything that begins on the
    same row as the major title is reset to margin-top:0. Component-owned divider
    padding is restored by the final medium-title contract below.
  */
  html body.himart-page-body.hm-wide-editorial-test #live-main > #brand.hm-section > .hm-wrap > .hm-section-head + .hm-subsection,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #data.hm-section > .hm-wrap > .hm-section-head + .data-list,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #journey.hm-section > .hm-wrap > .hm-section-head + .hm-subsection,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #direction.hm-section > .hm-wrap > .hm-section-head + .flow-area{
    margin-top:0!important;
    align-self:start!important;
  }

  /* Remove component-level top padding/margins from first non-subsection content units. */
  html body.himart-page-body.hm-wide-editorial-test #live-main > #data.hm-section .data-list > .data-card:first-child,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #direction.hm-section > .hm-wrap > .hm-section-head + .flow-area{
    margin-top:0!important;
    padding-top:0!important;
  }

  /* The title/header content itself has no extra inset; the parent subsection owns it. */
  html body.himart-page-body.hm-wide-editorial-test #live-main > #brand.hm-section > .hm-wrap > .hm-section-head + .hm-subsection > .hm-subhead,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #journey.hm-section > .hm-wrap > .hm-section-head + .hm-subsection > .hm-subhead,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #data.hm-section .data-list > .data-card:first-child > .data-card-head,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #direction.hm-section > .hm-wrap > .hm-section-head + .flow-area > .flow-groups,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #direction.hm-section > .hm-wrap > .hm-section-head + .flow-area .flow-group:first-child,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #direction.hm-section > .hm-wrap > .hm-section-head + .flow-area .flow-label{
    margin-top:0!important;
    padding-top:0!important;
  }

  /* 03 continues with the canonical subsection rhythm only AFTER its first aligned block. */
  html body.himart-page-body.hm-wide-editorial-test #live-main > #journey.hm-section > .hm-wrap + .hm-wrap > .hm-subsection:first-child{
    margin-top:var(--hm-subsection-gap)!important;
  }

  /*
    FINAL MEDIUM-TITLE DIVIDER CONTRACT.
    This block deliberately comes after every historical zero-padding alignment reset.
    REUSE 01.x / 03.x / 04.x and 02.x data cards therefore cannot lose the line.
  */
  html body.himart-page-body.hm-wide-editorial-test.reuse-current
  #live-main > :is(#brand,#journey,#direction).hm-section > .hm-wrap > .hm-subsection.hm-ds-subsection{
    border-top:1px solid var(--hm-line-weak)!important;
    padding-top:var(--hm-space-component,40px)!important;
  }

  html body.himart-page-body.hm-wide-editorial-test.reuse-current
  #live-main > #data.hm-section > .hm-wrap > .data-list > .data-card{
    border-top:1px solid var(--hm-line-weak)!important;
    padding-top:var(--hm-space-component,40px)!important;
  }

  html body.himart-page-body.hm-wide-editorial-test.reuse-current
  #live-main > #brand.hm-section > .hm-wrap > .hm-section-head + .hm-subsection,
  html body.himart-page-body.hm-wide-editorial-test.reuse-current
  #live-main > #journey.hm-section > .hm-wrap > .hm-section-head + .hm-subsection,
  html body.himart-page-body.hm-wide-editorial-test.reuse-current
  #live-main > #data.hm-section > .hm-wrap > .hm-section-head + .data-list > .data-card:first-child{
    margin-top:0!important;
    border-top:1px solid var(--hm-line-weak)!important;
    padding-top:var(--hm-space-component,40px)!important;
  }

  /* Adapter-grouped HIMART: runtime medium blocks use several class names. */
  html body.himart-page-body.hm-wide-editorial-test.hm-wide-himart-test
  #live-main > :is(#brand,#data,#journey,#direction).hm-section .hm-wide-right-rail > :is(
    .hm-subsection,
    .narrative-problem,
    .narrative-reality,
    .narrative-signals,
    .narrative-touchpoint-synthesis,
    .brand-synthesis,
    .journey-flow-block,
    .journey-role-block,
    .design-rule
  ){
    border-top:1px solid var(--hm-line-weak)!important;
    padding-top:var(--hm-space-component,40px)!important;
  }

  html body.himart-page-body.hm-wide-editorial-test.hm-wide-himart-test
  #live-main > #data.hm-section .hm-wide-right-rail > .data-list > .data-card{
    border-top:1px solid var(--hm-line-weak)!important;
    padding-top:var(--hm-space-component,40px)!important;
  }

  /*
    Magnetic reveal unit = medium-title content block.
    Start almost opaque so the eye can read the motion, overshoot by 7px,
    then settle onto the layout baseline. Nested reveal nodes are neutralized
    so one subsection moves as a single authored unit rather than in fragments.
  */
  html body.himart-page-body.hm-wide-editorial-test #live-main > #brand.hm-section > .hm-wrap > .hm-subsection.hm-reveal,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #data.hm-section .data-list > .data-card.hm-reveal,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #journey.hm-section > .hm-wrap > .hm-subsection.hm-reveal,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #direction.hm-section > .hm-wrap > .hm-subsection.hm-reveal,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #direction.hm-section > .hm-wrap > .hm-section-head + .flow-area.hm-reveal{
    opacity:.88!important;
    transform:translate3d(0,var(--hm-wide-rise-distance),0)!important;
    transition:none!important;
    will-change:opacity,transform;
  }

  html body.himart-page-body.hm-wide-editorial-test #live-main > #brand.hm-section > .hm-wrap > .hm-subsection.hm-reveal.is-visible,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #data.hm-section .data-list > .data-card.hm-reveal.is-visible,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #journey.hm-section > .hm-wrap > .hm-subsection.hm-reveal.is-visible,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #direction.hm-section > .hm-wrap > .hm-subsection.hm-reveal.is-visible,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #direction.hm-section > .hm-wrap > .hm-section-head + .flow-area.hm-reveal.is-visible{
    animation:hm-wide-magnetic-rise .76s cubic-bezier(.22,.78,.22,1) both!important;
  }

  /* Child motion is absorbed into the subsection-level magnetic unit. */
  html body.himart-page-body.hm-wide-editorial-test #live-main > :is(#brand,#journey,#direction).hm-section .hm-subsection.hm-reveal .hm-reveal,
  html body.himart-page-body.hm-wide-editorial-test #live-main > #data.hm-section .data-card.hm-reveal .hm-reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }

  /* Standalone reveal blocks keep the canonical design-system motion. */
  html body.himart-page-body.hm-wide-editorial-test #live-main > :is(#brand,#data,#journey,#direction).hm-section .wide-rise-target:not(.hm-section-head){
    opacity:0!important;
    transform:translate3d(0,40px,0)!important;
    transition:opacity .58s ease-out,transform .82s cubic-bezier(.22,1,.36,1)!important;
  }
  html body.himart-page-body.hm-wide-editorial-test #live-main > :is(#brand,#data,#journey,#direction).hm-section .wide-rise-target.is-visible:not(.hm-section-head){
    opacity:1!important;
    transform:none!important;
  }

  /* Major title uses the same 56px entry distance as the first right-hand content. */
  html body.himart-page-body.hm-wide-editorial-test #live-main > :is(#brand,#data,#journey,#direction).hm-section .hm-section-head.hm-reveal{
    opacity:.3!important;
    transform:translate3d(0,var(--hm-wide-rise-distance),0)!important;
    transition:opacity .24s ease-out,transform .88s cubic-bezier(.22,1,.36,1)!important;
  }
  html body.himart-page-body.hm-wide-editorial-test #live-main > :is(#brand,#data,#journey,#direction).hm-section .hm-section-head.hm-reveal.is-visible{
    opacity:var(--hm-wide-title-exit-opacity,1)!important;
    transform:none!important;
  }

  html body.himart-page-body.hm-wide-editorial-test #live-main > :is(#brand,#data,#journey,#direction).hm-section > .hm-wrap > * :is(
    .reuse-proof-stack,
    .reuse-proof-grid,
    .reuse-uncertainty-graph,
    .reuse-proof-map,
    .reuse-confidence-flow,
    .hm-ds-evidence-stat,
    .hm-ds-role-grid,
    .hm-ds-media-grid,
    .hm-ds-journey,
    .flow-area,
    .data-viz,
    .hm-source,
    .hm-ds-source-note
  ){
    min-width:0!important;
    max-width:100%!important;
  }

  @keyframes hm-wide-magnetic-rise{
    0%{opacity:.88;transform:translate3d(0,var(--hm-wide-rise-distance),0)}
    62%{opacity:1;transform:translate3d(0,var(--hm-wide-rise-overshoot),0)}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }
}

/* Test page footer navigation: previous / next links stay fully white on black. */
html body.himart-page-body.hm-wide-editorial-test .hm-footer a{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
}

@media (min-width:1600px) and (prefers-reduced-motion:reduce){
  html body.himart-page-body.hm-wide-editorial-test #live-main > :is(#brand,#data,#journey,#direction).hm-section :is(.hm-reveal,.wide-rise-target){
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }
}