/* ============================================================
   Doorbin — one project
   ============================================================ */

.project-page {
  min-height: 100vh;
  background: var(--ground-page);
  color: #e8e5dd;
}

/* ---------------- masthead ---------------- */
.project-head {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 150px var(--gutter) 0;
}

.project-head__category {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}
.project-head__title {
  margin: 24px 0 0;
  max-width: 17ch;
  font-weight: 200;
  font-size: clamp(42px, 6.4vw, 98px);
  line-height: 0.96;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.project-head__facts {
  display: flex;
  align-items: baseline;
  gap: 40px;
  flex-wrap: wrap;
  margin: 44px 0 0;
}
.project-head__fact { display: block; }
.project-head__fact dt {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.project-head__fact dd {
  margin: 8px 0 0;
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.2;
  color: #e8e5dd;
}

.project-head__lede {
  margin: 64px 0 0;
  max-width: 31ch;
  font-family: var(--font-serif);
  font-size: clamp(26px, 2.7vw, 38px);
  line-height: 1.36;
  color: #e8e5dd;
  text-wrap: pretty;
}

/* ---------------- gallery
   one grid: the gap between images equals the gutter to the
   viewport, so spacing never changes with aspect ratio
   ---------------- */
.gallery {
  max-width: var(--measure);
  margin: var(--gutter) auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
}

.gallery__figure {
  margin: 0;
  background: var(--ground-frame);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.gallery__figure.is-in { opacity: 1; transform: translateY(0); }
.gallery__image { width: 100%; height: auto; display: block; }

.gallery__note {
  justify-self: center;
  width: 100%;
  max-width: 720px;
  padding: 22px 0;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.68;
  color: #bfbbb1;
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.gallery__note.is-in { opacity: 1; transform: translateY(0); }

/* ---------------- more craft ---------------- */
.more__head {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 140px var(--gutter) 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.more__title {
  margin: 0;
  font-weight: 200;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.more__controls {
  display: flex;
  align-items: center;
  gap: 7px;
}
.more__gap { width: 14px; }

.more__step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  padding: 0;
  border: 1px solid rgba(232, 229, 221, 0.26);
  border-radius: 50%;
  background: none;
  color: #e8e5dd;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.more__step:hover { background: #e8e5dd; color: var(--ground-page); border-color: #e8e5dd; }
.more__step svg { width: 15px; height: 11px; display: block; }

.more__rail {
  display: flex;
  gap: 34px;
  margin: 0;
  padding: 44px var(--gutter) 130px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  scrollbar-width: none;
}
.more__rail::-webkit-scrollbar { width: 0; height: 0; }

.more-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
}
.more-card__link { display: block; color: inherit; }
.more-card__link:hover { color: inherit; }
.more-card__link > * { display: block; }
.more-card__frame {
  display: block;
  overflow: hidden;
  background: var(--ground-frame);
  aspect-ratio: 16 / 11;
}
.more-card__image {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--ease);
}
.more-card__link:hover .more-card__image { transform: scale(1.04); }
.more-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0 0;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.more-card__title {
  margin: 14px 0 0;
  font-weight: 300;
  font-size: 21px;
  line-height: 1.24;
  letter-spacing: 0.01em;
  text-wrap: pretty;
}

/* ---------------- touch widths ---------------- */
@media (max-width: 1024px) {
  .project-head { padding: 112px var(--gutter-sm) 0; }
  .project-head__facts { gap: 28px; margin-top: 36px; }
  .gallery {
    margin-top: var(--gutter-sm);
    padding-left: var(--gutter-sm);
    padding-right: var(--gutter-sm);
    gap: var(--gutter-sm);
  }
  .more__head {
    padding: 92px var(--gutter-sm) 0;
    justify-content: flex-start;
    gap: 20px;
  }
  .more__controls { justify-content: flex-start; flex-wrap: wrap; }
  .more__step, .more__gap { display: none; }
  .more__rail {
    gap: var(--gutter-sm);
    padding: 34px var(--gutter-sm) 96px;
    scroll-padding-left: var(--gutter-sm);
  }
  .more-card { width: 78vw; flex: 0 0 78vw; }
  .more-card__frame { aspect-ratio: 3 / 4; }
  .more-card__meta { font-size: 11px; margin-top: 22px; }
  .more-card__title { font-size: 21px; margin-top: 14px; }
}
@media (max-width: 480px) {
  .more-card { width: 82vw; flex: 0 0 82vw; }
  .more-card__title { font-size: 19px; }
}

/* ============================================================
   showcase — the gallery rail fills the first screen; title and
   facts sit in a strip beneath it, never over the photographs
   ============================================================ */
html.is-locked, html.is-locked body { overflow: hidden; }

.showcase {
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: var(--nav-h, 88px);
}

.showcase__rail {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.showcase__rail::-webkit-scrollbar { display: none; }
.showcase__rail.is-dragging,
.showcase__rail.is-dragging * { cursor: grabbing; }

.showcase__item { flex: none; height: 100%; }

.showcase__open {
  display: block;
  height: 100%;
  aspect-ratio: 3 / 2;             /* holds the slot until the photograph arrives */
  padding: 0;
  border: 0;
  background: var(--ground-frame);
  cursor: zoom-in;
}
.showcase__open.is-loaded { aspect-ratio: auto; }
.showcase__open:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.showcase__image {
  height: 100%;
  width: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.showcase__open.is-loaded .showcase__image { opacity: 1; }

.showcase__strip {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 26px var(--gutter) 30px;
}
.showcase__category {
  margin: 0;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}
.showcase__title {
  margin: 12px 0 0;
  font-weight: 200;
  font-size: clamp(30px, 3.6vw, 58px);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.showcase__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: 16px 0 0;
}
.showcase__fact { display: flex; align-items: baseline; gap: 10px; }
.showcase__fact dt {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.showcase__fact dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.2;
  color: #e8e5dd;
}
.showcase__steps { display: flex; gap: 7px; flex: none; }

/* ---------------- about ---------------- */
.project-about {
  max-width: 720px;
  margin: 0 auto;
  padding: 104px var(--gutter) 0;
}
.project-about__lede {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.4;
  color: #e8e5dd;
  text-wrap: pretty;
}
.project-about__note {
  margin: 28px 0 0;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.68;
  color: #bfbbb1;
  text-wrap: pretty;
}

/* ---------------- lightbox ---------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.lightbox.is-open { display: block; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: #060607;
  opacity: 0;
  transition: opacity 0.42s var(--ease);
}
.lightbox.is-shown .lightbox__backdrop { opacity: 1; }

.lightbox__track { position: absolute; inset: 0; will-change: transform; }
.lightbox__slide { position: absolute; top: 0; height: 100%; overflow: hidden; }
.lightbox__image {
  position: absolute;
  display: block;
  max-width: none;
  transform-origin: 50% 50%;
  will-change: transform;
  -webkit-user-drag: none;
  cursor: zoom-in;
}
.lightbox.is-zoomed .lightbox__image { cursor: grab; }

.lightbox__ui {
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease;
}
.lightbox.is-shown .lightbox__ui { opacity: 1; }

.lightbox__close,
.lightbox__step {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(6, 6, 7, 0.44);
  color: var(--ink);
  cursor: pointer;
}
.lightbox__close:hover,
.lightbox__step:hover { background: var(--wash); }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__close svg { width: 14px; height: 14px; display: block; }
.lightbox__step { top: 50%; margin-top: -21px; }
.lightbox__step--prev { left: 18px; }
.lightbox__step--next { right: 18px; }
.lightbox__step svg { width: 15px; height: 11px; display: block; }
.lightbox__step[disabled] { opacity: 0.25 !important; pointer-events: none; }
@media (pointer: coarse) { .lightbox__step { display: none; } }

@media (max-width: 1024px) {
  .showcase { height: auto; }
  /* a landscape frame fits the width whole; the next one peeks in */
  .showcase__rail {
    flex: none;
    height: min(calc(100svh - var(--nav-h, 78px) - 170px), calc((100vw - 44px) / 1.5));
    gap: 10px;
    padding: 0 var(--gutter-sm);
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--gutter-sm);
    cursor: auto;
  }
  .showcase__item { scroll-snap-align: start; }
  .showcase__strip { padding: 22px var(--gutter-sm) 0; }
  .showcase__steps { display: none; }
  .showcase__title { font-size: clamp(28px, 8vw, 44px); }
  .showcase__fact dd { font-size: 17px; }
  .project-about { padding: 64px var(--gutter-sm) 0; }
  .project-about__note { font-size: 18px; }
}

/* the strip speaks in one voice: the title's typeface, one black */
.project-page .showcase__category,
.project-page .showcase__fact dt,
.project-page .showcase__fact dd {
  font-family: var(--font-sans);
  color: #e8e5dd;
}
.project-page .showcase__category { font-weight: 300; }
.project-page .showcase__fact dt {
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: none;
}
.project-page .showcase__fact dd {
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.04em;
}
@media (max-width: 1024px) {
  .project-page .showcase__fact dt,
  .project-page .showcase__fact dd { font-size: 14px; }
}

/* the page is full-bleed now: the heading shares the rail's 42px edge at any width */
.more__head { max-width: none; }

.project-page .showcase__fact dt,
.project-page .showcase__fact dd { font-weight: 300 !important; font-variation-settings: 'wght' 300; }