:root{
  --bg:#050603;
  --gold:#d9ad45;
  --gold2:#f4d77a;
  --green:#254319;
  --red:#d51d22;
  --cream:#f2dfb3;
  --muted:#c5b896;
}

/* =========================
   RESET
========================= */
*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  font-family:Montserrat, Arial, sans-serif;
  color:#fff;
  background:
    radial-gradient(circle at 20% 18%, rgba(175,120,29,.18), transparent 27%),
    radial-gradient(circle at 90% 48%, rgba(34,72,22,.38), transparent 28%),
    linear-gradient(180deg, #010101, #071006);
  background-color:var(--bg);
}

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

/* =========================
   HEADER
========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:10;

  display:grid;
  grid-template-columns:260px 1fr;
  align-items:center;

  height:96px;
  padding:0 42px;

  background:rgba(0,0,0,.76);
  border-bottom:1px solid rgba(217,173,69,.25);

  backdrop-filter:blur(12px);
}

.brand img{
  width:auto;
  max-height:72px;
  object-fit:contain;
  display:block;
}

.nav{
  display:flex;
  justify-content:center;
  gap:50px;

  font-size:18px;
  font-weight:800;
  text-transform:uppercase;
}

.nav a{
  padding:37px 0 29px;
  border-bottom:3px solid transparent;
}

.nav a:hover,
.nav .active{
  color:var(--gold2);
  border-color:var(--gold);
}

/* =========================
   HERO
========================= */
.hero{
  padding:0;
  background:#000;
  border-bottom:1px solid rgba(217,173,69,.45);
}

.hero-player{
  width:100%;
  max-width:100%;
  margin:0;
}

.hero-player .video-js{
  width:100%;
  font-size:16px;
}

.hero-player .vjs-poster{
  background-size:cover;
  background-position:center;
}

.hero-player .vjs-poster img{
  object-fit:cover;
}

.hero-live,
.hero-tagline,
.hero-actions,
.hero-copy,
.hero-inner,
.hero-spacer{
  display:none;
}

/* =========================
   BUTTONS
========================= */
.primary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;

  padding:18px 42px;

  border:2px solid var(--gold);
  border-radius:14px;

  background:rgba(0,0,0,.32);
  box-shadow:0 0 25px rgba(217,173,69,.16);

  color:#efcc77;
  font-size:21px;
  font-weight:900;
  text-transform:uppercase;
}

.primary-btn:hover,
.outline-btn:hover{
  background:rgba(217,173,69,.13);
}

.outline-btn{
  display:inline-block;

  margin-top:18px;
  padding:17px 28px;

  border:2px solid var(--gold);
  border-radius:8px;

  color:#efcc77;
  font-weight:900;
  text-transform:uppercase;
}

/* =========================
   SHOWS ROW
========================= */
.shows-row{
  display:grid;
  grid-template-columns:260px repeat(3,1fr);
  gap:14px;

  padding:20px 42px;

  background:linear-gradient(
    180deg,
    rgba(0,0,0,.93),
    rgba(5,11,5,.95)
  );

  border-bottom:1px solid rgba(217,173,69,.35);
}

.intro-card{
  padding:12px 8px;
  color:#d8cab1;
}

.intro-card .leaf{
  color:#66a33b;
  font-size:30px;
}

.intro-card h2{
  margin:8px 0 20px;

  color:#f2cb71;
  font-size:28px;
  text-transform:uppercase;
}

.intro-card p{
  font-size:18px;
  line-height:1.7;
}

/* =========================
   SHOW CARD
========================= */
.show-card{
  position:relative;
  overflow:hidden;

  min-height:230px;

  background:#111;
  border:1px solid rgba(217,173,69,.7);
  border-radius:8px;

  box-shadow:0 10px 30px rgba(0,0,0,.28);
}

.show-card img{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
}

.show-card::after{
  content:"";

  position:absolute;
  inset:0;

  background:linear-gradient(
    180deg,
    rgba(0,0,0,.04),
    rgba(0,0,0,.72) 70%
  );
}

.show-card span{
  position:absolute;
  top:18px;
  left:20px;
  z-index:1;

  padding:8px 12px;

  background:#cf2029;
  border-radius:4px;

  color:#fff;
  font-weight:900;
  text-transform:uppercase;
}

.show-card button{
  position:absolute;
  top:76px;
  left:50%;
  z-index:1;

  width:66px;
  height:66px;

  transform:translateX(-50%);

  border:3px solid #f3dfab;
  border-radius:50%;

  background:rgba(0,0,0,.22);

  color:#fff;
  font-size:26px;
}

.show-card div{
  position:absolute;
  bottom:16px;
  left:20px;
  right:20px;
  z-index:1;
}

.show-card h3{
  margin:0 0 8px;

  font-size:24px;
  line-height:1.08;
  font-weight:900;
}

.show-card p{
  margin:0;

  color:#f5c862;
  font-size:18px;
}

/* =========================
   POSTER CARD
========================= */
.show-card--poster{
  min-height:320px;
}

.show-card--poster img{
  object-fit:contain;
  object-position:center top;
  background:#000;
}

.show-card--poster::after{
  background:linear-gradient(
    180deg,
    transparent 55%,
    rgba(0,0,0,.88)
  );
}

.show-card--poster button{
  display:none;
}

/* =========================
   ABOUT
========================= */
.about-section{
  padding:56px 42px 64px;

  background:linear-gradient(
    180deg,
    rgba(5,11,5,.98),
    rgba(0,0,0,.96)
  );

  border-bottom:1px solid rgba(217,173,69,.35);
}

.about-inner{
  max-width:880px;
  margin:0 auto;

  color:#d5c7aa;
  font-size:18px;
  line-height:1.75;
}

.about-inner p{
  margin:0 0 1.25em;
}

.about-lead,
.about-closing{
  color:#f4ddb2;
  font-weight:700;
}

.about-lead{
  font-size:20px;
}

.about-closing{
  font-size:19px;
}

.about-block{
  margin:2.5em 0;
  padding:28px 32px;

  background:rgba(0,0,0,.35);
  border:1px solid rgba(217,173,69,.4);
  border-radius:8px;
}

.about-block h2{
  margin:0 0 1em;

  color:#f2cb71;
  font-size:24px;
  font-weight:900;
  text-transform:uppercase;
}

.about-block a{
  color:var(--gold2);
  text-decoration:underline;
  text-underline-offset:3px;
}

.about-block a:hover{
  color:#fff;
}

.about-tagline{
  color:#efcc77;
  font-size:19px;
}

.about-thanks{
  margin-bottom:0;

  color:#b9a98d;
  font-style:italic;
}

/* =========================
   MEDIA
========================= */
.media-section{
  padding:48px 42px 56px;

  background:linear-gradient(
    180deg,
    rgba(5,11,5,.98),
    #050603
  );

  border-bottom:1px solid rgba(217,173,69,.35);
}

.media-section-head{
  max-width:720px;
  margin:0 auto 32px;

  text-align:center;
}

.media-section-head h2{
  margin:0 0 12px;

  color:#f2cb71;
  font-size:30px;
  font-weight:900;
  text-transform:uppercase;
}

.media-section-head p{
  margin:0;

  color:#d5c7aa;
  font-size:17px;
  line-height:1.6;
}

.media-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;

  max-width:1200px;
  margin:0 auto;
}

.media-grid--two{
  grid-template-columns:repeat(2,1fr);
}

.media-card{
  overflow:hidden;

  margin:0;

  background:#0a0a0a;
  border:1px solid rgba(217,173,69,.45);
  border-radius:8px;
}

.media-card img{
  display:block;
  width:100%;
  height:auto;
}

.media-card figcaption{
  padding:12px 14px;

  color:#efcc77;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  text-align:center;
  text-transform:uppercase;
}

/* =========================
   FEATURE IMAGE
========================= */
.shows-feature{
  padding:0 42px 28px;

  background:linear-gradient(
    180deg,
    rgba(5,11,5,.95),
    rgba(0,0,0,.93)
  );

  border-bottom:1px solid rgba(217,173,69,.35);
}

.shows-feature img{
  display:block;

  width:100%;
  max-width:1200px;
  height:auto;

  margin:0 auto;

  border:1px solid rgba(217,173,69,.45);
  border-radius:8px;
}

/* =========================
   CONTACT BUTTONS
========================= */
.contact-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;

  margin-top:16px;
}

.contact-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:12px 18px;

  border-radius:999px;

  color:#fff;
  font-weight:700;
  text-decoration:none;

  transition:.25s ease;
}

.contact-btn:hover{
  transform:translateY(-2px);
  opacity:.9;
}

.contact-btn.phone{
  background:#2b2b2b;
}

.contact-btn.whatsapp{
  background:#25D366;
}

.contact-btn.line{
  background:#06C755;
}

/* =========================
   FOOTER
========================= */
.footer{
    width: 100%;
  display:flex;
  justify-content: space-between;
  gap:24px;

  min-height:120px;
  padding:28px 42px;

  color:#deb66b;

  background:linear-gradient(
    90deg,
    #061106,
    #101206,
    #061106
  );
}

.socials{
  display:flex;
  gap:16px;
}

.socials a{
  display:grid;
  place-items:center;

  width:34px;
  height:34px;

  border:1px solid var(--gold);
  border-radius:50%;

  font-weight:900;
}

.footer-info {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.footer-info p{
  margin:0 0 8px;

  color:#c5b896;
  font-size:15px;
  line-height:1.55;
}

.footer-info .tagline{
  margin-bottom:12px;

  color:#d9ad45;
  font-family:'Playfair Display', serif;
  font-size:28px;
  letter-spacing:.08em;
}

.footer-info a{
  color:var(--gold2);
}

.footer-info a:hover{
  color:#fff;
}

.footer-nav{
  display:flex;
  justify-content:end;
  gap:34px;

  font-size:14px;
  text-transform:uppercase;
}

.footer p{
  color:#b99755;
  font-size:14px;
  text-align:right;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1100px){

  .site-header{
    grid-template-columns:1fr auto;
  }

  .nav{
    display:none;
  }

  .shows-row{
    grid-template-columns:1fr 1fr;
  }

  .about-section{
    padding:40px 24px;
  }

  .media-grid{
    grid-template-columns:1fr 1fr;
  }

  .media-grid--two{
    grid-template-columns:1fr;
  }

  .media-card:last-child{
    grid-column:1 / -1;

    width:100%;
    max-width:480px;

    justify-self:center;
  }

  .shows-feature{
    padding:0 20px 24px;
  }

  .footer{
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer-nav,
  .socials{
    justify-content:center;
  }

  .footer p{
    text-align:center;
  }
}

@media (max-width:680px){

  .site-header{
    height:auto;
    padding:14px 18px;
  }

  .brand img{
    max-height:56px;
  }

  .shows-row{
    grid-template-columns:1fr;
    padding:20px;
  }

  .show-card{
    min-height:245px;
  }

  .media-section{
    padding:36px 16px;
  }

  .media-grid{
    grid-template-columns:1fr;
  }

  .media-card:last-child{
    max-width:none;
  }

  .shows-feature{
    padding:0 16px 20px;
  }

  .footer-nav{
    flex-wrap:wrap;
    gap:16px;
  }

  .tagline{
    font-size:24px;
  }
}