/* Phone About uses native outer scrolling. Only fitting biography paragraphs
   hold at the reading center while their words fill in. */
@media (max-width: 767px) {
  .portfolio-viewer.has-mobile-about-story { scrollbar-width: none; }
  .portfolio-viewer.has-mobile-about-story::-webkit-scrollbar { display: none; }
  html.work-grid .portfolio-viewer-about.about-mobile-story {
    --about-story-muted: color-mix(in srgb, var(--heading) 28%, var(--dark));
    display: block;
    width: 100%;
    max-width: none;
    padding: 0 32px;
  }
  .about-mobile-story .about-story-original { display: none !important; }
  html.work-grid .about-mobile-story [data-about-panel] {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
  }
  .about-mobile-story .about-story-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .about-mobile-story .about-story-grid { display: block; }
  .about-mobile-story .about-story-art {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 0;
    padding: 80px 0 24px;
  }
  html.work-grid .about-mobile-story .about-story-art :is(.portfolio-about-portrait, .portfolio-about-section-artwork, .about-resume-figure) {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
  }
  html.work-grid .about-mobile-story .about-story-art :is(.portfolio-about-portrait, .portfolio-about-section-artwork, .about-resume-figure) {
    aspect-ratio: 1;
  }
  /* Phone artwork keeps the desktop resting material at every scroll position.
     The same soft edge applies to the portrait, section images and resume. */
  html.work-grid:not([data-theme="dark"]) .about-mobile-story .about-story-art :is(.portfolio-about-portrait, .portfolio-about-section-artwork, .about-resume-figure) {
    border-radius: 0;
    overflow: visible;
    -webkit-mask-image: var(--media-edge-rest);
    mask-image: var(--media-edge-rest);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transform: none;
    transition: none;
  }
  .about-mobile-story .about-story-reader {
    overflow: visible;
    height: auto;
    min-width: 0;
  }
  .about-mobile-story .about-story-bio-step,
  .about-mobile-story .about-story-step,
  .about-mobile-story .about-story-places-step {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 0;
    padding: 24px 0;
  }
  .about-mobile-story .about-story-bio-step {
    display: block;
    padding: 0;
    margin: 0 0 32px;
  }
  .about-mobile-story .about-story-bio-step:last-child { margin-bottom: 0; }
  .about-mobile-story .about-story-bio-stream { padding-bottom: var(--about-bio-end-space, 0px); }
  /* Artwork already supplies the first text gap. Keep the next entry close
     enough to explain the reading flow without adding a scroll indicator. */
  .about-mobile-story .about-story-reader > .about-story-step:first-child { padding-top: 0; }
  .about-mobile-story .about-story-list-end { padding-bottom: var(--about-list-end-space, 24px); }
  .about-mobile-story .about-story-bio-step.is-about-passage-pinned {
    min-height: var(--about-passage-height);
  }
  .about-mobile-story .is-about-passage-pinned .about-story-passage {
    position: sticky;
    top: var(--about-passage-top);
  }
  html.work-grid .about-mobile-story .about-story-passage {
    margin: 0;
    font-size: clamp(20px, 5.6vw, 24px);
    line-height: 1.45;
    font-weight: 400;
    letter-spacing: -.02em;
    text-wrap: pretty;
  }
  .about-mobile-story .about-story-passage .intro-keep-mobile { white-space: nowrap; }
  .about-mobile-story .about-story-word {
    color: color-mix(in srgb, var(--heading) calc(var(--word-progress, 0) * 100%), var(--about-story-muted));
  }
  html.work-grid .about-mobile-story .about-story-passage a.portfolio-inline-link {
    background-image: none;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: none;
    text-decoration-color: transparent;
  }
  .about-mobile-story .about-story-passage a .about-story-word {
    color: color-mix(in srgb, var(--portfolio-link) calc(var(--word-progress, 0) * 100%), var(--about-story-muted));
  }
  html.work-grid .about-mobile-story .about-story-passage a.is-about-story-link-reached,
  html.work-grid .about-mobile-story .about-story-passage:focus-within a { text-decoration-color: var(--portfolio-link); }
  .about-mobile-story .about-story-passage:focus-within .about-story-word { color: var(--heading); }
  .about-mobile-story .about-story-passage:focus-within a .about-story-word { color: var(--portfolio-link); }
  .about-mobile-story .about-story-map-context .about-story-passage {
    opacity: calc(1 - .72 * var(--about-map-context, 0));
    -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / calc(1 - var(--about-map-context, 0))) calc(100% - 2.5lh), #000 calc(100% - 1.5lh));
    mask-image: linear-gradient(to bottom, rgb(0 0 0 / calc(1 - var(--about-map-context, 0))) calc(100% - 2.5lh), #000 calc(100% - 1.5lh));
  }
  .about-mobile-story .about-story-map-context .about-story-passage:focus-within {
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .about-mobile-story .about-story-step-content { width: 100%; min-width: 0; }
  html.work-grid .about-mobile-story .about-story-step h4,
  html.work-grid .about-mobile-story .about-story-tools-group dt,
  html.work-grid .about-mobile-story .portfolio-about-colophon > h3 {
    margin: 0 0 12px;
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -.035em;
    text-wrap: balance;
  }
  html.work-grid .about-mobile-story .about-story-step :is(p, dd),
  html.work-grid .about-mobile-story .portfolio-about-colophon :is(dt, dd, a) {
    margin: 0 0 20px;
    font-size: 18px;
    line-height: 1.5;
  }
  html.work-grid .about-mobile-story .about-story-step .about-story-dates { margin-bottom: 12px; opacity: .6; }
  .about-mobile-story .about-story-tools-group { margin: 0; }
  .about-mobile-story .about-story-tools-group :is(dt, dd) { color: var(--heading); }
  html.work-grid .about-mobile-story .about-story-tools-group > div { display: block; }
  .about-mobile-story .about-story-step-content > :last-child { margin-bottom: 0; }
  html.work-grid .about-mobile-story .portfolio-about-colophon { margin: 0; }
  html.work-grid .about-mobile-story .portfolio-about-colophon .nd-resource-list > div {
    display: grid;
    grid-template-columns: minmax(0, 180px) max-content;
    column-gap: 16px;
    align-items: baseline;
  }
  html.work-grid .about-mobile-story .portfolio-about-colophon .nd-resource-list :is(dt, dd) {
    margin: 0;
    font-weight: 400;
  }
  html.work-grid .about-mobile-story .portfolio-about-colophon .nd-resource-list { gap: 16px; }
  .about-mobile-story .portfolio-about-colophon dd { white-space: nowrap; }
  html.work-grid .about-mobile-story .portfolio-about-places { width: 100%; margin: 0; }
  .about-mobile-story .about-story-places-step {
    min-height: 0;
    padding-bottom: var(--about-map-end-space, 24px);
  }
  html.work-grid .about-mobile-story .about-story-resume-copy .about-resume-actions {
    width: 100%; margin: 24px 0 0;
  }
  html.work-grid .about-mobile-story .about-story-resume-copy .about-story-step p { font-size: 16px; }
  html.work-grid .about-mobile-story .about-resume-button { min-height: 52px; font-size: 18px; }
  .about-mobile-story .about-story-resume-copy .about-story-step { min-height: auto; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .about-mobile-story .about-story-word { color: var(--heading); }
  .about-mobile-story .about-story-passage a .about-story-word { color: var(--portfolio-link); }
  html.work-grid .about-mobile-story .about-story-passage a.portfolio-inline-link { text-decoration-color: var(--portfolio-link); }
  .about-mobile-story .about-story-step { opacity: 1; }
}