/* A: readable captions, early mobile portrait and the original soft paper surface. */
h1, h2 { text-wrap: balance; }
.hero h1 { text-wrap: initial; }
.hero { grid-template-rows: auto 1fr auto; align-items: start; }
.hero-copy { grid-column: 1; grid-row: 1; }
.hero-portrait { grid-column: 2; grid-row: 1 / span 2; }
.hero-actions-tribute {
  grid-column: 1; grid-row: 2; display: flex; align-items: center;
  flex-wrap: wrap; gap: 18px 24px; padding: 12px 0 24px 8px;
}
.hero .hero-actions-tribute a { margin: 0; }
.hero .chapter-nav { grid-row: 3; }
.hero > .thread { bottom: 106px; width: 43%; height: 105px; }
.hero-portrait img {
  opacity: 1; animation: none;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 97%, transparent),
    linear-gradient(0deg, transparent, #000 6%, #000 97%, transparent);
}
.work-image img {
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent),
    linear-gradient(0deg, transparent, #000 3%, #000 97%, transparent);
}
.brand, .topbar .brand, .footer-name { font-size: 13px; }
.eyebrow, .hero-copy > .eyebrow, .hero-portrait figcaption,
.chapter-nav small, figcaption small, .catalog-card figcaption small,
.catalog-selects label, .selection-note, .footer-identity p,
.memory-panel .memory-signature { font-size: 13px; }
.languages a { font: 13px/1.2 var(--mono); min-width: 40px; min-height: 44px; }
.site-nav a { min-height: 44px; }
.solid-link, .text-link { font-size: 13px; }
.hero-portrait figcaption { padding: 10px 6% 0; }
.archive-samples figcaption { font: 17px/1.3 var(--serif); padding-top: 10px; }
.footer-credit { font: 16px/1.5 var(--serif); }
.footer-credit p + p { font: 13px/1.5 var(--mono); margin-top: 9px; }
.footer-credit a { min-height: 44px; }
.forge-note, .static-caption { font: 16px/1.5 var(--serif); }
.forge-play-row > p { font-size: 13px; }
.forge-play { font-size: 13px; }
.forge-resume { font-size: 13px; }
.forge-tabs small, .forge-ready .forge-index { font-size: 13px; }
.forge-ready .forge-index { bottom: 9px; }
.catalog-note { font-size: 17px; }
.catalog-count, .loaded-count, .catalog-reset, .dialog-count,
.dialog-id, .dialog-close, .dialog-original { font-size: 13px; }
.dialog-original { text-align: center; line-height: 1.3; }
.dedication h2 { max-width: 19ch; }
.footer { flex-wrap: wrap; }
.footer-contact { display: grid; gap: 3px; font: 13px/1.5 var(--mono); }
.footer-contact > p { color: var(--soot); }
.footer-contact a { min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 680px) {
  .topbar { gap: 0 4px; }
  .topbar .brand { gap: 7px; letter-spacing: .035em; }
  .languages { gap: 0; }
  .site-nav { gap: 8px; }
  .hero { padding-top: 20px; }
  .hero .hero-copy { padding-top: 0; padding-bottom: 0; }
  .hero-copy > .eyebrow { font-size: 13px; letter-spacing: .035em; line-height: 1.5; }
  .hero h1 { font-size: clamp(70px, 23vw, 110px); margin: 20px 0; line-height: .84; }
  .hero .opening { margin-left: 0; font-size: 26px; max-width: 25ch; }
  .hero .opening p + p { font-size: 18px; margin-top: 8px; }
  .hero-portrait { width: 92%; margin: 22px 0 0 8%; }
  .hero-portrait img { height: clamp(270px, 80vw, 350px); }
  .hero-portrait figcaption { font-size: 13px; }
  .hero-actions-tribute { width: 100%; gap: 12px 24px; padding: 23px 0 5px; }
  .hero .hero-actions-tribute a { margin: 0; font-size: 13px; }
  .hero .chapter-nav { margin-top: 22px; gap: 10px; }
  .chapter-nav small { font-size: 13px; }
  .forge-play-row { flex-wrap: wrap; align-items: center; gap: 12px; }
  .forge-play-row > p { max-width: 27ch; font-size: 13px; flex: 1 1 170px; }
  .forge-play { white-space: normal; font-size: 13px; }
  .forge-note { font-size: 16px; min-height: 4.5em; }
  .catalog-selects label { font-size: 13px; }
  .catalog-card figcaption small { font-size: 13px; }
  .catalog-dock a { font-size: 13px; padding-inline: 8px; }
  .footer-credit { font-size: 16px; }
  .footer-name, .footer-identity p { font-size: 13px; }
  .footer-contact { grid-column: 1 / -1; grid-row: 2; }
  .footer-credit { grid-row: 3; }
  .dialog-actions { gap: 6px; }
  .dialog-actions button { min-width: 72px; padding-inline: 7px; }
  .dialog-original { max-width: 14ch; min-width: 0; padding-inline: 3px; }
}