/* About. Hero: a gallery wall, the photograph hung low and to the right
   with open space around it. Authored moment: the heritage statement inks
   in word by word as it moves up the screen. */

/* ---------- Hero ---------- */
.hero--gallery__grid { row-gap: var(--s-6); padding-block: var(--s-7) var(--band-tight); }
.hero--gallery__title { grid-column: 1 / -1; color: var(--ink); }
.hero--gallery__text { grid-column: 1 / span 6; align-self: start; padding-top: var(--s-4); }
/* The photograph hangs right and runs off the window edge */
.hero--gallery__fig { grid-column: 8 / -1; margin: var(--s-7) var(--bleed-right) 0 0; }
.hero--gallery__fig .hero__media { aspect-ratio: 4 / 5; max-height: var(--portrait-max-h); }
.hero--gallery__fig .cap { padding-right: var(--gutter); }
@media (max-width: 63.99em) {
  .hero--gallery__text { grid-column: 1 / -1; }
  .hero--gallery__fig { grid-column: 4 / -1; margin-top: 0; }
}
@media (max-width: 47.99em) {
  .hero--gallery__grid { padding-top: 0; row-gap: var(--s-4); }
  .hero--gallery__title { grid-row: 3; }
  .hero--gallery__text { grid-row: 4; padding-top: 0; }
  .hero--gallery__fig { grid-column: 1 / -1; grid-row: 2; margin-inline: calc(-1 * var(--gutter)); }
  .hero--gallery__fig .hero__media { aspect-ratio: auto; height: var(--hero-media-phone); max-height: none; }
  .hero--gallery__fig .cap { padding-inline: var(--gutter); }
}

/* ---------- Operating rules (night): four lines set as statements ---------- */
.rules__table { width: 100%; border-collapse: collapse; border-top: var(--hair) solid var(--night-ink); }
.rules__table th, .rules__table td { text-align: left; vertical-align: baseline; padding-block: var(--s-5); border-bottom: var(--hair) solid var(--rule); }
.rules__table th { width: 34%; padding-right: var(--col-gap); font: var(--wt-display) var(--fs-title) / var(--lh-h2) var(--font-display); font-stretch: var(--wd-display); letter-spacing: var(--tr-h2); color: var(--ink); }
.rules__table td { font: italic var(--wt-medium) var(--fs-lead) / var(--lh-lead) var(--font-serif); color: var(--ink); }
@media (max-width: 47.99em) {
  .rules__table tr, .rules__table th, .rules__table td { display: block; width: auto; }
  .rules__table tr { padding-block: var(--s-4); border-bottom: var(--hair) solid var(--rule); }
  .rules__table th, .rules__table td { border: 0; padding: var(--s-1) 0; }
}

/* ---------- Heritage ---------- */
.heritage { row-gap: var(--s-8); align-items: start; }
.heritage__statement { grid-column: 1 / span 7; display: grid; gap: var(--s-6); }
.heritage__title { font: var(--wt-display) var(--fs-display-2) / var(--lh-display) var(--font-display); font-stretch: var(--wd-display); letter-spacing: var(--tr-display); }
.heritage__statement .t-lead { color: var(--ink-2); }
.heritage__rows { grid-column: 9 / -1; }
.heritage__rows .rows__item { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); }
@media (max-width: 63.99em) { .heritage__statement, .heritage__rows { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: no-preference) {
  .js .heritage__title.is-split .ink-word { opacity: var(--o-arrive); transition: opacity var(--t-base) var(--ease-out); transition-delay: calc(var(--i) * var(--stagger)); }
  .js .heritage__title.is-split.is-in .ink-word { opacity: 1; }
  @supports (animation-timeline: view()) {
    .js .heritage__title.is-split { view-timeline-name: --ink; }
    .js .heritage__title.is-split .ink-word, .js .heritage__title.is-split.is-in .ink-word {
      transition: none; animation: ink-in linear both; animation-timeline: --ink;
      animation-range: entry calc(var(--i) * 8%) cover calc(18% + var(--i) * 2%);
    }
    @keyframes ink-in { from { opacity: var(--o-arrive); } to { opacity: 1; } }
  }
}

/* ---------- Cases ---------- */
/* The modules sit in the summary line; the open body holds the outcomes beside context, approach and deliverables */
.cases .case__mods { margin-top: var(--s-2); font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-3); }
.case { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--col-gap); row-gap: var(--s-6); padding-top: var(--s-3); }
.cases .disclosure__body { max-width: none; }
.case__label { margin-bottom: var(--s-3); }
.case__signals { display: grid; gap: var(--s-4); }
.case__signals li { display: grid; gap: var(--s-1); padding-top: var(--s-3); border-top: var(--hair) solid var(--rule); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
/* Only the quantified signal is set as a numeral; the qualitative ones are terms */
.case__signals li:first-child b { font: italic var(--wt-medium) var(--fs-num) / 1 var(--font-serif); color: var(--ink); }
.case__signals li + li b { font: var(--wt-strong) var(--fs-h4) / var(--lh-h3) var(--font-sans); color: var(--ink); }
.case__body { display: grid; gap: var(--s-3); align-content: start; }
.case__body h3 { font: var(--wt-strong) var(--fs-h4) / var(--lh-h3) var(--font-sans); margin-top: var(--s-3); }
.case__body h3:first-child { margin-top: 0; }
.case__body ul { padding-left: var(--s-5); }
@media (max-width: 47.99em) { .case { grid-template-columns: minmax(0, 1fr); } }