@font-face {
  font-family: "Manrope";
  src: url("media/manrope.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
.header .nav { border-color: #f5e6c14f; }
.header .nav>.pill { white-space: nowrap; color: #191612; background: var(--gold); border-color: var(--gold); }
.header .nav>.pill:hover { background: #f1dfb9; }
.hero.opening { min-height: max(690px,100svh); background: #100f0d; }
.opening .reel-media::after {
  background: linear-gradient(90deg,#100e0cec 0%,#100e0caa 38%,#100e0c21 82%),
              linear-gradient(0deg,#0c0b0af2,transparent 44%,#100f0c51);
}
.opening-frame { position: absolute; inset: 101px 24px 24px; z-index: -1; border: 1px solid #f9e4b034; pointer-events: none; }
.opening-frame::before,.opening-frame::after { content: ""; position: absolute; width: 14px; height: 14px; border: solid #edd7a3b8; }
.opening-frame::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.opening-frame::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.opening-content { min-height: inherit; display: grid; grid-template-rows: auto 1fr auto; padding-block: 106px 22px; }
.opening-slate,.opening-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.opening-slate { padding-block: 12px; color: #f6e9cb; }
.opening-slate p { display: flex; align-items: center; gap: 9px; font: 650 12px/1.3 var(--sans); letter-spacing: .07em; }
.opening-mark,.film-credit img {
  mix-blend-mode: screen;
  filter: grayscale(1) brightness(2.4) contrast(1.08);
  clip-path: inset(26% 33% 38%);
  transform: scale(1.65);
}
.opening-mark { width: 32px; height: 32px; }
.player-screen { position: relative; isolation: isolate; }
#player video::cue { color: #f9ead0; background-color: #15120ee6; }
.film-credit {
  position: absolute;
  top: 8%;
  left: 5%;
  display: flex;
  align-items: center;
  gap: clamp(7px,1.2vw,14px);
  max-width: 90%;
  padding: clamp(5px,1vw,10px) clamp(10px,1.8vw,22px) clamp(5px,1vw,10px) clamp(5px,1vw,10px);
  background: linear-gradient(90deg,#10110ee6,#10110ebf 80%,transparent);
  color: #f7efe0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease-out;
}
.film-credit.is-visible { opacity: 1; }
.film-credit img { width: clamp(34px,6vw,66px); height: auto; }
.film-credit strong { display: block; font: 650 clamp(12px,2.1vw,26px)/1.2 var(--sans); }
.film-credit span { display: block; margin-top: 3px; color: #f0dfbe; font-size: clamp(10px,1.35vw,16px); line-height: 1.25; }
@media(prefers-reduced-motion:reduce) { .film-credit { transition: none; } }
.opening-main { display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: clamp(12px,3vw,50px); align-items: center; padding-block: 48px 37px; }
.opening h1 { font-family: "Manrope", var(--sans); font-size: clamp(52px,6.45vw,112px); font-weight: 750; letter-spacing: -.071em; line-height: 1.01; margin: 0; }
.opening h1 em { color: #ebd4a4; font-style: normal; font-weight: 650; }
.opening-copy>p { font-size: clamp(15px,1.45vw,20px); line-height: 1.55; color: #f1e9d9; max-width: 520px; margin-top: 22px; }
.opening-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.opening-actions a { display: inline-flex; justify-content: space-between; align-items: center; gap: 18px; padding: 11px 14px; border: 1px solid #eddaa674; min-height: 45px; font-weight: 700; font-size: 13px; }
.opening-primary { background: var(--gold); color: #181512; }
.opening-primary:hover { background: #f4e3c0; }
.opening-secondary { background: #19150f75; }
.opening-secondary:hover { background: #3d3222; }
.showreel-button { display: grid; justify-items: center; gap: 11px; color: #fff4df; background: transparent; border: 0; padding: 5px; justify-self: center; }
.showreel-ring { display: grid; place-items: center; width: 112px; height: 112px; border: 1px solid #fae7b99e; outline: 1px solid #fae7b945; outline-offset: 6px; border-radius: 50%; background: #211b14ad; transition: background .2s, transform .2s; }
.showreel-ring span { font-size: 20px; padding-left: 3px; }
.showreel-button:hover .showreel-ring { color: #19140d; background: var(--gold); transform: scale(1.055); }
.showreel-caption { font-size: 12px; font-weight: 700; }
.showreel-caption small { display: block; color: #f4dca9; font: 600 10px var(--mono); margin-top: 4px; letter-spacing: .12em; }
.opening-footer { padding-block: 12px 14px; border-top: 1px solid #f9e5b450; color: #ede2cc; }
.opening-footer>.kicker { font-size: 10px; }
.opening-timeline { display: flex; gap: 9px; align-items: center; width: min(35%,370px); color: #f1dcb0; font: 600 9px var(--mono); }
.opening-timeline div { width: 100%; height: 1px; background: #f9e5b450; }
.opening-timeline i { height: 1px; display: block; background: #f4d9a2; transform: scaleX(0); transform-origin: left; }
.opening .reel-control { background: #14120ea0; white-space: nowrap; }
.opening-work { background: #171612; color: var(--ivory); padding-block: clamp(31px,5vw,69px); border-bottom: 1px solid #ecd8a43b; }
.opening-work-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.opening-work-head h2 { font-size: clamp(24px,3vw,40px); }
.opening-work-head a { color: #f2ddb0; font-size: 13px; white-space: nowrap; }
.opening-work-head a:hover { text-decoration: underline; }
@media(max-width:800px) {
  .hero.opening { min-height: max(660px,90svh); }
  .opening-main { grid-template-columns: minmax(0,1fr) 105px; padding-block: 41px 30px; }
  .opening h1 { font-size: clamp(46px,7.5vw,76px); }
  .showreel-ring { width: 75px; height: 75px; outline-offset: 4px; }
  .opening-frame { inset-inline: 13px; }
}
@media(max-width:640px) {
  .opening-content { padding-top: 112px; padding-bottom: 13px; }
  .opening-slate .kicker { font-size: 11px; }
  .opening-main { grid-template-columns: 1fr; gap: 19px; padding-block: 29px 19px; align-content: end; }
  .opening h1 { font-size: clamp(36px,9.4vw,60px); line-height: 1.04; letter-spacing: -.045em; }
  .opening-copy>p { margin-top: 13px; }
  .opening-actions { margin-top: 13px; gap: 7px; }
  .opening-actions a { min-height: 44px; padding: 7px 10px; gap: 7px; font-size: 13px; }
  .showreel-button { display: flex; align-items: center; justify-self: start; gap: 9px; min-height: 44px; padding: 0; text-align: left; }
  .showreel-ring { width: 36px; height: 36px; outline-offset: 2px; }
  .showreel-ring span { font-size: 12px; }
  .showreel-caption { font-size: 13px; }
  .showreel-caption small { display: inline; margin-left: 4px; }
  .header .nav>.pill { font-size: 13px; }
  .header .nav nav a { font-weight: 550; }
  .opening-footer { gap: 6px; padding-block: 9px; }
  .opening-footer>.kicker { display: none; }
  .opening-timeline { width: min(58%,240px); }
  .opening .reel-control { font-size: 10px; padding: 5px 6px; }
  .opening-frame { inset: 110px 8px 10px; }
}
@media(prefers-reduced-motion:reduce) { .showreel-ring { transition: none; } }

@media(prefers-reduced-motion:no-preference) {
  @supports(animation-timeline:view()) {
    :is(.industry-head,.section-head,.desk-intro)::before { content: ""; display: block; height: 1px; grid-column: 1/-1; background: linear-gradient(90deg,var(--gold),#d2ae6c29); transform-origin: left; animation: signature-section-line linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
    @keyframes signature-section-line { from { transform: scaleX(.15); opacity: .3; } to { transform: scaleX(1); opacity: 1; } }
  }
}

@media(orientation:landscape) and (max-height:519px) {
  .hero.opening { min-height: 100svh; }
  .opening .opening-content { padding-block: 80px 12px; }
  .opening .opening-frame { inset-block: 76px 9px; }
  .opening .opening-slate { padding-block: 4px; }
  .opening .opening-main { grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding-block: 9px 10px; align-items: center; }
  .opening h1 { font-size: clamp(30px,5vw,54px); }
  .opening-copy>p,.opening-actions { margin-top: 8px; }
  .opening-copy>p { font-size: 14px; }
  .opening-actions a { min-height: 40px; }
  .opening-story:not(.is-scrubbing) .opening-footer { display: none; }
  #player,#frame-viewer { padding: 9px; }
  #player .player-head,#frame-viewer .player-head { margin-bottom: 6px; }
  #player .player-head h2,#frame-viewer .player-head h2 { font-size: clamp(18px,3vw,25px); }
  #player video,#frame-viewer img { max-height: calc(100svh - 96px); }
}
@media(orientation:landscape) and (max-height:519px) and (max-width:640px) {
  .opening .opening-content { padding-top: 105px; }
  .opening .opening-frame { inset-block-start: 100px; }
}

@media(max-width:360px) {
  .header .nav nav { gap: 5px; flex-wrap: wrap; }
  .opening h1 { font-size: clamp(32px,10.2vw,36px); }
}

@media(min-width:641px) and (max-width:760px) {
  .header .nav { grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; }
  .header .nav nav { justify-content: center; gap: 4px 10px; flex-wrap: wrap; font-size: 12px; }
  .header .nav>.pill { white-space: nowrap; }
}