/* A photographic biography in four movements, using the supplied full text. */
.biography-page { --bio-paper: #e5e4df; --bio-text: #272a28; --bio-soft: #777b75; background: var(--bio-paper); color: var(--bio-text); }
.biography-page .site-header { z-index: 10; }
.bio-editorial figure { margin: 0; }
.bio-editorial img { display: block; width: 100%; height: auto; }
.bio-kicker { margin: 0 0 28px; font-size: 10px; font-weight: 500; letter-spacing: .23em; text-transform: uppercase; }
.bio-cover { min-height: 840px; height: 100svh; max-height: 1200px; position: relative; overflow: hidden; background: #cfccc3; padding: 170px 8vw 80px; display: flex; align-items: center; }
.bio-cover-copy { position: relative; z-index: 2; width: 58%; }
.bio-cover h1 { margin: 0; font: 400 clamp(100px,14.5vw,220px)/.88 var(--font-display); letter-spacing: -.065em; }
.bio-cover h1 span { display: block; margin-inline-start: 12%; font-style: italic; }
.bio-cover-line { margin: 38px 0 0; max-width: 350px; font-size: clamp(14px,1.15vw,18px); line-height: 1.6; }
.bio-read { display: inline-flex; align-items: center; gap: 30px; padding: 12px 0; margin-top: 30px; font-size: 10px; text-transform: uppercase; letter-spacing: .15em; border-bottom: 1px solid #777b7570; }
.bio-read span:last-child { font-size: 23px; }
.bio-cover-portrait { position: absolute; inset-block: 130px 60px; inset-inline-end: 9vw; width: 32%; }
.bio-cover-portrait img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.bio-cover-note { position: absolute; bottom: 28px; inset-inline-start: 8vw; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
.bio-story { scroll-margin-top: 40px; }
.bio-introduction { max-width: 1180px; margin: 0 auto; padding: clamp(85px,10vw,150px) 8vw; }
.bio-introduction > p:last-child { margin: 0; font: 400 clamp(24px,2.55vw,37px)/1.65 var(--font-display); letter-spacing: -.018em; }
.bio-introduction .bio-kicker { color: var(--bio-soft); }
.bio-chapter { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: start; gap: clamp(50px,9vw,140px); padding: 50px max(8vw,calc((100vw - 1200px)/2)) 130px; }
.bio-editorial h2 { margin: 0 0 40px; font: italic 400 clamp(43px,4.5vw,68px)/1.1 var(--font-display); letter-spacing: -.035em; }
.bio-prose { min-width: 0; }
.bio-prose p { margin: 0 0 1.65em; font-size: clamp(16px,1.25vw,18px); line-height: 1.9; }
.bio-prose p:last-child { margin-bottom: 0; }
.bio-studio-photo { width: 86%; }
.bio-studio-photo img { height: auto; }
.bio-origins .bio-prose { padding-top: 105px; }
.bio-international { background: #202725; color: #ebe8dd; padding-top: 110px; padding-bottom: 115px; }
.bio-international .bio-world-photo { position: sticky; top: 60px; margin-top: 120px; }
.bio-world-photo img { width: 100%; max-height: 700px; object-fit: contain; }
.bio-photo-caption { display: block; margin-top: 17px; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; opacity: .65; }
.bio-maserati { padding: 125px max(8vw,calc((100vw - 1200px)/2)) 100px; }
.bio-film-heading { text-align: center; margin-bottom: 60px; }
.bio-film-heading h2 { font-size: clamp(68px,11vw,164px); font-style: normal; line-height: 1; margin: 0; }
.bio-film-heading h2 span { display: block; font: 400 11px var(--font-body); letter-spacing: .48em; margin-top: 22px; text-transform: uppercase; }
.bio-film-photo { width: 100%; }
.bio-film-photo img { aspect-ratio: 16/9; object-fit: contain; }
.bio-film-story { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(50px,9vw,140px); margin-top: 75px; }
.bio-film-note { white-space: pre-line; font: italic 400 clamp(34px,3.5vw,52px)/1.45 var(--font-display); margin: 0; }
.bio-explore { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 50px 8vw 70px; gap: 7vw; border-top: 1px solid #272a2825; }
.bio-explore a { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-block: 20px; font: 400 clamp(24px,3vw,44px) var(--font-display); }
.bio-explore a span:last-child { font: 300 26px var(--font-body); }
.bio-editorial a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.bio-explore a:hover { color: #727a73; }
[lang="ar"] .bio-introduction > p:last-child, [lang="ar"] .bio-prose, [lang="ar"] .bio-editorial h2:not(#bio-maserati-title), [lang="ar"] .bio-film-note { font-family: "Tajawal",sans-serif; font-style: normal; }
[lang="ar"] .bio-cover h1 { direction: ltr; text-align: start; }
@media (max-width: 1000px) {
  .bio-cover { min-height: 750px; padding-inline: 6vw; }
  .bio-cover-portrait { inset-inline-end: 5vw; width: 36%; }
  .bio-cover-copy { width: 61%; }
  .bio-chapter,.bio-film-story { column-gap: 6vw; }
  .bio-origins .bio-prose { padding-top: 85px; }
}
@media (max-width: 650px) {
  .bio-cover { height: auto; min-height: 0; max-height: none; padding: 125px 24px 45px; display: grid; grid-template-columns: 1fr; }
  .bio-cover-copy { width: 100%; }
  .bio-kicker { margin-bottom: 23px; font-size: 9px; }
  .bio-cover h1 { font-size: clamp(87px,23vw,148px); line-height: .92; }
  .bio-cover h1 span { margin-inline-start: 16%; }
  .bio-cover-line { margin-top: 25px; max-width: 270px; font-size: 14px; }
  .bio-read { margin-top: 12px; }
  .bio-cover-portrait { position: relative; inset: auto; width: 64%; height: auto; justify-self: end; margin-top: 38px !important; }
  .bio-cover-portrait img { height: auto; }
  .bio-cover-note { position: static; font-size: 8px; line-height: 1.8; margin-top: 25px; }
  .bio-introduction { padding: 70px 26px; }
  .bio-introduction > p:last-child { font-size: 25px; line-height: 1.6; }
  .bio-chapter { display: flex; flex-direction: column; padding: 10px 26px 65px; gap: 35px; }
  .bio-editorial h2 { font-size: 44px; margin-bottom: 28px; }
  .bio-studio-photo { width: 65%; }
  .bio-origins .bio-prose { padding-top: 0; }
  .bio-prose p { font-size: 16px; line-height: 1.85; }
  .bio-international { padding: 65px 26px; }
  .bio-international .bio-world-photo { order: 2; position: static; width: 72%; margin: 0; align-self: end; }
  .bio-maserati { padding: 70px 26px 65px; }
  .bio-film-heading { margin-bottom: 35px; }
  .bio-film-heading h2 { font-size: clamp(51px,13vw,80px); }
  .bio-film-heading h2 span { font-size: 8px; letter-spacing: .35em; margin-top: 15px; }
  .bio-film-story { grid-template-columns: 1fr; gap: 32px; margin-top: 38px; }
  .bio-film-note { font-size: 35px; }
  .bio-explore { padding: 25px 26px 80px; gap: 20px; }
  .bio-explore a { font-size: 23px; }
  .bio-explore a span:last-child { font-size: 20px; }
}