/* An expressive brush title sits freely over the portrait; supporting copy stays quiet. */
.calligraphy-title { display: block; width: 100%; height: auto; max-width: none; transform: none; }
.hero-copy { position: absolute; inset: 12px auto auto 43%; width: 53%; max-width: none; margin: 0; padding: 0; }
.hero-copy h1 { position: relative; width: min(100%, calc((var(--reader-top) - 130px) * 2)); max-width: 565px; margin: 0; padding: 0; font-size: inherit; line-height: 1; letter-spacing: 0; }
.hero-copy .hero-deck { width: min(100%, calc((var(--reader-top) - 130px) * 2)); max-width: 565px; margin: 9px 0 0; border: 0; padding: 0; text-align: center; font-family: var(--sans); font-size: 11px; font-weight: 400; line-height: 1.7; letter-spacing: 3px; color: #527476; }
.intro-copy { left: 43%; top: 25%; width: 53%; max-width: 840px; }
.intro-copy h2 { position: relative; width: 100%; margin: 0; padding: 0; font-size: inherit; line-height: 1; letter-spacing: 0; }
.intro-deck { margin: 30px 0 0; text-align: center; font-family: var(--sans); font-size: 13px; line-height: 2.1; letter-spacing: 3px; color: #4d6e70; }
.intro-name { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 27px 0 0; font-family: var(--serif); font-size: 13px; line-height: 1.7; letter-spacing: 3px; color: #4d6e70; }
.intro-name > span { border: 0; padding: 0; margin: 0; font-size: 10px; letter-spacing: 2px; }
.intro-edition > span:first-child { border: 0; background: transparent; padding: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media(min-width:1600px) { .hero-copy { left: 44%; top: 16px; width: 51%; } .hero-copy .hero-deck { font-size: 12px; margin-top: 12px; } }
@media(min-width:761px) and (max-height:820px) { .intro-copy { width: min(53vw, 74svh); } }
@media(min-width:761px) and (max-height:680px) { .intro-copy { top: 18%; width: min(49vw, 68svh); left: 47%; } .intro-deck { margin-top: 16px; font-size: 11px; } .intro-name { margin-top: 14px; font-size: 11px; } }
@media(max-width:760px) {
  .hero-copy { top: 28px; left: 34%; width: 65%; max-width: none; margin: 0; padding: 0; }
  .hero-copy h1 { width: 100%; max-width: none; margin: 0; font-size: inherit; line-height: 1; letter-spacing: 0; }
  .hero-copy .hero-deck { width: 100%; margin: 13px 0 0; font-size: 9px; line-height: 1.8; letter-spacing: .8px; white-space: nowrap; }
  .intro-copy { top: 39%; left: 23%; width: 75%; max-width: none; }
  .intro-copy h2 { font-size: inherit; line-height: 1; margin: 0; }
  .intro-deck { margin: 25px 0 0; font-size: 11px; line-height: 2.1; letter-spacing: 1px; }
  .intro-name { margin: 21px 0 0; gap: 10px; font-size: 10px; letter-spacing: 2px; }
  .intro-name > span { font-size: 8px; letter-spacing: .6px; }
  .intro-edition { font-size: 9px; letter-spacing: 3px; }
  .intro-photo-wrap { mask-image: linear-gradient(90deg, #000 0%, #000 48%, transparent 100%), linear-gradient(#000 0%, #000 78%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 48%, transparent 100%), linear-gradient(#000 0%, #000 78%, transparent 100%); }
}
@media(max-width:760px) and (max-height:740px) { .hero-copy { top: 14px; } .hero-copy .hero-deck { margin-top: 7px; font-size: 8px; } .intro-copy { top: 36%; } .intro-deck { margin-top: 18px; font-size: 10px; } .intro-name { margin-top: 16px; } }

.interview-panel .article-title-row { display: block; margin-top: 0; text-align: center; }
.interview-panel .article-title-row h2 { width: 100%; margin: 0; text-align: center; font-weight: 700; }
.interview-panel .article-title-row h2 > span { margin-left: 0; }
@media(min-width:761px) { .intro-photo { height: 124%; width: auto; top: 0; left: -3vw; } }