:root{
  --bg:#0b0b0b;
  --panel:#1a1a1a;
  --text:#eaeaea;
  --muted:#bdbdbd;
  --round:14px;
  --bannerH:0px;
  --framePad:14px;
  --safeTop: 6px;
  --safeBottom: 6px;
  --videoH: clamp(420px, 66vh, 760px);
  --btnS: 96px;
  --soon: #ffe66d;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
/* Banner */
.banner{
  display:none;
  height:var(--bannerH);
  align-items:center;
  justify-content:center;
  background:#ffe66d;
  color:#111;
  font-weight:700;
}
/* Sections desktop/laptop */
.section{
  height:calc(100dvh - var(--bannerH));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--framePad);
  overflow:hidden;
  position:relative;
}
.section-inner{
  width:min(1200px, 98vw);
  height:calc(100dvh - var(--bannerH) - (2 * var(--framePad)) - var(--safeTop) - var(--safeBottom));
  margin-top: var(--safeTop);
  background:var(--panel);
  border-radius:18px;
  padding:12px;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
  display:grid;
  grid-template-rows:auto 1fr;
  gap:10px;
  min-height:0;
  position:relative;
  overflow:hidden;
}
#s8 .section-inner{ grid-template-rows:auto 1fr auto; }
.fit-img{ width:100%; height:100%; object-fit:contain; min-height:0; }
.round{ border-radius:var(--round); }
/* Up/Down buttons */
.up, .down{
  position:absolute;
  width:44px;
  height:44px;
  background:#e6e6e6;
  color:#000;
  text-decoration:none;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-weight:900;
  z-index:20;
}
.up{ right:14px; bottom:14px; }
.down{ left:14px; bottom:14px; background:#ffe66d; }
/* Image buttons */
.imgbtn{ display:grid; place-items:center; text-decoration:none; }
.imgbtn img{ width:100%; height:100%; object-fit:contain; display:block; }
.imgbtn span{ display:none !important; }
.imgbtn.primary{ width:130px; height:130px; }
.imgbtn.secondary{ width:var(--btnS); height:var(--btnS); }
/* COMING SOON + button stacks */
.btn-note-stack{
  display:grid;
  justify-items:center;
  align-content:start;
  min-height:0;
}
.soon{
  margin-top:24px;
  width:var(--btnS);
  text-align:center;
  font-family:"Arial Black", Arial, Helvetica, sans-serif;
  font-weight:900;
  letter-spacing:1px;
  color:var(--soon);
  text-transform:uppercase;
  line-height:1.05;
}
/* HOME header */
.home-inner{ grid-template-rows:auto 1fr; }
.home-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:4px 6px 0;
}
.brand{ display:flex; align-items:center; gap:10px; }
.home-logo{ height:46px; width:auto; object-fit:contain; }
.brand-name{ font-weight:700; color:#FFDD55; font-size:110%; }
.home-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.home-nav a{
  color:#fff;
  text-decoration:none;
  font-weight:400;
  font-size:13px;
  padding:4px 6px;
  border-radius:8px;
}
.home-nav a:hover{ background: rgba(255,255,255,.12); }
.home-menu{ display:none; }
.home-grid{
  height:100%;
  display:grid;
  grid-template-columns:170px 1fr 170px;
  gap:12px;
  align-items:center;
  min-height:0;
}
.btn-stack{ display:grid; gap:10px; align-content:center; justify-items:center; }
.home-hero{
  height:100%;
  display:grid;
  grid-template-rows:1fr auto;
  align-items:center;
  justify-items:center;
  gap:6px;
  min-height:0;
}
.hero-img{ max-height:62vh; width:100%; object-fit:contain; }
.home-slogan{
  font-size:26px;
  font-weight:400;
  font-style:italic;
  text-align:center;
  margin-top:-10px;
  color:#fff;
}
.slogan-brand{ font-weight:700; color:#FFDD55; }
/* Section header */
.section-head{
  display:flex;
  justify-content:center;
  padding-top:4px;
  padding-right:48px;
  margin-bottom:2px;
}
.head-row{
  width:min(980px, 92%);
  display:grid;
  grid-template-columns:56px 1fr;
  gap:10px;
  align-items:center;
}
.sect-logo{ width:52px; height:52px; object-fit:contain; }
.head-text h2{
  margin:0;
  font-family:"Arial Black", Arial, Helvetica, sans-serif;
  font-size:26px;
  font-weight:900;
  line-height:1.1;
}
.head-text p{
  margin:4px 0 0;
  font-size:15px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Hamburger */
.corner-menu{
  position:absolute;
  top:10px;
  right:10px;
  z-index:50;
}
.home-menu{ position:relative; }
.menu-btn{
  width:40px; height:34px;
  border:0; border-radius:10px;
  background:#0b0b0b; color:#fff;
  font-size:22px; cursor:pointer;
}
.menu-btn:hover{ background: rgba(255,255,255,.12); }
.drop-menu{
  position:absolute;
  right:0;
  top:38px;
  display:none;
  flex-direction:column;
  gap:6px;
  padding:10px;
  min-width:170px;
  background:#0b0b0b;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}
.drop-menu a{
  color:#fff;
  text-decoration:none;
  font-weight:400;
  font-size:14px;
  padding:7px 10px;
  border-radius:10px;
}
.drop-menu a:hover{ background: rgba(255,255,255,.12); }
.corner-menu .drop-menu::before{
  content:"";
  position:absolute;
  top:-16px;
  right:-18px;
  width:240px;
  height:22px;
}
.corner-menu::after{
  content:"";
  position:absolute;
  top:34px;
  right:-18px;
  width:240px;
  height:22px;
}
@media (hover:hover){
  .corner-menu:hover .drop-menu{ display:flex; }
}
.corner-menu:focus-within .drop-menu{ display:flex; }
/* BOOKS */
.books-grid{
  height:100%;
  display:grid;
  grid-template-columns: 1fr minmax(520px, 780px) 1fr;
  gap:18px;
  align-items:center;
  justify-items:center;
  min-height:0;
}
.covers{
  height:100%;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:center;
  justify-items:center;
  min-height:0;
}
.covers .fit-img{
  width:auto;
  height:auto;
  max-height:92%;
  max-width:100%;
}
/* VIDEOS */
.videos-t{
  height:100%;
  display:grid;
  grid-template-columns: var(--btnS) auto auto var(--btnS);
  align-items:center;
  justify-content:center;
  gap:26px;
  min-height:0;
}
.video-box{
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.video-box img{ width:100%; height:100%; object-fit:contain; }
.video-box.tt{ height: var(--videoH); aspect-ratio: 9 / 16; }
.video-box.yt{ width: var(--videoH); aspect-ratio: 16 / 9; height:auto; margin-top: clamp(22px, 3.5vh, 60px); }
/* MUSIC */
.music-grid{
  height:100%;
  display:grid;
  grid-template-columns: 1fr minmax(520px, 760px) 1fr;
  gap:18px;
  align-items:start;
  justify-items:center;
  min-height:0;
}
.btn-stack.tight{
  height:100%;
  display:grid;
  grid-template-rows: 1fr 1fr;
  align-items:start;
  justify-items:center;
  row-gap:12px;
  padding-top:8px;
}
/* move SoundCloud UP ~1/2" */
#s3 .music-buttons .btn-note-stack:nth-child(2){
  margin-top:-18px;
}
#s3 .music-buttons .soon{
  margin-top:16px;
}
.band{
  height:100%;
  width:100%;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(2, 1fr);
  gap:10px;
  min-height:0;
}
/* MERCH (bigger cluster + less row gap) */
.merch-layout{
  height:100%;
  display:grid;
  grid-template-columns: minmax(220px, 260px) 1fr minmax(220px, 260px);
  gap:16px;
  align-items:center;
  min-height:0;
  justify-content:center;
}
.merch-side{
  display:grid;
  justify-items:center;
  align-content:start;
  gap:14px;
  min-height:0;
}
.merch-grid{
  height:100%;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(2, 1fr);
  column-gap:10px;
  row-gap:4px;              /* ✅ smaller top/bottom gap */
  align-items:center;
  justify-items:center;
  min-height:0;
}
/* ✅ enlarge overall ~10% WITHOUT overlap */
.merch-top{ transform: scale(0.95); transform-origin:center; }
.merch-bot{ transform: scale(1.18); transform-origin:center; }
/* NFTs (keep Pirate same size; prevent cropping via right safety space) */
.nft-grid{
  height:100%;
  display:grid;
  grid-template-columns: 1fr 1fr var(--btnS) 1fr 1fr;
  gap:14px;
  align-items:center;
  justify-items:center;
  min-height:0;
  padding-left:18px;
  padding-right:140px;       /* ✅ extra right safety so Pirate never clips */
  transform: translateX(-8px);/* ✅ tiny left shift */
}
.nft-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:100%;
  min-height:0;
  padding:0 6px;
}
.nft-img{
  max-height:66%;
  max-width:90%;
  width:auto;
  height:auto;
  object-fit:contain;
  object-position:center;
}
.nft-name{
  font-family: Arial, Helvetica, sans-serif;
  font-weight:700;
  font-size:14px;
}
.nft-center{
  display:grid;
  justify-items:center;
  align-content:start;
  min-height:0;
}
/* GALLERY */
.gallery-row{
  height:100%;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:14px;
  align-items:center;
  justify-items:center;
  min-height:0;
}
.gallery-row .fit-img{ height:100%; width:auto; max-width:100%; }
/* CONTACT */
.contact-grid{
  height:100%;
  width:100%;
  display:flex;
  min-height:0;
}
.contact-left, .contact-right{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.email-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding: 0 10px;
}
.email-big{
  color:#4aa3ff;
  font-weight:700;
  font-size: clamp(20px, 2.8vw, 30px);
  text-decoration:none;
  overflow-wrap:anywhere;
  word-break: break-word;
  text-align:center;
}
.email-hint{
  font-family: Arial, Helvetica, sans-serif;
  font-weight:700;
  color:#cfcfcf;
  font-size:16px;
  text-align:center;
}
.contact-img{
  max-height:92%;
  max-width:92%;
  width:auto;
  height:auto;
  object-fit:contain;
}
/* PLATFORMS */
.platforms-grid{
  height:100%;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  grid-template-rows:repeat(3, 1fr);
  gap:10px;
  align-items:center;
  min-height:0;
  padding-bottom: 10px;
}
.thumb{
  width:84px;
  height:96px;
  justify-self:center;
  align-self:center;
  display:grid;
  grid-template-rows: 78px auto;
  place-items:center;
  text-decoration:none;
}
.thumb img{ width:78px; height:78px; object-fit:contain; }
.thumb span{
  font-family: Arial, Helvetica, sans-serif;
  font-weight:700;
  font-size:12px;
  color:#eaeaea;
  opacity:.95;
  margin-top:2px;
  text-align:center;
  line-height:1.08;
}
.headthumb span{ display:none !important; }
.sooncell{ grid-template-rows: 1fr; }
.platforms-soon{ margin-top:0; width:84px; }
/* footer */
.platforms-footer{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight:700;
  color:#cfcfcf;
  font-size:13px;
  padding:6px 54px 2px 4px;
}
.pf-left{ text-align:left; }
.pf-mid{ text-align:center; }
.pf-right{ text-align:right; }
/* ======================= SMALL LAPTOP GAP REDUCTIONS ======================= */
@media (max-height: 820px){
  :root{
    --framePad:18px;
    --safeTop: 4px;
    --safeBottom: 4px;
    --videoH: clamp(320px, 54vh, 520px);
    --btnS: 96px;
  }
  .section-inner{ gap:8px; }
  .up, .down{ bottom:18px; width:40px; height:40px; }
  .home-grid{ grid-template-columns: 150px 1fr 150px; gap: 8px; }
  .imgbtn.primary{ width:96px; height:96px; }
  .hero-img{ max-height:52vh; }
  .home-slogan{ font-size:22px; margin-top:-14px; }
  .home-logo{ height:40px; }
  .books-grid{ gap:12px; }
  .covers{ gap:12px; }
  .music-grid{ gap:10px; padding-bottom:46px; }
  .band{ gap:8px; }
  .merch-layout{ gap:12px; }
  .merch-grid{ column-gap:10px; row-gap:4px; }
  .nft-grid{
    gap:12px;
    padding-left:18px;
    padding-right:140px;
    transform: translateX(-8px);
  }
  .platforms-grid{ gap:8px; padding-bottom:14px; }
  .thumb{ width:78px; height:90px; }
  .thumb img{ width:72px; height:72px; }
  .platforms-footer{ font-size:12px; padding-top:8px; }
  .email-big{ font-size: clamp(18px, 2.6vw, 26px); }
}
/* ===================================================================== */
/* ======================= PHONES + TABLETS (STACKABLE) ================= */
/* ===================================================================== */
@media (max-width: 900px){
  :root{ --btnS: 92px; }
  .section{
    height:auto;
    min-height:calc(100dvh - var(--bannerH));
    align-items:flex-start;
    overflow:visible;
  }
  .section-inner{
    height:auto;
    max-height:none;
    overflow:visible;
    grid-template-rows:auto auto;
    gap:12px;
    padding-bottom:64px;
  }
  .home-nav{ display:none; }
  .home-menu{ display:block; }
  .head-text p{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.25;
  }
  .home-topbar{ justify-content:space-between; }
  .home-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    gap:12px;
  }
  .btn-stack{
    grid-auto-flow:column;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
  }
  .imgbtn.primary{ width:96px; height:96px; }
  .hero-img{ max-height:48vh; }
  .home-slogan{ font-size:20px; margin-top:-2px; }
  .books-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    height:auto;
    gap:14px;
  }
  .covers{
    grid-template-columns:1fr;
    height:auto;
    gap:14px;
  }
  .covers .fit-img{ width:100%; height:auto; }
  .videos-t{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    height:auto;
    gap:14px;
    justify-items:center;
  }
  .video-box.tt, .video-box.yt{
    margin-top:0;
    width:100%;
    height:auto;
    max-width:520px;
  }
  .video-box.tt{ aspect-ratio: 9 / 16; }
  .video-box.yt{ aspect-ratio: 16 / 9; }
  .music-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    height:auto;
    gap:14px;
    align-items:stretch;
  }
  .btn-stack.tight{
    height:auto;
    grid-template-rows:none;
    grid-auto-flow:column;
    grid-template-columns:repeat(2, 1fr);
    column-gap:12px;
    padding-top:0;
    align-items:center;
  }
  #s3 .music-buttons .btn-note-stack:nth-child(2){ margin-top:0; }
  #s3 .music-buttons .soon{ margin-top:18px; }
  .band{
    height:auto;
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:repeat(3, 1fr);
    gap:10px;
  }
  .merch-layout{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    height:auto;
    gap:14px;
    justify-items:center;
  }
  .merch-side{ width:100%; max-width:720px; }
  .merch-grid{
    height:auto;
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:auto;
    gap:10px;
    max-width:720px;
    width:100%;
  }
  .merch-top, .merch-bot{ transform:none; }
  .nft-grid{
    height:auto;
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:auto auto auto;
    gap:14px;
    width:100%;
    max-width:720px;
    margin:0 auto;
    padding: 0 8px;
    transform:none;
  }
  .nft-center{ grid-column:1 / -1; justify-self:center; }
  .nft-img{ width:100%; height:auto; max-width:100%; }
  .gallery-row{
    height:auto;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
    max-width:720px;
    margin:0 auto;
  }
  .gallery-row .fit-img{ width:100%; height:auto; }
  .contact-grid{ flex-direction:column; gap:14px; height:auto; }
  .email-big{ font-size: clamp(18px, 5vw, 26px); }
  .contact-img{ width:min(520px, 95%); height:auto; }
  .platforms-grid{
    height:auto;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:auto;
    gap:12px;
    padding:6px 0 0;
  }
  .platforms-footer{
    grid-template-columns:1fr;
    row-gap:6px;
    text-align:center;
    padding:10px 8px 0;
  }
  .pf-left, .pf-mid, .pf-right{ text-align:center; }
}
@media (max-width: 420px){
  :root{ --btnS: 84px; }
  .imgbtn.primary{ width:84px; height:84px; }
  .home-slogan{ font-size:18px; }
  .head-text h2{ font-size:22px; }
  .sect-logo{ width:46px; height:46px; }
  .menu-btn{ width:38px; height:34px; }
}