/* ---------------------------------------------------------------
   thebeijingrodeo.com
   Copied from kennygeiler.com/films/beijing-rodeo, minus the site header:
   this page opens on the title card. Maison Neue-style grotesk, 15.2px base,
   #131313 on #FFF3E6 (warm cream)
   --------------------------------------------------------------- */

:root {
  --ink: #131313;
  --paper: #FFF3E6;
  --gutter: 140px;
  --base: 15.2px;
  --pad-y: 30.4px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* iOS Safari defaults this to `auto`, which inflates type inside blocks it
     decides are too narrow. That resizes text away from what is written here
     and can push a block past the viewport. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Nothing should scroll sideways. `clip` rather than `hidden` so this does
     not silently become a scroll container. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--base);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--paper);
}

a { color: inherit; text-decoration: none; }

/* Addresses are one long unbreakable token; let them break rather than
   stretch their container. */
.email, .screener__note a { overflow-wrap: anywhere; }

/* One hover language: links dim, nothing moves. Anything that changes an
   element's box on hover shifts the layout under the cursor and flickers. */
.footer a { transition: opacity 0.15s ease; }
.footer a:hover { opacity: 0.55; }
.footer a:active { opacity: 0.4; }
.footer a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  opacity: 1;
}

/* ---------------- Main ---------------- */

main {
  margin: 0 var(--gutter);
  /* The page opens on the title card; this is the room the header used to
     leave above it. */
  padding-top: var(--pad-y);
  padding-bottom: 60px;
}

/* ---------------- Title card ----------------
   Left: the banner artwork as an image. Right: the credits as live text, so
   they stay editable. Credit type is sized in cqw on wide screens so it tracks
   the banner beside it, and in rem once the two stack. */

.titlecard {
  container-type: inline-size;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4cqw;
  margin: 10px 0 clamp(40px, 6vw, 80px);
}

.titlecard p { margin: 0; }
.titlecard b { font-weight: 800; }
.titlecard i { font-style: italic; }

/* Left: banner */

.tc-banner {
  flex: 0 1 58%;
  min-width: 0;
}
.tc-credits, .tc-banner, .screener__intro { min-width: 0; }

.tc-banner img {
  display: block;
  width: 100%;
  height: auto;
  /* Lets a white-background export sit on the page ground as cleanly as a
     transparent one: white multiplies away, the black and red do not. */
  mix-blend-mode: multiply;
}

/* Right: credits */

.tc-credits {
  flex: 0 0 auto;
  text-align: right;
  /* 1.32cqw matched seven lines to the banner's height; the block is eight
     lines now (executive producers), so 7/8 of that keeps the same fit. */
  font-size: 1.155cqw;
  line-height: 1.33;
}

/* Hero trailer */
.hero-video { margin-bottom: clamp(40px, 6vw, 80px); }

/* Label above the trailer, set like the screener title so the two sections
   read as one system. */
.hero-video__title {
  margin: 0 0 14px;
  font-size: clamp(22px, 5.4vw, 26px);
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 1.15;
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.video-frame video,
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  z-index: 1;
}
/* Shown only when the <video> fails to load a source */
.video-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 20px;
  z-index: 2;
}
.video-fallback code { font-weight: 400; opacity: 0.7; margin-left: 0.4em; }
.video-fallback[hidden] { display: none; }

/* Screener request */

.screener {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: clamp(24px, 3.5vw, 40px) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}

.screener__title {
  margin: 0;
  font-size: clamp(22px, 5.4vw, 26px);
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 1.15;
}

.screener__note {
  margin: 8px 0 0;
  max-width: 34em;
  opacity: 0.75;
}
/* Permanent rule rather than one added on hover: anything that changes an
   element's box under the cursor shifts the line and flickers. */
.screener__note a { border-bottom: 1px solid currentColor; }
.screener__note a:hover { opacity: 0.6; }
.screener__note a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.screener__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  align-items: end;
}

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.field label {
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  text-transform: uppercase;
  opacity: 0.7;
}

.field input {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 6px 0;
  min-width: 0;
  transition: opacity 0.15s ease;
}
.field input::placeholder { opacity: 0.45; }
.field input:focus { outline: 0; border-bottom-width: 2px; padding-bottom: 5px; }
.field input:focus-visible { outline: 0; }

/* Kept in the tab order for bots, out of the way for everyone else */
.screener__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.screener__submit {
  grid-column: 1 / -1;
  justify-self: start;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 13px 26px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.screener__submit:hover { background: var(--paper); color: var(--ink); }
.screener__submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.screener__submit:disabled { opacity: 0.45; cursor: default; }
.screener__submit:disabled:hover { background: var(--ink); color: var(--paper); }

.screener__status {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  min-height: 1.35em;
}
.screener__status.is-error { color: #c0392b; }
.screener__status.is-ok { font-weight: 700; }

/* ---------------- Theater mode ----------------
   While the trailer is playing the page goes black and everything else steps
   back, so the only lit thing on screen is the video. Restored on pause. */

html, body { transition: background-color 0.55s ease; }

html.is-playing,
html.is-playing body { background: #000; }

html.is-playing .hero-video__title,
html.is-playing .titlecard,
html.is-playing .tc-banner,
html.is-playing .tc-credits,
html.is-playing .screener,
html.is-playing .footer {
  opacity: 0;
  pointer-events: none;
}

.hero-video__title, .titlecard, .tc-banner, .tc-credits, .screener, .footer { transition: opacity 0.55s ease; }

html.is-playing .video-frame { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  html, body,
  .hero-video__title, .titlecard, .tc-banner, .tc-credits, .screener, .footer { transition: none; }
}

/* ---------------- Footer ---------------- */

.footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0 var(--gutter);
  padding: var(--pad-y) 0;
}
.footer a { font-weight: 700; letter-spacing: 0.02em; }

/* ---------------- Responsive ---------------- */

@media (max-width: 1200px) {
  :root { --gutter: 60px; }
}

/* Stacked title card: banner full width, trailer, then the credits as a
   billing block at a readable size. Below 900px rather than 760px so iPads
   in portrait (744–834px) get it too: side by side, eight lines of credits
   beside the banner came out at ~8px there. */
@media (max-width: 900px) {
  /* Order: banner, trailer, credits. With the credits between the banner
     and the video, the trailer started ~565px down at 375px wide and most
     phones opened on a wall of billing text instead. The title card
     dissolves (display: contents) so its two halves become flex items of
     main alongside the trailer and can be reordered; its margins move onto
     them, and theater mode fades them individually (an opacity on a contents
     box applies to nothing). Credit type is already in rem at this width, so
     losing the container changes nothing there. */
  main { display: flex; flex-direction: column; }
  .titlecard { display: contents; }
  .tc-banner { order: 1; margin: 10px 0 clamp(40px, 6vw, 80px); }
  .hero-video { order: 2; }
  .tc-credits { order: 3; margin-bottom: clamp(40px, 6vw, 80px); }
  .screener { order: 4; }
  .tc-banner { flex: 0 0 auto; }
  /* Billing-block setting: role on its own line, names beneath it. Inline,
     the names wrapped mid-phrase and left orphans hanging under their role. */
  .tc-credits {
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.45;
  }
  .tc-credits p + p { margin-top: 11px; }
  .cr-role { display: block; }
  .cr-names { display: block; text-wrap: pretty; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --pad-y: 20px; }

  .screener { grid-template-columns: 1fr; gap: 22px; }
  .screener__form { grid-template-columns: 1fr; }
  .screener__submit { justify-self: stretch; text-align: center; padding: 16px 26px; }
  /* 16px keeps iOS Safari from zooming the page when a field takes focus */
  .field input { font-size: 16px; padding: 10px 0; }

  .footer { flex-direction: column; gap: 6px; }
}