/* Giant Entity: the home below its hero (look-v3 section 12, Home; Part B). An index of the three
   kinds of work, a strip of the sectors, a statement, the promises as a list, a mosaic of the work,
   a trio of the people, and the ultramarine band. The drawings arrive after the page (see
   fragments in src/templates/drawings.mjs); their slots keep their size, so nothing shifts. */

.home-sec { padding-top: var(--sp-section); }
.home-sec__title { max-width: 18ch; text-wrap: balance; margin-bottom: var(--sp-l); }
.home-sec__intro { font-size: var(--fs-lead); line-height: 1.32; letter-spacing: -0.008em; max-width: 52ch; margin-bottom: var(--sp-l); }
.home-sec > p:last-child { margin-top: var(--sp-l); }

/* ---------- Where we come in: the index ---------- */

.hindex { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.hindex__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-m);
  align-items: center;
  padding-block: var(--sp-l);
  border-bottom: 1px solid var(--line);
}
.hindex__row > * { grid-column: 1 / -1; min-width: 0; }
.hindex__text { display: grid; gap: var(--sp-s); align-content: start; }
.hindex__name,
.htrio__name { font-size: var(--fs-heading); font-stretch: 125%; font-weight: var(--heading-weight); line-height: 1; letter-spacing: var(--track-heading); }
.hindex__name a { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: max(2px, 0.04em); text-underline-offset: 0.12em; transition: text-decoration-color var(--dur-link) var(--ease-out); }
.hindex__name a:hover { text-decoration-color: currentColor; }
.hindex__situation { font-size: var(--fs-lead); line-height: 1.32; letter-spacing: -0.008em; max-width: 46ch; }
.hindex__subs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--sp-m); }
.hindex__subs a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 500; }
.hindex__lead { font-size: var(--fs-small); color: var(--fg-muted); }
/* The pillar body sits from column 8 and grows with the screen, so the row has no hole between
   the text and the drawing (look-v3 section 12: the pillar body in columns 8 to 12). */
@media (min-width: 1100px) {
  .hindex__text { grid-column: 1 / span 7; }
  .hindex__art { grid-column: 8 / -1; }
  .hindex__art .dslot--pillar { height: clamp(14rem, 2rem + 17vw, 40rem); justify-content: flex-start; }
}

/* ---------- Who we work with: a strip at five, four and three columns ---------- */

.hstrip { list-style: none; padding: 0; display: grid; gap: var(--sp-l) var(--gutter); }
.hstrip__item { display: grid; gap: var(--sp-xs); align-content: start; padding-top: var(--sp-s); border-top: 1px solid var(--line); }
.hstrip__art { margin-bottom: var(--sp-xs); }
.hstrip__name { font-size: var(--fs-lead); font-weight: 500; line-height: 1.25; }
.hstrip__item p { color: var(--fg-muted); max-width: 44ch; }
@media (min-width: 1100px) { .hstrip { grid-template-columns: 5fr 4fr 3fr; } }
@media (min-width: 720px) and (max-width: 1099px) { .hstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- The person who starts it finishes it: a statement beside one piece, drawn twice ---------- */

.hstatement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--sp-l); align-items: center; }
.hstatement > * { grid-column: 1 / -1; min-width: 0; }
.hstatement__text { display: grid; gap: var(--sp-s); font-size: var(--fs-lead); line-height: 1.32; letter-spacing: -0.008em; }
.hstatement__text p { max-width: 40ch; }
.hstatement__art { display: flex; align-items: flex-end; justify-content: center; gap: var(--sp-s); }
.hstatement__art > .dslot { flex: 1 1 0; }
.hstatement__seam { align-self: stretch; width: 1px; background: var(--line-strong); }
@media (min-width: 1100px) {
  .hstatement__text { grid-column: 1 / span 6; }
  .hstatement__art { grid-column: 8 / -1; }
}

/* ---------- How a project runs: the promises, each with its rule ---------- */

.hpromises { list-style: none; padding: 0; display: grid; }
.hpromises > li {
  position: relative;
  padding-block: var(--sp-s);
  font-size: var(--fs-heading);
  font-stretch: 125%;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: var(--track-heading);
  text-wrap: balance;
  max-width: 22ch;
}
.hpromises > li::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: calc(100vw - 2 * var(--margin));
  max-width: calc(var(--wrap-max) - 2 * var(--margin));
  height: 1px;
  background: var(--line);
  transform-origin: left center;
  transition: transform 320ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.hpromises > li:nth-child(2) { --i: 1; }
.hpromises > li:nth-child(3) { --i: 2; }
.hpromises > li:nth-child(4) { --i: 3; }
.rule-armed:not(.is-in) .hpromises > li::before { transform: scaleX(0); }

/* ---------- Work by the team: a mosaic at 7 and 5, then 12 ---------- */

.hwork { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-l) var(--gutter); align-items: start; }
.hwork > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1100px) {
  .hwork__site { grid-column: 1 / span 7; }
  .hwork__compare { grid-column: 8 / -1; }
}
.hwork__scene .plate__frame { aspect-ratio: 21 / 9; }
.hwork__compare .compare__stage { aspect-ratio: 16 / 10; }
.compare__edge { --edge-w: 1.5rem; }
.compare__step { width: 100%; height: 100%; overflow: visible; }
.compare__step path { fill: var(--rose); stroke: var(--rose-dark); stroke-width: 1px; vector-effect: non-scaling-stroke; transition: fill var(--dur-hover) var(--ease-out); }
.compare__edge:hover .compare__step path { fill: var(--rose-deep); }
.compare__note { color: var(--fg-muted); }
.hwork .plate__caption { grid-template-columns: none; }
@container (min-width: 64rem) {
  .hwork__scene .plate__caption { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- The people you will work with: a trio, asymmetric ---------- */

.htrio { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-l) var(--gutter); }
.htrio__person { grid-column: 1 / -1; display: grid; gap: var(--sp-2xs); align-content: start; min-width: 0; }
.htrio__face { width: 100%; max-width: 26rem; margin-bottom: var(--sp-xs); }
.htrio__name { padding-bottom: 0.2em; overflow-wrap: break-word; }
.htrio__title { font-size: var(--fs-lead); line-height: 1.32; color: var(--fg-muted); }
.htrio__line { max-width: 40ch; margin-top: var(--sp-2xs); }
.htrio__art { margin-top: var(--sp-xs); }
@media (min-width: 720px) {
  .htrio__person { grid-column: span 6; }
}
@media (min-width: 1100px) {
  .htrio__person--rron { grid-column: 1 / span 3; }
  .htrio__person--norik { grid-column: 5 / span 3; margin-top: var(--sp-xl); }
  .htrio__person--dorotea { grid-column: 9 / span 3; }
}

/* ---------- Start with what you have: the ultramarine band ---------- */

.hband { margin-top: var(--sp-section); padding-block: var(--sp-xl); }
.hband__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--sp-m); align-items: end; }
.hband__inner > * { grid-column: 1 / -1; min-width: 0; }
.hband__title { max-width: 14ch; text-wrap: balance; }
.hband__body { display: grid; gap: var(--sp-s); font-size: var(--fs-lead); line-height: 1.32; }
.hband__body p { max-width: 44ch; }
.hband__body .actions { margin-top: var(--sp-xs); }
.hband__body a:not(.button) { color: inherit; }
@media (min-width: 1100px) {
  .hband__title { grid-column: 1 / span 7; }
  .hband__body { grid-column: 8 / -1; }
}

/* the arrow after a heading link, drawn by a mask so the page does not repeat the icon's markup */
.arrow-end { white-space: nowrap; }
.hindex__name .arrow-end::after,
.hstrip__name .arrow-end::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.2em;
  vertical-align: 0.05em;
  background: currentColor;
  mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Cpath d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"/%3E%3C/svg%3E') center / contain no-repeat;
  transition: transform var(--dur-hover) var(--ease-out);
}
.hstrip__name .arrow-end::after { width: 0.9em; height: 0.9em; vertical-align: -0.1em; }
.hindex__name a:hover .arrow-end::after { transform: translateX(0.12em); }
.hstrip__name a:hover .arrow-end::after { transform: translateX(4px); }