:root{
  /* =====================================================
     COLOR SYSTEM — PROVIDED POSTER PALETTE
     ===================================================== */

  /* Core backgrounds */
  --bg:#15130F;        /* color-9 / color-10 */
  --panel:#16140F;     /* color-8 */
  --panel2:#1A1A1A;    /* color-7 */

  /* Brand reds */
  --red:#C53318;       /* color-3 */
  --red2:#BD3017;      /* color-4 */
  --red-dark:#692213;  /* color-5 */

  /* Text tones */
  --cream:#EECBA0;     /* color-1 */
  --text:#F2E6D2;      /* derived light cream */
  --muted:#6C6451;     /* color-2 */

  /* Effects */
  --shadow:rgba(0,0,0,.7);
  --border:rgba(197,51,24,.55);

  /* =====================================================
     TYPOGRAPHY SCALE — RELATIVE TO POSTER TITLE
     ===================================================== */

  --title-size: clamp(6rem, 14vw, 10rem);
  --section-title-size: calc(var(--title-size) * 0.32);
  --subheading-size: calc(var(--title-size) * 0.22);
  --body-size: calc(var(--title-size) * 0.16);
  --small-size: calc(var(--title-size) * 0.13);
}

*{
  box-sizing:border-box;
}

/* =====================================================
   PAGE BACKGROUND (POSTER LOOK)
   ===================================================== */

.poster-page{
  background:
    radial-gradient(900px 600px at 50% 0%, rgba(197,51,24,.22), transparent 55%),
    linear-gradient(var(--panel2), var(--bg));
  color: var(--text);
  font-family:"Oswald", Arial, sans-serif;
  margin:0;
}

/* Constrain width to poster proportions */
.poster{
  max-width:860px;
}

/* =====================================================
   TITLE / HERO
   ===================================================== */

.poster-title{
  font-family:"Bebas Neue", sans-serif;
  font-size:var(--title-size);
  letter-spacing:10px;
  line-height:.85;
  text-transform:uppercase;
  color:var(--red);
  text-shadow:
    0 10px 30px rgba(0,0,0,.7),
    0 0 40px rgba(197,51,24,.35);
}

/* Tagline bar */
.tagline-bar{
  display:inline-block;
  background:linear-gradient(180deg,var(--red),var(--red2));
  color:var(--cream);
  padding:14px 20px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  border:1px solid rgba(0,0,0,.35);
  box-shadow:0 14px 28px rgba(0,0,0,.35);
  font-size:var(--small-size);
}

/* =====================================================
   BUTTONS (POSTER STYLE)
   ===================================================== */

.btn{
  border-radius:10px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:12px 16px;
  font-size:var(--small-size);
}

.btn-poster-primary{
  background:var(--red);
  border:1px solid rgba(0,0,0,.35);
  color:var(--cream);
}

.btn-poster-primary:hover{
  filter:brightness(1.08);
}

.btn-poster-ghost{
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.25);
  color:var(--text);
}

.btn-poster-ghost:hover{
  border-color:rgba(255,255,255,.45);
}

/* =====================================================
   SECTION HEADINGS
   ===================================================== */

.section-heading{
  font-family:"Bebas Neue", sans-serif;
  font-size:var(--section-title-size);
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--cream);
  margin:0 0 12px;
}

.section-subheading,
.box-title{
  font-family:"Bebas Neue", sans-serif;
  font-size:var(--subheading-size);
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--cream);
  margin-bottom:10px;
}

/* =====================================================
   BODY TEXT
   ===================================================== */

.poster-body,
.booking-lines,
.box-body{
  font-size:var(--body-size);
  line-height:1.55;
  font-weight:300;
  color:var(--text);
}

/* =====================================================
   VINYL GRAPHIC
   ===================================================== */

/* SPIN ANIMATION */
@keyframes vinyl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* VINYL RECORD */
.vinyl{
  width:220px;
  aspect-ratio:1 / 1;
  border-radius:50%;
  position:relative;

  /* Realistic vinyl: grooves + subtle sheen + base color */
  background:
    /* moving highlight sheen (rotation visible) */
    conic-gradient(
      from 25deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,0) 70deg,
      rgba(0,0,0,.18) 140deg,
      rgba(255,255,255,0) 240deg,
      rgba(0,0,0,.12)
    ),
    /* circular grooves */
    repeating-radial-gradient(
      circle at center,
      rgba(0,0,0,.22) 0 2px,
      rgba(0,0,0,0) 2px 6px
    ),
    /* dark vinyl base */
    radial-gradient(circle at 35% 35%,
      rgba(255,255,255,.10),
      rgba(0,0,0,0) 45%
    ),
    radial-gradient(circle,
      #111 0%,
      #0a0a0a 55%,
      #000 100%
    );

  border:2px solid rgba(255,255,255,.06);
  box-shadow:
    0 18px 40px rgba(0,0,0,.65),
    inset 0 0 0 2px rgba(255,255,255,.05);

  /* Spin */
  animation: vinyl-spin 18s linear infinite;
  transform-origin: 50% 50%;
}

/* CENTER LABEL (RED) */
.vinyl-center{
  position:absolute;
  inset:50%;
  width:74px;
  height:74px;
  transform:translate(-50%, -50%);
  border-radius:50%;

  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 45%),
    radial-gradient(circle, var(--red) 0%, var(--red2) 65%, var(--red-dark) 100%);

  box-shadow:
    0 0 0 6px #000,
    0 0 0 8px rgba(255,255,255,.06);
}

/* SPINDLE HOLE */
.vinyl-center::after{
  content:"";
  position:absolute;
  inset:50%;
  width:12px;
  height:12px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:#000;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce){
  .vinyl{ animation:none; }
}

 


/* =====================================================
   LISTS
   ===================================================== */

.poster-list{
  list-style:none;
  padding:0;
  margin:0;
}

.poster-list li{
  font-size:var(--body-size);
  margin:10px 0;
  padding-left:18px;
  position:relative;
  font-weight:300;
}

.poster-list li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:var(--red);
  font-weight:900;
}

/* =====================================================
   BOTTOM BOXES
   ===================================================== */

.poster-box{
  background:linear-gradient(180deg,var(--panel),#0b0b0b);
  border:2px solid var(--border);
  box-shadow:0 14px 30px rgba(0,0,0,.55);
  padding:18px;
}

.box-body{
  font-style:italic;
  opacity:.95;
}

/* =====================================================
   BOOKING
   ===================================================== */

.booking-lines{
  text-align:center;
}

.booking-link{
  color:var(--text);
  text-decoration:none;
}

.booking-link:hover{
  color:var(--red);
}

.booking-muted{
  font-size:var(--small-size);
  color:var(--muted);
}

/* =====================================================
   BOTTOM RED BANNER
   ===================================================== */

.bottom-banner{
  background:linear-gradient(180deg,var(--red),var(--red2));
  color:var(--cream);
  padding:16px 18px;
  border:1px solid rgba(0,0,0,.35);
  letter-spacing:1px;
  font-weight:900;
  text-transform:uppercase;
  font-size:var(--small-size);
  box-shadow:0 14px 26px rgba(0,0,0,.45);
}

.bottom-banner-light{
  color:var(--text);
  opacity:.95;
}

/* =====================================================
   MOBILE ADJUSTMENTS
   ===================================================== */

@media (max-width:576px){
  :root{
    --section-title-size: calc(var(--title-size) * 0.28);
    --subheading-size: calc(var(--title-size) * 0.20);
    --body-size: calc(var(--title-size) * 0.15);
  }

  .vinyl{
    width:170px;
  }

  .tagline-bar{
    display:block;
  }
}

@keyframes vinyl-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.site-footer p {
  margin: 5px 0;
  text-align: center;
}

.site-footer .credit {
  font-size: 12px;
  opacity: 0.8;
}