/*
  Panel split (.panel-split; Figma Approach 486:172–202, "Align"): a 480px row (at least: longer or zoomed copy grows
  it), half a solid panel of copy in the --box colour (white on the black page, with --on-box black type; light mode
  flips both), half a photo with a white line-art mark (the shared .mark, site.css) centred on it. It opens the
  Approach page under the intro.

  Markup:
    <section class="panel-split" id="align" aria-labelledby="align-title">
      <div class="panel-split__panel">
        <h2 class="panel-split__title cal" id="align-title">Align</h2>
        <p class="panel-split__sub cal">The Foundation</p>
        <p class="panel-split__text">Through collaborative ideation, … and <em>create the foundation for everything that follows.</em></p>
      </div>
      <div class="panel-split__media">
        <img class="cover" src="images/….webp" alt="…">
        <img class="mark" src="/shared/marks/align.svg" alt="" style="--w:19.9rem">
      </div>
    </section>
  Fields: title, subtitle, text (an <em> run is red), image, alt, mark?, mark width (--w).
  Type: title Cal Sans 89, subtitle Cal Sans 24, text Inter 20/26, each trimmed to cap height and baseline and 38px
  apart, as in Figma; the title's cap line sits 86px under the panel's top.
*/
.panel-split{display:grid;grid-template-columns:72rem 72rem;min-height:48rem}
.panel-split__panel{padding:8.64rem 4rem 4rem;background:var(--box);color:var(--on-box)}
.panel-split__title{font-size:8.9rem;line-height:9rem;text-box:trim-both cap alphabetic}
.panel-split__sub{margin-top:3.8rem;font-size:2.4rem;line-height:2.4rem;text-box:trim-both cap alphabetic}
.panel-split__text{width:62rem;margin-top:3.8rem;font-size:2rem;line-height:2.6rem;text-box:trim-both cap alphabetic}
.panel-split__text em{font-style:normal;color:var(--red)}
.panel-split__media{position:relative;overflow:hidden;background:var(--well)}
.panel-split__media .cover{position:absolute;inset:0}   /* the photo fills the row; only the copy sets its height */

@media (max-width:767px){
  .panel-split{grid-template-columns:1fr;min-height:0}
  .panel-split__panel{padding:4.8rem 2rem}
  .panel-split__title{font-size:4.8rem;line-height:5rem}
  .panel-split__sub{margin-top:2.4rem;font-size:2rem;line-height:2.2rem}
  .panel-split__text{width:auto;margin-top:2.4rem;font-size:1.6rem;line-height:2.2rem}
  .panel-split__media{height:24rem}
}