/* The existing site owns the typography, margins, header and footer. */
:root { --bio-gap: clamp(40px, 6vw, 112px); }
::selection { background: #22221f; color: #fff; }
.bio { --bio-top-space: 38px; padding: calc(var(--header) + var(--bio-top-space)) var(--edge) calc(var(--footer) + 88px); }
.bio::before { content: ""; position: fixed; z-index: 20; top: var(--header); left: 0; right: 0; height: var(--bio-top-space); background: linear-gradient(to bottom, #fff, rgba(255,255,255,.7) 40%, rgba(255,255,255,0)); pointer-events: none; }
/* The copy starts fading at its own original top edge, beneath the title. */
.bio::after { content: ""; position: fixed; z-index: 2; top: var(--header); left: 0; right: 0; height: var(--bio-copy-fade-height, var(--bio-top-space)); background: linear-gradient(to bottom, #fff, rgba(255,255,255,.7) 40%, rgba(255,255,255,0)); pointer-events: none; }
.bio-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); column-gap: var(--bio-gap); align-items: start; }
.portrait-column { position: sticky; z-index: 5; top: calc(var(--header) + var(--bio-top-space)); grid-column: 1 / -1; grid-row: 1 / 3; pointer-events: none; }
.portrait-veil { display: none; }
.portrait-stage { position: relative; width: 100%; height: min(620px, calc(100svh - var(--header) - var(--footer) - 112px)); min-height: 260px; }
.portrait { position: absolute; margin: 0; width: min(24%, 260px); top: 210px; aspect-ratio: 4 / 5; overflow: hidden; transform-origin: 0 0; }
.portrait img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.portrait--nicole { left: calc(50% - min(24%, 260px) - 10px); }
.portrait--justin { left: calc(50% + 10px); }
.portrait-stage.is-moving .portrait { left: 0; top: 0; width: 100%; will-change: transform; }
.portrait-stage.is-moving .portrait--justin { z-index: 2; }
.portrait-caption { display: flex; justify-content: space-between; gap: 16px; padding-top: 22px; font-size: 12px; font-weight: 500; line-height: 1.5; }
.portrait-caption span:last-child { color: #62625d; }
.bio-opening { grid-column: 1 / -1; grid-row: 1; text-align: center; padding-bottom: clamp(180px, 28svh, 300px); }
.bio h1 { position: relative; z-index: 3; font-size: clamp(40px, 4.7vw, 72px); line-height: 1.04; letter-spacing: -.035em; font-weight: 600; margin: 0; text-wrap: balance; }
.bio-opening > p { max-width: 860px; margin: 24px auto 0; font-size: clamp(14.4px, 1.24vw, 18.4px); line-height: 1.4; font-weight: 600; letter-spacing: -.012em; text-align: justify; text-align-last: justify; text-justify: inter-word; text-wrap: wrap; }
.opening-portrait-space { height: clamp(260px, 44svh, 440px); margin-top: 26px; }
.bio-copy { grid-column: 2; grid-row: 2; max-width: 760px; padding-right: clamp(0px, 1.4vw, 28px); }
.bio-section { margin: 0 0 76px; }
.bio-section:last-child { margin-bottom: 0; }
.bio-copy p { font-size: clamp(22px, 2.3vw, 34px); line-height: 1.38; font-weight: 600; letter-spacing: -.027em; margin: 0 0 1.3em; }
.bio-copy p:last-child { margin-bottom: 0; }
.bio-copy #shared-story > p:first-child { opacity: .14; }
.bio-copy .shared-close { margin-top: 1.7em; }
.bio-page dialog { background: #fff; }
@media (max-width: 960px) and (min-width: 761px) {
  :root { --bio-gap: 32px; }
  .bio-layout { grid-template-columns: minmax(0,.8fr) minmax(0,1fr); }
}
@media (max-width: 760px), (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) and (pointer: coarse) {
  .bio-page .footer-details > .footer-email { white-space: normal; }
  .bio-page .site-footer .footer-details > #privacy-open { white-space: normal; max-width: 100%; align-content: center; }
  .bio { --bio-top-space: 34px; --mobile-pair-height: calc((100vw - var(--edge) * 2 - 12px) * .625); --portrait-story-gap: 110px; padding-bottom: calc(var(--footer) + 44px); }
  .bio-layout { grid-template-columns: minmax(0, 1fr); }
  .portrait-column { grid-row: 2; z-index: 5; }
  /* Fade starts at the normal reading boundary, preserving clear space below the portraits. */
  .portrait-veil { display: block; position: absolute; top: calc(var(--portrait-story-gap) - 48px); left: calc(-1 * var(--edge)); right: calc(-1 * var(--edge)); height: 48px; background: linear-gradient(to bottom, #fff, rgba(255,255,255,.7) 40%, rgba(255,255,255,0)); opacity: 0; pointer-events: none; }
  .portrait-veil::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 100vh; background: #fff; }
  .portrait-stage { height: max(var(--mobile-pair-height), clamp(240px, 40svh, 360px)); min-height: 0; margin: 0 auto; }
  .bio-opening { padding-bottom: 24px; }
  .bio-opening > p { font-size: 13.6px; line-height: 1.45; letter-spacing: -.015em; margin-top: 20px; }
  .opening-portrait-space { display: none; }
  .bio-copy { grid-column: 1; max-width: none; padding: calc(var(--mobile-pair-height) + var(--portrait-story-gap)) 0 0; }
  .bio h1 { font-size: clamp(37px, 8.7vw, 56px); }
  .bio-copy p { font-size: clamp(20px, 5.6vw, 27px); line-height: 1.4; }
  .bio-section { margin-bottom: 48px; }
}
@media (max-height: 560px) {
  .portrait-column { position: relative; top: auto; }
  .portrait-stage { min-height: 200px; }
  .portrait-veil { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .portrait-stage.is-moving .portrait { will-change: auto; }
  .portrait-column { position: relative; top: 0; grid-row: 1; }
  .portrait-veil { display: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce), (max-width: 760px) and (max-height: 560px) {
  .portrait-column { grid-row: 2; }
  .portrait-stage { height: var(--mobile-pair-height); min-height: 0; }
  .bio-copy { grid-row: 3; padding-top: var(--portrait-story-gap); }
}
@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .portrait-column { grid-row: 2; }
  .portrait-stage { height: var(--mobile-pair-height); min-height: 0; }
  .bio-copy { grid-row: 3; padding-top: var(--portrait-story-gap); }
}

/* Decode the pair before revealing either image. */
.portraits-loading .portrait-stage { visibility: hidden; }
.portrait--nicole img { position: absolute; width: 107.5%; height: 107.5%; max-width: none; left: -3.75%; bottom: 0; }

/* Keep words intact at every breakpoint; authored compound words remain. */
.bio-page, .bio-page * { -webkit-hyphens: none; hyphens: none; word-break: normal; }
@media (max-width: 1024px) {
  .bio-opening > p { text-align: center; text-align-last: center; text-justify: auto; text-wrap: wrap; overflow-wrap: normal; }
}
@media (min-width: 1025px) and (max-width: 1400px) and (orientation: landscape) and (pointer: coarse) {
  .bio-opening > p { text-align: left; text-align-last: auto; text-justify: auto; text-wrap: wrap; overflow-wrap: normal; }
}
@media (max-width: 760px), (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) and (pointer: coarse) {
 .portrait-stage { width: calc(100% + 24px); margin-left: -12px; }
 .bio { --mobile-pair-height: calc((100vw - var(--edge) * 2 + 24px - 12px) * .625); }
}