.portfolio-story {
  width: min(1280px, calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  padding-bottom: 72px;
}
.portfolio-story-heading { max-width: 800px; padding: 48px 0 44px; }
.portfolio-story-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 32px;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.portfolio-story-heading > .eyebrow { color: var(--cranberry); margin-bottom: 17px; }
.portfolio-story h1 { font-size: clamp(52px, 7.5vw, 104px); overflow-wrap: anywhere; }
.portfolio-story-description { max-width: 580px; margin-top: 25px; color: var(--muted); font-size: 14px; }
.portfolio-story-images { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 28px; }
.portfolio-story-photo { min-width: 0; }
.portfolio-story-photo img { width: 100%; height: auto; }
.portfolio-story-wide, .portfolio-story-first { grid-column: 1 / -1; }
.portfolio-story-first img { max-height: min(1000px, calc(100svh - var(--header) - 32px)); object-fit: contain; }
.portfolio-story-first figcaption { margin-top: 14px; font-size: 11px; color: var(--muted); text-align: center; }
.portfolio-story-chapter { grid-column: 1 / -1; padding: 32px 0 8px; }
.portfolio-story-chapter h2 { font-size: clamp(31px, 4vw, 48px); }
.portfolio-story-chapter p { max-width: 580px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.portfolio-story-end { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 48px; }
@media (max-width: 700px) {
  html:not(.js-ready) body[data-page="gallery"] .menu-toggle { display: none; }
  html:not(.js-ready) body[data-page="gallery"] .site-header { height: auto; min-height: var(--header); flex-wrap: wrap; padding-block: 8px; }
  html:not(.js-ready) body[data-page="gallery"] #site-nav { position: static; display: flex; order: 3; width: 100%; gap: 24px; padding: 0; border: 0; box-shadow: none; }
  .portfolio-story { width: calc(100% - 44px); padding-bottom: 45px; }
  .portfolio-story-heading { padding: 26px 0 32px; }
  .portfolio-story-back { margin-bottom: 25px; }
  .portfolio-story h1 { font-size: clamp(46px, 13vw, 76px); }
  .portfolio-story-description { margin-top: 20px; font-size: 13px; }
  .portfolio-story-images { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .portfolio-story-first img { max-height: calc(100svh - var(--header) - 32px); }
  .portfolio-story-first figcaption { font-size: 10px; }
  .portfolio-story-end { flex-direction: column; align-items: flex-start; padding-top: 30px; }
  .portfolio-story-end .button { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-story .text-link .ui-icon { transition: none; }
}