.reality-reel {
  padding: 7rem 4vw;
  background: var(--ink);
  color: var(--paper);
  border-bottom: var(--line);
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 5vw;
}
.reality-title { align-self: center; position: sticky; top: 130px; }
.reality-title h2 {
  font: 400 clamp(4.5rem, 8vw, 9rem)/.82 "Anton";
  letter-spacing: -.025em;
  margin: 0;
}
.reality-title h2 span { color: var(--pink); -webkit-text-stroke: 1px var(--paper); }
.reality-title > p:last-child { font-size: 1.1rem; line-height: 1.55; max-width: 32rem; margin-top: 2rem; }
.reality-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.reality-card { margin: 0; background: var(--paper); color: var(--ink); border: 2px solid var(--paper); position: relative; overflow: hidden; }
.reality-card img { width: 100%; height: 420px; display: block; object-fit: cover; filter: saturate(1.12) contrast(1.04); }
.reality-card figcaption { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; }
.reality-card figcaption b { font: 400 1.55rem "Anton"; }
.reality-card figcaption span { font-size: .75rem; font-weight: 700; text-transform: uppercase; text-align: right; }
.card-a { transform: rotate(-2deg); }
.card-b { margin-top: 5rem; transform: rotate(2deg); }
.card-c { grid-column: 1 / -1; margin: 1rem 3rem 0; transform: rotate(-1deg); }
.card-c img { height: 350px; }
.confessional { grid-column: 1 / -1; background: var(--blue); color: var(--ink); padding: 2rem; border: 2px solid var(--paper); box-shadow: 8px 8px 0 var(--pink); transform: rotate(1deg); margin: 1rem 1rem 0; }
.confessional > span { display: inline-block; background: var(--lime); border: 2px solid var(--ink); padding: .35rem .55rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.confessional blockquote { font: 400 clamp(2.2rem, 4vw, 4.5rem)/.95 "Anton"; margin: 1.5rem 0; }
.confessional p { margin: 0; text-transform: uppercase; font-weight: 700; font-size: .75rem; letter-spacing: .1em; }
.hero-poster .logo-frame { width: min(94%, 720px); filter: drop-shadow(0 18px 22px rgba(0,0,0,.72)); }
.hero-poster .logo-frame::after { border-color: rgba(234,255,47,.78); }
.hero-poster .logo-frame img { clip-path: none; }
.showreel {
  position: relative;
  isolation: isolate;
  min-height: 82vh;
  padding: 5rem 7vw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  align-items: center;
  gap: clamp(3rem, 8vw, 9rem);
  overflow: hidden;
  background: #140018;
  color: var(--paper);
  border-bottom: var(--line);
}
.showreel::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: -2;
  background: url("btw-showreel-poster.jpg") center 38% / cover;
  filter: blur(28px) saturate(1.35);
  opacity: .48;
  transform: scale(1.12);
}
.showreel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(9,9,9,.94) 0%, rgba(9,9,9,.73) 48%, rgba(9,9,9,.28) 100%);
}
.showreel-copy { max-width: 58rem; }
.showreel .eyebrow { color: var(--lime); }
.showreel h2 {
  margin: 0;
  font: 400 clamp(4.5rem, 8vw, 8.5rem)/.84 "Anton";
  letter-spacing: -.025em;
  text-shadow: 6px 6px 0 var(--ink);
}
.showreel-screen {
  position: relative;
  justify-self: center;
  width: min(100%, 430px);
  max-height: 76vh;
  aspect-ratio: 9 / 16;
  background: var(--ink);
  border: 4px solid var(--paper);
  box-shadow: 14px 14px 0 var(--pink), -12px -12px 0 var(--lime);
  transform: rotate(1deg);
  overflow: hidden;
}
.showreel-screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
}
.showreel-label,
.showreel-toggle {
  position: absolute;
  z-index: 2;
  border: 2px solid var(--ink);
  color: var(--ink);
  font: 700 .72rem "DM Sans";
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--ink);
}
.showreel-label {
  top: 1rem;
  left: 1rem;
  padding: .5rem .65rem;
  background: var(--lime);
  transform: rotate(-2deg);
}
.showreel-toggle {
  right: 1rem;
  bottom: 1rem;
  padding: .65rem .75rem;
  background: var(--pink);
  cursor: pointer;
}
.showreel-toggle:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.camera-roll { background: var(--pink); border-bottom: var(--line); padding: 1rem 0 1.5rem; overflow: hidden; }
.camera-roll-head { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 4vw 1.25rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
.camera-roll-head b { background: var(--lime); border: 2px solid var(--ink); padding: .25rem .45rem; transform: rotate(1deg); }
.camera-roll-grid { display: flex; gap: .75rem; width: 100%; padding: 0 1rem 1rem; overflow-x: auto; scroll-snap-type: x proximity; }
.camera-roll figure { flex: 0 0 clamp(220px, 21vw, 360px); margin: 0; background: var(--paper); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); scroll-snap-align: start; }
.camera-roll figure:nth-child(even) { transform: rotate(1deg); }
.camera-roll figure:nth-child(odd) { transform: rotate(-1deg); }
.camera-roll img { display: block; width: 100%; height: 260px; object-fit: cover; }
.camera-roll figcaption { padding: .75rem; font: 400 1.2rem "Anton"; letter-spacing: .02em; }
.camera-manifesto { margin-top: 2rem; padding: 5rem 4vw 3.5rem; background: var(--lime); border-top: var(--line); display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; align-items: end; color: var(--ink); }
.camera-manifesto p { margin: 0 0 1.5rem; font-weight: 700; letter-spacing: .08em; line-height: 1.4; }
.camera-manifesto h2 { margin: 0; font: 400 clamp(5rem, 10vw, 11rem)/.8 "Anton"; letter-spacing: -.025em; }
.camera-manifesto h2 span { color: var(--pink); -webkit-text-stroke: 2px var(--ink); }
.camera-manifesto > b { grid-column: 1 / -1; justify-self: end; background: var(--pink); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); padding: .55rem .75rem; letter-spacing: .1em; transform: rotate(-1deg); }
.ticker span { flex: 0 0 auto; min-width: max-content; }
.signup-art { position: relative; width: min(100%, 520px); margin-top: 2rem; border: var(--line); box-shadow: 8px 8px 0 var(--ink); overflow: hidden; transform: rotate(-1deg); }
.signup-photo { display: block; width: 100%; height: 300px; object-fit: cover; }
.signup-logo { position: absolute; width: 42%; height: auto; right: .8rem; bottom: .4rem; filter: drop-shadow(0 8px 10px rgba(0,0,0,.65)); }
.signup-art.cast-art { border: 0; box-shadow: none; overflow: visible; background: transparent; transform: none; }
.signup-cast { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 16px rgba(0,0,0,.38)); }
@media (max-width: 900px) {
  .showreel { grid-template-columns: 1fr; padding: 6rem 5vw; gap: 4rem; }
  .showreel::after { background: rgba(9,9,9,.74); }
  .showreel-screen { width: min(84vw, 420px); max-height: none; }
  .reality-reel { grid-template-columns: 1fr; padding: 6rem 5vw; }
  .reality-title { position: static; }
  .camera-manifesto { grid-template-columns: 1fr; }
  .camera-manifesto > b { grid-column: auto; justify-self: start; }
}
@media (max-width: 560px) {
  .showreel { padding: 5rem 5vw 6rem; }
  .showreel h2 { font-size: 4.35rem; }
  .showreel-screen { width: min(88vw, 390px); box-shadow: 9px 9px 0 var(--pink), -8px -8px 0 var(--lime); }
  .reality-title h2 { font-size: 4.2rem; }
  .reality-grid { grid-template-columns: 1fr; }
  .reality-card, .card-a, .card-b, .card-c { grid-column: auto; margin: 0; transform: none; }
  .reality-card img, .card-c img { height: 360px; }
  .confessional { grid-column: auto; margin: 0; transform: none; }
  .camera-roll-head { align-items: flex-start; flex-direction: column; }
  .camera-roll figure { flex-basis: 76vw; }
  .camera-manifesto { padding: 4rem 5vw 3rem; gap: 1.5rem; }
  .camera-manifesto h2 { font-size: 5.2rem; }
  .signup-photo { height: 240px; }
}
