/* ============================================================
   ARC — single project page: a narrow reading column with
   positioned figures, sliders, a details panel and next project.
   ============================================================ */

.pd { padding: 132px var(--pad) 0; }
@media (min-width: 1024px) { .pd { padding-top: 168px; } }

/* ---------- Head ---------- */
.pd-head { max-width: 1120px; margin: 0 auto 72px; display: grid; gap: 16px; }
@media (min-width: 1024px) { .pd-head { margin-bottom: 120px; } }
.pd-head__back, .pd-head__index { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.pd-head__back { width: fit-content; position: relative; }
.pd-head__back span { display: inline-block; transition: transform .45s var(--ease); }
.pd-head__back:hover span { transform: translateX(-4px); }
.pd-head__index { color: var(--muted); }
.pd-head__index b { color: var(--amber); font-weight: 600; }
@media (min-width: 768px) {
  .pd-head { grid-template-columns: 1fr auto; }
  .pd-head__index { grid-column: 2; grid-row: 1; }
  .pd-head > :not(.pd-head__back):not(.pd-head__index) { grid-column: 1 / -1; }
}
.pd-head__title {
  margin-top: 24px; font-size: clamp(40px, 8.4vw, 128px); font-weight: 500; line-height: .98;
  letter-spacing: -.035em; color: var(--copper);
}
.pd-head__title .mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
.pd-head__title .w { display: inline-block; }
.pd-head__meta { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.pd-head__lead { max-width: 640px; font-size: 18px; line-height: 1.6; font-weight: 500; color: var(--copper); }
@media (min-width: 1024px) { .pd-head__lead { font-size: 22px; } }

/* ---------- Text blocks ---------- */
.pd-text { margin: 0 auto 72px; max-width: 1120px; }
.pd-text__measure { max-width: 560px; margin: 0 auto; }
.pd-text p { font-size: 16px; line-height: 1.75; color: var(--ink); }
@media (min-width: 1024px) {
  .pd-text { margin-bottom: 120px; }
  .pd-text p { font-size: 18px; }
}

/* ---------- Positioned figures ---------- */
.pd-pos { display: flex; max-width: 1120px; margin: 0 auto 72px; }
@media (min-width: 1024px) { .pd-pos { margin-bottom: 120px; } }
.pd-pos--center { justify-content: center; }
.pd-pos--left { justify-content: flex-start; }
.pd-pos--right { justify-content: flex-end; }
.pd-media { position: relative; width: 100%; }
.pd-media--large { max-width: 860px; }
.pd-media--medium { max-width: 460px; }
.pd-media--large.is-portrait { max-width: 520px; }
.pd-film.is-portrait { max-width: min(520px, 44svh); }
@media (max-width: 600px) { .pd-media--large.is-portrait { max-width: 100%; } }

.pd-media figcaption { margin-top: 12px; }

/* ---------- Text + media row ---------- */
.pd-row { max-width: 1120px; margin: 0 auto 72px; display: grid; gap: 48px; }
.pd-row > * { margin: 0; }
@media (min-width: 900px) {
  .pd-row { grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; margin-bottom: 120px; }
  .pd-row--media-left .pd-pos { order: -1; }
  .pd-row .pd-text__measure { max-width: 440px; }
}

/* ---------- Slider ---------- */
.sl { max-width: 1120px; margin: 0 auto 72px; }
@media (min-width: 1024px) { .sl { margin-bottom: 120px; } }
.sl__frame { position: relative; max-width: 960px; margin: 0 auto; }
.sl__viewport {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; background: var(--paper);
}
.sl__viewport::-webkit-scrollbar { display: none; }
.sl__slide { flex: 0 0 100%; scroll-snap-align: start; }
.sl__slide .media { aspect-ratio: 16 / 10 !important; background: var(--paper); }
.sl__nav {
  position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 90%, transparent); color: var(--copper); cursor: pointer;
  transition: opacity .3s, background-color .3s, color .3s;
}
.sl__nav svg { width: 16px; height: 16px; }
.sl__nav--prev { left: 12px; }
.sl__nav--next { right: 12px; }
.sl__nav--next svg { transform: scaleX(-1); }
.sl__nav:hover { background: var(--amber); color: #fff; }
.sl__nav:disabled { opacity: 0; pointer-events: none; }
@media (min-width: 1200px) {
  .sl__nav { background: transparent; }
  .sl__nav--prev { left: -72px; }
  .sl__nav--next { right: -72px; }
}
.sl__meta { display: flex; align-items: center; gap: 16px; max-width: 960px; margin: 14px auto 0; }
.sl__track {
  position: relative; flex: 1; height: 1px; overflow: hidden;
  background-image: repeating-linear-gradient(90deg, rgb(var(--ink-rgb) / .35) 0 6px, transparent 6px 12px);
}
.sl__fill { position: absolute; inset: 0; background: var(--amber); transform-origin: left; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.sl__count { font-size: 11px; letter-spacing: .14em; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Details panel ---------- */
.pd-details { max-width: 1120px; margin: 0 auto 96px; }
.pd-details dl { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--amber); }
.pd-details__item {
  display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 16px 0;
  border-bottom: 1px dashed rgb(var(--ink-rgb) / .35);
}
@media (min-width: 768px) { .pd-details__item { grid-template-columns: 200px 1fr; } }
.pd-details dt { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); padding-top: 3px; }
.pd-details dd { font-size: 15px; line-height: 1.5; color: var(--ink); }

/* ---------- Next project ---------- */
.pd-next {
  position: relative; display: grid; gap: 10px; max-width: 1120px; margin: 0 auto 96px;
  padding: 40px 0 48px; border-top: 1px solid var(--rule);
}
.pd-next__label { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.pd-next__label em { font-style: normal; color: var(--amber); margin-left: 6px; }
.pd-next__title { font-size: clamp(36px, 7vw, 104px); font-weight: 500; line-height: 1; letter-spacing: -.035em; transition: color .5s var(--ease-soft); }
.pd-next__meta { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.pd-next__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--amber); transform: scaleX(0); transform-origin: right; transition: transform .8s var(--ease); }
.pd-next__thumb {
  position: absolute; right: 0; top: 50%; width: 240px; aspect-ratio: 4 / 5; overflow: hidden;
  transform: translateY(-50%); clip-path: inset(50% 0 50% 0); transition: clip-path .8s var(--ease);
  pointer-events: none; display: none;
}
.pd-next__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform 1.2s var(--ease); }
@media (hover: hover) and (min-width: 1024px) {
  .pd-next__thumb { display: block; }
  .pd-next:hover .pd-next__thumb { clip-path: inset(0 0 0 0); }
  .pd-next:hover .pd-next__thumb img { transform: scale(1); }
  .pd-next:hover .pd-next__title { color: var(--amber); }
  .pd-next:hover .pd-next__rule { transform: scaleX(1); transform-origin: left; }
}

/* ---------- Lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 1000; background: color-mix(in srgb, var(--bg) 97%, transparent);
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease-soft), visibility 0s .45s;
}
.lb.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease-soft); }
.lb__stage { position: absolute; inset: 72px var(--pad) 72px; display: grid; place-items: center; }
@media (min-width: 1024px) { .lb__stage { inset: 72px 120px; } }
.lb__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb__close {
  position: absolute; top: 20px; right: var(--pad); width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
}
.lb__close span { position: absolute; left: 10px; right: 10px; top: 50%; height: 1.5px; background: var(--copper); transform: rotate(45deg); }
.lb__close span + span { transform: rotate(-45deg); }
.lb__nav {
  position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--copper); cursor: pointer; transition: background-color .3s, color .3s;
}
.lb__nav svg { width: 18px; height: 18px; }
.lb__nav:hover { background: var(--amber); color: #fff; }
.lb__nav--prev { left: calc(var(--pad) - 8px); }
.lb__nav--next { right: calc(var(--pad) - 8px); }
.lb__nav--next svg { transform: scaleX(-1); }
@media (max-width: 767px) { .lb__nav { top: auto; bottom: 12px; margin: 0; } }
.lb__meta {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 24px; display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: .14em; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none;
}
@media (max-width: 767px) { .lb__meta { justify-content: center; gap: 24px; bottom: 28px; } }

/* Shared custom cursor (styles from projects.css) sits above the lightbox */
.pd__cursor { z-index: 1010; }
.pd__cursor span { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .pd-media .media img, .pd-media .media video { height: 100%; top: 0; }
}