/* Giant Entity: /studio (look-v3 section 12, Part C). A split head: the opening beside the one
   body. Then the three people as an asymmetric trio in the one portrait treatment: Rron at columns
   1 to 3, Norik at 5 to 7 one row lower, Dorotea at 9 to 11. A person's name lights their pieces in
   the body (studio.mjs); the body is the same drawing every page carries, so the parts are named. */

.doc--split .doc__intro { padding-bottom: var(--sp-l); }
.studio-body { margin: 0; }
.studio-body .dw { display: block; width: 100%; height: auto; max-height: 70vh; }
@media (min-width: 1100px) {
  .doc--split .doc__intro { grid-column: 1 / span 6; grid-row: 2; }
  .doc--split .doc__art { grid-column: 8 / -1; grid-row: 2; align-self: start; }
}
@media (max-width: 1099px) {
  .doc--split .doc__art { padding-bottom: var(--sp-l); }
}

/* ---------- The trio ---------- */

.studio-people { padding-block: var(--sp-l) var(--sp-xl); }
.studio-people__intro { margin-top: var(--sp-m); font-size: var(--fs-lead); line-height: 1.32; max-width: 44ch; }
.trio { list-style: none; padding: 0; margin-top: var(--sp-l); display: grid; gap: var(--sp-xl) var(--gutter); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.member { grid-column: 1 / -1; min-width: 0; display: grid; gap: var(--sp-xs); align-content: start; }
.member__face { display: block; width: 100%; max-width: 40rem; }
.member__name {
  margin-top: var(--sp-xs);
  font-size: var(--fs-heading);
  font-stretch: 125%;
  font-weight: var(--heading-weight);
  line-height: 1;
  letter-spacing: var(--track-heading);
  text-wrap: balance;
}
.member__title { color: var(--fg-muted); }
.member__title a { color: var(--fg); }
.member__body { height: clamp(5rem, 3.5rem + 3vw, 11rem); display: flex; align-items: flex-end; }
.member__body .dw { height: 100%; width: auto; max-width: 100%; margin: 0; }
.member__bio { margin-top: var(--sp-xs); }
.member__bio > * + * { margin-top: 1em; }
.member__bio ul { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.member__bio li { padding-block: 0.6em; border-bottom: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.45; }
.member__bio li strong { font-weight: 500; }

/* the name as studio.mjs makes it: a button that keeps the heading's type */
.member__light {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
  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);
}
.member__light:hover,
.member__light[aria-pressed="true"] { text-decoration-color: currentColor; }
.member__light:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

@media (min-width: 720px) and (max-width: 1099px) {
  .member { grid-column: span 6; }
  .member--dorotea { grid-column: 4 / span 6; }
}
@media (min-width: 1100px) {
  .member--rron { grid-column: 1 / span 3; }
  .member--norik { grid-column: 5 / span 3; margin-top: var(--sp-xl); }
  .member--dorotea { grid-column: 9 / span 3; }
}