/*
Theme Name:   Jose Sarduy
Theme URI:    https://josesarduy.com
Description:  Child theme for Jose Sarduy comedian website
Author:       Danny
Template:     generatepress
Version:      1.0.0
*/

/* ============================================================
   GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Boogaloo&family=Permanent+Marker&family=DM+Sans:wght@300;400;500;700&display=swap');

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  --hot-pink: #FF2D78;
  --red:      #FF3131;
  --mango:    #FF8C00;
  --sunshine: #FFD600;
  --sky:      #00BFFF;
  --mint:     #00E5A0;
  --coral:    #FF4D2E;
  --cream:    #FFF8EE;
  --navy:     #0D1B2A;
  --white:    #FFFFFF;
}

/* ============================================================
   BASE
   ============================================================ */
body {
  background: var(--cream);
  font-family: 'DM Sans', sans-serif;
  margin: 0;
  padding: 0;
}

/* ============================================================
   GENERATEPRESS STRIP - full width homepage
   ============================================================ */
body.home .site-main,
body.home .content-area,
body.home article.page,
body.home .inside-article,
body.home .entry-content,
body.home .entry-header,
body.home .post-image,
body.home #primary,
body.home #content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: block !important;
  flex: none !important;
}

body.home .grid-container,
body.home .container,
body.home .site-content > .grid-container {
  max-width: 100% !important;
  padding: 0 !important;
  display: block !important;
}

.grid-container-full {
  max-width: 100% !important;
  padding: 0 !important;
}

body.home .widget-area    { display: none !important; }
body.home .entry-header   { display: none !important; }
.site-info                { display: none !important; }
.copyright-bar            { display: none !important; }

/* Push content below the 80px fixed nav */
body.home .site-content {
  padding-top: 80px !important;
  margin-top: 0 !important;
}

/* ============================================================
   FIXED HEADER
   ============================================================ */
#masthead,
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
  background: var(--navy) !important;
  min-height: 80px !important;
  border-bottom: 4px solid var(--sunshine) !important;
  padding: 0 !important;
}

#masthead .inside-header,
.site-header .inside-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 3rem !important;
  min-height: 80px !important;
  max-width: 100% !important;
  width: 100% !important;
  background: var(--navy) !important;
  box-sizing: border-box !important;
}

#masthead .inside-header {
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Site title */
#masthead .main-title a,
#masthead .main-title a:visited,
#masthead .main-title a:hover {
  font-family: 'Abril Fatface', cursive !important;
  color: var(--sunshine) !important;
  font-size: 2.5rem !important;
  text-decoration: none !important;
  letter-spacing: 0.05em !important;
}

/* Nav containers */
#site-navigation,
#site-navigation .inside-navigation,
.main-navigation,
.main-navigation ul ul {
  background: var(--navy) !important;
  background-color: var(--navy) !important;
}

/* Nav links */
#site-navigation .main-nav ul li a,
.main-navigation .main-nav ul li a {
  font-family: 'Abril Fatface', cursive !important;
  font-size: 1.8rem !important;
  color: var(--cream) !important;
  letter-spacing: 0.05em !important;
  display: inline-block !important;
  text-decoration: none !important;
  transition: color 0.2s, transform 0.2s !important;
}

#site-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a {
  color: var(--sunshine) !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   HAMBURGER
   ============================================================ */
header#masthead nav#mobile-menu-control-wrapper button.menu-toggle,
header#masthead nav#mobile-menu-control-wrapper button.menu-toggle:hover,
header#masthead nav#mobile-menu-control-wrapper button.menu-toggle:focus,
.has-inline-mobile-toggle .mobile-menu-control-wrapper .menu-toggle,
.has-inline-mobile-toggle .mobile-menu-control-wrapper .menu-toggle:hover,
.has-inline-mobile-toggle .mobile-menu-control-wrapper .menu-toggle:focus {
  background: var(--navy) !important;
  background-color: var(--navy) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--cream) !important;
  padding: 0.5rem !important;
}

header#masthead nav#mobile-menu-control-wrapper button.menu-toggle svg path,
.mobile-menu-control-wrapper .menu-toggle .gp-icon svg path {
  fill: var(--cream) !important;
}

/* ============================================================
   HERO
   ============================================================ */
.jose-hero {
  min-height: 100vh;
  background: var(--navy);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.jose-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, var(--red) 2px, transparent 2px),
    radial-gradient(circle, var(--sunshine) 2px, transparent 2px),
    radial-gradient(circle, var(--sky) 2px, transparent 2px),
    radial-gradient(circle, var(--mint) 2px, transparent 2px);
  background-size: 80px 80px, 60px 60px, 100px 100px, 70px 70px;
  background-position: 0 0, 30px 30px, 50px 10px, 15px 50px;
  opacity: 0.15;
}

.hero-slash {
  position: absolute;
  bottom: -5%; right: -5%;
  width: 55%; height: 115%;
  background: linear-gradient(135deg, var(--coral) 0%, var(--red) 50%, var(--mango) 100%);
  transform: skewX(-8deg);
  z-index: 0;
}

.hero-slash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 20px,
    rgba(255,255,255,0.04) 20px, rgba(255,255,255,0.04) 21px
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 1300px;
  margin: 0 auto;
  padding: 4rem;
  width: 100%;
  gap: 2rem;
  box-sizing: border-box;
}

.hero-sticker {
  display: block;
  background: var(--sunshine);
  color: var(--navy);
  font-family: 'Permanent Marker', cursive;
  font-size: 1rem;
  padding: 0.5rem 1.2rem;
  margin-bottom: 1.5rem;
  box-shadow: 4px 4px 0 var(--navy);
  text-align: center;
  transform: none;
}

.hero-name {
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(4.5rem, 9vw, 8rem);
  line-height: 0.9;
}

.hero-name .name-jose {
  display: block;
  color: var(--sunshine);
  text-shadow: 6px 6px 0 var(--coral);
}

.hero-name .name-sarduy {
  display: block;
  color: var(--white);
  text-shadow: 6px 6px 0 rgba(0,0,0,0.3);
}

.hero-tagline {
  font-family: 'Permanent Marker', cursive;
  font-size: 1.1rem;
  color: var(--sky);
  margin-top: 1.5rem;
  line-height: 1.6;
  transform: rotate(-1deg);
  display: inline-block;
}

.hero-desc {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255,248,238,0.8);
  max-width: 440px;
  margin-top: 1.5rem;
}

.hero-desc em {
  color: var(--sunshine);
  font-style: normal;
  font-weight: 700;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.hero-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 2;
}

.hero-img-wrap {
  position: relative;
  display: inline-block;
}

.polaroid {
  background: var(--white);
  padding: 1rem 1rem 3.5rem 1rem;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 4px 6px rgba(0,0,0,0.3), 6px 6px 0 rgba(0,0,0,0.15);
  transform: rotate(2deg);
  display: inline-block;
  position: relative;
  z-index: 2;
  max-width: 420px;
  width: 100%;
  transition: transform 0.3s ease;
  box-sizing: border-box;
}

.polaroid:hover { transform: rotate(0deg) scale(1.02); }

.polaroid img {
  width: 100%;
  display: block;
  filter: contrast(1.05) saturate(1.1);
}

.polaroid-caption {
  font-family: 'Permanent Marker', cursive;
  font-size: 1rem;
  color: var(--navy);
  text-align: center;
  margin-top: 0.8rem;
  letter-spacing: 0.05em;
}

.speech-bubble {
  position: absolute;
  top: 5%; right: -10%;
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 20px 20px 20px 4px;
  padding: 0.8rem 1.2rem;
  font-family: 'Permanent Marker', cursive;
  font-size: 0.95rem;
  color: var(--navy);
  z-index: 10;
  box-shadow: 4px 4px 0 var(--navy);
  transform: rotate(3deg);
  max-width: 160px;
  text-align: center;
  line-height: 1.4;
  animation: wobble 3s ease-in-out infinite;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -15px; left: 15px;
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 5px solid transparent;
  border-top: 15px solid var(--navy);
}

.hero-badge {
  position: absolute;
  bottom: 15%; left: -8%;
  background: var(--red);
  color: white;
  font-family: 'Permanent Marker', cursive;
  font-size: 0.85rem;
  padding: 0.7rem;
  border-radius: 50%;
  width: 90px; height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
  border: 3px solid var(--navy);
  box-shadow: 4px 4px 0 var(--navy);
  transform: rotate(-12deg);
  z-index: 10;
  animation: badge-pulse 3s ease-in-out infinite;
}

@keyframes wobble {
  0%, 100% { transform: rotate(3deg); }
  50% { transform: rotate(5deg) translateY(-4px); }
}

@keyframes badge-pulse {
  0%, 100% { transform: rotate(-12deg) scale(1); }
  50% { transform: rotate(-8deg) scale(1.05); }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-wild {
  font-family: 'Boogaloo', cursive;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  padding: 0.8rem 2rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn-wild:hover { transform: translate(-3px, -3px); }

.btn-yellow {
  background: var(--sunshine);
  color: var(--navy);
  box-shadow: 5px 5px 0 var(--red);
}
.btn-yellow:hover { box-shadow: 8px 8px 0 var(--red); color: var(--navy); }

.btn-outline-wild {
  background: transparent;
  color: var(--sunshine);
  border: 3px solid var(--sunshine);
  box-shadow: 5px 5px 0 var(--sunshine);
}
.btn-outline-wild:hover { box-shadow: 8px 8px 0 var(--sunshine); color: var(--sunshine); }

.btn-pink {
  background: var(--red);
  color: white;
  box-shadow: 5px 5px 0 var(--navy);
}
.btn-pink:hover { box-shadow: 8px 8px 0 var(--navy); color: white; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-band {
  background: var(--sunshine);
  padding: 0.7rem 0;
  overflow: hidden;
  border-top: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 20s linear infinite;
}

.marquee-item {
  font-family: 'Boogaloo', cursive;
  font-size: 1.3rem;
  color: var(--navy);
  padding: 0 2rem;
  white-space: nowrap;
}

.marquee-item span { color: var(--coral); margin: 0 0.5rem; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   SECTION HELPERS
   ============================================================ */
.section-eyebrow {
  font-family: 'Permanent Marker', cursive;
  font-size: 1rem;
  color: var(--hot-pink);
  margin-bottom: 0.5rem;
  transform: rotate(-1deg);
  display: inline-block;
}

.section-title-big {
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 0.95;
  color: var(--navy);
  margin-bottom: 3rem;
}

.stripe {
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    var(--red)      0,          var(--red)      60px,
    var(--sunshine) 60px,       var(--sunshine) 120px,
    var(--sky)      120px,      var(--sky)      180px,
    var(--mint)     180px,      var(--mint)     240px,
    var(--coral)    240px,      var(--coral)    300px
  );
}

/* ============================================================
   SHOWS SECTION
   ============================================================ */
.shows-section {
  background: var(--cream);
  padding: 6rem 4rem;
  position: relative;
  overflow: hidden;
}

.shows-bg-text {
  position: absolute;
  font-family: 'Abril Fatface', cursive;
  font-size: 18rem;
  color: rgba(255,140,0,0.06);
  top: -2rem; left: -1rem;
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
}

.shows-section .section-eyebrow {
  display: block;
  max-width: 1100px;
  margin: 0 auto 0.5rem;
}

.shows-section .section-title-big {
  display: block;
  max-width: 1100px;
  margin: 0 auto 3rem;
}

/* ============================================================
   SHOWS ROW LAYOUT
   ============================================================ */
.shows-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  border-top: 2px solid var(--navy);
}

.show-card {
  background: transparent;
  color: var(--navy);
  padding: 1.5rem 0;
  position: relative;
  border-bottom: 1px solid rgba(13,27,42,0.15);
  box-shadow: none;
  transition: background 0.2s;
  text-decoration: none;
  display: grid;
  grid-template-columns: 190px 1fr 170px 130px auto;
  align-items: center;
  gap: 1.5rem;
}

.show-card:nth-child(odd),
.show-card:nth-child(even) { transform: none; }

.show-card:hover {
  background: rgba(13,27,42,0.04) !important;
  box-shadow: none !important;
  transform: none !important;
}

.show-card-accent { display: none; }

.show-card-date {
  font-family: 'Abril Fatface', cursive;
  font-size: 1.05rem;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 0;
}

.show-card-name {
  font-family: 'Boogaloo', cursive;
  font-size: 1.3rem;
  color: var(--navy);
  margin-bottom: 0;
}

.show-card-location {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.6;
  margin-bottom: 0;
}

.show-card-type {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--red);
  color: white;
  padding: 0.4rem 0.5rem;
  margin-bottom: 0;
  white-space: nowrap;
  text-align: center;
}

.show-card-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  min-width: 280px;
}

.show-card-link,
.show-card-venue-link {
  display: inline-block;
  font-family: 'Boogaloo', cursive;
  font-size: 1rem;
  padding: 0.4rem 1.1rem;
  text-decoration: none;
  border: 2px solid var(--navy);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}

.show-card-link {
  background: var(--sunshine);
  color: var(--navy);
  box-shadow: 3px 3px 0 var(--red);
}
.show-card-link:hover {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
  box-shadow: none;
}

.show-card-venue-link {
  background: transparent;
  color: var(--navy);
  box-shadow: 3px 3px 0 var(--navy);
}
.show-card-venue-link:hover {
  background: var(--navy);
  color: var(--cream);
  box-shadow: none;
}

.no-shows-msg {
  font-family: 'Permanent Marker', cursive;
  font-size: 1.3rem;
  color: var(--navy);
  background: var(--sunshine);
  display: inline-block;
  padding: 1rem 2rem;
  border: 3px solid var(--navy);
  box-shadow: 6px 6px 0 var(--navy);
  transform: rotate(-1deg);
}

/* ============================================================
   BIO SECTION
   ============================================================ */
.bio-section {
  background: var(--red);
  padding: 7rem 4rem;
  position: relative;
  overflow: hidden;
}

.bio-section::before {
  content: 'HA!';
  position: absolute;
  font-family: 'Abril Fatface', cursive;
  font-size: 30rem;
  color: rgba(255,255,255,0.05);
  right: -3rem; top: -3rem;
  pointer-events: none;
  line-height: 1;
}

.bio-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.bio-img-frame {
  position: relative;
  display: inline-block;
  width: 100%;
}

.bio-img-frame img {
  width: 100%;
  display: block;
  border: 4px solid var(--navy);
  box-shadow: 12px 12px 0 var(--navy);
  position: relative;
  z-index: 1;
}

.bio-img-caption {
  position: absolute;
  bottom: -1.5rem; right: -1.5rem;
  background: var(--sunshine);
  color: var(--navy);
  font-family: 'Permanent Marker', cursive;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--navy);
  transform: rotate(3deg);
  z-index: 2;
  max-width: 180px;
  text-align: center;
  line-height: 1.4;
}

.bio-text .section-eyebrow { color: var(--sunshine); }
.bio-text .section-title-big { color: var(--white); }

.bio-body {
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(255,255,255,0.9);
}

.bio-body p + p { margin-top: 1rem; }
.bio-body strong { color: var(--sunshine); }

/* ── BIO STATS — EQUATION LAYOUT ── */
.bio-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 2.5rem;
  flex-wrap: wrap;
  row-gap: 1rem;
}

.stat-operator {
  font-family: 'Abril Fatface', cursive;
  font-size: 2.5rem;
  color: var(--sunshine);
  padding: 0 1rem;
  line-height: 1;
}

.stat-box {
  background: var(--navy);
  padding: 1.2rem 1.5rem;
  border: 2px solid var(--navy);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
  text-align: center;
  transform: none !important;
}

.stat-num {
  font-family: 'Bebas Neue', cursive;
  font-size: 1.4rem;
  color: var(--sunshine);
  line-height: 1.15;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,248,238,0.45);
  margin-top: 0.4rem;
}

/* ============================================================
   MERCH SECTION
   ============================================================ */
.merch-section {
  background: var(--sky);
  padding: 6rem 4rem 3em;
  position: relative;
  overflow: hidden;
}

.merch-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 30px,
    rgba(255,255,255,0.3) 30px, rgba(255,255,255,0.3) 31px
  );
}

.merch-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.merch-section .section-eyebrow { color: var(--navy); }
.merch-section .section-title-big { color: var(--navy); }

.merch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;

}

.merch-card {
  background: var(--white);
  border: 3px solid var(--navy);
  padding: 2rem;
  text-align: center;
  box-shadow: 8px 8px 0 var(--navy);
  transition: transform 0.2s, box-shadow 0.2s;
}

.merch-card:nth-child(odd)  { transform: rotate(-1.5deg); }
.merch-card:nth-child(even) { transform: rotate(1.5deg); }
.merch-card:hover {
  transform: rotate(0deg) translateY(-6px) !important;
  box-shadow: 12px 12px 0 var(--red);
}

.merch-card img {
  width: 100%;
  max-width: 180px;
  margin: 0 auto 1rem;
  display: block;
  border: 2px solid var(--navy);
}

.merch-title { font-family: 'Boogaloo', cursive; font-size: 1.3rem; color: var(--navy); margin-bottom: 0.3rem; }
.merch-price { font-family: 'Abril Fatface', cursive; font-size: 2rem; color: var(--coral); line-height: 1; }
.merch-shipping { font-size: 0.75rem; color: #888; margin-bottom: 1.2rem; }

/* ── MERCH COMING SOON CARD ── */
.merch-card-coming-soon {
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    transform: rotate(1deg) !important;
    border: 3px solid var(--navy);
    box-shadow: 8px 8px 0 var(--navy);
}
.merch-card-coming-soon:hover {
    transform: rotate(0deg) translateY(-6px) !important;
    box-shadow: 12px 12px 0 var(--sunshine) !important;
}
.merch-coming-sign {
    background: var(--navy);
    border: 3px solid var(--navy);
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    width: 100%;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
}
.merch-coming-tape {
    position: absolute;
    top: -12px;
    width: 48px;
    height: 20px;
    background: rgba(255,214,0,0.7);
    border: 1px solid rgba(0,0,0,0.1);
}
.merch-coming-tape-left  { left: 20%; transform: rotate(-3deg); }
.merch-coming-tape-right { right: 20%; transform: rotate(3deg); }
.merch-coming-eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 0.75rem;
}
.merch-coming-headline {
    font-family: 'Bebas Neue', cursive;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--cream);
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}
.merch-coming-sub {
    font-family: 'Permanent Marker', cursive;
    font-size: 0.85rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}
.merch-coming-shopify {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sunshine);
    padding: 6px 14px;
    border: 1px solid var(--navy);
}
.merch-coming-shopify span {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--navy);
}

/* ============================================================
   MEDIA SECTION
   ============================================================ */
.media-section {
  background: var(--cream);
  padding: 6rem 4rem;
}

.media-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.media-embed {
  position: relative;
  aspect-ratio: 16/9;
  border: 3px solid var(--navy);
  box-shadow: 6px 6px 0 var(--navy);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

.media-embed:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 0 var(--red);
}

.media-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.contact-section {
  background: var(--navy);
  padding: 7rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.contact-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}

.contact-section .section-eyebrow { color: var(--mint); }

.contact-headline {
  font-family: 'Abril Fatface', cursive;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--white);
  line-height: 1;
  margin-bottom: 1rem;
}

.contact-headline span { color: var(--sunshine); }

.contact-sub {
  font-size: 1.05rem;
  color: rgba(255,248,238,0.7);
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

/* ============================================================
   ALSO ON / FOOTER
   ============================================================ */
.also-on {
  background: var(--sunshine);
  padding: 1.5rem 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  border-top: 3px solid var(--navy);
  flex-wrap: wrap;
}

.also-on-label {
  font-family: 'Permanent Marker', cursive;
  font-size: 0.9rem;
  color: var(--navy);
}

.also-on-links { display: flex; gap: 2rem; }

.also-on-links a {
  font-family: 'Abril Fatface', cursive;
  font-size: 1.1rem;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-color 0.2s;
}

.also-on-links a:hover { border-color: var(--coral); }

.site-footer {
  background: var(--navy) !important;
  border-top: 4px solid var(--sunshine);
  padding: 2rem 4rem !important;
}

/* ============================================================
   SHOW ARCHIVE + SINGLE PAGES
   ============================================================ */
.single-show-wrap,
.archive-shows-wrap {
  max-width: 1100px;
  margin: 4rem auto;
  padding: 0 4rem;
}

.archive-shows-header { margin-bottom: 3rem; }

.single-show-header {
  background: var(--navy);
  color: var(--cream);
  padding: 3rem;
  border: 3px solid var(--navy);
  box-shadow: 8px 8px 0 var(--red);
  position: relative;
}

.single-show-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--sunshine), var(--mango));
}

.single-show-title {
  font-family: 'Abril Fatface', cursive;
  font-size: 3rem;
  color: var(--sunshine);
  line-height: 1;
  margin-bottom: 1rem;
}

.single-show-meta { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 2rem; }
.single-show-meta span { font-family: 'Boogaloo', cursive; font-size: 1.2rem; color: var(--cream); }
.single-show-meta span strong { color: var(--sky); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   FAN QUOTES BAND
   ============================================================ */
.quotes-band {
  background: var(--navy);
  border-top: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  padding: 0;
  overflow: hidden;
  position: relative;
}

.quotes-track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
  padding: 1rem 0;
}

.quotes-item {
  font-family: 'Permanent Marker', cursive;
  font-size: 1.1rem;
  color: var(--cream);
  padding: 0 3rem;
  white-space: nowrap;
  line-height: 1;
}

.quotes-star {
  color: var(--sunshine);
  margin-left: 1rem;
}

.quotes-source {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

/* ============================================================
   TABLET - max 900px
   ============================================================ */
@media (max-width: 900px) {
  .bio-inner { grid-template-columns: 1fr; }
  .speech-bubble { right: 0; }
  .hero-badge { left: 0; }

  .shows-section,
  .bio-section,
  .merch-section,
  .media-section,
  .contact-section { padding: 4rem 2rem; }

  .single-show-wrap,
  .archive-shows-wrap { padding: 0 1.5rem; }

  .also-on { padding: 1.5rem; flex-direction: column; gap: 1rem; }
  .site-footer { padding: 2rem 1.5rem !important; }
  .media-grid { grid-template-columns: repeat(2, 1fr); }

  .show-card {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 1.25rem 0;
  }
  .show-card-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    min-width: unset;
  }

  .bio-stats { gap: 0.5rem; }
  .stat-operator { padding: 0 0.5rem; font-size: 2rem; }
}

/* ============================================================
   MOBILE - max 768px
   ============================================================ */
@media (max-width: 768px) {

  /* ── Nav ── */
  #masthead .main-title a,
  #masthead .main-title a:hover { font-size: 1.6rem !important; }
  #masthead .inside-header,
  .site-header .inside-header { padding: 0 1rem !important; }

  /* ── Hero ── */
  .jose-hero { padding-top: 80px; min-height: auto; }

  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    padding: 2rem 1.5rem 3rem !important;
    gap: 0 !important;
  }

  .hero-col-left {
    width: 100%;
    align-items: center;
    order: 1;
    gap: 0.75rem;
  }

  .hero-col-right {
    width: 100%;
    order: 3;
    align-items: center;
    text-align: center;
  }

  .hero-sticker {
    display: block;
    text-align: center;
    transform: rotate(-2deg);
    margin-bottom: 0;
  }

  .hero-img-wrap {
    order: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
  }

  .polaroid {
    max-width: 280px;
    width: 100%;
  }

  .speech-bubble {
    right: -5%;
    top: 0;
    font-size: 0.75rem;
    max-width: 120px;
    padding: 0.5rem 0.8rem;
  }

  .hero-badge {
    left: -5%;
    width: 72px;
    height: 72px;
    font-size: 0.7rem;
  }

  .hero-name {
    font-size: clamp(3.5rem, 15vw, 5rem);
    text-align: center;
    order: 1;
  }

  .hero-tagline {
    text-align: center;
    font-size: 0.95rem;
    order: 2;
  }

  .hero-desc {
    text-align: center;
    font-size: 0.9rem;
    max-width: 100%;
    order: 3;
  }

  .hero-ctas {
    justify-content: center;
    order: 4;
  }

  .hero-slash {
    width: 100%;
    height: 40%;
    bottom: 0;
    right: 0;
    transform: skewY(-4deg);
  }

  /* ── Shows ── */
  .shows-section { padding: 3rem 1.5rem; }
  .show-card {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding: 1.25rem 0;
    border: none;
    border-bottom: 1px solid rgba(13,27,42,0.15);
  }
  .show-card-actions {
    grid-column: 1;
    justify-content: flex-start;
    margin-top: 0.25rem;
    min-width: unset;
  }

  /* ── Bio ── */
  .bio-section { padding: 3rem 1.5rem; }
  .bio-inner { gap: 2.5rem; }
  .bio-stats {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    row-gap: 0.75rem;
  }
  .stat-operator { padding: 0 0.4rem; font-size: 1.5rem; }
  .stat-box { padding: 0.8rem 1rem; }
  .stat-num { font-size: 1.1rem; }

  /* ── Merch ── */
  .merch-section { padding: 3rem 1.5rem 5rem; }
  .merch-grid { grid-template-columns: 1fr; max-width: 340px; }
  .merch-card:nth-child(odd),
  .merch-card:nth-child(even) { transform: none; }
  .merch-card-coming-soon { transform: none !important; min-height: auto; }

  /* ── Media ── */
  .media-section { padding: 3rem 1.5rem; }
  .media-grid { grid-template-columns: 1fr; }

  /* ── Contact ── */
  .contact-section { padding: 3rem 1.5rem; }
  .contact-headline { font-size: 2.5rem; }

  /* ── Also on ── */
  .also-on { padding: 1.5rem; flex-direction: column; gap: 1rem; }

  /* ── Social nav drawer ── */
  .has-inline-mobile-toggle #site-navigation.toggled .inside-navigation .main-nav { order: 1; }
  .has-inline-mobile-toggle #site-navigation.toggled .inside-navigation .jose-nav-socials {
    order: 2;
    display: flex !important;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    padding: 1.5rem 1rem;
    border-top: 1px solid rgba(255,248,238,0.15);
    margin-top: 0.5rem;
  }
  .has-inline-mobile-toggle #site-navigation.toggled .jose-social-list {
    display: flex !important;
    gap: 1.5rem;
    justify-content: center;
  }
}

/* ============================================================
   SMALL MOBILE - max 480px
   ============================================================ */
@media (max-width: 480px) {
  .hero-name { font-size: 3.2rem; }
  .section-title-big { font-size: 2.5rem; }
  .merch-grid { max-width: 100%; }
  .bio-stats { flex-direction: column; align-items: flex-start; }
  .stat-operator { font-size: 1.4rem; }
}

/* ============================================================
   HERO COLUMNS
   ============================================================ */
.hero-col-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  z-index: 2;
  position: relative;
}

.hero-col-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  position: relative;
}

.hero-right-mobile  { display: none; }
.hero-right-desktop { display: flex; }

/* ============================================================
   NAV SOCIAL ICONS
   ============================================================ */
.inside-navigation .jose-nav-socials {
    order: 3;
    display: flex;
    align-items: center;
    padding-left: 2rem;
    border-left: 1px solid rgba(255,248,238,0.2);
    flex-shrink: 0;
}
.jose-social-list {
    display: flex;
    align-items: center;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.jose-social-list li { margin: 0; padding: 0; }
.jose-social-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cream) !important;
    text-decoration: none !important;
    opacity: 0.7;
    width: 22px;
    height: 22px;
    transition: opacity 0.2s, transform 0.2s, color 0.2s;
}
.jose-social-list li a:hover {
    opacity: 1 !important;
    color: var(--sunshine) !important;
    transform: translateY(-2px);
}
.jose-social-list li a svg {
    width: 20px;
    height: 20px;
    display: block;
}

.inside-navigation .menu-toggle { order: 1; }
.inside-navigation .main-nav    { order: 2; flex: 1; }
.inside-navigation .jose-nav-socials { order: 3; }

@media (max-width: 768px) {
    .inside-navigation .jose-nav-socials {
        padding-left: 0;
        padding-top: 1.5rem;
        margin-top: 0.5rem;
        border-left: none;
        border-top: 1px solid rgba(255,248,238,0.15);
        width: 100%;
        justify-content: center;
    }
    .jose-social-list {
        gap: 2rem;
        justify-content: center;
        width: 100%;
    }
}

body.home .inside-navigation {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
body.home .inside-navigation .menu-toggle  { order: 1; }
body.home .inside-navigation .main-nav     { order: 2; flex: 1; }
body.home .inside-navigation .jose-nav-socials { order: 3; }