@font-face {
  font-family: Manrope;
  src: url("Manrope-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --midnight: #121d39;
  --silver: #e6eaf1;
  --amber: #eab86b;
  --gutter: clamp(22px, 5vw, 80px);
  font-family: Manrope, sans-serif;
  font-synthesis: none;
  background: var(--midnight);
  color: var(--silver);
  scroll-behavior: smooth;
  scroll-padding-top: 32px;
  scrollbar-color: var(--amber) var(--midnight);
}

* { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.75; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
a { color: var(--amber); text-underline-offset: .3em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:active { color: var(--silver); }
a:focus-visible { outline: 2px solid var(--amber); outline-offset: 7px; }
::selection { background: var(--amber); color: var(--midnight); }
.skip-link { position: fixed; z-index: 2; top: 16px; left: var(--gutter); padding: 10px 18px; background: var(--amber); color: var(--midnight); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.skip-link:active { color: var(--midnight); }
.opening { padding: 28px var(--gutter) 108px; }
.masthead { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.masthead nav { display: flex; flex-wrap: wrap; gap: 30px; letter-spacing: 0; font-size: 13px; }
.opening h1 { margin: 44px 0 54px; font-size: 21.5vw; font-weight: 500; line-height: .9; letter-spacing: -.04em; text-align: center; }
.opening-credits { display: grid; grid-template-columns: 1fr 1fr; gap: 12vw; max-width: 1120px; margin: 0 auto; }
.studio-line { font-size: clamp(24px, 2.3vw, 34px); font-weight: 450; line-height: 1.3; letter-spacing: -.025em; }
.introduction > p + p { max-width: 42ch; margin-top: 22px; font-size: 14px; }
.primary-link { display: inline-block; margin-top: 24px; font-size: 14px; font-weight: 600; }
.cast { display: flex; flex-direction: column; align-items: flex-start; padding-top: 1px; }
.cast a { font-size: clamp(17px, 1.6vw, 23px); line-height: 1.65; text-decoration: none; }
.cast a:hover { text-decoration: underline; }
.cast .cast-people { margin-top: 19px; font-size: 12px; text-decoration: underline; }
.work { padding: 60px var(--gutter) 0; }
.section-intro { text-align: center; margin-bottom: 100px; }
h2 { font-size: 21px; font-weight: 450; letter-spacing: -.015em; line-height: 1.4; }
.section-intro p { margin-top: 18px; font-size: 14px; }
.credit { text-align: center; scroll-margin-top: 48px; }
.credit h3 { font-size: clamp(36px, 4.4vw, 68px); font-weight: 400; line-height: 1.08; letter-spacing: -.035em; }
.credit-major h3 { font-size: clamp(64px, 8vw, 112px); font-weight: 450; }
.stage { margin-top: 22px; font-size: 12px; letter-spacing: .035em; }
.description { max-width: 54ch; margin: 22px auto 0; font-size: 15px; line-height: 1.8; }
.credit > a { display: inline-block; margin-top: 20px; font-size: 13px; }
.external-note { margin-top: 10px; font-size: 12px; }
.credit-linked { margin: 88px auto 0; }
.credit-linked h3 { font-size: clamp(36px, 4.5vw, 66px); }
.paired-credits { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 9vw, 144px); max-width: 1080px; margin: 150px auto; }
.paired-credits .description { max-width: 39ch; }
.closing-pair { margin-top: 140px; margin-bottom: 0; }
.closing-pair h3 { font-size: clamp(30px, 3.6vw, 52px); }
.people { padding: 180px var(--gutter) 0; text-align: center; }
.people h2 { margin-bottom: 62px; }
.person + .person { margin-top: 55px; }
.person h3 { font-size: clamp(42px, 6.8vw, 96px); font-weight: 400; line-height: 1.15; letter-spacing: -.035em; }
.person a { display: inline-block; margin-top: 18px; font-size: 13px; }
.in-progress { padding: 170px var(--gutter) 130px; text-align: center; }
.progress-lead { margin-top: 28px; font-size: clamp(27px, 3.3vw, 46px); line-height: 1.3; font-weight: 400; letter-spacing: -.025em; }
.development-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: 850px; margin: 60px auto 0; text-align: left; }
.development-notes h3 { font-size: 16px; font-weight: 600; }
.development-notes p { margin-top: 12px; font-size: 14px; max-width: 44ch; }
.footer { padding: 0 var(--gutter) 26px; text-align: center; font-size: 12px; }
.company-name { font-size: clamp(16px, 2vw, 26px); font-weight: 500; letter-spacing: .08em; }
.company-details { display: flex; justify-content: center; flex-wrap: wrap; gap: 32px 80px; margin: 32px 0 20px; }
.company-details > div > p:first-child { margin-bottom: 8px; }
address { font-style: normal; }
.footer-close { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-top: 76px; font-size: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .opening h1 { animation: title-settle 1100ms cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes title-settle { from { letter-spacing: -.025em; opacity: .8; } to { letter-spacing: -.04em; opacity: 1; } }
}

@media (max-width: 760px) {
  .opening { padding-top: 22px; padding-bottom: 70px; }
  .masthead { flex-direction: column; gap: 16px; }
  .masthead nav { gap: 26px; }
  .opening h1 { margin: 44px 0; font-size: 21vw; }
  .opening-credits { grid-template-columns: 1fr 1fr; gap: 32px; }
  .studio-line { font-size: 22px; }
  .introduction > p + p { font-size: 13px; }
  .cast a { font-size: 16px; }
  .cast .cast-people { font-size: 12px; }
  .paired-credits { gap: 38px; margin-top: 110px; margin-bottom: 110px; }
  .description { font-size: 14px; }
  .closing-pair { margin-bottom: 0; }
  .people { padding-top: 130px; }
  .in-progress { padding-top: 130px; padding-bottom: 100px; }
}

@media (max-width: 520px) {
  .opening-credits { grid-template-columns: 1fr; gap: 38px; }
  .studio-line { font-size: 27px; }
  .introduction > p + p { max-width: 37ch; }
  .cast { display: grid; grid-template-columns: 1fr 1fr; align-items: start; column-gap: 18px; row-gap: 12px; }
  .cast a { font-size: 14px; line-height: 1.5; }
  .cast .cast-people { grid-column: 1 / -1; margin-top: 10px; font-size: 12px; }
  .work { padding-top: 30px; }
  .section-intro { margin-bottom: 70px; }
  .credit-major h3 { font-size: clamp(54px, 16vw, 78px); }
  .credit-linked { margin-top: 70px; }
  .stage { margin-top: 18px; letter-spacing: 0; }
  .description { margin-top: 18px; }
  .paired-credits { grid-template-columns: 1fr; gap: 72px; margin-top: 90px; margin-bottom: 90px; }
  .paired-credits .description { max-width: 36ch; }
  .paired-credits h3 { font-size: 42px; }
  .paired-credits h3 br { display: none; }
  .closing-pair { margin-bottom: 0; }
  .people { padding-top: 100px; }
  .people h2 { margin-bottom: 40px; }
  .person h3 { font-size: 12vw; }
  .person + .person { margin-top: 42px; }
  .in-progress { padding-top: 100px; padding-bottom: 90px; }
  .development-notes { grid-template-columns: 1fr; gap: 30px; margin-top: 42px; }
  .company-details { flex-direction: column; gap: 24px; }
  .footer-close { flex-direction: column; align-items: center; gap: 16px; margin-top: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
}