/* ==========================================================================
   ALM — Shared inner-page styles (About, Browse, Project…). Loads after styles.css.
   ========================================================================== */

/* Entrance curtain */
#page-curtain {
  position: fixed; inset: 0; z-index: 200; background: var(--ink);
  display: grid; place-items: center;
}
.pc-logo { width: min(240px, 50vw); opacity: 0; transform: translateY(20px); }

/* Current page in the nav */
.nav-link.is-current::after { transform: scaleX(1); }

/* Shared section heading */
.ab-head { max-width: 1300px; margin: 0 auto 7vh; }
.ab-head--center { text-align: center; }
.ab-head--center .eyebrow { justify-content: center; }

/* ---------- Page hero ---------- */
.page-hero { position: relative; height: 82vh; min-height: 560px; overflow: hidden; background: #111; color: #fff; }
.ph-media { position: absolute; inset: -6% 0; will-change: transform; }
.ph-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.7) 100%);
}
.ph-content {
  position: absolute; left: 0; right: 0; bottom: clamp(56px, 10vh, 110px); z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--gutter);
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
.ph-crumbs { display: flex; gap: .7rem; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .85; margin-bottom: 1.6rem; }
.ph-crumbs a:hover { color: var(--goldlight); }
.ph-mark { margin-bottom: 1rem; }
.ph-title {
  font-family: Syncopate, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.6rem, 3.6vw, 3.2rem); letter-spacing: .1em; line-height: 1.15;
}
.ph-tagline { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 2vw, 1.8rem); margin-top: .9rem; color: var(--goldlight); }

.page-hero--short { height: 64vh; min-height: 460px; }
.btn-pill--dark { background: var(--ink); color: #fff; }
.btn-pill--dark:hover { background: var(--gold); color: #fff; }

@media (max-width: 600px) {
  .page-hero { height: 76vh; }
  .page-hero--short { height: 58vh; }
}