/* About, round 2 (about-lab-a|b|c.html): A · Why a bretzel, B · Portraits, C · The letter */
.av-ink { position: absolute; height: auto; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.av-title { font: 400 clamp(40px, 5vw, 76px)/0.92 var(--hero); text-transform: uppercase; letter-spacing: -0.035em; margin: 10px 0 clamp(40px, 6vh, 70px); }
.aa-role { font: 600 11px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; margin-bottom: 10px; }
.av-people a { color: inherit; font: 500 13px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.av-people { padding-block: clamp(80px, 12vh, 150px); color: #f3efe7; }

/* A · the bretzel beside the question, our hand on the photo */
.opt-d .av-hero--a .wn-print { font-size: clamp(44px, min(7.4vw, 14vh), 140px); }
.aa-photo { position: relative; width: min(50vw, calc((100svh - 260px) * 1.5)); margin: 0; rotate: 1.5deg; }
.aa-photo img { display: block; width: 100%; height: auto; box-shadow: 0 2px 4px rgba(30, 24, 18, 0.2), 0 24px 50px rgba(30, 24, 18, 0.22); }
.aa-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.aa-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 56px); align-items: center;
  padding-block: clamp(26px, 4vh, 44px); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.aa-face { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.aa-name { font: 400 clamp(48px, 7vw, 120px)/0.9 var(--hero); text-transform: uppercase; letter-spacing: -0.04em; }
.aa-txt p:not(.aa-role) { font: 400 16px/1.55 var(--sans); max-width: 42ch; margin-bottom: 12px; }

/* B · three portraits under the title, a word in our hand on each */
.opt-d .av-hero--b .wn-print { font-size: clamp(36px, min(5.6vw, 9vh), 100px); }
.ab-copy { gap: clamp(28px, 5vh, 56px); }
.ab-ports { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 32px); width: min(1100px, 86vw, (100svh - 420px) * 1.9); }
.ab-port { position: relative; margin: 0; }
.ab-port img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.ab-port figcaption { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font: 600 11px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.ab-port figcaption b { font: 400 clamp(22px, 2.2vw, 34px)/1 var(--hero); letter-spacing: -0.03em; }
.ab-port .av-ink { top: auto; }
.ab-lede { font: 400 clamp(22px, 2.4vw, 36px)/1.3 var(--sans); max-width: 30ch; margin-bottom: clamp(40px, 7vh, 80px); }
.ab-bios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); }
.ab-bio p:not(.aa-role) { font: 400 16px/1.55 var(--sans); margin-bottom: 12px; }

/* C · HELLO., HOLA. taped over it; the letter on a sheet of the notebook */
/* on a phone the HOLA tape is about 80vw wide: the print is sized from the tape (--tape-w, its width in em),
   so the tape keeps its shape and its place on HELLO. (2026-11-11) */
@media (max-width: 600px) {
  .opt-d .av-hero--c .print.wn-print { font-size: min(calc(80vw / var(--tape-w, 4.43)), 14vh); }
}
.ac-people { color: #111; }
.ac-sheet { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); padding: clamp(50px, 7vw, 100px) clamp(24px, 6vw, 100px); }
.ac-text p { font: 400 clamp(17px, 1.35vw, 21px)/1.65 var(--sans); max-width: 56ch; margin-bottom: 1.1em; }
.ac-text p:first-child { font-weight: 600; }
.ac-sign { margin-top: 2em; }
.ac-sigs { display: flex; flex-wrap: wrap; gap: 20px 44px; align-items: flex-end; }
.ac-sig { display: grid; gap: 4px; }
.ac-sig small { font: 600 10px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }
.ac-ink { display: block; height: clamp(44px, 4.4vw, 64px); width: auto; }
.ac-polas { display: grid; gap: 26px; justify-items: center; align-content: start; }
.ac-polas .pola { width: min(240px, 80%); }
.ac-polas .pola:nth-child(2) { justify-self: end; margin-top: -10px; }
.ac-polas .pola:nth-child(3) { justify-self: start; margin-top: -10px; }

@media (max-width: 900px) {
  .aa-photo { width: min(88vw, 560px); }
  .aa-row { grid-template-columns: 64px minmax(0, 1fr); }
  .aa-face { width: 64px; height: 64px; }
  .aa-txt { grid-column: 1 / -1; }
  .ab-ports { width: 100%; gap: 10px; }
  .ab-port figcaption span { display: none; }
  .ab-bios, .ac-sheet { grid-template-columns: minmax(0, 1fr); }
  .ac-polas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ac-polas .pola { width: 100%; margin-top: 0 !important; }
}