:root{
  --black:#080808;
  --panel:#111;
  --panel2:#181818;
  --orange:#e96d22;
  --orange2:#ff8a39;
  --cream:#f3eee7;
  --muted:#b9b4ae;
  --line:#333;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--cream);font-family:"Roboto Condensed",Arial,sans-serif;line-height:1.55}
body.modal-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit}
section{scroll-margin-top:76px}
.skip-link{position:fixed;left:1rem;top:-4rem;z-index:9999;background:#fff;color:#000;padding:.7rem 1rem}
.skip-link:focus{top:1rem}
.site-header{position:fixed;inset:0 0 auto 0;height:72px;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 max(4vw,24px);background:linear-gradient(#090909f5,#090909c9);border-bottom:1px solid #ffffff12;backdrop-filter:blur(10px)}
.logo{font-family:"Permanent Marker",cursive;color:var(--orange);font-size:2rem;text-decoration:none;transform:rotate(-2deg)}
.nav-links{display:flex;gap:1.5rem}
.nav-links a{text-decoration:none;text-transform:uppercase;font-weight:700;font-size:.92rem}
.nav-links a:hover,.nav-links a.active{color:var(--orange)}
.menu-toggle{display:none;border:1px solid #ffffff30;background:#111;color:#fff;padding:.5rem .7rem;border-radius:4px}
.hero{min-height:760px;position:relative;display:grid;align-items:center;padding:110px max(6vw,48px) 60px;background:
 linear-gradient(90deg,#050505 0%,#090909d8 43%,#0909092b 72%),
 url("assets/kornbread-hero.jpg") center 20%/cover no-repeat;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:180px;background:linear-gradient(transparent,#090909)}
.hero-overlay{position:absolute;inset:0;background-image:radial-gradient(circle at 75% 45%,transparent 0 18%,#0000002b 50%,#0008 100%)}
.hero-content{position:relative;z-index:2;max-width:690px}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--orange);font-weight:700}
.hero h1{font-family:"Anton",sans-serif;font-size:clamp(5rem,11vw,10rem);line-height:.88;margin:.15rem 0;text-shadow:4px 4px 0 #000}
.hero h2{font-family:"Permanent Marker",cursive;color:var(--orange2);font-size:clamp(1.65rem,3vw,3.3rem);line-height:1.08;margin:1rem 0}
.hero-copy{max-width:530px;font-size:1.2rem}
.hero-actions,.store-actions{display:flex;gap:1rem;flex-wrap:wrap;margin:1.5rem 0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem 1.2rem;text-decoration:none;text-transform:uppercase;font-weight:700;border:1px solid var(--orange);cursor:pointer}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange2)}
.btn-outline{background:#080808bd;color:#fff}
.btn-outline:hover{background:var(--orange)}
.btn-dark{background:#080808;color:#fff;border-color:#080808}
.btn-outline-dark{background:transparent;color:#080808;border-color:#080808}
.social-row{display:flex;gap:.7rem;flex-wrap:wrap}
.social-row a,.contact-socials a{border:1px solid #ffffff38;padding:.4rem .7rem;text-decoration:none;font-size:.84rem}
.location-stamp{position:absolute;z-index:2;right:6vw;bottom:90px;color:var(--orange2);font-family:"Anton";font-size:2.3rem;line-height:1}
.location-stamp span{display:block;font-family:"Permanent Marker";font-size:1rem;color:#fff}
.section{max-width:var(--max);margin:auto;padding:82px 24px}
.section-heading{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-bottom:1rem}
.section-heading span{height:2px;max-width:130px;flex:1;background:linear-gradient(90deg,transparent,var(--orange))}
.section-heading span:last-child{background:linear-gradient(90deg,var(--orange),transparent)}
.section-heading h2,.about h2,.store-banner h2{font-family:"Bebas Neue";font-size:clamp(2.8rem,6vw,4.5rem);letter-spacing:.03em;margin:0}
.section-intro{text-align:center;color:var(--muted);margin:0 0 2rem}
.album-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.album-card{background:linear-gradient(#171717,#0b0b0b);border:1px solid #ffffff12;box-shadow:0 10px 26px #0008;transition:.25s}
.album-card:hover{transform:translateY(-7px);border-color:var(--orange)}
.album-card img{aspect-ratio:1/1;object-fit:cover;width:100%}
.album-card-body{text-align:center;padding:.9rem}
.album-card h3{font-family:"Bebas Neue";font-size:1.45rem;letter-spacing:.04em;margin:0}
.album-card p{color:var(--muted);margin:.1rem 0 .75rem}
.btn-small{border:1px solid var(--orange);background:transparent;color:#fff;padding:.5rem .8rem;text-transform:uppercase;cursor:pointer}
.btn-small:hover{background:var(--orange)}
.about{display:grid;grid-template-columns:1.1fr 1.25fr .8fr;max-width:1400px;margin:auto;background:#0d0d0d;border-block:1px solid #ffffff10}
.about-image-panel{min-height:520px;overflow:hidden}
.about-image-panel img{width:100%;height:100%;object-fit:cover}
.about-copy{padding:60px 50px}
.about-copy strong{color:var(--orange)}
.quote-card{padding:60px 35px;background:linear-gradient(145deg,#1b1b1b,#0d0d0d);position:relative;overflow:hidden}
.quote-card h3{font-family:"Permanent Marker";color:var(--orange);font-size:1.6rem}
.quote-card strong{position:absolute;font-family:"Anton";font-size:10rem;opacity:.035;right:10px;bottom:-50px}
.video-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.video-frame{aspect-ratio:16/9;background:#151515;border:1px solid #ffffff1d;overflow:hidden}
.video-frame iframe{width:100%;height:100%;border:0}
.video-placeholder{height:100%;display:grid;place-content:center;text-align:center;color:var(--muted)}
.video-placeholder span{font-size:4rem;color:var(--orange)}
.video-card h3,.video-side-card h3{font-family:"Bebas Neue";font-size:2rem}
.video-side-card{background:var(--panel);padding:2rem;border-left:4px solid var(--orange)}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:12px}
.gallery-item{padding:0;border:0;background:#111;cursor:pointer;overflow:hidden}
.gallery-item.wide{grid-column:span 2}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:.4s}
.gallery-item:hover img{transform:scale(1.06)}
.store-banner{background:linear-gradient(90deg,#8e330c,#eb7625);color:#fff;display:grid;grid-template-columns:1fr 1.4fr;gap:30px;align-items:center;padding:42px max(7vw,40px)}
.merch-preview{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
}

.merch-shirt{
  width:240px;
  max-width:48%;
  height:auto;
  object-fit:contain;
  box-shadow:none;
  filter:drop-shadow(0 18px 25px rgba(0,0,0,.45));
  transform:rotate(-5deg);
  transition:transform .3s ease;
}

.merch-shirt:hover{
  transform:rotate(-5deg) scale(1.04);
}

.merch-album{
  width:170px;
  max-width:40%;
  height:auto;
  object-fit:cover;
  box-shadow:0 18px 30px rgba(0,0,0,.45);
  transform:rotate(5deg);
  transition:transform .3s ease;
}

.merch-album:hover{
  transform:rotate(5deg) scale(1.04);
}
.contact-section{padding-bottom:100px}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:55px}
.contact-copy h3{font-family:"Bebas Neue";font-size:2.8rem;margin:.4rem 0}
.contact-copy a{color:var(--orange)}
.contact-socials{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}
.contact-form{display:grid;gap:1rem;background:var(--panel);padding:2rem;border:1px solid #ffffff16}
.contact-form label{display:grid;gap:.35rem;font-weight:700}
.contact-form input,.contact-form select,.contact-form textarea,.email-form input{width:100%;background:#090909;color:#fff;border:1px solid #3a3a3a;padding:.8rem}
.contact-form textarea{resize:vertical}
.contact-form small{color:var(--muted)}
footer{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:35px;padding:55px max(6vw,35px) 25px;background:#090909;border-top:1px solid #ffffff16}
footer h3{font-family:"Bebas Neue";color:var(--orange);font-size:1.6rem;margin:0}
.email-form{display:flex}
.email-form button{background:var(--orange);color:#fff;border:0;padding:0 1rem}
.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.footer-links a{text-decoration:none}
.copyright{grid-column:1/-1;text-align:center;color:#888;border-top:1px solid #ffffff12;padding-top:20px}
dialog{color:#fff;background:#121212;border:1px solid var(--orange);max-width:520px;width:min(92vw,520px);padding:2rem;box-shadow:0 20px 90px #000}
dialog::backdrop{background:#000c}
#albumModal img{width:210px;aspect-ratio:1/1;object-fit:cover;margin:auto}
#albumModal h2{text-align:center;font-family:"Bebas Neue";font-size:2.7rem;margin:.7rem}
.modal-links{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.2rem 0}
.platform-link{padding:.75rem;border:1px solid #444;text-align:center;text-decoration:none}
.platform-link:hover,.buy-link{background:var(--orange);border-color:var(--orange)}
.close-modal,.close-gallery{position:absolute;right:12px;top:8px;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer}
#galleryModal{max-width:1000px;padding:1rem}
#galleryModal img{max-height:82vh;margin:auto}
.reveal{opacity:0;transform:translateY(22px);transition:.65s ease}
.reveal.visible{opacity:1;transform:none}

/* ===========================
   MUSIC CATALOG
=========================== */

.catalog-title{
    font-family:"Bebas Neue";
    font-size:2.2rem;
    letter-spacing:.08em;
    color:#fff;
    margin:55px 0 22px;
    text-transform:uppercase;

    text-align:center;
    border-left:none;
    padding-left:0;
}

.singles-title{
    margin-top:70px;
}

.singles-title{
    margin-top:70px;
}
@media (max-width:1050px){
  .album-grid{grid-template-columns:repeat(3,1fr)}
  .about{grid-template-columns:1fr 1fr}
  .quote-card{grid-column:1/-1}
}
@media (max-width:760px){
  .site-header{height:64px}
  .logo{font-size:1.55rem}
  .menu-toggle{display:block}
  .nav-links{position:absolute;top:64px;left:0;right:0;background:#0b0b0bf7;display:none;flex-direction:column;padding:1rem 1.5rem;border-bottom:1px solid #333}
  .nav-links.open{display:flex}
  .hero{min-height:680px;padding:100px 24px 50px;background-position:65% center}
  .hero::before{content:"";position:absolute;inset:0;background:#0007}
  .hero h1{font-size:clamp(4.5rem,23vw,7rem)}
  .hero-actions .btn{width:100%}
  .location-stamp{display:none}
  .album-grid{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
  .about-image-panel{min-height:360px}
  .about-copy,.quote-card{padding:38px 24px}
  .video-grid,.contact-grid,.store-banner,footer{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:190px}
  .gallery-item.wide{grid-column:span 2}
  .store-banner{text-align:center}
  .store-actions{justify-content:center}
  .merch-preview{gap:18px}
  .merch-shirt{width:210px;max-width:52%}
  .merch-album{width:145px;max-width:40%}
  .copyright{grid-column:1}
}
@media (max-width:430px){
  .album-grid{grid-template-columns:1fr}
  .album-card{max-width:330px;margin:auto}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:250px}
  .gallery-item.wide{grid-column:auto}
  .modal-links{grid-template-columns:1fr}
}