/* About owns only its composition; the pinned shared shell remains unchanged. */
.about-page-shell { --bt-title-accent-about: #B116AF; --page-title-accent: var(--bt-title-accent-about); }
.about-page { display: block; padding-block-end: 56px; }
.about-identity { margin-bottom: 32px; }
.about-identity .page-subtitle { text-wrap: balance; }
.about-layout { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); max-width: 1120px; gap: 64px; align-items: start; }
.about-photo { margin: 0; overflow: hidden; border-radius: 8px; background: var(--sheet); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crop-square { aspect-ratio: 1; }
.crop-square img { object-position: 50% 100%; transform: scale(1.12); transform-origin: 50% 100%; }
.crop-portrait { aspect-ratio: 4 / 5; }
.crop-portrait img { object-position: 50% 75%; }
.crop-landscape { aspect-ratio: 3 / 2; }
.crop-landscape img { object-position: 50% 68%; }
.about-photo-stack { display: grid; gap: 24px; align-content: start; min-width: 0; }
@media (min-width: 761px) {
  .about-page { display: grid; width: min(var(--page-width), 1120px); grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); column-gap: 64px; row-gap: 28px; align-content: start; align-items: start; }
  .about-identity { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .about-layout { display: contents; }
  .about-photo-stack { grid-column: 1; grid-row: 1 / span 2; }
  .about-copy { grid-column: 2; grid-row: 2; }
  .about-identity .page-heading-copy { width: 100%; }
  /* Two equal portrait frames span the heading, intro and body with a fixed 24px gap. */
  .about-photo-stack:not(:has([data-explicit-crop])) { contain: size; align-self: stretch; grid-template-rows: repeat(2, minmax(0, 1fr)); align-content: normal; }
  .about-photo-stack:not(:has([data-explicit-crop])) > .about-photo { height: 100%; width: 100%; aspect-ratio: auto; min-height: 0; }
}
.about-photo-secondary { aspect-ratio: 4 / 5; }
.about-photo-secondary img { object-position: 50% 78%; }
.about-copy { position: relative; min-width: 0; font-size: 20px; line-height: 1.65; }
.about-copy h2 { margin: 28px 0 12px; font: 600 24px/1.3 Barlow, sans-serif; }
.about-copy h2:first-child { margin-top: 0; }
.about-copy p { margin: 0 0 22px; }
.about-copy p:last-child { margin-bottom: 0; }
.about-copy .about-lead { font-size: 27px; font-weight: 600; line-height: 1.4; margin-bottom: 24px; }
.about-copy a { text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--border); }
.about-copy a:hover { text-decoration-color: var(--ink); }
.about-obsessed, .about-crossout { display: inline-block; line-height: 1.1; white-space: nowrap; text-decoration: none; }
/* Keep the compact three-stroke mark within the paragraph's normal leading. */
.about-obsessed { margin-bottom: 0; }
.about-copy .rough-annotation { pointer-events: none; }
.crop-review { display: block; padding-bottom: 48px; }
.crop-review h1 { font: 900 clamp(30px, 3.125vw, 60px)/1.08 Barlow, sans-serif; white-space: normal; }
.crop-review > p { max-width: 70ch; margin: 20px 0 32px; font-size: 20px; }
.crop-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.crop-options h2, .crop-sources h2 { font-size: 24px; margin: 0 0 16px; }
.crop-options p { font-size: 18px; line-height: 1.5; margin: 16px 0 8px; }
.crop-options a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.crop-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border); }
.crop-sources img { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 1400px) { .about-page { column-gap: 40px; } .about-layout { gap: 40px; } .about-copy { font-size: 19px; } .about-copy .about-lead { font-size: 25px; } }
@media (max-width: 1000px) { .about-page { column-gap: 32px; } .about-layout { gap: 32px; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); } .about-identity { margin-bottom: 0; } }
@media (max-width: 760px) {
  .about-identity { margin-bottom: 24px; }
  .about-layout { display: flex; flex-direction: column; gap: 28px; }
  .about-photo-stack { width: 100%; gap: 20px; }
  .about-photo-secondary { aspect-ratio: 3 / 2; }
  /* Ben's selected phone crop retains the figure, road and mountain skyline. */
  .about-photo-stack > [data-about-photo]:not([data-explicit-crop]) { aspect-ratio: 3 / 2; }
  .about-photo-stack > [data-about-photo]:not([data-explicit-crop]) img { object-position: 50% 68%; transform: none; }
  .about-copy { font-size: 19px; line-height: 1.65; }
  .about-copy h2 { font-size: 22px; }
  .about-copy .about-lead { font-size: 24px; }
  .about-copy p { margin-bottom: 20px; }
  .about-page { padding-bottom: 32px; }
  .crop-options { grid-template-columns: 1fr; gap: 32px; }
  .crop-sources { grid-template-columns: 1fr; }
}
@media print { .about-layout { display: block; } .about-photo-stack { contain: none !important; container-type: normal !important; grid-template-rows: none !important; width: 44%; float: right; margin: 0 0 20px 28px; } .about-photo-stack > .about-photo { height: auto !important; width: 100% !important; } .about-page { display: block; } }
