.portfolio-detail { background: var(--deep-blue); }

.detail-hero {
  position: relative;
  min-height: 92svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--deep-blue);
}

.detail-hero-media,
.detail-hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.detail-hero-media {
  object-fit: cover;
  object-position: var(--hero-position, center);
  filter: saturate(.78) contrast(1.06) brightness(.7);
}

.detail-hero-media.hero-media-flipped {
  transform: scaleX(-1);
}

.detail-hero-overlay {
  background:
    linear-gradient(90deg, rgba(0, 8, 32, .98) 0%, rgba(0, 8, 32, .78) 43%, rgba(0, 8, 32, .13) 84%),
    linear-gradient(0deg, rgba(0, 8, 32, .94) 0%, rgba(0, 8, 32, .08) 58%);
}

.detail-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 150px;
  padding-bottom: clamp(90px, 12vh, 145px);
}

.detail-back {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-bottom: clamp(65px, 11vh, 128px);
  color: rgba(250, 236, 205, .72);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.detail-back span { color: var(--orange-glow); font-size: 17px; }

.detail-hero h1 {
  max-width: 980px;
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: clamp(62px, 9.2vw, 132px);
  font-weight: 400;
  letter-spacing: -.058em;
  line-height: .84;
}

.detail-hero-lead {
  max-width: 690px;
  margin: 34px 0 0;
  color: rgba(250, 236, 205, .86);
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.3;
}

.detail-intro-grid,
.detail-statement-grid,
.detail-next-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 56px;
}

.detail-intro h2,
.detail-statement h2,
.detail-next h2,
.detail-section-heading h2,
.feature-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
}

.detail-intro h2,
.detail-statement h2,
.detail-next h2,
.detail-section-heading h2 { font-size: clamp(50px, 7vw, 94px); }
.detail-intro .lead { margin: 42px 0 25px; font-size: clamp(24px, 3vw, 38px); }
.detail-copy-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; max-width: 880px; }
.detail-copy-columns p { margin: 0; }

.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: clamp(48px, 8vw, 112px);
  align-items: center;
}

.feature-grid.reverse { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); }
.feature-grid.reverse .feature-image { order: 2; }
.feature-image { margin: 0; }
.feature-image img { aspect-ratio: var(--feature-ratio, 4 / 3); object-fit: cover; object-position: var(--feature-position, center); }
.feature-image figcaption { margin-top: 13px; color: rgba(250, 236, 205, .58); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.cream .feature-image figcaption { color: rgba(0, 8, 32, .58); }
.feature-copy h2 { margin-top: 22px; font-size: clamp(48px, 6vw, 82px); }
.feature-copy .feature-lead { margin: 34px 0 22px; font-family: var(--serif); font-size: 25px; line-height: 1.32; }
.feature-copy p:not(.section-index):not(.feature-lead) { max-width: 600px; }
.deep .feature-copy p:not(.section-index):not(.feature-lead),
.storm .feature-copy p:not(.section-index):not(.feature-lead) { color: var(--muted-cream); }

.detail-section-heading {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 56px;
  margin-bottom: clamp(65px, 9vw, 112px);
}

.credit-list { border-top: 1px solid var(--line-light); }
.cream .credit-list { border-top-color: var(--line-dark); }
.credit-row {
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(220px, 1fr) minmax(300px, 1.2fr);
  gap: 38px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line-light);
}
.cream .credit-row { border-bottom-color: var(--line-dark); }
.credit-row h3 { margin: 0; font-family: var(--serif); font-size: clamp(24px, 2.8vw, 36px); font-weight: 400; line-height: 1.1; }
.credit-row .credit-meta { margin: 4px 0 0; color: var(--orange-glow); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cream .credit-row .credit-meta { color: var(--terracotta); }
.credit-row > p { max-width: 480px; margin: 0; color: var(--muted-cream); }
.cream .credit-row > p { color: var(--ink); }

.detail-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.detail-card { min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; padding: 34px; border: 1px solid var(--line-light); }
.cream .detail-card { border-color: var(--line-dark); }
.detail-card .card-number { margin: 0; color: var(--orange-glow); font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.cream .detail-card .card-number { color: var(--terracotta); }
.detail-card h3 { margin: auto 0 18px; font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); font-weight: 400; line-height: 1.05; }
.detail-card p { margin: 0; color: var(--muted-cream); }
.cream .detail-card p { color: var(--ink); }

.media-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 22px;
}

.media-gallery figure {
  grid-column: span 4;
  margin: 0;
}

.media-gallery figure.gallery-wide { grid-column: span 8; }

.media-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--gallery-position, center);
}

.media-gallery .gallery-wide img { aspect-ratio: 2 / 1; }

/* Three-image archives stay as one balanced row instead of leaving an orphan. */
.media-gallery.gallery-three > figure,
.media-gallery.gallery-three > figure.gallery-wide,
.media-gallery:has(> figure:nth-child(3):last-child) > figure,
.media-gallery:has(> figure:nth-child(3):last-child) > figure.gallery-wide {
  grid-column: span 4;
}

.media-gallery.gallery-three .gallery-wide img,
.media-gallery:has(> figure:nth-child(3):last-child) .gallery-wide img {
  aspect-ratio: 4 / 3;
}

/* Consistent gallery geometry: equal tiles, aligned rows and matching crops. */
.media-gallery.gallery-two > figure,
.media-gallery.gallery-two > figure.gallery-wide,
.media-gallery.gallery-four > figure,
.media-gallery.gallery-four > figure.gallery-wide,
.media-gallery:has(> figure:nth-child(2):last-child) > figure,
.media-gallery:has(> figure:nth-child(2):last-child) > figure.gallery-wide,
.media-gallery:has(> figure:nth-child(4):last-child) > figure,
.media-gallery:has(> figure:nth-child(4):last-child) > figure.gallery-wide {
  grid-column: span 6;
}

.media-gallery.gallery-two img,
.media-gallery.gallery-two .gallery-wide img,
.media-gallery.gallery-three img,
.media-gallery.gallery-three .gallery-wide img,
.media-gallery:has(> figure:nth-child(3):last-child) img,
.media-gallery.gallery-four img,
.media-gallery.gallery-four .gallery-wide img,
.media-gallery:has(> figure:nth-child(2):last-child) img,
.media-gallery:has(> figure:nth-child(4):last-child) img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.media-gallery figcaption {
  margin-top: 12px;
  color: rgba(0, 8, 32, .62);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .11em;
  line-height: 1.5;
  text-transform: uppercase;
}

.deep .media-gallery figcaption {
  color: rgba(250, 236, 205, .62);
}

.work-samples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 22px;
}

.work-sample {
  display: block;
  border-top: 1px solid var(--line-light);
  padding-top: 14px;
}

.cream .work-sample { border-top-color: var(--line-dark); }

.work-sample img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(.78) contrast(1.04);
  transition: filter .25s ease, transform .35s ease;
}

.work-sample:hover img,
.work-sample:focus-visible img {
  filter: saturate(1) contrast(1.02);
  transform: translateY(-3px);
}

.work-sample strong {
  display: block;
  margin-top: 15px;
  font-family: var(--serif);
  font-size: clamp(21px, 2.2vw, 29px);
  font-weight: 400;
  line-height: 1.15;
}

.work-sample span {
  display: block;
  margin-top: 7px;
  color: var(--orange-glow);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cream .work-sample span { color: var(--terracotta); }

.evidence-link { margin-top: 32px; }

.detail-statement { background: var(--terracotta); }
.detail-statement .statement-kicker { margin: 0 0 15px; color: rgba(250, 236, 205, .72); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.detail-statement .statement-copy { max-width: 720px; margin: 40px 0 0; font-family: var(--serif); font-size: clamp(23px, 2.8vw, 37px); line-height: 1.35; }

.detail-next-links { border-top: 1px solid var(--line-dark); }
.detail-next-links a { display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line-dark); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.detail-next-links a span:last-child { color: var(--terracotta); font-size: 20px; }

.theme-storm .detail-statement { background: var(--storm-blue); }
.theme-sage .detail-statement { background: var(--sage); }

@media (max-width: 920px) {
  .detail-intro-grid,
  .detail-statement-grid,
  .detail-next-grid,
  .detail-section-heading { grid-template-columns: 1fr; }
  .feature-grid,
  .feature-grid.reverse { grid-template-columns: 1fr; }
  .feature-grid.reverse .feature-image { order: 0; }
  .feature-copy { max-width: 740px; }
  .credit-row { grid-template-columns: minmax(210px, .8fr) 1.4fr; }
  .credit-row > p { grid-column: 2; }
  .detail-cards { grid-template-columns: 1fr 1fr; }
  .work-samples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-gallery figure,
  .media-gallery figure.gallery-wide { grid-column: span 6; }
  .media-gallery.gallery-three > figure,
  .media-gallery.gallery-three > figure.gallery-wide { grid-column: span 4; }
  .media-gallery .gallery-wide img { aspect-ratio: 4 / 3; }
}

@media (max-width: 620px) {
  .detail-hero { min-height: 800px; }
  .detail-hero-overlay { background: linear-gradient(0deg, rgba(0, 8, 32, .98) 0%, rgba(0, 8, 32, .72) 58%, rgba(0, 8, 32, .18) 100%); }
  .detail-hero-content { padding-top: 120px; padding-bottom: 80px; }
  .detail-back { margin-bottom: 190px; }
  .detail-hero h1 { font-size: clamp(54px, 17vw, 78px); line-height: .9; }
  .detail-hero-lead { font-size: 22px; }
  .detail-copy-columns { grid-template-columns: 1fr; gap: 18px; }
  .feature-image img { aspect-ratio: 4 / 3; }
  .credit-row { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .credit-row > p { grid-column: auto; margin-top: 10px; }
  .detail-cards { grid-template-columns: 1fr; }
  .detail-card { min-height: 270px; }
  .media-gallery { grid-template-columns: 1fr; }
  .media-gallery figure,
  .media-gallery figure.gallery-wide { grid-column: auto; }
  .media-gallery.gallery-three > figure,
  .media-gallery.gallery-three > figure.gallery-wide,
  .media-gallery:has(> figure:nth-child(3):last-child) > figure,
  .media-gallery:has(> figure:nth-child(3):last-child) > figure.gallery-wide { grid-column: auto; }
  .media-gallery.gallery-two > figure,
  .media-gallery.gallery-two > figure.gallery-wide,
  .media-gallery.gallery-four > figure,
  .media-gallery.gallery-four > figure.gallery-wide,
  .media-gallery:has(> figure:nth-child(2):last-child) > figure,
  .media-gallery:has(> figure:nth-child(2):last-child) > figure.gallery-wide,
  .media-gallery:has(> figure:nth-child(4):last-child) > figure,
  .media-gallery:has(> figure:nth-child(4):last-child) > figure.gallery-wide { grid-column: auto; }
  .work-samples { grid-template-columns: 1fr; }
}