/* ─── PROJECT INTERIOR LAYOUTS ──── */
.proj-header { margin-bottom: 4rem; border-bottom: 1px solid var(--rule); padding-bottom: 2rem; text-align: center; }
.proj-location { font-family: var(--sans); font-size: 0.85rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mid); }
.proj-cert { font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--soft); margin-top: 0.75rem; display: inline-block; border: 1px solid var(--rule); padding: 0.25rem 0.75rem; border-radius: 3px; }
.proj-layout { display: block; width: 100%; margin: 0 auto; }
.proj-narrative p { max-width: 800px; margin-left: auto; margin-right: auto; font-size: 1.05rem; line-height: 1.7; color: var(--mid); font-weight: 300; margin-bottom: 1.5rem; text-align: center; }
.proj-narrative p:last-child { margin-bottom: 0; }
.proj-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; margin-top: 2rem; margin-bottom: 5rem; }
.intro-narrative { max-width: 100%; min-width: 0; }
.intro-narrative p { text-align: center; line-height: 1.8; margin-top: 0; }
.intro-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; min-width: 0; align-items: start; }
.meta-block { width: 100%; }
.meta-block h3 { font-family: var(--sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 2rem; color: #222; text-align: center; border-bottom: 1px solid #e5e5e5; padding-bottom: 0.75rem; }
.meta-list { display: block; margin: 0; }
.meta-list dt { color: var(--soft); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; margin: 0 0 0.25rem 0; text-align: center; }
.meta-list dd { font-weight: 300; color: #222; font-size: 0.95rem; margin: 0 0 1.5rem 0; line-height: 1.4; overflow-wrap: break-word; text-align: center; }
.meta-list a { text-decoration: none; color: inherit; transition: opacity 0.2s ease; }
.meta-list a:hover { opacity: 0.7; }
.text-col-left { width: calc(50% - 4rem); margin-right: auto; margin-bottom: 6rem; }
.text-col-right { width: calc(50% - 4rem); margin-left: auto; margin-bottom: 6rem; }
.text-col-left p, .text-col-right p { text-align: center; line-height: 1.8; margin: 0; }
.proj-credits { display: flex; flex-direction: column; gap: 1.5rem; border-top: 1px solid var(--rule); padding-top: 4rem; margin: 6rem auto 0; max-width: 800px; align-items: center; text-align: center; }
.credit-block { display: flex; flex-direction: column; gap: 0.25rem; }
.credit-role { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--soft); }
.credit-name { font-size: 0.95rem; color: var(--ink); font-weight: 400; }
.credit-name a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; transition: all 0.3s ease; }
.credit-name a:hover { color: var(--mid); text-decoration-color: var(--mid); }
.proj-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8rem; margin-top: 8rem; align-items: center; justify-items: center; }
.proj-gallery img { width: 100%; height: auto; object-fit: cover; object-position: center; background: #d8d6d0; aspect-ratio: 3/2; margin: 0 auto; }
.proj-gallery img:nth-child(3n) { grid-column: span 2; aspect-ratio: 3/2; }
.proj-gallery img.size-portrait { grid-column: span 1 !important; aspect-ratio: 2/3 !important; }
.proj-gallery img.size-square { grid-column: span 1 !important; aspect-ratio: 1/1 !important; }
.proj-gallery img.size-landscape { grid-column: span 1 !important; aspect-ratio: 3/2 !important; }
.proj-gallery img.size-full { grid-column: span 2 !important; aspect-ratio: 3/2 !important; }
.proj-back-link-wrapper { text-align: center; padding: 4rem 0 8rem 0; background: var(--paper); width: 100%; }
.proj-back-link { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mid); transition: color 0.3s, transform 0.3s; cursor: pointer; margin: 0 auto; }
.proj-back-link:hover { color: var(--ink); transform: translateX(-4px); }

/* Work Mobile Overrides */
@media (max-width: 600px) {
  .intro-meta { grid-template-columns: 1fr; gap: 2rem; }
}

/* ==========================================================================
   WORK & PROJECT INTERIOR ANIMATIONS
   ========================================================================== */
.proj-header,
.proj-narrative,
.intro-narrative,
.meta-block,
.proj-credits {
  transform: none !important;
}

.proj-gallery img,
.project-tile-img {
  animation: mediaRiseOnLoad 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}