.interior-page {
  background: var(--paper);
}

.interior-page .site-header {
  position: absolute;
}

.portfolio-view {
  min-height: 100vh;
  padding-top: var(--header-height);
}

.loading-state {
  padding-top: 30vh;
  color: var(--muted);
  text-align: center;
}

.portfolio-error {
  width: min(calc(100% - (2 * var(--gutter))), 720px);
  margin-inline: auto;
  padding-top: 24vh;
  text-align: center;
}

.portfolio-error h1 {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 400;
  line-height: 1;
}

.portfolio-error p {
  margin: 0;
  line-height: 1.5;
}

.portfolio-error__hint {
  margin-top: 12px !important;
  color: var(--muted);
}

.page-hero {
  height: 394px;
  padding: 120px var(--gutter) 160px;
  text-align: center;
}

.page-hero--detail {
  height: 491px;
  padding: 120px var(--gutter) 0;
}

.page-hero--detail .page-hero__title {
  line-height: 1.25;
}

.page-hero--detail .page-hero__intro {
  margin-top: 80px;
  font-size: 18px;
  line-height: 1.2;
}

.page-hero__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(78px, 8.35vw, 120px);
  font-weight: 400;
  line-height: 0.95;
  text-wrap: balance;
}

.page-hero__intro {
  width: min(100%, 1284px);
  margin: 28px auto 0;
  font-size: 24px;
  line-height: 1.2;
}

body[data-view="gallery"] .page-hero__title {
  font-size: 95px;
  line-height: 1.2;
}

.collection-grid,
.gallery-overview,
.detail-gallery,
.about-layout,
.detail-hero {
  width: min(calc(100% - (2 * var(--gutter))), var(--container));
  margin-inline: auto;
}

.project-overview-hero {
  display: grid;
  place-items: start center;
  height: 394px;
  padding-top: 120px;
  text-align: center;
}

.project-overview-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 95px;
  font-weight: 400;
  line-height: 1.2;
}

/* Figma 155:2799 is a fixed editorial composition inside a 1440px frame.
   The stage scales as one centered system until mobile reflows it below. */
.project-overview-stage {
  position: relative;
  width: min(100%, 1440px);
  margin-inline: auto;
  aspect-ratio: 1440 / 4018;
}

.project-overview-card {
  position: absolute;
  left: 6.111111%;
  display: block;
  width: 42.5%;
}

.project-overview-card--portrait { top: 1.418616%; }
.project-overview-card--graduation { top: 7.516177%; }
.project-overview-card--engagement { top: 32.745645%; }
.project-overview-card--landscape { top: 40.069686%; }
.project-overview-card--video-editing { top: 68.516675%; }

.project-overview-card--graduation,
.project-overview-card--landscape {
  left: 51.319444%;
}

.project-overview-card__image,
.collection-card__image {
  position: relative;
  overflow: hidden;
  background: #ddd;
}

.project-overview-card__image {
  aspect-ratio: 612 / 918;
}

.project-overview-card--portrait .project-overview-card__image {
  aspect-ratio: 612 / 919.52;
}

.project-overview-card--graduation .project-overview-card__image {
  aspect-ratio: 612 / 814.72;
}

.project-overview-card img,
.collection-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1), filter 900ms ease;
}

/* Portrait/cover files are the manually prepared, Figma-matched card crops. */
body[data-view="category"][data-category="portrait"] .collection-card img {
  object-fit: contain;
}

.figma-crop {
  object-position: var(--figma-focal-x, 50%) var(--figma-focal-y, 50%);
}

.project-overview-card:hover img,
.project-overview-card:focus-visible img,
.collection-card:hover img,
.collection-card:focus-visible img {
  filter: saturate(0.9);
  transform: scale(1.025);
}

.project-overview-card h2 {
  margin: 24px 0 8px;
  font-family: var(--serif);
  font-size: clamp(38px, 4.166667vw, 60px);
  font-weight: 600;
  line-height: 1.2;
}

.project-overview-card p {
  width: 81.045752%;
  margin: 0;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.3;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 66px 26px;
  padding: 24px 0 190px;
}

.collection-card {
  display: block;
}

.collection-card__image {
  aspect-ratio: 400.985 / 481.178;
}

.collection-card h2 {
  margin: 24px 0 8px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
}

.collection-card p {
  margin: 0;
  color: #343434;
  font-size: 16px;
  line-height: 1.4;
}

body[data-view="category"] .collection-card p {
  width: min(100%, 360px);
  font-size: 15px;
}

.project-detail {
  padding-bottom: 119px;
}

@media (min-width: 961px) {
  .project-overview-card__image .figma-crop,
  .collection-card__image .figma-crop,
  .detail-hero__button .figma-crop,
  .editorial-photo .figma-crop,
  .gallery-tile .figma-crop,
  .detail-more__track .figma-crop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--figma-focal-x, 50%) var(--figma-focal-y, 50%);
  }

}

.detail-hero {
  width: min(calc(100% - (2 * var(--gutter))), 658px);
  height: 1078px;
  margin-bottom: 140px;
}

.project-detail--quiet-commute .detail-hero {
  position: relative;
  top: 11px;
  width: min(calc(100% - (2 * var(--gutter))), 705px);
}

.detail-hero__button,
.editorial-photo,
.gallery-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #dedede;
  cursor: zoom-in;
}

.detail-hero__button img,
.editorial-photo img,
.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1), filter 800ms ease;
}

/* gallery cover assets already contain the approved presentation crop. */
.gallery-tile img {
  object-fit: contain;
}

/* Project cut assets already contain the approved presentation crop. */
.project-detail .editorial-photo img {
  object-fit: contain;
}

.detail-hero__button:hover img,
.detail-hero__button:focus-visible img,
.editorial-photo:hover img,
.editorial-photo:focus-visible img,
.gallery-tile:hover img,
.gallery-tile:focus-visible img {
  filter: saturate(0.9);
  transform: scale(1.018);
}

.project-detail .editorial-photo:hover img,
.project-detail .editorial-photo:focus-visible img {
  filter: saturate(0.96);
  transform: none;
}

.gallery-tile:hover img,
.gallery-tile:focus-visible img {
  filter: saturate(0.96);
  transform: none;
}

.detail-gallery {
  display: grid;
  grid-template-columns: 429fr 429fr 374fr;
  gap: clamp(8px, 1.11vw, 15.738px);
  height: auto;
  aspect-ratio: 1263 / 1245;
  overflow: hidden;
}

.detail-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: clamp(8px, 1.04vw, 14.755px);
  width: auto;
  height: 100%;
  overflow: hidden;
}

.detail-gallery--standard .detail-column--one,
.detail-gallery--standard .detail-column--two {
  width: auto;
}

.detail-gallery--standard .detail-column--three {
  width: auto;
}

.editorial-photo {
  flex: 0 0 auto;
}

.editorial-photo--s1 {
  height: 21.044%;
}

.editorial-photo--s2 {
  height: 24.492%;
}

.editorial-photo--s3 {
  height: 52.048%;
}

.editorial-photo--s5 {
  height: 55.904%;
}

.editorial-photo--s4 {
  height: 42.901%;
}

.editorial-photo--s6 {
  height: 26.345%;
}

.editorial-photo--s7 {
  height: 72.45%;
}

@media (min-width: 961px) {
  /* Figma 24:3191 — Under the Sun uses a taller top image in column three. */
  .project-detail--under-the-sun .editorial-photo--s6 {
    height: 29.478%;
  }

  .project-detail--under-the-sun .editorial-photo--s7 {
    height: 69.318%;
  }

  /* Figma 24:3697 — Chasing Light has its own three-part left column and
     two-part right column rather than the standard project proportions. */
  .project-detail--chasing-light .editorial-photo--s1 {
    height: 24.739%;
  }

  .project-detail--chasing-light .editorial-photo--s2 {
    height: 35.582%;
  }

  .project-detail--chasing-light .editorial-photo--s3 {
    height: 37.269%;
  }

  .project-detail--chasing-light .editorial-photo--s6 {
    height: 40.643%;
  }

  .project-detail--chasing-light .editorial-photo--s7 {
    height: 58.153%;
  }

  .project-detail--video-editing .page-hero--detail {
    height: 490px;
  }
}

.detail-gallery--landscape {
  grid-template-columns: 429fr 818fr;
}

.detail-gallery.detail-gallery--video {
  grid-template-columns: 429fr 818fr;
  align-items: stretch;
  aspect-ratio: 1263 / 1225;
  overflow: hidden;
}

.detail-gallery--video .detail-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(8px, 1.04vw, 14.755px);
  height: 100%;
  overflow: hidden;
}

.detail-gallery--video .detail-column--video-narrow {
  grid-template-rows: 450fr 760fr;
}

.detail-gallery--video .detail-column--video-wide {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.detail-gallery--landscape .detail-column--landscape-narrow {
  width: auto;
}

.detail-gallery--landscape .detail-column--landscape-wide {
  width: auto;
}

.editorial-photo--l1 {
  height: 36.145%;
}

.editorial-photo--l2 {
  height: 62.651%;
}

.editorial-photo--l3 {
  height: 48.594%;
}

.editorial-photo--l4 {
  height: 50.201%;
}

.detail-gallery--video .editorial-photo,
.detail-gallery--video .editorial-photo--v1,
.detail-gallery--video .editorial-photo--v2,
.detail-gallery--video .editorial-photo--v3,
.detail-gallery--video .editorial-photo--v4 {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.project-detail--video-editing .detail-gallery--video .editorial-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.video-feature {
  width: min(calc(100% - (2 * var(--gutter))), 1262px);
  margin: 0 auto 141px;
}

.project-detail--video-editing {
  padding-bottom: 118px;
}

.video-player {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 1262 / 709;
  border: 0;
  background: #111;
  cursor: pointer;
}

.video-player > img,
.video-player > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-player > img {
  object-fit: cover;
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1), filter 800ms ease;
}

.video-player__veil {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 5%);
  transition: background-color 700ms ease;
}

.video-player__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(68px, 6.2vw, 90px);
  aspect-ratio: 1.48;
  border-radius: 20%;
  background: #f00;
  box-shadow: 0 8px 28px rgb(0 0 0 / 22%);
  transform: translate(-50%, -50%);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.video-player__play span {
  width: 0;
  height: 0;
  margin-left: 5%;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 17px solid #fff;
}

.video-player:hover > img,
.video-player:focus-visible > img {
  filter: saturate(0.94);
  transform: scale(1.012);
}

.video-player:hover .video-player__veil,
.video-player:focus-visible .video-player__veil {
  background: rgb(0 0 0 / 12%);
}

.video-player:hover .video-player__play,
.video-player:focus-visible .video-player__play {
  transform: translate(-50%, -50%) scale(1.055);
}

.video-player.is-playing {
  cursor: default;
}

.gallery-overview {
  padding: 109px 0 109px;
}

.gallery-block {
  display: grid;
  grid-template-columns: 428.869fr 428.869fr 373.785fr;
  gap: clamp(8px, 1.11vw, 15.738px);
  height: auto;
  aspect-ratio: 1263 / 800.687;
  overflow: hidden;
}

.gallery-block + .gallery-block {
  margin-top: clamp(8px, 1.11vw, 15.738px);
}

.gallery-block--5 {
  aspect-ratio: 1263 / 534.119;
}

.gallery-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: clamp(8px, 1.04vw, 14.755px);
  width: auto;
  height: 100%;
  overflow: hidden;
}

.gallery-column--1,
.gallery-column--2 {
  width: auto;
}

.gallery-column--3 {
  width: auto;
}

.gallery-tile {
  flex: 0 0 auto;
}

.gallery-tile--01 { height: 53.56%; }
.gallery-tile--04 { height: 44.634%; }
.gallery-tile--02 { height: 100%; }
.gallery-tile--03 { height: 71.414%; }
.gallery-tile--05 { height: 26.782%; }
.gallery-tile--06 { height: 71.414%; }
.gallery-tile--10 { height: 26.782%; }
.gallery-tile--07 { height: 33.17%; }
.gallery-tile--09 { height: 36.364%; }
.gallery-tile--11 { height: 31.327%; }
.gallery-tile--08 { height: 33.292%; }
.gallery-tile--12 { height: 71.374%; }
.gallery-tile--13 { height: 100%; }
.gallery-tile--14 { height: 31.205%; }
.gallery-tile--16 { height: 71.414%; }
.gallery-tile--15 { height: 71.374%; }
.gallery-tile--17 { height: 26.782%; }
.gallery-tile--18 { height: 26.782%; }
.gallery-tile--21 { height: 38.083%; }
.gallery-tile--23 { height: 31.327%; }
.gallery-tile--19 { height: 66.707%; }
.gallery-tile--24 { height: 31.45%; }
.gallery-tile--20 { height: 26.782%; }
.gallery-tile--22 { height: 71.374%; }
.gallery-tile--25 { height: 40.147%; }
.gallery-tile--28 { height: 57.095%; }
.gallery-tile--26 { height: 100%; }
.gallery-tile--27 { height: 47.929%; }
.gallery-tile--29 { height: 49.24%; }

.gallery-tile[href] {
  cursor: pointer;
}

.detail-more {
  position: relative;
  inline-size: 100%;
  max-inline-size: 100%;
  min-height: 774px;
  overflow: clip;
  contain: paint;
  padding: 144px 0 130px;
}

.detail-more__word {
  position: absolute;
  top: 222px;
  left: -32px;
  margin: 0;
  color: var(--white);
  font-family: var(--serif);
  font-size: 170px;
  line-height: 1.2;
  white-space: nowrap;
}

.detail-more__track {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: clamp(24px, 4vw, 60px);
  width: min(calc(100% - 40px), 1440px);
  margin: 0 auto;
}

.detail-more__track a {
  position: relative;
  display: block;
  width: min(18vw, 240px);
  aspect-ratio: 0.665;
  overflow: hidden;
}

.detail-more__media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.detail-more__track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-more__link {
  position: absolute;
  z-index: 2;
  bottom: 144px;
  left: 50%;
  transform: translateX(-50%);
}

.detail-more__link:hover,
.detail-more__link:focus-visible {
  transform: translate(-50%, -2px);
}

@media (min-width: 961px) {
  .detail-more__track {
    left: 50%;
    justify-content: flex-start;
    gap: 60px;
    width: 1440px;
    margin: 0;
    transform: translateX(calc(-50% - 45.3px));
  }

  .detail-more__track a {
    flex: 0 0 240px;
    width: 240px;
    height: 361px;
    aspect-ratio: auto;
  }

  .detail-more__media {
    height: 361px;
  }

  .detail-more__track a:nth-child(2) {
    height: 319.4px;
    margin-top: 20.6px;
  }

  .detail-more__track a:nth-child(3),
  .detail-more__track a:nth-child(4) {
    height: 360px;
    margin-top: 0.3px;
  }

  .detail-more__track a:nth-child(5) {
    height: 308px;
    margin-top: 26.3px;
  }

  .detail-more__track img {
    height: 361px;
  }
}

.about-hero-image {
  width: min(calc(100% - (2 * var(--gutter))), var(--container));
  height: 517px;
  margin: 0 auto 72px;
  overflow: hidden;
}

.about-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about-layout {
  padding: 0 0 130px;
  font-family: "Jost", var(--sans);
}

.about-row {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 16px;
  padding: 32px 0 56px;
}

.about-row + .about-row {
  border-top: 1px solid rgb(0 0 0 / 10%);
}

.about-row__label {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.about-row__content {
  max-width: 920px;
}

.about-row__lead {
  max-width: 900px;
  margin: 0 0 46px;
  font-size: clamp(32px, 3vw, 43px);
  font-weight: 700;
  line-height: 1.25;
}

.about-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
  margin-left: 33.333%;
}

.about-columns p,
.about-row__content > p {
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
}

.about-row__subhead {
  max-width: 620px;
  margin: 0 0 14px;
  font-size: 24px;
  line-height: 1.25;
}

.fact-list {
  max-width: 615px;
  margin: 0;
}

.fact-list div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 24px 0;
  border-bottom: 2px dashed var(--ink);
}

.fact-list dt,
.fact-list dd {
  margin: 0;
  font-size: 19px;
}

.interior-contact {
  padding-top: 42px;
}

#contact-details {
  scroll-margin-top: 84px;
}

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 54px 72px 32px;
  overflow: hidden;
  border: 0;
  color: var(--white);
  background: rgb(18 18 18 / 96%);
}

.lightbox::backdrop {
  background: rgb(0 0 0 / 78%);
  backdrop-filter: blur(10px);
}

.lightbox__meta {
  position: absolute;
  z-index: 3;
  top: 24px;
  left: 28px;
  display: flex;
  gap: 18px;
  color: rgb(255 255 255 / 78%);
  font-size: 15px;
  letter-spacing: 0.06em;
}

.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
}

.lightbox__stage > img {
  width: auto;
  max-width: 82vw;
  height: auto;
  max-height: calc(100vh - 110px);
  object-fit: contain;
}

.lightbox--collection .lightbox__stage {
  height: calc(100% - 126px);
  padding-bottom: 8px;
}

.lightbox--collection .lightbox__stage > img {
  max-width: 74vw;
  max-height: calc(100vh - 190px);
  box-shadow: 0 18px 58px rgb(0 0 0 / 28%);
}

.lightbox__close {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 22px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  color: var(--white);
  background: transparent;
  cursor: pointer;
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
}

.lightbox__arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 56px;
  height: 92px;
  padding: 0;
  border: 0;
  color: rgb(255 255 255 / 76%);
  background: transparent;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 76px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-55%);
  transition: color 300ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lightbox__arrow:hover,
.lightbox__arrow:focus-visible {
  color: var(--white);
}

.lightbox__arrow--previous { left: 10px; }
.lightbox__arrow--next { right: 10px; }

.lightbox__thumbs {
  position: absolute;
  z-index: 3;
  right: 72px;
  bottom: 22px;
  left: 72px;
  display: flex;
  justify-content: center;
  gap: 12px;
  height: 104px;
  overflow-x: auto;
  scrollbar-width: none;
}

.lightbox__thumbs::-webkit-scrollbar { display: none; }

.lightbox__thumb {
  flex: 0 0 76px;
  width: 76px;
  height: 96px;
  padding: 0;
  overflow: hidden;
  border: 1px solid transparent;
  background: #292929;
  cursor: pointer;
  opacity: 0.56;
  transition: opacity 300ms ease, border-color 300ms ease, transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lightbox__thumb:hover,
.lightbox__thumb:focus-visible,
.lightbox__thumb.is-active {
  border-color: rgb(255 255 255 / 75%);
  opacity: 1;
  transform: translateY(-4px);
}

.lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 960px) {
  .page-hero {
    height: 320px;
    padding: 96px var(--gutter) 104px;
  }

  .page-hero--detail {
    height: auto;
    min-height: 500px;
    padding: 96px var(--gutter) 72px;
  }

  .page-hero__title,
  body[data-view="gallery"] .page-hero__title {
    font-size: clamp(68px, 12vw, 96px);
  }

  body[data-view="category"][data-category="video-editing"] .page-hero__title {
    font-size: clamp(50px, 8.5vw, 72px);
    white-space: nowrap;
  }

  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-detail {
    padding-bottom: 96px;
  }

  .detail-hero,
  .project-detail--quiet-commute .detail-hero {
    top: 0;
    width: min(calc(100% - (2 * var(--gutter))), 620px);
    height: auto;
    margin-bottom: 84px;
    aspect-ratio: 658 / 1078;
  }

  .video-feature {
    margin-bottom: 84px;
  }

  .detail-more__word {
    left: 0;
    font-size: 12vw;
  }

  .detail-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    height: auto;
    aspect-ratio: auto;
    overflow: visible;
  }

  .detail-column {
    display: contents;
  }

  .editorial-photo {
    height: auto;
    aspect-ratio: auto;
  }

  .editorial-photo img {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }

  .gallery-overview {
    padding: 54px 0 110px;
  }

  .gallery-blocks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 8px;
  }

  .gallery-block,
  .gallery-column {
    display: contents;
  }

  .gallery-tile {
    height: auto;
    align-self: start;
    background: transparent;
  }

  .gallery-tile img {
    height: auto;
    object-fit: contain;
  }

  .gallery-tile--01 { order: 1; }
  .gallery-tile--02 { order: 2; }
  .gallery-tile--03 { order: 3; }
  .gallery-tile--04 { order: 4; }
  .gallery-tile--05 { order: 5; }
  .gallery-tile--06 { order: 6; }
  .gallery-tile--07 { order: 7; }
  .gallery-tile--08 { order: 8; }
  .gallery-tile--09 { order: 9; }
  .gallery-tile--10 { order: 10; }
  .gallery-tile--11 { order: 11; }
  .gallery-tile--12 { order: 12; }
  .gallery-tile--13 { order: 13; }
  .gallery-tile--14 { order: 14; }
  .gallery-tile--15 { order: 15; }
  .gallery-tile--16 { order: 16; }
  .gallery-tile--17 { order: 17; }
  .gallery-tile--18 { order: 18; }
  .gallery-tile--19 { order: 19; }
  .gallery-tile--20 { order: 20; }
  .gallery-tile--21 { order: 21; }
  .gallery-tile--22 { order: 22; }
  .gallery-tile--23 { order: 23; }
  .gallery-tile--24 { order: 24; }
  .gallery-tile--25 { order: 25; }
  .gallery-tile--26 { order: 26; }
  .gallery-tile--27 { order: 27; }
  .gallery-tile--28 { order: 28; }
  .gallery-tile--29 { order: 29; }

  .about-hero-image {
    height: 400px;
  }

  .about-row {
    grid-template-columns: 1fr 2.2fr;
  }

  .about-columns {
    gap: 36px;
    margin-left: 0;
  }
}

@media (max-width: 700px) {
  .project-overview-hero {
    height: 270px;
    padding: 92px 20px 0;
  }

  .project-overview-hero h1 {
    font-size: clamp(64px, 20vw, 82px);
    line-height: 1;
  }

  .project-overview-stage {
    position: static;
    display: grid;
    width: calc(100% - 40px);
    margin-inline: auto;
    padding: 20px 0 104px;
    gap: 72px;
    aspect-ratio: auto;
  }

  .project-overview-card,
  .project-overview-card--graduation,
  .project-overview-card--landscape {
    position: static;
    left: auto;
    width: 100%;
  }

  .project-overview-card h2 {
    margin: 18px 0 8px;
    font-size: clamp(36px, 11vw, 44px);
    line-height: 1.06;
  }

  .project-overview-card p {
    width: 100%;
    font-size: 15px;
    line-height: 1.4;
  }
}

@media (max-width: 600px) {
  .page-hero {
    height: 270px;
    padding: 92px 20px 54px;
    overflow: clip;
  }

  .page-hero--detail {
    height: auto;
    min-height: 390px;
    padding: 92px 20px 56px;
  }

  .page-hero__title {
    font-size: clamp(56px, 17vw, 76px);
  }

  .page-hero--detail .page-hero__title {
    max-width: 100%;
    font-size: clamp(38px, 11vw, 50px);
    overflow-wrap: anywhere;
  }

  body[data-view="category"] .page-hero__title {
    max-width: 100%;
    font-size: clamp(36px, 10.5vw, 46px);
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
  }

  body[data-view="category"][data-category="video-editing"] .page-hero__title,
  body[data-view="category"][data-category="engagement"] .page-hero__title {
    font-size: clamp(31px, 8.7vw, 38px);
    white-space: nowrap;
  }

  .page-hero__intro {
    width: 100%;
    max-width: 100%;
    margin-top: 24px;
    font-size: 16px;
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }

  .collection-grid {
    display: block;
    width: calc(100% - 40px);
    padding: 20px 0 100px;
  }

  .collection-card {
    margin-top: 0;
    margin-bottom: 64px;
    transform: none;
  }

  .collection-card p {
    font-size: 15px;
  }

  .collection-card__image {
    aspect-ratio: 0.9;
  }

  .collection-card h2 {
    margin-top: 16px;
    font-size: 22px;
  }

  .detail-hero,
  .project-detail--quiet-commute .detail-hero {
    width: calc(100% - 24px);
    margin-bottom: 54px;
  }

  .video-feature {
    width: calc(100% - 24px);
    margin-bottom: 54px;
  }

  .video-player__play {
    width: 62px;
  }

  .detail-gallery {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .gallery-overview {
    width: calc(100% - 24px);
    padding: 28px 0 90px;
  }

  .gallery-blocks {
    gap: 6px;
  }

  .detail-more {
    min-height: 450px;
    padding-top: 84px;
  }

  .detail-more__word {
    top: 125px;
    font-size: 82px;
  }

  .detail-more__track {
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    padding: 0 20px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .detail-more__track a {
    flex: 0 0 55vw;
    width: 55vw;
    scroll-snap-align: center;
  }

  .detail-more__link {
    bottom: 54px;
  }

  .about-hero-image {
    width: calc(100% - 40px);
    height: 280px;
    margin-bottom: 48px;
  }

  .about-layout {
    width: calc(100% - 40px);
    padding-bottom: 72px;
  }

  .about-row {
    display: block;
    padding: 28px 0 48px;
  }

  .about-row__label {
    margin-bottom: 32px;
    font-size: 20px;
  }

  .about-row__lead {
    margin-bottom: 32px;
    font-size: 30px;
  }

  .about-columns {
    grid-template-columns: 1fr;
  }

  .about-columns p,
  .about-row__content > p {
    font-size: 16px;
  }

  .fact-list div {
    grid-template-columns: 0.8fr 1.2fr;
  }

  .fact-list dt,
  .fact-list dd {
    font-size: 16px;
  }

  .lightbox {
    padding: 52px 12px 18px;
  }

  .lightbox__meta {
    top: 20px;
    left: 16px;
    font-size: 13px;
  }

  .lightbox--collection .lightbox__stage {
    height: calc(100% - 106px);
  }

  .lightbox--collection .lightbox__stage > img {
    max-width: 88vw;
    max-height: calc(100vh - 174px);
  }

  .lightbox__arrow {
    width: 42px;
    font-size: 60px;
  }

  .lightbox__thumbs {
    right: 12px;
    bottom: 12px;
    left: 12px;
    justify-content: flex-start;
    gap: 8px;
    height: 88px;
  }

  .lightbox__thumb {
    flex-basis: 64px;
    width: 64px;
    height: 80px;
  }
}