.hero {
  display: grid;
  gap: clamp(1.35rem, 3.2vw, 3rem);
  padding-top: clamp(1.55rem, 4.3vw, 4.1rem);
}
.artist-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.3rem;
  align-items: end;
}
.artist-copy { min-width: 0; }
.artist-copy h1 { margin: .6rem 0 .95rem; font-size: clamp(3.15rem, 7.5vw, 7.6rem); }
.artist-copy h1 i { white-space: nowrap; }
.artist-description { max-width: 35ch; margin-bottom: .75rem; color: var(--quiet); }
.artist-portrait {
  width: clamp(6rem, 14vw, 12.5rem);
  padding: .45rem;
  transform: rotate(2deg);
  background: #fbf4e1;
  border: 1px solid var(--rule);
}
.artist-portrait img { width: 100%; aspect-ratio: 1.13; object-fit: cover; object-position: 50% 36%; }
.artist-portrait figcaption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .25rem .7rem;
  color: var(--quiet);
  font: .61rem/1.3 var(--mono);
  margin-top: .45rem;
}
.text-link { display: inline-block; color: var(--accent); font-size: .87rem; font-weight: 700; }
.text-link:hover { text-decoration-thickness: 2px; }

.hero-stage { min-width: 0; background: var(--mat); border: 1px solid var(--rule); }
.card-set {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.55rem, 2vw, 1.7rem);
  align-items: start;
  padding: clamp(.85rem, 2.2vw, 2rem);
  background-image: repeating-linear-gradient(0deg, transparent 0 20px, #92754e1f 21px, transparent 22px);
}
.photo-card {
  min-width: 0;
  padding: clamp(.28rem, .85vw, .72rem);
  background: #fbf5e9;
  border: 1px solid #a88f72;
  color: #25221d;
  --delay: 0s;
}
.photo-card:nth-child(2) { --delay: .16s; }
.photo-card:nth-child(3) { --delay: .32s; }
.art-button {
  width: 100%;
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.art-button:focus-visible { outline-color: currentColor; outline-offset: 2px; }
.art-window { position: relative; display: block; background: #f7eed8; overflow: hidden; }
.art-window img { width: 100%; height: auto; aspect-ratio: 1.22; object-fit: cover; }
.print-caption {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .45rem;
  align-items: baseline;
  min-height: 1.6rem;
  padding-top: .5rem;
  font: .71rem/1.28 var(--mono);
  overflow-wrap: anywhere;
}
.print-caption span:first-child { opacity: .72; }
.art-button:hover .print-caption span:nth-child(2) { text-decoration: underline; text-underline-offset: .2em; }
.pencil-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  stroke: #42382e;
  stroke-width: 1.35;
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: none;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .drawing .pencil-trace { animation: erase-guide 1.42s var(--delay) both; }
  .drawing .pencil-trace path { animation: draw-line .82s calc(var(--delay) + .06s) both; stroke-dasharray: 1; }
  .drawing .art-window img { animation: color-wipe .62s calc(var(--delay) + .72s) both; }
}
@keyframes draw-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes erase-guide { 0%, 68% { opacity: 1; } 100% { opacity: 0; } }
@keyframes color-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

@media (max-width: 680px) {
  .hero { gap: 1.25rem; }
  .artist-intro { gap: .6rem; }
  .artist-copy h1 { font-size: clamp(2.05rem, 8.4vw, 3.45rem); margin: .46rem 0 .7rem; line-height: .96; }
  .artist-description { font-size: .82rem; }
  .artist-portrait { width: clamp(4.65rem, 23vw, 7.8rem); padding: .25rem; }
  .artist-portrait img { aspect-ratio: .76; }
  .artist-portrait figcaption { font-size: .52rem; }
  .artist-portrait figcaption span:last-child { display: none; }
  .print-caption { font-size: .58rem; grid-template-columns: 1fr; gap: .16rem; }
  .print-caption span:last-child { display: none; }
}