/* KF Crafts — About us (#about). Round 6 (27.09, ABOUT-BRIEF.md): ink and champagne, Jost; hairlines are the only
   decoration. Band → opener and a ledger of four checkable facts → Ivan, an editorial spread (always first) →
   Hristiyan, one compact row → the crew → no compromises → the specification, closed → real work → one call.
   Portraits: a monogrammed card (the seal's double ring and the initials) until assets/team/*.webp exist; main.js drops
   the photograph into the same frame, under the same hairline. Motion (main.js, the motion layer): .ab-rise rises
   once, the frames open from a clip, Ivan's line rises line by line; nothing moves under reduced motion. */

.about { --ab-gap: clamp(3.75rem, 7vw, 6rem); }
.about > .band--tall { height: clamp(260px, 50svh, 460px); }

/* A block's hairline draws itself from the left as the block rises (static when nothing moves). */
.ab-rule { position: relative; padding-top: 1.25rem; }
.ab-rule::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
  transition: transform 1.1s var(--ease-out) var(--rise-delay, 0s);
}
.ab-rule.rise-wait::before { transform: scaleX(0); }

/* ---------- 1 · Opener + ledger ---------- */
.ab-open { display: grid; gap: 1.1rem var(--col-gap); }
.ab-open__lead {
  max-width: 34rem;
  color: var(--text);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.55;
}

.ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--col-gap);
  margin-top: clamp(2.25rem, 4.5vw, 3.75rem);
}
.ledger__cell { position: relative; border-top: 1px solid var(--line); }
.ledger__cell::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease-out);
}
.ledger__in { display: grid; gap: 0.55rem; align-content: start; height: 100%; padding: 1rem 0 1.4rem; }
.ledger__num {
  color: var(--text-strong);
  font-size: clamp(2rem, 1.45rem + 2.1vw, 3.25rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
  transition: color 0.4s var(--ease-out);
}
.ledger__label {
  color: var(--text-dim);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ledger .nw { white-space: nowrap; }
.ledger__go {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-left: 0.45rem;
  vertical-align: 0.05em;
  fill: none;
  stroke: var(--champagne);
  stroke-width: 1.2;
  transition: transform 0.5s var(--ease-out);
}
a.ledger__in:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
@media (hover: hover) {
  .ledger__cell:has(a:hover)::after { transform: scaleX(1); }
  a.ledger__in:hover .ledger__num { color: var(--champagne); }
  a.ledger__in:hover .ledger__go { transform: translate(2px, -2px); }
}

/* ---------- The people ---------- */
.people { margin-top: var(--ab-gap); }
.people__kicker { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.person__name { color: var(--text-strong); font-weight: 200; line-height: 1.05; letter-spacing: -0.012em; }
.person__role {
  margin-top: 0.6rem;
  color: var(--champagne);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

/* The portrait card: 4:5, square corners, a champagne hairline inset 10 px (it stays over the photograph). */
.about .portrait--card {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 0;
  background:
    radial-gradient(80% 55% at 50% 42%, rgba(227, 206, 146, 0.075), rgba(227, 206, 146, 0) 72%),
    linear-gradient(180deg, #151412, #0d0c0b);
}
.about .portrait--card::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 2;
  border: 1px solid rgba(216, 199, 156, 0.34);
  pointer-events: none;
}
/* The monogram: the seal's double ring in hairlines, the initials inside it (no photograph needed to look finished). */
.about .portrait--card::after {
  inset: auto;
  top: var(--ring-y, 50%);
  left: 50%;
  width: 58%;
  border: 1px solid rgba(216, 199, 156, 0.3);
  border-radius: 50%;
  outline: 1px solid rgba(216, 199, 156, 0.13);
  outline-offset: var(--ring-gap, 7px);
  background: radial-gradient(closest-side, rgba(227, 206, 146, 0.06), rgba(227, 206, 146, 0));
  opacity: 1;
  transform: translate(-50%, -50%);
}
.about .portrait--card .portrait__initials {
  position: absolute;
  top: var(--ring-y, 50%);
  left: 50%;
  color: var(--champagne);
  font-family: var(--sans);
  font-size: 3.5rem;
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.about .portrait--card img { object-position: 50% 30%; }

/* ---------- 2 · Ivan ---------- */
.founder { display: grid; grid-template-columns: minmax(0, 1fr); }
.founder__portrait { grid-area: 1 / 1; width: 100%; max-height: 64svh; --ring-y: 43%; }
/* Phone: his name sits inside the bottom of the card, like a cover (legible over a photograph too). */
.founder__id {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 1; /* over the photograph, under the card's hairline (z-index 2) */
  padding: 5rem calc(11px + 1.15rem) calc(11px + 1.2rem);
  background: linear-gradient(to top, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.45) 55%, rgba(10, 10, 10, 0));
}
.founder__name { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.875rem); }
.founder__bio { max-width: 31rem; margin-top: 1.5rem; color: var(--text); font-size: 1.0625rem; font-weight: 300; line-height: 1.65; }

/* No photograph yet: a compact monogram card beside his name, in the manner of Hristiyan's row but a size up, so his
   line (not an empty frame) is what the eye lands on. The full 4:5 spread above waits for .has-photo (main.js adds it
   when assets/team/ivan.webp is listed in PORTRAITS_IN): nothing to edit when the photograph arrives. */
.founder__portrait:not(.has-photo) { width: 8.5rem; max-height: none; justify-self: start; --ring-y: 50%; --ring-gap: 4px; }
.founder__portrait:not(.has-photo)::before { inset: 8px; }
.founder__portrait:not(.has-photo) .portrait__initials { font-size: 1.875rem; }
.founder__portrait:not(.has-photo) + .founder__id { padding: 0 0 0.3rem calc(8.5rem + 1.25rem); background: none; }
.founder__line { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.founder__words {
  margin: 0;
  color: var(--ivory);
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -0.018em;
}
/* Two lines, broken where he pauses; each rises out of its own slot, 80 ms apart. */
.founder__words .ln {
  display: block;
  overflow: hidden;
  padding: 0.04em 0 0.1em;
  margin: -0.04em 0 -0.1em;
}
.founder__words .ln > span {
  display: inline-block;
  transition: transform 1.25s var(--ease-expo) calc(var(--rise-delay, 0s) + var(--ln, 0) * 80ms);
}
.founder__words .ln + .ln { --ln: 1; }
.founder__words.rise-wait { opacity: 1; transform: none; }
.founder__words.rise-wait .ln > span { transform: translate(0, 112%); }
.founder__sign {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.25rem;
  color: var(--champagne);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.founder__sign::before { content: ""; flex: none; width: 2rem; height: 1px; background: currentColor; opacity: 0.7; }

/* A client's own words, under the person they are about. Verbatim. */
.said { max-width: 34rem; margin: clamp(2rem, 3.5vw, 2.5rem) 0 0; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.said__q { margin: 0; }
.said__q p { color: var(--text-strong); font-size: 1.0625rem; font-weight: 300; line-height: 1.55; }
.said__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.4rem;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.said__src {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-dim);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
  transition: color 0.3s;
}

/* Contacts: 48 px chips on a phone (the number and the address stay selectable); a quiet ruled row on desktop. */
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1.5rem; }
.chips__wide { grid-column: 1 / -1; }
.chip {
  display: grid;
  align-content: center;
  gap: 0.2rem;
  min-height: 3.5rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line);
  color: var(--text-strong);
  transition: border-color 0.4s var(--ease-out), color 0.3s;
}
.chip__k { color: var(--muted); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.chip__v { font-size: 0.9375rem; line-height: 1.25; overflow-wrap: anywhere; }
.chip:focus-visible,
.said__src:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
@media (hover: hover) {
  .chip:hover { border-color: var(--champagne); }
  .chip:hover .chip__v,
  .said__src:hover { color: var(--champagne); }
}

/* ---------- 3 · Hristiyan: one compact row ---------- */
.partner {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  column-gap: 1.25rem;
  margin-top: clamp(3.5rem, 6vw, 5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.partner__portrait { grid-column: 1; grid-row: 1; width: 6rem; }
.partner .portrait--card { --ring-gap: 3px; }
.partner .portrait--card::before { inset: 6px; }
.partner .portrait--card .portrait__initials { font-size: 1.5rem; }
.partner__id { grid-column: 2; grid-row: 1; align-self: end; padding-bottom: 0.2rem; }
.partner__name { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); }
.partner__body,
.partner__said,
.partner__chips { grid-column: 1 / -1; }
.partner__body { margin-top: 1.25rem; }
.partner__line { max-width: 30rem; color: var(--text-strong); font-size: 1.0625rem; font-weight: 300; line-height: 1.55; }
.path {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.3rem;
  margin-top: 0.85rem;
  color: var(--text-dim);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
}
.path li { white-space: nowrap; }
.path li:not(:last-child)::after { content: "·"; margin: 0 0.55rem; color: var(--champagne); }

/* ---------- 4 · The crew ---------- */
.crew { display: grid; gap: 1.75rem; margin-top: clamp(3.5rem, 6vw, 5rem); }
.crew__figure { order: -1; margin: 0; }
.crew__slot { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink-2); }
.crew__slot::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 3;
  border: 1px solid rgba(216, 199, 156, 0.34);
  pointer-events: none;
}
.crew__dip { position: absolute; inset: 0; display: grid; gap: 6px; }
.crew__dip img { width: 100%; height: 100%; object-fit: cover; }
.crew__a { display: none; }
.crew__slot > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.crew__slot.has-photo .crew__dip { display: none; }
.crew__slot .cgi { z-index: 2; right: 1.1rem; bottom: 1rem; } /* over the photographs, under the hairline (z 3) */
.crew .crew__name {
  color: var(--text-strong);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.crew__title { margin-top: 0.75rem; color: var(--text-strong); font-size: var(--fs-h3); font-weight: 200; line-height: 1.12; letter-spacing: -0.015em; }
.crew__body { max-width: 32rem; margin-top: 1rem; color: var(--text); line-height: 1.65; }
.crew__sign {
  max-width: 26rem;
  margin-top: 1.5rem;
  color: var(--champagne);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  font-weight: 200;
  line-height: 1.3;
}

/* ---------- 5 · No compromises ---------- */
.pillars { margin-top: var(--ab-gap); }
.pillars__head { display: grid; gap: 1rem; }
.pillars__title {
  max-width: 44rem;
  color: var(--text-strong);
  font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3.25rem);
  font-weight: 200;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.pillars__list { display: grid; margin-top: clamp(1.75rem, 3.5vw, 3rem); }
.pillar {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-content: start;
  padding: 1rem 0 1.2rem;
  border-top: 1px solid var(--rule);
}
.pillar__num { color: var(--cedar); font-size: 0.75rem; font-weight: 500; line-height: 1.9; letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.pillar__name { color: var(--text-strong); font-size: 1.25rem; font-weight: 300; line-height: 1.3; }
.pillar p { grid-column: 2; max-width: 24rem; margin-top: 0.35rem; color: var(--text); line-height: 1.6; }
.pillar__long { display: none; }

/* ---------- 6 · What goes into a KF building: one closed line ---------- */
.spec { display: grid; justify-items: start; gap: 0.25rem var(--col-gap); margin-top: var(--ab-gap); padding-top: 0.5rem; }
.spec__box { width: 100%; }
.spec__sum {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.25rem 1rem;
  min-height: 4rem;
  cursor: pointer;
  list-style: none;
}
.spec__sum::-webkit-details-marker { display: none; }
.spec__sum:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
.spec__title { color: var(--text-strong); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); font-weight: 300; line-height: 1.2; }
.spec__peek { display: none; }
.spec__count { color: var(--muted); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; }
.spec__icon { position: relative; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 50%; transition: border-color 0.4s var(--ease-out); }
.spec__icon::before,
.spec__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 1px;
  margin: -0.5px 0 0 -0.375rem;
  background: var(--champagne);
  transition: transform 0.5s var(--ease-out);
}
.spec__icon::after { transform: rotate(90deg); }
.spec__box[open] .spec__icon::after { transform: rotate(0deg); }
@media (hover: hover) {
  .spec__sum:hover .spec__icon { border-color: var(--champagne); }
}
.spec__dl { margin: 0.5rem 0 1rem; }
.spec__dl div { display: grid; gap: 0.25rem; padding: 0.8rem 0; border-top: 1px solid var(--rule); }
.spec__dl dt { color: var(--champagne); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.spec__dl dd { color: var(--text); line-height: 1.55; }

/* ---------- 7 · Real work: phone, a sideways strip; desktop, one wide and two tall at one height ---------- */
.real { margin-top: var(--ab-gap); }
.real__kicker { margin-bottom: 1.25rem; }
.about__photos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82vw, 20rem);
  gap: 0.75rem;
  margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left))) calc(-1 * max(var(--gutter), env(safe-area-inset-right)));
  scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
/* (the list reset, ul[role="list"], outranks a bare class: the strip's own gutter is set with it) */
.about__photos[role="list"] { padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.about__photos::-webkit-scrollbar { display: none; }
.about__shot { min-width: 0; scroll-snap-align: start; }
.about__open { position: relative; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.about__open:focus-visible { outline-offset: 4px; }
.about__frame { position: relative; display: block; overflow: hidden; background: var(--ink-2); }
.about__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.about__shot .about__frame { aspect-ratio: 4 / 5; }

/* "Built by KF Crafts" on a photograph is the honesty mark, so it must read on any corner (a pale cushion, light
   cedar): the corner darkens softly under it, as the band's tag sits on the band's own shade. The shade is an
   ellipse sized to its own box, so it reaches nothing before the box's edges: no hard line shows above the tag. */
.about__frame .cgi,
.crew__slot .cgi {
  color: rgba(244, 241, 234, 0.9);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.7), 0 1px 10px rgba(0, 0, 0, 0.55);
}
.about__frame .cgi::before,
.crew__slot .cgi::before {
  content: "";
  position: absolute;
  inset: -4.5rem -2rem -1.5rem -8rem;
  z-index: -1;
  background: radial-gradient(100% 100% at 100% 100%, rgba(10, 10, 10, 0.7), rgba(10, 10, 10, 0.62) 35%, rgba(10, 10, 10, 0.38) 65%, rgba(10, 10, 10, 0.12) 85%, rgba(10, 10, 10, 0));
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .about__open:hover .about__frame img { transform: scale(1.03); }
}

/* ---------- 8 · One call ---------- */
.ab-close { display: grid; gap: 1.5rem var(--col-gap); margin-top: var(--ab-gap); padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.ab-close__title { color: var(--text-strong); font-size: var(--fs-h3); font-weight: 200; line-height: 1.12; letter-spacing: -0.015em; }
.ab-close__actions { display: grid; gap: 0.75rem; }
.ab-close__actions .btn { width: 100%; }
.ab-close__actions .link { justify-self: start; }
.btn--quiet { border-color: var(--line-strong); color: var(--text-strong); }
.ab-close__record { color: var(--muted); font-size: 0.8125rem; line-height: 1.7; }
.ab-close__record > span { white-space: nowrap; }
.ab-close__record > span:last-child { white-space: normal; }
.ab-close__record > span:not(:last-child)::after { content: "·"; margin: 0 0.5rem; color: var(--line-strong); }
.ab-close__record a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-dim);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

/* ---------- Desktop: a 12-column spread ---------- */
@media (min-width: 900px) {
  .about > .band--tall { height: clamp(340px, 58svh, 620px); }

  .ab-open { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .ab-open__eyebrow { grid-column: 1 / -1; }
  .ab-open__title { grid-column: 1 / 8; }
  .ab-open__lead { grid-column: 8 / 13; padding-bottom: 0.5rem; }
  .ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .founder { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--col-gap); }
  .founder__portrait { grid-column: 1 / 6; grid-row: 1 / span 3; align-self: start; max-height: none; max-width: 33rem; --ring-y: 50%; }
  .founder__id { grid-column: 7 / 13; grid-row: 1; align-self: start; margin: 0; padding: 0.25rem 0 0; background: none; }
  .founder__bio { grid-column: 7 / 13; grid-row: 2; margin-top: 1.4rem; }
  .founder__body { grid-column: 7 / 13; grid-row: 3; }
  /* No photograph yet: the card, his name and his bio make a narrow byline on the left; his line opens the right
     column at display size, level with the card, and is the anchor of the spread. */
  .founder__portrait:not(.has-photo) { grid-row: 1; width: 11rem; max-width: none; --ring-gap: 6px; }
  .founder__portrait:not(.has-photo)::before { inset: 10px; }
  .founder__portrait:not(.has-photo) .portrait__initials { font-size: 2.375rem; }
  .founder__portrait:not(.has-photo) + .founder__id { grid-column: 1 / 6; grid-row: 2; padding: 1.75rem 0 0; }
  .founder__portrait:not(.has-photo) ~ .founder__bio { grid-column: 1 / 6; grid-row: 3; align-self: start; margin-top: 1.1rem; max-width: 26rem; }
  .founder__portrait:not(.has-photo) ~ .founder__body { grid-row: 1 / span 3; }
  .founder__portrait:not(.has-photo) ~ .founder__body .founder__line { margin-top: -0.35rem; }
  .founder__portrait:not(.has-photo) ~ .founder__body .founder__words { font-size: clamp(2.5rem, 1.3rem + 3.1vw, 4.375rem); }
  .founder__words .ln:first-child { margin-left: -0.4em; } /* the opening quote hangs in the margin */
  .founder .chips,
  .partner .chips { display: flex; flex-wrap: wrap; gap: 0; margin-top: 1.25rem; }
  .founder .chip,
  .partner .chip { min-height: 3.25rem; padding: 0.35rem 1.25rem; border: 0; border-left: 1px solid var(--rule); }
  .chips li:first-child .chip { padding-left: 0; border-left: 0; }

  /* Hristiyan: the card and his name on the left; his line, contacts and a client's words on Ivan's axis (col 7). */
  .partner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    column-gap: var(--col-gap);
    align-items: start;
  }
  .partner__portrait { grid-column: 1 / 3; grid-row: 1 / span 3; width: 7.5rem; }
  .partner__id { grid-column: 1 / 7; grid-row: 1; align-self: start; padding: 0.25rem 0 0 calc(7.5rem + 1.75rem); }
  .partner__body { grid-column: 7 / 13; grid-row: 1; margin: 0; }
  .partner__chips { grid-column: 7 / 13; grid-row: 2; }
  .partner__said { grid-column: 7 / 13; grid-row: 3; margin-top: 1.5rem; }

  .crew { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
  .crew__text { grid-column: 1 / 6; grid-row: 1; }
  .crew__figure { order: 0; grid-column: 7 / 13; grid-row: 1; }
  .crew__slot { aspect-ratio: 3 / 2; }
  .crew__dip { grid-template-columns: 1fr 1fr; }
  .crew__a { display: block; object-position: 50% 45%; }

  .pillars__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .pillar { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding-top: 1.1rem; }
  .pillar p { grid-column: 1; margin: 0; }
  .pillar__long { display: block; }
  .pillar__short { display: none; }

  .spec { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .spec__box { grid-column: 1 / 11; }
  .spec__link { grid-column: 11 / 13; justify-self: end; margin-top: 0.6rem; }
  .spec__sum { grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 1.75rem; }
  .spec__peek { display: block; overflow: hidden; color: var(--muted); font-size: 0.8125rem; letter-spacing: 0.04em; white-space: nowrap; text-overflow: ellipsis; }
  .spec__dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .spec__dl div { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; }

  .about__photos {
    grid-auto-flow: row;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--col-gap);
    margin-inline: 0;
    overflow: visible;
  }
  .about__photos[role="list"] { padding-inline: 0; }
  .about__shot { grid-column: span 3; }
  .about__shot--wide { grid-column: span 6; }
  .about__shot .about__frame { aspect-ratio: 3 / 4; }
  .about__shot--wide .about__frame { height: 100%; aspect-ratio: auto; }
  .about__shot--wide .about__frame img { position: absolute; inset: 0; }

  .ab-close { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .ab-close__title { grid-column: 1 / 7; }
  .ab-close__actions { grid-column: 7 / 13; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.75rem 1.5rem; }
  .ab-close__actions .btn { width: auto; }
  .ab-close__record { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid var(--rule); }
  .ab-close__record > span:last-child { white-space: nowrap; }
}

/* Narrow desktops and tablets on their side: the contacts sit two to a line, without the rules between them. */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .founder .chips,
  .partner .chips { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 2.75rem; }
  .founder .chip,
  .partner .chip { padding: 0.35rem 0; border-left: 0; }
}