:root {
  --bg: #111111;
  --frame: #1a1a1a;
  --yellow: #f5e64e;
  --magenta: #ff3d8a;
  --paper: #f4f4f0;
  --mute: #b5b5b0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Karla", sans-serif;
  background: var(--bg);
  color: var(--paper);
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }

.film {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
}
.sprocket {
  background:
    radial-gradient(circle at 50% 18px, var(--bg) 7px, transparent 8px) 0 0 / 36px 36px,
    #2a2a2a;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 28px;
  background: var(--yellow);
  color: #111;
}
.logo {
  font-family: "Teko", sans-serif;
  font-size: 34px;
  line-height: 0.9;
  letter-spacing: 0.04em;
}
.logo span { display: block; font-size: 14px; letter-spacing: 0.22em; }
nav { display: flex; gap: 18px; font-weight: 700; flex-wrap: wrap; }
nav a:hover { color: var(--magenta); }
.menu {
  display: none;
  border: 2px solid #111;
  background: transparent;
  padding: 6px 10px;
  font-weight: 800;
}

.hero { padding: 48px 28px 20px; }
.kicker {
  color: var(--yellow);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
}
h1, h2, h3 { font-family: "Teko", sans-serif; letter-spacing: 0.02em; line-height: 0.9; }
.hero h1 { font-size: clamp(3.4rem, 9vw, 7.2rem); max-width: 14ch; margin: 10px 0 16px; }
.hero p { max-width: 52ch; color: var(--mute); font-size: 1.1rem; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 32px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  font-weight: 800;
  border: 0;
  cursor: pointer;
}
.btn-y { background: var(--yellow); color: #111; }
.btn-m { background: var(--magenta); color: #fff; }
.btn-line { background: transparent; color: var(--paper); border: 2px solid var(--paper); }

.strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.strip figure { background: #000; }
.strip img { height: 210px; width: 100%; object-fit: cover; }
.strip figcaption {
  padding: 10px 12px;
  font-family: "Teko", sans-serif;
  font-size: 22px;
  color: var(--yellow);
}

.band { padding: 56px 28px; }
.band h2 { font-size: clamp(2.4rem, 6vw, 4.2rem); margin: 8px 0 12px; }
.lede { color: var(--mute); max-width: 58ch; }

.offers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 24px;
}
.offer { background: var(--frame); padding: 20px; }
.offer:nth-child(odd) { background: #222; }
.offer h3 { font-size: 1.8rem; color: var(--yellow); margin-bottom: 8px; }

.studio { background: var(--yellow); color: #111; }
.studio .kicker, .studio .lede { color: #3a3a00; }
.soft {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 8px;
  margin-top: 24px;
}
.soft article { background: #111; color: var(--paper); }
.soft img { width: 100%; height: 250px; object-fit: cover; object-position: top; }
.soft h3, .soft p { padding: 0 16px; }
.soft h3 { padding-top: 14px; font-size: 1.8rem; color: var(--yellow); }
.soft p { padding-bottom: 16px; color: var(--mute); }
.col { display: grid; gap: 8px; }
.col img { height: 160px; }

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 24px;
}
.facts div { background: var(--frame); padding: 16px; }
.facts small { display: block; color: var(--magenta); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; }

.credits {
  background: var(--magenta);
  color: #fff;
  text-align: center;
  padding: 56px 24px 48px;
}
.credits-head {
  font-weight: 800;
  letter-spacing: 0.4em;
  font-size: 12px;
}
.credits-title {
  font-family: "Teko", sans-serif;
  font-size: clamp(3rem, 8vw, 5.5rem);
  margin: 10px 0 28px;
}
.credits dl {
  display: grid;
  gap: 14px;
  max-width: 520px;
  margin: 0 auto;
}
.credits dt {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.75;
}
.credits dd { font-family: "Teko", sans-serif; font-size: 28px; }

.location-plate {
  position: relative;
  height: 420px;
  overflow: hidden;
  border-top: 10px solid #000;
  border-bottom: 10px solid #000;
}
.location-plate iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) sepia(0.2) contrast(1.2);
  pointer-events: none;
}
.clapper {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 180px;
  background: #111;
  color: var(--yellow);
  padding: 12px 14px 16px;
  font-family: "Teko", sans-serif;
  transform: rotate(-6deg);
  box-shadow: 8px 8px 0 var(--yellow);
}
.clapper b {
  display: block;
  background: repeating-linear-gradient(45deg, #111 0 10px, var(--yellow) 10px 20px);
  height: 18px;
  margin: -12px -14px 10px;
}
.clapper span { display: block; font-size: 22px; line-height: 1; }

.callsheet {
  background: var(--yellow);
  color: #111;
  padding: 22px 28px 28px;
}
.slate {
  font-family: "Teko", sans-serif;
  font-size: 28px;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.sheet-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr auto;
  gap: 12px;
  align-items: end;
}
.callsheet label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: grid;
  gap: 6px;
}
.callsheet input {
  width: 100%;
  border: 0;
  background: #111;
  color: var(--yellow);
  padding: 12px 10px;
}
.btn-roll {
  background: var(--magenta);
  color: #fff;
  border: 0;
  font-family: "Teko", sans-serif;
  font-size: 28px;
  padding: 8px 22px;
  cursor: pointer;
  height: 48px;
}
.callsheet .note { color: #3a3a00; font-size: 13px; margin-top: 10px; }

.foot {
  padding: 20px 28px 40px;
  color: var(--mute);
  font-size: 14px;
}

@media (max-width: 900px) {
  .film { grid-template-columns: 1fr; }
  .sprocket { display: none; }
  .strip, .offers, .soft, .facts { grid-template-columns: 1fr; }
  .sheet-row { grid-template-columns: 1fr; }
  nav { display: none; width: 100%; flex-direction: column; }
  nav.open { display: flex; }
  .menu { display: block; }
  .top { flex-wrap: wrap; }
  .location-plate { height: 280px; }
  .clapper { right: 12px; bottom: 12px; }
}