@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

body.cinema-site {
  --cinema-black: #141311;
  --cinema-ink: #211c17;
  --cinema-ivory: #f5eee2;
  --cinema-sand: #ddbd93;
  --cinema-muted: #c0b7aa;
  --cinema-line: #524840;
  --cinema-display: "Instrument Serif", Georgia, serif;
  --cinema-gutter: clamp(24px, 5.4vw, 105px);
  background: var(--cinema-black);
  color: var(--cinema-ivory);
}
.cinema-shell {
  width: min(100% - 2 * var(--cinema-gutter), 1510px);
  margin-inline: auto;
}
.cinema-site main :is(h1, h2, h3) {
  color: inherit;
  font-family: var(--cinema-display);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: .97;
}
.cinema-site main h1 { font-size: clamp(3.55rem, 7.9vw, 9.1rem); }
.cinema-site main h2 { font-size: clamp(2.75rem, 5.3vw, 6.15rem); }
.cinema-site main h3 { font-size: clamp(1.8rem, 3vw, 3.6rem); }
.cinema-site main p { max-width: 60ch; }
.cinema-site main figure { margin: 0; }
.cinema-site main img { display: block; }
.cinema-site main a { color: inherit; }
.cinema-site :is(a, button, summary, video):focus-visible {
  outline: 2px solid var(--cinema-sand);
  outline-offset: 5px;
}
.cinema-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.cinema-label {
  margin: 0 0 1.15rem;
  color: var(--cinema-sand);
  font-size: .69rem;
  font-weight: 650;
  letter-spacing: .17em;
  line-height: 1.45;
  text-transform: uppercase;
}
.cinema-actions { display: flex; flex-wrap: wrap; gap: 11px 13px; align-items: center; }
.cinema-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.1em;
  min-height: 49px;
  padding: .65rem 1rem;
  border: 1px solid #998678;
  font-size: .8rem;
  font-weight: 670;
  text-decoration: none;
}
.cinema-site main .cinema-button--solid {
  border-color: var(--cinema-sand);
  background: var(--cinema-sand);
  color: #211910;
}
.cinema-site main .cinema-button--solid:hover { background: #f2d7b3; border-color: #f2d7b3; }
.cinema-site main .cinema-button--outline:hover { background: var(--cinema-ivory); color: var(--cinema-ink); }
.cinema-link {
  display: inline-flex;
  gap: .55em;
  align-items: center;
  min-height: 44px;
  font-size: .86rem;
  font-weight: 630;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: .29em;
}
.cinema-link:hover { text-decoration-thickness: 2px; }

.cinema-site.subpage-body .frame-header {
  width: min(100% - 2 * var(--cinema-gutter), 1510px);
  min-height: 81px;
  padding-block: 10px;
  color: var(--cinema-ivory);
}
.cinema-site.subpage-body .frame-wordmark { color: var(--cinema-ivory); }
.cinema-site .frame-wordmark b, .cinema-site .frame-byline { color: var(--cinema-sand); }
.cinema-site.subpage-body .frame-header .navlinks a:not(.frame-header-contact) { color: var(--cinema-muted); }
.cinema-site.subpage-body .frame-header .navlinks a:is(:hover, [aria-current]):not(.frame-header-contact) { color: var(--cinema-ivory); }
.cinema-site.subpage-body .frame-header .frame-header-contact,
.cinema-site.subpage-body .frame-footer .form-button { border-color: var(--cinema-sand); background: var(--cinema-sand); color: var(--cinema-ink); }
.cinema-site.subpage-body .frame-header .frame-header-contact:hover,
.cinema-site.subpage-body .frame-footer .form-button:hover { background: var(--cinema-ivory); color: var(--cinema-ink); }
.cinema-site .frame-mobile-nav summary { color: var(--cinema-ivory); border-color: #786f64; }
.cinema-site .frame-mobile-nav nav { background: #211d19; border-color: #786f64; }
.cinema-site .frame-mobile-nav nav a,
.cinema-site .frame-mobile-nav[open] nav a[aria-current="page"] { color: var(--cinema-ivory); }
.cinema-site.subpage-body .frame-footer { border-top-color: var(--cinema-line); background: #100f0e; color: var(--cinema-ivory); }
.cinema-site .frame-footer-mark b { color: var(--cinema-sand); }
.cinema-site.subpage-body .frame-footer :is(.contact-bottom, .footer-legal) { color: var(--cinema-muted); border-color: var(--cinema-line); }
.cinema-site.subpage-body .frame-footer .footer-links a { color: var(--cinema-ivory); }

.cinema-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  overflow: clip;
  background: #19140f;
  min-height: max(650px, calc(100svh - 81px));
  border-block: 1px solid #4e3e30;
}
.cinema-hero-media,
.cinema-hero-shade { position: absolute; inset: 0; pointer-events: none; }
.cinema-hero-media { left: 36%; background: #332019; }
.cinema-hero-media :is(img, video) {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.cinema-hero-video { opacity: 0; }
.cinema-hero-video.is-playing { opacity: 1; }
.cinema-hero-shade {
  background: linear-gradient(90deg, #17130f 0%, #17130f 31%, #17130f 36%, #17130fe8 42%, #17130f24 66%, transparent 83%),
    linear-gradient(0deg, #17130fdc, transparent 27%);
}
.cinema-hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  align-content: end;
  gap: 25px;
  position: relative;
  padding-block: clamp(60px, 10vh, 140px) clamp(36px, 8vh, 108px);
}
.cinema-hero-copy { min-width: 0; }
.cinema-site .cinema-hero h1 { margin: 0; max-width: 10.3em; text-wrap: initial; }
.cinema-hero h1 em { display: block; color: var(--cinema-sand); font-weight: inherit; }
.cinema-hero-copy > p:not(.cinema-label) { margin: 1.5rem 0 1.75rem; max-width: 38ch; color: #f0e5d7; font-size: clamp(.98rem, 1.25vw, 1.18rem); }
.cinema-hero-caption { display: flex; gap: 12px; align-items: end; }
.cinema-hero-caption a { display: grid; line-height: 1.4; padding: .6rem .75rem; background: #211813e8; text-decoration: none; }
.cinema-hero-caption a:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.cinema-hero-caption a span { color: #f0dac1; font-size: .69rem; }
.cinema-motion-toggle {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #ab907a;
  background: #211813e8;
  color: var(--cinema-ivory);
  cursor: pointer;
}

.cinema-section { padding-block: clamp(60px, 7.8vw, 130px); }
.cinema-section > h2,
.cinema-section-head h2,
.cinema-split h2,
.cinema-faq h2,
.cinema-founder h2 { margin: 0; }
.cinema-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px 36px;
  margin-bottom: clamp(24px, 3.4vw, 56px);
}
.cinema-film-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 40px); }
.cinema-film { min-width: 0; }
.cinema-film-link { display: block; text-decoration: none; }
.cinema-film-frame {
  position: relative;
  isolation: isolate;
  overflow: clip;
  aspect-ratio: 5 / 6;
  background: #30231b;
}
.cinema-film-frame :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--film-position, center);
}
.cinema-film-frame video { position: absolute; inset: 0; opacity: 0; }
.cinema-film-frame video.is-playing { opacity: 1; }
.cinema-film-arrow {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  width: 38px;
  aspect-ratio: 1;
  place-items: center;
  background: #241b16e8;
  color: #f5eee2;
}
.cinema-film-name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 13px; }
.cinema-film-name h3 { margin: 0; }
.cinema-film-name span, .cinema-film-type { color: var(--cinema-muted); font-size: .77rem; }
.cinema-film-name span { white-space: nowrap; }
.cinema-film-type { margin: 9px 0 0; }
.cinema-film-link:is(:hover, :focus-visible) h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }

.cinema-paper {
  --cinema-muted: #5e5143;
  --cinema-line: #bcad98;
  --cinema-sand: #77512c;
  background: #eee4d5;
  color: var(--cinema-ink);
}
.cinema-paper .cinema-section + .cinema-section { padding-top: clamp(38px, 5vw, 80px); border-top: 1px solid var(--cinema-line); }
.cinema-offer-list { border-top: 1px solid var(--cinema-line); }
.cinema-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
  gap: 20px 8%;
  padding-block: clamp(23px, 3.15vw, 49px);
  border-bottom: 1px solid var(--cinema-line);
}
.cinema-offer h3 { margin: 0; }
.cinema-offer p { margin: 0; }
.cinema-offer p + p { margin-top: .55rem; color: var(--cinema-muted); }
.cinema-industries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 65px); margin-top: clamp(24px, 3vw, 48px); }
.cinema-industries article { padding-top: 18px; border-top: 1px solid var(--cinema-line); }
.cinema-industries h3 { margin: 0; }
.cinema-industries p { margin: .9rem 0 .25rem; color: var(--cinema-muted); }
.cinema-split, .cinema-faq, .cinema-close-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
  gap: 24px clamp(30px, 8vw, 145px);
  align-items: start;
}
.cinema-split :is(ul, h3) { margin-top: 0; }
.cinema-specs { margin: 0; }
.cinema-specs > div { padding-block: 13px; border-top: 1px solid var(--cinema-line); }
.cinema-specs dt { font-size: .88rem; font-weight: 690; }
.cinema-specs dd { margin: 4px 0 0; color: var(--cinema-muted); }
.cinema-process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 2.6vw, 43px);
  margin: clamp(27px, 4vw, 62px) 0 0;
  padding: 0;
  counter-reset: production-step;
  list-style: none;
}
.cinema-process li { border-top: 1px solid var(--cinema-line); padding-block: 13px 0; counter-increment: production-step; }
.cinema-process li::before { content: "0" counter(production-step); color: var(--cinema-sand); font-size: .68rem; }
.cinema-site main .cinema-process h3 { margin: .5rem 0 0; font-size: clamp(1.6rem, 2.55vw, 3.1rem); }
.cinema-process p { color: var(--cinema-muted); font-size: .89rem; }
.cinema-founder {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: 25px clamp(28px, 10vw, 170px);
  align-items: center;
  border-top: 1px solid var(--cinema-line);
}
.cinema-founder img { width: 100%; max-height: 570px; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: center 34%; }
.cinema-founder figcaption,
.cinema-detail-media figcaption { margin-top: .7rem; color: var(--cinema-muted); font-size: .78rem; }
.cinema-founder p:not(.cinema-label) { color: var(--cinema-muted); }
.cinema-faq { border-top: 1px solid var(--cinema-line); }
.cinema-questions details { border-top: 1px solid var(--cinema-line); }
.cinema-questions details:last-child { border-bottom: 1px solid var(--cinema-line); }
.cinema-questions summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 15px;
  align-items: center;
  min-height: 52px;
  padding-block: 12px;
  color: var(--cinema-ivory);
  font-weight: 620;
  cursor: pointer;
  list-style: none;
}
.cinema-questions summary::-webkit-details-marker { display: none; }
.cinema-questions summary::after { content: "+" / ""; color: var(--cinema-sand); font-size: 1.25rem; }
.cinema-questions details[open] summary::after { content: "−" / ""; }
.cinema-questions details p { margin: 0 1.65rem 1rem 0; color: var(--cinema-muted); }
.cinema-close { padding-block: clamp(58px, 7.9vw, 135px); background: #30251c; }
.cinema-close h2 { margin: 0; }
.cinema-close p { margin: 0 0 1rem; color: #eee1d2; }

.cinema-page-intro { padding-block: clamp(52px, 8vw, 135px) clamp(26px, 4.5vw, 65px); }
.cinema-page-intro h1, .cinema-detail-copy h1 { margin: 0; max-width: 11em; }
.cinema-page-intro .cinema-deck, .cinema-detail-copy .cinema-deck { max-width: 52ch; color: var(--cinema-muted); font-size: clamp(1rem, 1.5vw, 1.25rem); }
.cinema-work-grid { padding-top: 0; }
.cinema-film-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .98fr);
  gap: clamp(27px, 7vw, 115px);
  padding-block: clamp(34px, 6vw, 92px);
  align-items: start;
}
.cinema-detail-copy > .cinema-link { margin-bottom: 14px; }
.cinema-detail-copy .cinema-actions { margin-top: 20px; }
.cinema-detail-media { display: flex; gap: 12px; align-items: start; justify-content: center; }
.cinema-detail-media figure { flex: 1 1 0; min-width: 0; max-width: 440px; }
.cinema-detail-media figcaption { margin: 0 0 .55rem; }
.cinema-detail-media :is(img, video) { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.cinema-detail-player { background: #251c16; }
.cinema-detail-player .frame-play-button { white-space: nowrap; }

@media (min-width: 1050px) {
  .cinema-faq > div:first-child { position: sticky; top: 30px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cinema-site :is(.cinema-button, .frame-header-contact) { transition: background-color .19s ease, color .19s ease, border-color .19s ease; }
  .cinema-hero-copy h1 em { animation: cinema-title .68s cubic-bezier(.2, .7, .25, 1) both; }
  .cinema-site .cinema-hero-video { transition: opacity .26s ease; }
  .cinema-film-frame video { transition: opacity .16s ease; }
  @supports (animation-timeline: view()) {
    .cinema-film-frame { view-timeline-name: --film-entry; }
    .cinema-film-frame img {
      animation: cinema-frame-settle linear both;
      animation-timeline: --film-entry;
      animation-range: entry 0% entry 100%;
    }
  }
}
@keyframes cinema-title {
  from { clip-path: inset(0 0 100% 0); transform: translateY(9px); }
  to { clip-path: inset(-15% -10% -16% -10%); transform: translateY(0); }
}
@keyframes cinema-frame-settle {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}

@media (max-width: 1000px) {
  .cinema-site.subpage-body .frame-header { min-height: 70px; }
  .cinema-hero { min-height: max(620px, calc(100svh - 70px)); }
  .cinema-hero-inner { grid-template-columns: 1fr; }
  .cinema-hero-caption { justify-content: end; }
  .cinema-hero-media { left: 30%; }
}
@media (max-width: 680px) {
  .cinema-site { --cinema-gutter: 22px; }
  .cinema-hero { min-height: max(625px, calc(100svh - 70px)); }
  .cinema-hero-media { inset: 0 0 auto; height: 70%; }
  .cinema-hero-media :is(img, video) { object-position: 50% 53%; }
  .cinema-hero-shade { background: linear-gradient(0deg, #17130f 0%, #17130f 23%, #17130ff5 32%, #17130fba 48%, #17130f28 68%, transparent 85%); }
  .cinema-hero-inner { gap: 14px; padding-block: 155px 19px; }
  .cinema-site .cinema-hero h1 { font-size: clamp(3.25rem, 10.3vw, 4.7rem); }
  .cinema-hero-copy > p:not(.cinema-label) { margin: .9rem 0 1.1rem; }
  .cinema-hero-caption a { padding: .35rem .55rem; }
  .cinema-hero-caption { justify-content: space-between; }
  .cinema-section-head { align-items: start; flex-direction: column; gap: 3px; }
  .cinema-film-grid, .cinema-offer, .cinema-industries, .cinema-split,
  .cinema-faq, .cinema-close-inner, .cinema-founder, .cinema-film-detail { grid-template-columns: 1fr; }
  .cinema-film-grid { gap: 28px; }
  .cinema-film-frame { aspect-ratio: 6 / 5; }
  .cinema-process { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .cinema-founder img { max-height: 460px; }
}
@media (max-width: 350px) {
  .cinema-site.subpage-body .frame-header { width: calc(100% - 24px); }
  .cinema-button { gap: .55em; padding-inline: .65rem; }
}