/* Shared presentation for project pages. Homepage styling stays untouched. */
.project-page .site-header,
.projects-index .site-header {
  background: var(--ink);
}

.project-heading {
  padding: clamp(9rem, 13vw, 12rem) var(--gutter) clamp(2rem, 3vw, 3rem);
}

.project-back {
  display: inline-block;
  margin-bottom: clamp(2rem, 3vw, 3rem);
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.project-back:hover,
.project-back:focus-visible {
  color: var(--paper);
}

.project-heading h1 {
  margin: 0;
  font-size: clamp(3.3rem, 7.5vw, 8rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.project-byline {
  margin: 1.5rem 0 0;
  color: var(--paper);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  line-height: 1.5;
}

.project-byline span {
  margin: 0 0.5rem;
  color: var(--accent);
}

.project-discipline {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.project-hero {
  margin: 0;
}

.project-hero img {
  width: 100%;
  height: auto;
}

.project-gallery {
  padding: 0 var(--gutter);
  scroll-margin-top: 7rem;
}

.project-gallery > h2 {
  margin-bottom: 1.5rem;
}

.project-gallery .carousel {
  --project-image-height: min(calc((100vw - 2 * var(--gutter)) * 1365 / 2010), 68svh);
}

.project-gallery .carousel-viewport,
.project-gallery .carousel-controls {
  aspect-ratio: auto;
  height: var(--project-image-height);
}

/* Explicit single horizontal track; image dimensions cannot expand its height. */
.project-gallery .carousel-viewport {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  background: #0d0d0c;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}

.project-gallery .carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.project-gallery .carousel-slide .project-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.project-gallery .carousel-slide .project-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 901px) {
  .project-gallery .carousel {
    --project-image-width: 75vw;
    --project-image-height: min(calc(var(--project-image-width) * 1365 / 2010), 80svh);
  }

  .project-gallery .carousel-slide .project-image img {
    max-width: min(100%, var(--project-image-width));
  }
}

.project-gallery .project-image {
  background: #0d0d0c;
}

.project-thumbnails {
  position: relative;
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  padding: 0.9rem 0 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}

.project-thumbnail {
  flex: 0 0 clamp(4.5rem, 8vw, 7rem);
  width: clamp(4.5rem, 8vw, 7rem);
  aspect-ratio: 2010 / 1365;
  padding: 0;
  border: 1px solid transparent;
  background: #0d0d0c;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 150ms ease, border-color 150ms ease;
}

.project-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-thumbnail[aria-current="true"],
.project-thumbnail:hover {
  opacity: 1;
}

.project-thumbnail[aria-current="true"] {
  border-color: rgba(238, 234, 226, 0.65);
}

.project-thumbnail:focus-visible {
  outline: 1px solid var(--paper);
  outline-offset: 2px;
  opacity: 1;
}

.project-credit {
  max-width: 48rem;
  margin: 1.75rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.projects-index .project-heading > .section-kicker {
  margin-bottom: 2rem;
}

.projects-index .project-index-section {
  scroll-margin-top: 6.5rem;
}

.project-category-empty {
  margin: 0;
  padding: 0 var(--gutter);
  color: var(--muted);
  font-size: 1rem;
}

.projects-index .project-heading h1,
.projects-index .project-heading h2 {
  margin: 0;
  font-size: clamp(3.3rem, 5.9vw, 6.45rem);
  font-weight: 300;
  line-height: 0.88;
  letter-spacing: -0.055em;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3vw, 3rem) var(--grid-gap);
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
}

.project-slot[hidden],
.exhibition-index[hidden] {
  display: none;
}

.project-tile {
  display: block;
}

.project-tile-image {
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.project-tile-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 250ms ease, filter 250ms ease;
}

.project-tile:hover img,
.project-tile:focus-visible img {
  transform: scale(1.015);
  filter: brightness(0.94);
}

.project-tile-caption {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  padding-top: 1rem;
}

.project-tile-caption h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.project-tile-caption p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

@media (max-width: 1000px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-page .site-nav { gap: 1.25rem; }
}

@media (max-width: 640px) {
  .project-grid { grid-template-columns: minmax(0, 1fr); }

  .projects-index .project-heading h1,
  .projects-index .project-heading h2 {
    font-size: clamp(2.7rem, 12vw, 4.6rem);
  }

  .project-gallery .carousel-controls button {
    width: 3.5rem;
    padding: 0 0.5rem;
  }

  .project-gallery .carousel-controls button span {
    width: 2.5rem;
  }
}

/* Exhibition renders retain their original widescreen proportions. */
.exhibition-project .project-gallery .carousel {
  --project-image-height: min(calc((100vw - 2 * var(--gutter)) * 9 / 16), 68svh);
}
.exhibition-project .project-thumbnail { aspect-ratio: 16 / 9; }
@media (min-width: 901px) {
  .exhibition-project .project-gallery .carousel {
    --project-image-height: min(calc(var(--project-image-width) * 9 / 16), 80svh);
  }
}

/* Supporting drawing sheets keep their complete page and a quiet dark surround. */
.exhibition-project .project-gallery .technical-drawing .project-image {
  padding: clamp(1rem, 4vw, 4rem);
}
.exhibition-project .project-gallery .technical-drawing .project-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: none;
  filter: none;
}

/* Natural-proportion sheets use most of the display height without white padding. */
.exhibition-project .project-gallery .technical-drawing.full-sheet .project-image {
  padding: clamp(0.5rem, 1.25vw, 1.25rem);
}

/* Keep the planned exhibition position while earlier projects await publication. */
@media (min-width: 1001px) {
  .exhibition-index .project-grid > [data-exhibition-position="5"] {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (min-width: 1001px) {
  .exhibition-index .project-grid > [data-exhibition-position="6"] {
    grid-column: 3;
    grid-row: 2;
  }
}

/* Shared grid frames; preserve the full-height Watch composition. */
#technical-3d .project-tile-image img { object-fit: cover; }
#technical-3d a[href*="dining-room-interior-visual"] img { object-position: 50% 45%; }
#technical-3d a[href*="alma-mattress"] img { object-position: 50% 50%; }
#technical-3d a[href*="fountain-pen-product"] img { object-position: 50% 65%; }
#technical-3d a[href*="watch-product"] img { object-fit: cover; object-position: 50% 48%; }

/* Frame transparent product canvases without modifying the supplied PNGs. */
.project-hero.product-support {
  position: relative;
  width: min(78vw, var(--product-max-width), 1100px);
  aspect-ratio: var(--product-ratio);
  margin: clamp(1rem, 2.5vw, 2rem) auto 0;
  overflow: hidden;
  background: #0d0d0c;
}
.product-support img {
  position: absolute;
  display: block;
  width: var(--canvas-width);
  max-width: none;
  height: auto;
  left: var(--canvas-left);
  top: var(--canvas-top);
}

/* Selected study covers reuse the shared 16:9 card frame. */
#technical-3d a[href*="bathroom-interior-visual"] img { object-position: 50% 55%; }
#technical-3d a[href*="beach-diorama"] img { object-fit: cover; object-position: 50% 58%; }

@media (min-width: 1001px) {
  .projects-index #architecture-title { white-space: nowrap; }
}

/* Match the shared cover frame while favouring the fountain finial. */
#technical-3d a[href="/projects/fountain-modelling-study/"] img { object-fit: cover; object-position: 50% 45%; }