/* How it works. Hero: a portrait hung left, the title set beside it.
   Authored moment: the four phase names gain weight as they cross the
   viewport, from light to heavy, one after another. */

/* ---------- Hero ---------- */
.hero--portrait__grid { row-gap: var(--s-5); padding-block: var(--s-6) var(--band-tight); align-items: end; }
.hero--portrait__fig { grid-column: 1 / span 4; grid-row: 1; margin: 0 0 0 var(--bleed-left); }
.hero--portrait__fig .hero__media { aspect-ratio: 4 / 5; max-height: var(--portrait-max-h); }
.hero--portrait__fig .cap { padding-left: var(--gutter); }
.hero--portrait__text { grid-column: 6 / -1; grid-row: 1; padding-bottom: var(--s-8); }
@media (max-width: 63.99em) {
  .hero--portrait__fig, .hero--portrait__text { grid-column: 1 / -1; }
  .hero--portrait__text { grid-row: 2; }
  .hero--portrait__fig { margin-inline: calc(-1 * var(--gutter)); }
  .hero--portrait__fig .hero__media { aspect-ratio: auto; height: var(--hero-media-phone); max-height: none; }
  .hero--portrait__fig .cap { padding-inline: var(--gutter); }
  .hero--portrait__text { padding-bottom: 0; }
}

/* ---------- When we are engaged: a printed report beside the text ---------- */
.engaged { row-gap: var(--s-8); align-items: start; }
.engaged__head p { font: var(--wt-medium) var(--fs-sub) / var(--lh-sub) var(--font-serif); color: var(--ink-2); max-width: var(--measure-narrow); }
.report { grid-column: 1 / span 6; }
.engaged__text { grid-column: 8 / -1; }
.engaged__head { margin-bottom: var(--s-7); }
.rows--stacked .rows__item { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); }
@media (max-width: 63.99em) { .report, .engaged__text { grid-column: 1 / -1; } }

/* ---------- Phases (night) ---------- */
.phase__name {
  font: var(--wt-light) var(--fs-display-3) / var(--lh-display) var(--font-display);
  font-stretch: var(--wd-display); letter-spacing: var(--tr-display);
  margin-block: 0 var(--s-5);
}
.phase--live .phase__name { color: var(--night-accent); }
.phase > p { margin-bottom: var(--s-5); }
.phase__list li { padding-block: var(--s-2); border-top: var(--hair) solid var(--rule); font-size: var(--fs-small); line-height: var(--lh-small); }
@media (max-width: 63.99em) and (min-width: 48em) { .phases__seq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Without motion the names are simply heavy */
.phase__name { font-weight: var(--wt-display); }
@media (prefers-reduced-motion: no-preference) {
  .js .phase__name { font-weight: var(--wt-light); transition: font-weight var(--t-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 4 * var(--stagger)); }
  .js .phase__name.is-in { font-weight: var(--wt-display); }
  /* Scrubbed by scroll on wide screens only: re-shaping a variable font per frame is too costly on a phone */
  @media (min-width: 64em) {
    @supports (animation-timeline: view()) {
      .js .phase__name, .js .phase__name.is-in {
        transition: none;
        animation: gain-weight linear both;
        animation-timeline: view();
        animation-range: entry calc(var(--i, 0) * 20%) cover calc(25% + var(--i, 0) * 5%);
      }
      @keyframes gain-weight { from { font-weight: var(--wt-light); } to { font-weight: var(--wt-display); } }
    }
  }
}

/* ---------- Packing photograph ---------- */
.packing { padding-block: 0; }   /* the photograph sits directly under the night band of phases */
/* The photograph runs from window edge to window edge, a tall band between the phases and the engagement models */
.packing__fig { margin-inline: var(--bleed-left) var(--bleed-right); }
.packing__fig .fig__media { height: clamp(20rem, 64svh, 44rem); }
.packing__fig .cap { padding-inline: var(--gutter); max-width: var(--max); margin-inline: auto; }
@media (max-width: 47.99em) { .packing__fig .fig__media { height: auto; aspect-ratio: 4 / 5; } }
/* Scrolling through it: the photograph sits a little taller than its frame and drifts slowly as the
   band passes, so the reader moves through the image (scrubbed by the scroll where supported) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .packing__fig[data-scroll] .fig__media, .js .packing__fig[data-scroll].is-in .fig__media { clip-path: none; transition: none; }
    /* the frame clips, so it would become the image's own scroller: the timeline is named on the figure instead */
    .js .packing__fig[data-scroll] { view-timeline-name: --packing; }
    .js .packing__fig[data-scroll] .fig__media picture { position: absolute; inset: 0 0 auto 0; height: 128%; }
    .js .packing__fig[data-scroll] .fig__media img, .js .packing__fig[data-scroll].is-in .fig__media img {
      transition: none; transform: none;
      animation: drift-through linear both; animation-timeline: --packing; animation-range: cover 0% cover 100%;
    }
    @keyframes drift-through { from { translate: 0 -21.875%; } to { translate: 0 0; } }
  }
}

/* ---------- Engagement models ---------- */
.matrix__table th:first-child { width: 22%; }
.matrix__table tbody th { font-size: var(--fs-h3); padding-right: var(--s-5); }
.matrix__table td { font-size: var(--fs-body); line-height: var(--lh-body); }
.matrix__aside { text-transform: none; letter-spacing: 0; }
.matrix__note { margin-top: var(--s-5); font-size: var(--fs-small); }
@media (max-width: 47.99em) {
  .matrix__head { position: absolute; width: var(--hair); height: var(--hair); overflow: hidden; clip-path: inset(50%); }
  .matrix__table tr, .matrix__table th, .matrix__table td, .matrix__table th:first-child { display: block; width: auto; }
  .matrix__table tbody tr { border-top: var(--hair) solid var(--ink); padding-block: var(--s-4); }
  .matrix__table tbody th, .matrix__table td { border: 0; padding: var(--s-2) 0; }
  .matrix__table td::before { content: attr(data-label); display: block; margin-bottom: var(--s-1); font: var(--wt-medium) var(--fs-micro) / var(--lh-micro) var(--font-sans); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--ink-3); }
}