/* =====================================================
   FILM CRIB REALITY SHOW
   Design tokens
   ===================================================== */
:root{
  --ink:        #14100D;   /* undeveloped-film black-brown, matched to logo's true black */
  --ink-2:      #211A15;   /* raised panel */
  --ink-3:      #2B2218;   /* card surface */
  --gold:       #F2A227;   /* brand amber, sampled from the logo's window light */
  --gold-deep:  #C77F18;
  --coral:      #D4321F;   /* brand red, sampled from the logo's "CRIB" lettering */
  --coral-deep: #A52415;
  --coral-bright: #EE5036; /* lightened red for large display type on dark */
  --silver:     #C7C2BB;   /* sampled from the logo's "FILM" lettering */
  --jade:       #2E8C72;   /* cool contrast accent */
  --jade-deep:  #1F6450;
  --parchment:  #F3E9DA;   /* primary light text */
  --parchment-dim: #C9BBA6;/* muted light text */

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;

  --max-w: 1180px;
  --gap: clamp(1.5rem, 4vw, 3rem);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================
   Reset
   ===================================================== */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; }

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--gold); color:var(--ink); padding:.6rem 1rem; z-index:200;
}
.skip-link:focus{ left:1rem; top:1rem; }

a:focus-visible, button:focus-visible, .nav-toggle:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.section-inner{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 5vw, 2.5rem);
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral-bright);
  display:flex;
  align-items:center;
  gap:.5rem;
  margin: 0 0 1rem;
}
.eyebrow-on-dark{ color: var(--gold); }
.eyebrow-dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--coral);
  box-shadow: 0 0 0 3px rgba(212,50,31,0.25);
}

.section-title{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.05;
  color: var(--parchment);
  margin-bottom: 1.1rem;
}

.body-text{
  max-width: 42rem;
  color: var(--parchment-dim);
  font-size: 1.02rem;
  margin: 0 0 1.1rem;
}
.body-text-center{ margin-inline:auto; text-align:center; }

/* =====================================================
   Reveal-on-scroll
   ===================================================== */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }

/* =====================================================
   Buttons
   ===================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: .9rem 1.6rem;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-primary{
  background: var(--coral);
  color: var(--parchment);
  box-shadow: 0 6px 0 var(--coral-deep);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 8px 0 var(--coral-deep); }
.btn-primary:active{ transform: translateY(2px); box-shadow: 0 2px 0 var(--coral-deep); }
.btn-ghost{
  border-color: rgba(243,233,218,0.35);
  color: var(--parchment);
}
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold); }
.btn-large{ padding: 1.1rem 2.2rem; font-size: 0.9rem; }

/* =====================================================
   Header / Nav
   ===================================================== */
.site-header{
  position: sticky;
  top:0;
  z-index: 100;
  background: rgba(22,17,13,0.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(243,233,218,0.08);
}
.nav-wrap{
  max-width: var(--max-w);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: .9rem clamp(1.25rem, 5vw, 2.5rem);
}
.brand{ display:flex; align-items:center; gap:.55rem; }
.brand-icon{
  height: 34px;
  width: auto;
}
.brand-name{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 1.2rem;
  line-height: 1;
}
.brand-name-film{ color: var(--silver); }
.brand-name-crib{ color: var(--coral-bright); }

.site-nav{
  display:flex;
  align-items:center;
  gap: clamp(1rem, 2vw, 2rem);
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.site-nav a{
  position:relative;
  color: var(--parchment-dim);
  padding-bottom: .3rem;
}
.site-nav a:hover{ color: var(--gold); }
.site-nav a:not(.nav-cta)::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background: var(--gold);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.site-nav a:not(.nav-cta):hover::after{ transform: scaleX(1); }
.nav-cta{
  background: var(--gold);
  color: var(--ink) !important;
  padding: .5rem 1rem;
  border-radius: 3px;
}
.nav-cta:hover{ background: var(--gold-deep); }

.nav-toggle-input{ display:none; }
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:.4rem;
}
.nav-toggle span{
  width:24px; height:2px; background:var(--parchment); display:block;
  transition: transform .25s ease, opacity .25s ease;
}

/* =====================================================
   Hero
   ===================================================== */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgba(242,162,39,0.10), transparent 60%),
    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(212,50,31,0.12), transparent 60%),
    var(--ink);
  padding-top: clamp(2.5rem, 6vw, 4rem);
}
.hero-inner{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 2.5rem) clamp(3rem, 6vw, 4rem);
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items:center;
}
.hero-title{
  font-family: var(--font-display);
  text-transform:uppercase;
  font-size: clamp(3.2rem, 9vw, 6.2rem);
  line-height: 0.92;
  color: var(--silver);
  letter-spacing: .01em;
}
.hero-title-break{ display:block; color: var(--coral-bright); }
.hero-sub{
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  letter-spacing: .35em;
  color: var(--coral-bright);
  margin: .6rem 0 1.4rem;
}
.hero-tagline{
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 500;
  color: var(--parchment);
  margin: 0 0 1.2rem;
}
.hero-tagline span{ color: var(--gold); }
.hero-desc{
  color: var(--parchment-dim);
  max-width: 36rem;
  margin: 0 0 2rem;
}
.hero-actions{ display:flex; gap: 1rem; flex-wrap: wrap; }

/* --- Hero key art: the real "Ready for Spotlight" poster, lit like it's on set --- */
.hero-visual{
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
}
.spotlight-glow{
  position:absolute;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle, rgba(242,162,39,0.32) 0%, rgba(242,162,39,0.10) 38%, transparent 70%);
  filter: blur(6px);
  animation: spotlightPulse 4.5s ease-in-out infinite;
  z-index: 0;
}
@keyframes spotlightPulse{
  0%, 100% { opacity: .75; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce){
  .spotlight-glow{ animation: none; opacity: .85; }
}
.hero-poster{
  position: relative;
  z-index: 1;
  width: min(340px, 100%);
  border-radius: 6px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(243,233,218,0.08);
}

/* --- Filmstrip divider (sprocket motif) --- */
.filmstrip{
  height: 22px;
  background:
    radial-gradient(circle, var(--ink) 5px, transparent 6px) 0 0/26px 22px repeat-x,
    var(--coral);
  border-top: 1px solid rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(0,0,0,0.3);
}
.filmstrip-sm{ height: 14px; background-size: 20px 14px; opacity:.55; }

/* =====================================================
   About
   ===================================================== */
.about-grid{
  display:grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: var(--gap);
  align-items:start;
}
.pull-card{
  background: var(--ink-2);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 2rem;
}
.pull-quote{
  font-family: var(--font-display);
  text-transform: none;
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--gold);
  margin: 0 0 1rem;
}
.pull-cite{
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .05em;
  color: var(--parchment-dim);
  text-transform: uppercase;
}

/* =====================================================
   Productions / key art
   ===================================================== */
.productions{ background: var(--ink); }
.productions .body-text{ max-width: 46rem; }
.productions em{ color: var(--gold); font-style: normal; }
.keyart-gallery{
  margin-top: 3rem;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.keyart-card{
  margin:0;
  transition: transform .3s ease;
}
.keyart-card img{
  width:100%;
  border-radius: 6px;
  box-shadow: 0 18px 36px rgba(0,0,0,0.5);
}
.keyart-card-offset{ transform: translateY(2.5rem); }
.keyart-card:hover{ transform: translateY(-6px); }
.keyart-card-offset:hover{ transform: translateY(2.5rem) translateY(-6px); }
.keyart-tag{
  display:block;
  margin-top: .9rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  text-align:center;
}

/* =====================================================
   Vision & Mission
   ===================================================== */
.vm-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
}
.vm-panel{ padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 3.5rem); }
.vm-vision{ background: var(--jade-deep); }
.vm-mission{ background: var(--ink-2); }
.vm-statement{
  font-size: 1.25rem;
  color: var(--parchment);
  max-width: 28rem;
}
.shot-list li{
  display:flex;
  gap: 1rem;
  align-items:baseline;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(243,233,218,0.1);
}
.shot-list li:last-child{ border-bottom:none; }
.shot-no{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--coral-bright);
  flex-shrink:0;
  width: 4.2rem;
}
.shot-text{ color: var(--parchment); }

/* =====================================================
   Casting / roles
   ===================================================== */
.casting{ background: var(--ink); }
.role-grid{
  margin-top: 2.5rem;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.role-card{
  background: var(--ink-3);
  border: 1px solid rgba(243,233,218,0.08);
  border-radius: 6px;
  padding: 1.6rem 1.5rem;
  transition: transform .25s ease, border-color .25s ease;
}
.role-card:hover{
  transform: translateY(-4px);
  border-color: var(--gold);
}
.role-tag{
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--coral-bright);
}
.role-card h3{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.25rem;
  color: var(--gold);
  margin: .6rem 0 .5rem;
}
.role-card p{ color: var(--parchment-dim); font-size: .92rem; margin:0; }

/* =====================================================
   Vote
   ===================================================== */
.vote{ background: var(--ink); }
.vote-grid{
  margin-top: 2.5rem;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.vote-card{
  background: var(--ink-3);
  border: 1px solid rgba(243,233,218,0.08);
  border-radius: 8px;
  padding: 2rem 1.75rem;
  transition: transform .25s ease, border-color .25s ease;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.vote-card:hover{ transform: translateY(-4px); border-color: var(--gold); }
.vote-card-primary{
  border-color: var(--coral);
  background: linear-gradient(160deg, var(--ink-3) 60%, rgba(212,50,31,0.12));
}
.vote-card h3{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--gold);
  margin: .6rem 0 .6rem;
}
.vote-card > p{ color: var(--parchment-dim); font-size: .95rem; margin: 0 0 1.4rem; }
.vote-btn{ width:100%; justify-content:center; text-align:center; }
.vote-rate{
  margin: 1.1rem 0 0;
  font-family: var(--font-mono);
  color: var(--parchment);
  font-size: 1.3rem;
}
.vote-rate span{ font-size: .7rem; color: var(--parchment-dim); text-transform:uppercase; letter-spacing:.06em; }

.bank-details{
  width:100%;
  margin: 0 0 1.4rem;
  border-top: 1px solid rgba(243,233,218,0.1);
}
.bank-details div{
  display:flex;
  justify-content:space-between;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid rgba(243,233,218,0.1);
}
.bank-details dt{
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}
.bank-details dd{
  margin:0;
  font-weight: 600;
  color: var(--parchment);
  text-align:right;
}

@media (max-width: 640px){
  .vote-grid{ grid-template-columns: 1fr; }
}

/* =====================================================
   Slogan banner
   ===================================================== */
.banner{
  background: var(--coral);
  padding: clamp(3rem, 8vw, 5rem) 1.5rem;
  text-align:center;
}
.banner-text{
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
  font-size: clamp(1.6rem, 4.2vw, 2.6rem);
  line-height: 1.25;
  max-width: 50rem;
  margin: 0 auto;
}
.banner-text span{
  display:block;
  font-size: 0.55em;
  margin-top: .6rem;
  color: rgba(22,17,13,0.78);
}

/* =====================================================
   Join / CTA
   ===================================================== */
.join{
  background: var(--ink-2);
  text-align:center;
}
.join-inner{ display:flex; flex-direction:column; align-items:center; }
.join-title{ font-size: clamp(3rem, 8vw, 5rem); color: var(--gold); }
.join-text{
  color: var(--parchment-dim);
  max-width: 34rem;
  margin: 0 0 2rem;
}

/* =====================================================
   Footer
   ===================================================== */
.site-footer{
  background: var(--ink);
  border-top: 1px solid rgba(243,233,218,0.08);
  padding: clamp(2.5rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 2.5rem) 1.5rem;
}
.footer-inner{
  max-width: var(--max-w);
  margin: 0 auto;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 2rem;
}
.footer-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; max-width: 22rem; }
.footer-logo{ height: 120px; width:auto; }
.footer-slogan{ color: var(--parchment-dim); font-size: .88rem; margin:.4rem 0 0; }
.footer-nav{
  display:flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  align-content: flex-start;
}
.footer-nav a{ color: var(--parchment-dim); }
.footer-nav a:hover{ color: var(--gold); }
.footer-copy{
  text-align:center;
  color: var(--parchment-dim);
  font-size: .75rem;
  margin: 2.5rem 0 0;
  opacity:.7;
}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; text-align:center; }
  .hero-actions{ justify-content:center; }
  .hero-visual{ order:-1; max-width: 280px; margin: 0 auto 1rem; }
  .about-grid{ grid-template-columns: 1fr; }
  .vm-grid{ grid-template-columns: 1fr; }
  .role-grid{ grid-template-columns: repeat(2, 1fr); }
  .keyart-gallery{ grid-template-columns: 1fr; max-width: 26rem; margin-inline:auto; }
  .keyart-card-offset{ transform:none; }
  .keyart-card-offset:hover{ transform: translateY(-6px); }
}

@media (max-width: 720px){
  .site-nav{
    position:absolute;
    top: 100%; left:0; right:0;
    background: var(--ink-2);
    flex-direction:column;
    align-items:flex-start;
    padding: 1.25rem 1.5rem 1.75rem;
    gap: 1rem;
    border-bottom: 1px solid rgba(243,233,218,0.08);
    transform: translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle{ display:flex; }
  .nav-toggle-input:checked ~ .site-nav{
    transform: translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(2){ opacity:0; }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 560px){
  .role-grid{ grid-template-columns: 1fr; }
  .footer-inner{ flex-direction:column; }
}