/* Shared inner-page furniture: header, next-page link, legal bar.
   Story, Films, Journal, Press and Contact all use these, so a change here
   changes every one of them. */

/* ---------- Page header ---------- */

#page-header {
  position: relative;
  overflow: hidden;
  padding: 150px var(--gutter) 130px;
  color: var(--chalk);
}
#page-header .ph__media { position: absolute; inset: 0; }
#page-header .ph__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
#page-header .ph__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(46,58,36,0.78) 12%, rgba(46,58,36,0) 68%),
    rgba(0,0,0,0.28);
}
#page-header .ph__inner { position: relative; display: flex; flex-direction: column; gap: 28px; }
#page-header .ph__eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 1.8px; }
#page-header h1 {
  margin: 0;
  font-weight: 300; font-size: 62px; line-height: 74px; letter-spacing: -1.86px;
  max-width: 1180px;
}
#page-header .ph__sub { font-size: 18px; line-height: 30px; max-width: 860px; }

/* ---------- Next page ---------- */

#next {
  background: var(--hedge);
  color: var(--chalk);
  padding: 110px var(--gutter);
}
#next .next__label { font-size: 10px; font-weight: 500; letter-spacing: 1.8px; }
#next a {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 24px;
}
#next .next__name { display: flex; align-items: center; gap: 22px; }
#next .next__num { font-size: 12px; font-weight: 500; letter-spacing: 0.96px; color: var(--chalk); }
#next .next__title { font-weight: 300; font-size: 48px; letter-spacing: -1.44px; }
#next .next__arrow { width: 32px; height: 22px; flex: none; transition: transform 260ms cubic-bezier(0.22,0.61,0.36,1); }
#next a:hover .next__arrow { transform: translateX(8px); }

/* ---------- Legal bar, standalone on inner pages ---------- */

#legal {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px var(--gutter) 36px;
  background: var(--chalk);
  border-top: 1px solid var(--hedge);
  font-size: 10px; font-weight: 500; letter-spacing: 1.6px;
}

/* ---------- Shared responsive ---------- */

@media (max-width: 1400px) {
  #page-header h1 { font-size: 46px; line-height: 56px; letter-spacing: -1.2px; }
  #next .next__title { font-size: 36px; letter-spacing: -1px; }
}

@media (max-width: 1100px) {
  #page-header { padding-top: 96px; padding-bottom: 80px; }
  #next { padding-top: 72px; padding-bottom: 72px; }
  #legal { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 620px) {
  #page-header h1 { font-size: 33px; line-height: 41px; letter-spacing: -0.8px; }
  #page-header .ph__sub { font-size: 16px; line-height: 27px; }
  #next .next__title { font-size: 27px; }
  #next .next__arrow { width: 24px; height: 17px; }
}