.project-page { padding-top: clamp(2rem, 5vw, 5rem); }
.project-back { margin-bottom: clamp(2.5rem, 6vw, 6rem); font-size: clamp(1.1rem, 2vw, 1.55rem); font-style: italic; }
.project-back a { text-underline-offset: .15em; }
.project-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.project-intro { position: sticky; top: 2rem; min-width: 0; }
.project-index { margin: 0 0 1rem; font-size: clamp(1rem, 1.4vw, 1.2rem); }
.project-intro h1 { max-width: 100%; margin: 0; font-size: clamp(2.8rem, 5vw, 5.6rem); font-weight: 400; letter-spacing: -.06em; line-height: .9; overflow-wrap: break-word; }
.project-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: clamp(1.75rem, 3vw, 3rem); font-size: clamp(1rem, 1.6vw, 1.5rem); font-style: italic; }
.project-meta p { margin: 0; }
.project-description { max-width: 34rem; margin: clamp(2rem, 4vw, 4rem) 0 0; font-size: clamp(1.05rem, 1.55vw, 1.5rem); line-height: 1.12; white-space: pre-line; }
.project-gallery { display: grid; grid-template-columns: 1fr; gap: clamp(.75rem, 2vw, 2rem); margin-top: 0; min-width: 0; }
.project-gallery figure { min-width: 0; margin: 0; }
.project-gallery img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; object-position: top center; }
.project-gallery figcaption { margin-top: .45rem; font-size: clamp(.95rem, 1.3vw, 1.2rem); font-style: italic; }
.project-image-trigger { display: block; width: 100%; margin: 0; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-align: inherit; cursor: zoom-in; }
.project-image-trigger:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.project-figure--framed .project-image-trigger img { border: 1px solid var(--ink); }
.project-gallery--slider { display: block; }
.project-gallery--slider figure { display: none; }
.project-gallery--slider figure.is-current { display: block; }
.project-slider-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; }
.project-slider-button { border: 0; padding: .25rem .5rem; color: var(--ink); background: transparent; font: inherit; font-size: clamp(1.5rem, 2.5vw, 2.2rem); cursor: pointer; }
.project-slider-button:hover { opacity: .55; }
.project-slider-count { font-size: clamp(.95rem, 1.3vw, 1.2rem); font-style: italic; }
body.is-lightbox-open { overflow: hidden; }
.project-lightbox[hidden] { display: none; }
.project-lightbox { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: clamp(1rem, 4vw, 4rem); color: var(--ink); background: rgba(255, 255, 255, .96); }
.project-lightbox-backdrop { position: absolute; inset: 0; cursor: zoom-out; }
.project-lightbox-content { position: relative; z-index: 1; display: grid; place-items: center; width: min(100%, 1100px); height: 100%; }
.project-lightbox-image { display: block; max-width: calc(100vw - 8rem); max-height: calc(100vh - 8rem); width: auto; height: auto; object-fit: contain; border: 1px solid var(--ink); }
.project-lightbox-close, .project-lightbox-nav { position: absolute; z-index: 2; border: 0; color: var(--ink); background: transparent; font: inherit; cursor: pointer; }
.project-lightbox-close { top: 0; right: 0; padding: .1rem .35rem; font-size: 2.5rem; line-height: 1; }
.project-lightbox-nav { top: 50%; transform: translateY(-50%); padding: .5rem; font-size: clamp(2rem, 4vw, 3.5rem); }
.project-lightbox-nav--previous { left: clamp(-3rem, -4vw, -1rem); }
.project-lightbox-nav--next { right: clamp(-3rem, -4vw, -1rem); }
.project-lightbox-caption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; gap: 1rem; margin: 0; font-size: clamp(.95rem, 1.3vw, 1.2rem); font-style: italic; }
.project-lightbox-close:hover, .project-lightbox-nav:hover { opacity: .55; }
.project-site-header { position: relative; }
.project-site-header::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; border-bottom: var(--line); transform: translateX(-50%); }
.project-links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: clamp(2rem, 4vw, 4rem); padding-top: 0; font-size: clamp(1.1rem, 1.8vw, 1.5rem); }
.project-links a { text-underline-offset: .15em; }
.project-pagination { display: flex; justify-content: space-between; gap: 1rem; margin-top: clamp(3rem, 5vw, 5rem); padding-top: 0; font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-style: italic; }
.project-pagination a { text-underline-offset: .15em; }
.project-contact { margin-top: clamp(3rem, 6vw, 6rem); border-top: var(--line); }

@media (max-width: 700px) {
  .project-page .site-nav { display: flex; }
  .project-layout { display: block; }
  .project-intro { position: static; }
  .project-intro h1 { max-width: 10ch; font-size: clamp(3rem, 15vw, 6rem); }
  .project-description { margin-left: 0; font-size: 1.25rem; }
  .project-gallery { margin-top: 3rem; grid-template-columns: 1fr; }
  .project-lightbox { padding: 3.5rem 1rem 4rem; }
  .project-lightbox-image { max-width: calc(100vw - 2rem); max-height: calc(100vh - 9rem); }
  .project-lightbox-nav--previous { left: -.35rem; }
  .project-lightbox-nav--next { right: -.35rem; }
  .project-lightbox-caption { align-items: flex-end; font-size: .95rem; }
  .project-pagination { flex-wrap: wrap; }
}