/* Homepage reel, studio figures and screening room */
.hero { height: min(92svh, 990px); min-height: 575px; }
.hero-stage { inset: 0; width: 100%; }
.hero-stage video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.stage-shade { background: linear-gradient(90deg,#080c0ef2 1%,#080c0eb0 28%,#080c0e0c 67%),linear-gradient(0deg,#060908f2 0%,#06090885 18%,transparent 49%,#0609082c 75%,#060908b3 100%); }
.hero-inner { inset: 72px var(--page-pad) clamp(125px,16vh,180px); }
.hero-copy { padding: 0; }
.hero h1 { font-size: clamp(64px,min(7.25vw,11.3vh),130px); line-height: 1.08; letter-spacing: -.06em; }
.hero h1 .title-stop { margin-left: .04em; }
.hero-kicker { margin-bottom: clamp(14px,2.6vh,36px); font-size: 10px; }
.hero-copy p { margin-top: clamp(16px,2.5vh,30px); line-height: 1.7; }
.hero-links { margin-top: clamp(16px,2.9vh,36px); gap: 22px; }
#play-showreel { gap: 11px; }
#play-showreel span { font-size: 12px; }
.hero-monitor { position: absolute; display: flex; align-items: center; gap: 13px; bottom: calc(clamp(105px,13.5svh,144px) + 22px); right: var(--page-pad); line-height: 1; }
.monitor-label { display: flex; align-items: center; gap: 7px; font: 10px var(--mono); letter-spacing: .1em; }
#hero-toggle { border: 1px solid #ffffff70; color: #fff; border-radius: 40px; padding: 6px 10px; background: #10100f75; font-size: 10px; }
#hero-toggle:hover { border-color: var(--accent); }
.hero-stats { position: absolute; inset: auto var(--page-pad) 0; height: clamp(105px,13.5svh,144px); border-top: 1px solid #ffffff60; display: grid; grid-template-columns: repeat(5,1fr); align-items: center; color: #f9f9f2; }
.hero-stats > div { display: flex; flex-direction: column-reverse; gap: 8px; padding-left: clamp(12px,2.1vw,44px); border-left: 1px solid #ffffff40; }
.hero-stats > div:first-child { border: 0; padding-left: 0; }
.hero-stats dt { font-size: clamp(11px,.9vw,16px); letter-spacing: .06em; }
.hero-stats dd { display: flex; align-items: baseline; gap: 5px; line-height: 1; }
.hero-stats dd b { font-family: Arial,"Microsoft YaHei",sans-serif; font-size: clamp(32px,3.7vw,70px); letter-spacing: -.062em; font-weight: 500; font-variant-numeric: tabular-nums; }
.hero-stats dd .word-stat { font-size: clamp(27px,3.05vw,57px); }
.hero-stats dd small { color: var(--accent); font-size: clamp(12px,1vw,17px); font-weight: 500; }
.hero-stats a:hover { color: var(--accent); }
.screening { background: #171a18; color: #f3f2ea; }
.screening .section-index { color: #b9beb4; }
.screening .section-index i { background: var(--accent); }
.screening .work-heading p { color: #bdc2b9; }
.screening .section-title > span { color: var(--accent); }
.screen-desk { display: grid; grid-template-columns: minmax(0,2.2fr) minmax(275px,1fr); gap: clamp(16px,2.3vw,44px); align-items: start; }
.screen-project,.screen-library { min-width: 0; }
.screen-frame { scroll-margin-top: 10px; position: relative; aspect-ratio: 16 / 9; background: #050605; }
.screen-frame video { display: block; width: 100%; height: 100%; object-fit: contain; }
.screen-frame:not(.interactive) .screen-start { display: none; }
.screen-start { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 9px; color: white; background: linear-gradient(0deg,#06080628,transparent 42%); }
.screen-start i { display: grid; place-items: center; width: clamp(51px,5vw,85px); height: clamp(51px,5vw,85px); border-radius: 50%; border: 1px solid #ffffffbb; background: #12151483; font: normal 22px Arial; padding-left: 3px; backdrop-filter: blur(4px); transition: background .18s,color .18s; }
.screen-start:hover i { color: #141510; background: var(--accent); border-color: var(--accent); }
.screen-start > span { font-size: 12px; text-shadow: 0 1px 5px black; }
.screen-info { display: flex; justify-content: space-between; align-items: start; padding: 20px 0 0; gap: 20px; }
.cut-code,.cut-clock,.reel-index b,.library-foot,.row-id,.row-duration { font: 10px/1.4 var(--mono); letter-spacing: .09em; }
.cut-code { color: var(--accent); }
.screen-info h3 { margin: 5px 0 8px; font-size: clamp(23px,2vw,38px); line-height: 1.22; font-weight: 600; letter-spacing: -.045em; }
.screen-info p,#screen-error { font-size: 13px; line-height: 1.8; color: #c4c8bf; }
.cut-clock { border: 1px solid #586054; padding: 4px 9px; }
.reel-index,.library-foot { display: flex; justify-content: space-between; align-items: center; }
.reel-index { padding: 0 0 13px; border-bottom: 1px solid #737b6f; }
.reel-index > span { font-size: 14px; }
.reel-index b { color: #bbc0b6; }
.cut-list { max-height: clamp(290px,32vw,620px); overflow: auto; scrollbar-width: thin; scrollbar-color: #727a6a #242824; overscroll-behavior: contain; }
.cut-choice { color: #f5f6ed; display: grid; align-items: center; grid-template-columns: 18px 64px minmax(0,1fr) auto; text-align: left; gap: 9px; padding: 12px 6px; border-bottom: 1px solid #41473f; width: 100%; }
.cut-choice:hover { background: #252a24; }
.cut-choice[aria-pressed=true] { background: #2b3226; }
.cut-choice[aria-pressed=true] .row-id { color: var(--accent); }
.cut-choice:focus-visible { outline-offset: -3px; }
.row-id,.row-duration { color: #c3c8bd; font-size: 9px; }
.cut-choice img { width: 64px; height: 41px; object-fit: cover; }
.cut-choice strong { display: block; font-size: 14px; font-weight: 550; line-height: 1.4; }
.cut-choice em { display: block; margin-top: 4px; color: #afb5aa; font: normal 10px/1.4 Arial,"Microsoft YaHei",sans-serif; }
.library-foot { margin-top: 13px; color: #b4b9ae; font-size: 9px; }
.library-foot span { letter-spacing: 0; }
@media (max-width: 900px) and (min-width:651px) {
  .mast nav { gap: 16px; font-size: 12px; }
  .mast { grid-template-columns: auto 1fr auto; gap: 20px; }
  .mast nav { justify-content: center; }
  .screen-desk { grid-template-columns: minmax(0,1.6fr) minmax(220px,1fr); }
  .cut-choice { grid-template-columns: 14px 48px minmax(0,1fr) auto; gap: 5px; }
  .cut-choice img { width: 48px; height: 35px; }
}
@media (max-width: 650px) {
  .hero { height: min(92svh,830px); min-height: 540px; }
  .hero-stage { bottom: 85px; }
  .hero-stage video { object-position: 64% center; }
  .stage-shade { background: linear-gradient(90deg,#060a0a65,transparent 78%),linear-gradient(0deg,#080909 15%,#080909eb 28%,#08090972 56%,#08090926 75%,#08090995 100%); }
  .hero-inner { inset: 105px var(--page-pad) 172px; align-items: end; }
  .hero h1 { font-size: clamp(49px,min(12.6vw,9svh),78px); line-height: 1.1; }
  .hero-kicker { font-size: 8px; margin-bottom: 16px; }
  .hero-copy p { font-size: 12px; margin-top: 14px; }
  .hero-links { margin-top: 15px; gap: 15px; }
  .hero-monitor { top: 80px; bottom: auto; gap: 9px; }
  .monitor-label { font-size: 8px; }
  .hero-stats { grid-template-columns: repeat(6,minmax(0,1fr)); align-content: center; height: 148px; row-gap: 14px; }
  .hero-stats > div { grid-column: span 2; gap: 5px; padding-left: 12px; }
  .hero-stats > div:nth-child(4) { border-left: 0; padding-left: 0; }
  .hero-stats dd b { font-size: 30px; }
  .hero-stats dd .word-stat { font-size: 23px; }
  .hero-stats dt { font-size: 10px; }
  .hero-stats dd small { font-size: 11px; }
  .screen-desk { display: block; }
  .screen-library { margin-top: 25px; }
  .cut-list { max-height: 285px; }
  .cut-choice { padding: 9px 6px; grid-template-columns: 22px 66px minmax(0,1fr) auto; }
  .screening .section-title { font-size: clamp(38px,10.6vw,53px); }
  .screen-info { padding-top: 14px; }
  .screen-info h3 { font-size: 23px; }
}