/* =========================================================================
   MS INTERIOR — PROJECT DETAIL page
   ========================================================================= */
.pd-hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; color: #fff; display: flex; align-items: flex-end; background: var(--ink); }
.pd-hero__media { position: absolute; inset: 0; z-index: 0; }
.pd-hero__media img { width: 100%; height: 108%; object-fit: cover; }
.pd-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(19,18,17,0.5), rgba(19,18,17,0.05) 35%, rgba(19,18,17,0.75)); }
.pd-hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(3rem, 8vh, 6rem); }
.pd-hero__tag { font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.8); }
.pd-hero__title { font-family: var(--serif); font-weight: 500; font-size: var(--step-5); line-height: 0.92; letter-spacing: -0.02em; margin: 0.8rem 0 1.6rem; }
.pd-hero__meta { display: flex; gap: 2.6rem; flex-wrap: wrap; }
.pd-hero__meta span { font-size: var(--step-0); }
.pd-hero__meta em { display: block; font-style: normal; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 0.3rem; }
.pd-hero__back { position: absolute; top: calc(var(--nav-h) + 0.5rem); z-index: 2; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.85); }

/* Info grid */
.pd-info { border-bottom: 1px solid color-mix(in srgb, var(--charcoal) 14%, transparent); }
.pd-info__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2rem; padding-block: clamp(2.5rem, 5vw, 4rem); }
.pd-info__cell em { display: block; font-style: normal; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--concrete); margin-bottom: 0.5rem; }
.pd-info__cell span { font-size: var(--step-0); font-weight: 500; }
@media (max-width: 800px) { .pd-info__grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } }

/* Design story */
.pd-story { padding-block: clamp(4rem, 9vw, 8rem); }
.pd-story__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.pd-story__title { font-family: var(--serif); font-weight: 500; font-size: var(--step-4); line-height: 0.98; }
.pd-story__title .idx { display: block; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--concrete); margin-bottom: 1.2rem; font-weight: 600; }
.pd-story__body p { font-size: var(--step-1); color: var(--charcoal); margin-bottom: 1.4rem; }
.pd-story__body p.lead { font-family: var(--serif); font-size: var(--step-2); line-height: 1.25; color: var(--ink); }
@media (max-width: 800px) { .pd-story__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* Curated image sequence */
.pd-seq { display: flex; flex-direction: column; gap: clamp(1.4rem, 3vw, 2.6rem); }
.seq-full { width: 100%; }
.seq-full .figm { aspect-ratio: 16/9; }
.seq-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center; }
.seq-two .figm { aspect-ratio: 4/5; }
.seq-port { display: grid; grid-template-columns: repeat(12,1fr); }
.seq-port > .img-reveal { grid-column: 3 / 11; }
.seq-port .figm { aspect-ratio: 3/4; }
.seq-detail { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(1.4rem,3vw,2.6rem); align-items: end; }
.seq-detail .figm { aspect-ratio: 3/2; }
.seq-detail .figm.tall { aspect-ratio: 3/4; }
.figm { overflow: hidden; background: var(--ivory-2); position: relative; }
.figm img { width: 100%; height: 100%; object-fit: cover; }
.figcap { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-grey); margin-top: 0.8rem; }
@media (max-width: 700px) {
  .seq-two, .seq-detail { grid-template-columns: 1fr; }
  .seq-port > .img-reveal { grid-column: 1 / -1; }
}

/* Design details (materiality / lighting ...) */
.pd-details { padding-block: clamp(4rem, 9vw, 8rem); }
.pd-details__row { display: grid; grid-template-columns: 0.5fr 2fr 3fr; gap: 2rem; align-items: center; padding: clamp(1.6rem,3vw,2.4rem) 0; border-top: 1px solid color-mix(in srgb, var(--charcoal) 16%, transparent); }
.pd-details__row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--charcoal) 16%, transparent); }
.pd-details__num { font-size: 0.72rem; letter-spacing: 0.16em; font-weight: 700; color: var(--concrete); }
.pd-details__title { font-family: var(--serif); font-size: var(--step-2); font-weight: 500; }
.pd-details__desc { color: var(--warm-grey); }
@media (max-width: 800px) { .pd-details__row { grid-template-columns: 1fr; gap: 0.6rem; padding: 1.6rem 0; } }

/* Next project */
.pd-next { position: relative; height: 78vh; min-height: 460px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; background: var(--ink); }
.pd-next__media { position: absolute; inset: 0; z-index: 0; opacity: 0.55; transition: opacity 0.6s, transform 1.4s var(--ease); }
.pd-next:hover .pd-next__media { opacity: 0.72; transform: scale(1.05); }
.pd-next__media img { width: 100%; height: 100%; object-fit: cover; }
.pd-next__inner { position: relative; z-index: 1; }
.pd-next__label { font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
.pd-next__name { font-family: var(--serif); font-weight: 500; font-size: var(--step-5); line-height: 0.95; margin: 1rem 0; }
.pd-next__go { display: inline-flex; align-items: center; gap: 0.6em; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.pd-next:hover .pd-next__go .arrow { transform: translateX(8px); }
.pd-next__go .arrow { transition: transform 0.5s var(--ease); }