/* Last Light foundation: deep blue, warm ivory, and italic Instrument Serif. */
:root { --sans: 'IBM Plex Sans', Arial, sans-serif; --display: 'Space Grotesk', Arial, sans-serif; --serif: 'Instrument Serif', Georgia, serif; }
* { box-sizing: border-box; }
body { margin: 0; font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, p, figure { margin: 0; }
h1, h2 { font-weight: 400; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.study-nav { height: 108px; margin-inline: auto; display: flex; align-items: center; gap: 44px; width: calc(100% - 128px); }
.wordmark { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.wordmark span { font: 500 37px/1 var(--display); letter-spacing: -.055em; }
.wordmark img { width: 30px; height: 30px; }
.study-nav nav { display: flex; gap: 32px; margin-left: auto; }
.nav-cta { font-size: 13px; display: inline-flex; align-items: center; gap: 28px; padding: 10px 0; white-space: nowrap; }
.nav-cta span { font-size: 20px; }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 15px 20px; min-height: 53px; border-radius: 3px; font-size: 14px; line-height: 1.4; }
.cta span { margin-left: 24px; font-size: 20px; line-height: 1; }
.cinematic { background: #182133; color: #f7f6ee; }
.cinema-scene { position: relative; isolation: isolate; overflow: hidden; min-height: 900px; height: max(900px, 100svh); max-height: 1120px; display: flex; flex-direction: column; }
.cinema-photo { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(.65) brightness(1.1); }
.cinema-scene::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, #17243c7a, #17243c05 85%), linear-gradient(0deg, #111d33b8, #111d333a 40%, #111d3305 75%); }
.cinema-nav { border-bottom: 1px solid #ffffff30; }
.cinema-nav .nav-cta { margin-left: 8px; }
.cinema-copy { width: calc(100% - 176px); margin: auto; padding-block: 100px 66px; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.cinema-copy h1 { font: 400 clamp(78px, 8.6vw, 132px)/1.045 var(--display); letter-spacing: -.065em; }
.cinema-copy h1 em { display: block; margin-top: -8px; font-family: var(--serif); font-size: 1.2em; font-weight: 400; font-style: italic; letter-spacing: -.045em; line-height: 1; color: #f2f1e3; }
.cinema-bottom { margin-top: 62px; display: flex; justify-content: space-between; align-items: flex-end; gap: 70px; }
.cinema-bottom p { max-width: 433px; font-size: 17px; color: #eeeee7; line-height: 1.75; text-wrap: pretty; }
.cinema-cta { margin-top: 27px; background: #f1f0e5; color: #163229; }
.cinema-discover { display: flex; align-items: center; gap: 42px; padding: 16px 0; border-top: 1px solid #ffffff50; font-size: 13px; min-width: 214px; }
.cinema-discover span { margin-left: auto; font-size: 23px; }
@media (min-width: 1600px) { .study-nav { max-width: 1480px; } .cinema-copy { max-width: 1432px; } }
@media (max-width: 1100px) {
  .study-nav { width: calc(100% - 80px); gap: 28px; }
  .study-nav nav { gap: 24px; }
  .cinema-copy { width: calc(100% - 104px); }
  .cinema-copy h1 { font-size: 9vw; }
}
@media (max-width: 760px) {
  .study-nav { width: calc(100% - 40px); height: 86px; gap: 20px; }
  .wordmark span { font-size: 33px; }
  .wordmark img { width: 27px; height: 27px; }
  .study-nav nav { display: none; }
  .study-nav .nav-cta { margin-left: auto; gap: 16px; font-size: 12px; }
  .cinema-scene { min-height: 844px; height: max(844px, 100svh); max-height: none; }
  .cinema-copy { width: calc(100% - 48px); padding-block: 88px 38px; justify-content: flex-end; }
  .cinema-copy h1 { font-size: clamp(48px, 9vw, 70px); letter-spacing: -.065em; }
  .cinema-copy h1 em { font-size: 1.32em; margin-top: 4px; }
  .cinema-bottom { margin-top: 40px; display: block; }
  .cinema-bottom p { max-width: 420px; font-size: 16px; line-height: 1.8; }
  .cinema-cta { margin-top: 26px; }
  .cinema-discover { margin-top: 35px; min-width: 0; max-width: 250px; font-size: 12px; }
  .cinema-photo { object-position: 58% 50%; }
  .cinema-scene::before { background: linear-gradient(90deg, #17243c80, #17243c22), linear-gradient(0deg, #111d33e0, #111d3320 65%, transparent); }
}
@media (max-width: 380px) { .cinema-copy h1 { font-size: 43px; } }