/* Steve and the not Steves — static rebuild of the Divi home page. */

:root {
  --red: #e02b20;
  --tan: #c99872;
  --ink: #666;
  --container: 80%;
  --font: 'Open Sans', Arial, sans-serif;
  --display: 'Oswald', Helvetica, Arial, sans-serif;
  /* Divi section dividers (1280x140 viewBox, stretched to 100% x 100px) */
  --divider-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 140' preserveAspectRatio='none'%3E%3Cpath fill='%23e02b20' d='M1280 140V0H0l1280 140z'/%3E%3C/svg%3E");
  --divider-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 140' preserveAspectRatio='none'%3E%3Cpath fill='%23e02b20' d='M0 0v140h1280L0 0z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 14px/1.7 var(--font);
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); }
h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 56px;
  background: transparent;
  transition: background-color .4s ease;
}
.site-header.is-scrolled { background: #000; }
.site-nav { width: 75%; max-width: 1080px; height: 100%; margin: 0 auto; display: flex; justify-content: flex-end; }
.site-menu { display: flex; align-items: flex-start; padding-top: 21px; }
.site-menu li + li { margin-left: 22px; }
.site-menu a {
  display: block; padding-bottom: 21px;
  font-weight: 700; font-size: 14px; line-height: 1;
  color: #fff; text-decoration: none; text-transform: uppercase;
  transition: opacity .4s ease;
}
.site-menu a:hover { opacity: .7; }
.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100vh + 40px);
  display: flex; align-items: center; justify-content: center;
  padding: 56px 0 40px;
  background: #000 url(/assets/img/steveandthenotsteves.jpg) center top / cover no-repeat;
  overflow: hidden;
}
.hero::before { /* Divi header overlay */
  content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .4);
}
.hero-divider { position: absolute; left: 0; right: 0; height: 100px; z-index: 2; background: 0 0 / 100% 100px no-repeat; }
.hero-divider.top { top: 0; background-image: var(--divider-top); }
.hero-divider.bottom { bottom: 0; background-image: var(--divider-bottom); }
.hero h1 {
  position: relative; z-index: 1;
  max-width: 780px; margin: 0 auto; padding: 0 0 10px;
  font: 800 122px/.9 var(--font);
  letter-spacing: .1em;
  text-transform: uppercase; text-align: center;
  color: rgba(255, 255, 255, .33);
}

/* ---------- Bio ---------- */
.bio { background: var(--red); padding: 27px 0 88px; color: #fff; }
.bio h2 {
  max-width: 600px; margin: 0 auto; padding-bottom: 10px;
  font: 500 40px/1.5 var(--display); letter-spacing: 2px; text-transform: uppercase; text-align: center;
}
.bio-text { width: 70.7%; max-width: 89%; margin: 0 auto; padding-top: 2px; font: 18px/1.8 'Nunito', Helvetica, Arial, sans-serif; }
.bio-text p { margin: 0; padding-bottom: 18px; }

/* ---------- Music ---------- */
.music { display: flex; background: #1d140b; color: #fff; }
.music-intro, .tracks { width: 50%; }
.music-intro { background: #000; padding: 100px 10%; text-align: center; }
.music-intro h2 { font: 800 64px/1.8 var(--font); text-transform: uppercase; margin-top: 8px; }
.streaming { display: flex; flex-wrap: wrap; margin: 64px 0 115px; }
.streaming li { width: 50%; display: flex; align-items: flex-end; min-height: 115px; }
.streaming img { width: 100%; }
.tracks { background: url(/assets/img/section-bg-9.jpg) center / cover; }
.track { display: flex; background: #000; border-bottom: 1px solid #fff; height: 201px; }
.track-cover { width: 30%; height: 200px; object-fit: cover; flex: none; }
.track-body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: 0 40px 0 0; text-align: center; }
.track-body > * { width: 219px; }
.track h3 { font: 500 26px/1 var(--font); color: #fff; padding-bottom: 10px; }
.track-meta { font-size: 13px; margin: 0 0 12px; }
.track-meta strong { font-weight: 700; }

/* Audio player (replaces MediaElement.js) */
.player { display: flex; align-items: center; gap: 10px; height: 20px; }
.player audio { display: none; }
.player button {
  flex: none; width: 20px; height: 20px; padding: 0; border: 0; cursor: pointer;
  background: center / contain no-repeat;
}
.player .player-toggle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M5 3l11 7-11 7z'/%3E%3C/svg%3E"); }
.player.is-playing .player-toggle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M5 3h3.5v14H5zm6.5 0H15v14h-3.5z'/%3E%3C/svg%3E"); }
.player .player-mute { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M3 7h3l5-4v14l-5-4H3z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.5' d='M13.5 7a4 4 0 010 6'/%3E%3C/svg%3E"); }
.player.is-muted .player-mute { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M3 7h3l5-4v14l-5-4H3z'/%3E%3Cpath stroke='%23fff' stroke-width='1.5' d='M13 7l5 6m0-6l-5 6'/%3E%3C/svg%3E"); }
.player-time { flex: none; font-size: 13px; line-height: 20px; color: #fff; min-width: 38px; }
.player input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; height: 20px; margin: 0; cursor: pointer; }
.player-seek { flex: none; width: 32px; }
.player-volume { flex: none; width: 56px; }
.player input[type=range]::-webkit-slider-runnable-track { height: 3px; background: rgba(255, 255, 255, .5); }
.player input[type=range]::-moz-range-track { height: 3px; background: rgba(255, 255, 255, .5); }
.player input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -3.5px; border-radius: 50%; background: #fff; }
.player input[type=range]::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: #fff; }

/* ---------- Photos ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); background: #000; }
.gallery a { display: block; position: relative; overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 400 / 284; object-fit: cover; }
.gallery a::after { /* Divi hover overlay */
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: rgba(255, 255, 255, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23e02b20' stroke-width='2' d='M10.5 4a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM15.5 15.5L21 21'/%3E%3C/svg%3E") center / 32px no-repeat;
}
.gallery a:hover::after, .gallery a:focus-visible::after { opacity: 1; }

/* ---------- Videos ---------- */
.videos { width: var(--container); margin: 0 auto; padding: 81px 0; }
.video { position: relative; padding-top: 56.2963%; }
.video + .video { margin-top: 32px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Shows ---------- */
.shows {
  padding: 5.4% 0 10%;
  color: #fff;
  background: #1d2528 linear-gradient(356deg, rgba(0, 0, 0, .2) 2%, #000 98%), url(/assets/img/IMG_1589-1.jpg) center / cover;
  background-image: linear-gradient(356deg, rgba(0, 0, 0, .2) 2%, #000 98%), url(/assets/img/IMG_1589-1.jpg);
  background-size: cover, cover;
  background-position: center, center;
}
.shows h2 {
  max-width: 600px; margin: 0 auto; padding: 58px 0 65px;
  font: 500 40px/1.5 var(--display); letter-spacing: 2px; text-transform: uppercase; text-align: center;
}
.shows-widget { display: block; width: var(--container); min-height: 500px; margin: 0 auto 77px; border: 0; }
.booking { width: var(--container); margin: 0 auto; padding: 37px 20px 53px; background: rgba(0, 0, 0, .73); text-align: center; }
.booking p { max-width: 600px; margin: 0 auto; font-weight: 600; font-size: 18px; line-height: 1.8; }
.btn {
  display: inline-block; margin-top: 20px; padding: .3em 1em;
  border: 10px solid var(--red); background: var(--red);
  font: 500 15px/1.7 var(--display); letter-spacing: 3px; text-transform: uppercase;
  color: #fff; text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease;
}
.btn:hover { background: var(--tan); border-color: var(--tan); }

/* ---------- Contact ---------- */
.contact { width: var(--container); margin: 0 auto; padding: 59px 0 27px; scroll-margin-top: 56px; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3%; row-gap: 0; margin: 0 -3%; }
.field { margin-bottom: 35px; }
.field-full { grid-column: 1 / -1; margin-bottom: 18px; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 16px; border: 0; border-radius: 0;
  background: #eee; color: #999; font: 14px var(--font);
}
.contact-form textarea { height: 150px; resize: vertical; display: block; }
.contact-form input:focus, .contact-form textarea:focus { color: #3e3e3e; outline: 1px solid #999; }
.contact-form [aria-invalid=true] { outline: 1px solid var(--red); }
.btn-submit {
  grid-column: 2; justify-self: end;
  padding: 6px 20px; border: 2px solid #fff; border-radius: 3px;
  background: var(--red); color: #fff; font: 500 20px/1.7 var(--font); cursor: pointer;
}
.btn-submit:hover { background: #c4251b; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-error { margin: 6px 0 0; color: var(--red); font-size: 13px; }
.form-alert, .form-confirmation { margin: 0 0 24px; padding: 14px 16px; font-size: 15px; }
.form-alert { background: #fdecea; color: #8a1c14; }
.form-confirmation { color: #3e3e3e; font-size: 18px; text-align: center; padding: 40px 0; }

/* ---------- Footer ---------- */
.site-footer { background: #222; padding: 12px 0; }
.social { width: 75%; max-width: 1080px; margin: 0 auto; display: flex; justify-content: flex-end; gap: 24px; }
.social a { display: block; width: 24px; height: 25px; color: #666; transition: color .3s; }
.social a:hover { color: #fff; }
.social svg { width: 24px; height: 24px; fill: currentColor; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .9); }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 90vw; max-height: 90vh; text-align: center; }
.lightbox img { max-width: 90vw; max-height: 82vh; width: auto; margin: 0 auto; }
.lightbox figcaption { color: #ccc; font-size: 14px; padding-top: 10px; min-height: 1.7em; }
.lightbox button { position: absolute; border: 0; background: none; color: #fff; font-size: 48px; line-height: 1; cursor: pointer; padding: 10px 16px; opacity: .75; }
.lightbox button:hover { opacity: 1; }
.lightbox-close { top: 10px; right: 10px; }
.lightbox-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 10px; top: 50%; transform: translateY(-50%); }

/* ---------- Tablet / phone (Divi breakpoint 980px) ---------- */
@media (max-width: 980px) {
  .site-nav { width: 80%; align-items: center; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 32px; height: 32px; padding: 6px; margin-top: 14px; align-self: flex-start;
    background: none; border: 0; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: #fff; }
  .site-menu {
    display: none; position: absolute; top: 56px; left: 10%; right: 10%;
    flex-direction: column; padding: 5%; background: rgba(2, 2, 2, .5);
    border-top: 3px solid var(--red);
  }
  .site-header.menu-open .site-menu { display: flex; }
  .site-menu li + li { margin-left: 0; }
  .site-menu a { padding: 10px 5%; border-bottom: 1px solid rgba(255, 255, 255, .03); }

  .hero { padding-top: 117px; }
  .hero h1 { font-size: 81px; }
  .music { flex-direction: column; }
  .music-intro, .tracks { width: 100%; }
  .music-intro { padding: 0 10% 20px; }
  .track { height: auto; min-height: 131px; }
  .track-cover { width: 33%; height: 130px; }
  .track-body { padding: 13px; }
  .track h3 { font-size: 22px; }
  .gallery { grid-template-columns: 1fr; }
  .videos { padding: 77px 0; }
  .video + .video { margin-top: 30px; }
}

@media (max-width: 767px) {
  .hero h1 { max-width: 370px; }
  .bio { padding-bottom: 98px; }
  .bio-text { width: 80%; max-width: 80%; }
  .shows h2 { max-width: 80%; }
  .contact-form { grid-template-columns: 1fr; margin: 0; }
  .field { margin-bottom: 16px; }
  .btn-submit { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}