/* Fonts are hosted on this site (no Google Fonts requests). Space Grotesk and Inter, SIL Open Font License; see fonts/. */
@font-face{font-family:'Inter Fallback'; src:local('Arial'),local('Liberation Sans'),local('Helvetica Neue'),local('Helvetica'); size-adjust:109.3%; ascent-override:88.6%; descent-override:22.1%; line-gap-override:0%;}
@font-face{font-family:'Space Grotesk Fallback'; src:local('Arial'),local('Liberation Sans'),local('Helvetica Neue'),local('Helvetica'); size-adjust:113%; ascent-override:87.1%; descent-override:25.8%; line-gap-override:0%;}
@font-face{font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url(fonts/SpaceGrotesk-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url(fonts/SpaceGrotesk-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url(fonts/Inter-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url(fonts/Inter-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --ease-smooth:cubic-bezier(.4,0,.2,1);
  --ease-out-soft:cubic-bezier(.16,1,.3,1);
  --ink:#121212;
  --paper:#FAFAF7;
  --line:#DEDDD8;
  --mid:#6E6D67;
  --panel:#1B1B1A;
  --coral:#C9922E;
  --coral-text:#8A5F16;
  --coral-deep:#2E2210;
  --violet:#1F8A82;
  --violet-text:#17695F;
  --violet-deep:#0E2624;
  --maroon:#7C1F2E;
  --maroon-deep:#2A0F14;
  --maroon-light:#A8394D;
  --gold-light:#E3B563;
  --radius:3px;
  --wrap:1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

html{overflow-x:hidden;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter','Inter Fallback',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,.display{
  font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif;
  font-weight:600;
  line-height:1.05;
  letter-spacing:-0.01em;
}

a{color:inherit; text-decoration:none;}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 32px;
}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,247,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logo{
  font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-0.01em;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.logo-icon{
  height:0.85em;
  width:auto;
  display:block;
}
.logo-text > span{color:var(--mid); font-weight:500;}
.nav-links{display:flex; gap:36px; font-size:0.92rem;}
.nav-links a{
  position:relative; padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease-smooth), color .2s var(--ease-smooth);
}
.nav-links a:hover{border-color:var(--maroon); color:var(--maroon);}
.nav-toggle{display:none;}

@media (max-width:720px){
  header{backdrop-filter:none;}
  .info-card.feature-card{min-height:auto;}
  .nav-links{
    position:fixed; top:72px; left:0; right:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 10px 28px rgba(18,18,18,0.14);
    flex-direction:column; gap:0;
    padding:8px 32px 24px;
    transform:translateY(-8px);
    opacity:0; pointer-events:none;
    transition:opacity .2s var(--ease-smooth), transform .2s var(--ease-smooth);
  }
  .nav-links.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .nav-links a{
    padding:16px 0; border-bottom:1px solid var(--line); font-size:1.05rem;
  }
  .nav-toggle{
    display:block; background:none; border:none; cursor:pointer;
    width:28px; height:20px; position:relative;
  }
  .nav-toggle span{
    display:block; position:absolute; left:0; right:0; height:2px; background:var(--ink);
    transition:transform .2s var(--ease-smooth), opacity .2s var(--ease-smooth);
  }
  .nav-toggle span:nth-child(1){top:0;}
  .nav-toggle span:nth-child(2){top:9px;}
  .nav-toggle span:nth-child(3){top:18px;}
  .nav-toggle.open span:nth-child(1){transform:translateY(9px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}
}

/* ---------- HERO (home) ---------- */
.hero{
  padding:120px 0 96px;
  border-bottom:1px solid var(--line);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:64px;
  align-items:end;
}
.hero h1{
  font-size:clamp(2.4rem, 5vw, 4.1rem);
  max-width:14ch;
}
.hero .kicker{
  font-size:0.95rem;
  color:var(--mid);
  margin-bottom:20px;
  display:flex; align-items:center; gap:8px;
}
.hero .kicker .dot{position:static;}
.hero p.lead{
  margin-top:28px;
  font-size:1.15rem;
  max-width:46ch;
  color:#3a3a38;
}
.hero-side{
  border-left:1px solid var(--line);
  padding-left:32px;
}
.hero-side .label{
  font-size:0.85rem; color:var(--mid); margin-bottom:10px;
}
.hero-side ul{
  list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:10px;
}
.hero-side li{
  font-size:0.95rem;
  display:flex; align-items:baseline; gap:10px;
}
.dot{
  width:8px; height:8px; border-radius:50%; flex:none; position:relative; top:-1px;
}
.dot.coral{background:var(--coral);}
.dot.violet{background:var(--violet);}
.dot.maroon{background:var(--maroon);}

@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr; gap:44px;}
  .hero-side{border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:28px;}
  .hero{padding:64px 0 56px;}
}

/* reveal on load, hero only */
.reveal{opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards;}
.reveal.d1{animation-delay:.05s;}
.reveal.d2{animation-delay:.16s;}
.reveal.d3{animation-delay:.27s;}
@keyframes rise{to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none; opacity:1; transform:none;}
}

/* ---------- DIVISIONS ---------- */
.divisions-head{
  padding:80px 0 8px;
}
.divisions-head h2{
  font-size:clamp(1.8rem, 3vw, 2.4rem);
}
.divisions-head p{
  margin-top:14px; max-width:52ch; color:#3a3a38; font-size:1.02rem;
}

.panel{
  padding:72px 0;
  border-top:1px solid var(--line);
}
.panel-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
}
.panel.reverse .panel-grid{direction:rtl;}
.panel.reverse .panel-grid > *{direction:ltr;}

.panel-tag{
  display:inline-block;
  align-self:flex-start;
  font-size:0.85rem;
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:20px;
  color:var(--mid);
  margin-bottom:22px;
}

/* status badge (e.g. "coming soon") */
/* disabled link (e.g. media links while that division is coming soon) */
.is-disabled{
  pointer-events:none;
  cursor:not-allowed;
}

.status-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.02em;
  padding:6px 16px;
  border:1px dashed var(--maroon);
  border-radius:20px;
  color:var(--maroon);
  margin-bottom:20px;
}
.status-badge .pulse-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--maroon);
  animation:statusPulse 1.8s ease-in-out infinite;
}
@keyframes statusPulse{
  0%,100%{opacity:1;}
  50%{opacity:0.35;}
}
@media (prefers-reduced-motion:reduce){
  .status-badge .pulse-dot{animation:none;}
}
.panel h3{
  font-size:clamp(2rem, 4vw, 2.8rem);
  margin-bottom:18px;
}
.panel p.desc{
  font-size:1.05rem;
  color:#3a3a38;
  max-width:42ch;
  margin-bottom:28px;
}
.panel-cta{
  display:inline-flex; align-items:center; gap:10px;
  font-size:0.95rem; font-weight:500;
  padding-bottom:2px;
  border-bottom:1px solid currentColor;
}
.panel-cta-group{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
}
#buttie .panel-cta{color:var(--coral-text);}
#shortsizn .panel-cta{color:var(--violet-text);}

/* motif: halftone / print grid for Buttie FP */
.motif-grid{
  aspect-ratio:1/1;
  background:var(--panel);
  border-radius:var(--radius);
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  grid-template-rows:repeat(8, 1fr);
  gap:6px;
  padding:28px;
}
.motif-grid .cell{
  border-radius:50%;
  background:#2c2c2b;
  transition:transform .25s var(--ease-smooth);
}
.motif-grid:hover .cell.hot{transform:scale(1.25);}
.motif-grid .cell.hot{background:var(--coral);}

/* motif: waveform for Short SIZN */
.motif-wave{
  aspect-ratio:1/1;
  background:var(--violet-deep);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:28px;
}
.motif-wave .bar{
  width:6px;
  background:#1e3d3a;
  border-radius:3px;
  animation:pulse 2.6s ease-in-out infinite;
}
.motif-wave .bar.hot{background:var(--violet);}
@keyframes pulse{
  0%,100%{transform:scaleY(0.4);}
  50%{transform:scaleY(1);}
}
@media (prefers-reduced-motion:reduce){
  .motif-wave .bar{animation:none;}
}

/* motif: content/frame grid for Short SIZN Media */
.motif-frames{
  aspect-ratio:1/1;
  background:var(--violet-deep);
  border-radius:var(--radius);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(4, 1fr);
  gap:6px;
  padding:28px;
}
.motif-frames .cell{
  border-radius:4px;
  background:#1c2f2d;
  transition:transform .25s var(--ease-smooth);
}
.motif-frames:hover .cell.hot{transform:scale(1.06);}
.motif-frames .cell.hot{background:var(--violet);}

@media (max-width:820px){
  .panel-grid{grid-template-columns:1fr; gap:36px;}
  .panel.reverse .panel-grid{direction:ltr;}
  .panel{padding:56px 0;}
  .motif-grid, .motif-wave, .motif-frames{max-width:320px; margin:0 auto;}
}

/* ---------- STRUCTURE ---------- */
.structure{
  padding:96px 0;
  border-top:1px solid var(--line);
}
.structure-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.structure h2{font-size:clamp(1.8rem, 3vw, 2.4rem); margin-bottom:18px;}
.structure p{color:#3a3a38; max-width:44ch; font-size:1.02rem; margin-bottom:12px;}

.org{
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.org-box{
  border:1px solid var(--maroon);
  color:var(--maroon);
  padding:16px 22px;
  font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif;
  font-weight:600;
  font-size:0.95rem;
  background:var(--paper);
  text-align:center;
  border-radius:var(--radius);
}
.org-box.small{font-weight:500; font-size:0.88rem; padding:12px 18px;}
.org-line{width:1px; height:36px; background:var(--line);}
.org-children{
  display:flex; gap:56px; margin-top:0;
}
.org-child{display:flex; flex-direction:column; align-items:center;}
.org-child .org-line{height:36px;}
.org-child.coral .org-box{border-color:var(--coral); color:var(--coral-text);}
.org-child.violet .org-box{border-color:var(--violet); color:var(--violet-text);}

@media (max-width:820px){
  .structure-grid{grid-template-columns:1fr; gap:40px;}
  .org-children{gap:32px;}
}

/* ---------- PAGE HERO (contact / legal pages) ---------- */
.page-hero{
  padding:88px 0 56px;
  border-bottom:1px solid var(--line);
}
.page-hero .kicker{
  font-size:0.95rem; color:var(--maroon); margin-bottom:16px;
  display:flex; align-items:center; gap:8px;
}
.page-hero h1{
  font-size:clamp(2.2rem, 4.5vw, 3.4rem);
  max-width:18ch;
}
.page-hero p.lead{
  margin-top:22px; font-size:1.1rem; max-width:52ch; color:#3a3a38;
}

/* ---------- CONTACT ---------- */
.contact-section{padding:72px 0 96px;}
.contact-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.contact-card{
  background:var(--paper);
  padding:36px 32px;
  display:flex; flex-direction:column; gap:14px;
}
.contact-card .tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.85rem; color:var(--mid);
}
.contact-card h2,.contact-card h3{font-size:1.3rem;}
.contact-card p{font-size:0.98rem; color:#3a3a38;}
.contact-card a.email{
  margin-top:auto;
  font-weight:500;
  font-size:0.98rem;
  padding-bottom:2px;
  border-bottom:1px solid currentColor;
  display:inline-block;
  width:fit-content;
}
.contact-card.general a.email{color:var(--maroon);}
.contact-card.buttie a.email{color:var(--coral-text);}
.contact-card.shortsizn a.email{color:var(--violet-text);}

@media (max-width:820px){
  .contact-cards{grid-template-columns:1fr;}
}

/* ---------- CONTACT FORM ---------- */
.form-divider{
  border-top:1px solid var(--line);
  margin-top:64px;
  padding-top:64px;
}
.form-divider h2{
  font-size:clamp(1.6rem, 3vw, 2.1rem);
}
.form-divider .form-intro{
  margin-top:12px; margin-bottom:36px;
  color:#3a3a38; max-width:52ch; font-size:1.02rem;
}
.contact-form{
  max-width:640px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.form-row{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.form-row label{
  font-size:0.88rem;
  color:var(--mid);
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  border:1px solid var(--line);
  background:var(--paper);
  padding:13px 14px;
  font-family:'Inter','Inter Fallback',sans-serif;
  font-size:0.98rem;
  color:var(--ink);
  border-radius:var(--radius);
  width:100%;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--maroon);
  box-shadow:0 0 0 3px rgba(124,31,46,0.18);
}
.contact-form textarea{
  resize:vertical;
  min-height:140px;
}
.contact-form select{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--mid) 50%), linear-gradient(135deg, var(--mid) 50%, transparent 50%);
  background-position:calc(100% - 20px) center, calc(100% - 15px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.form-submit{
  align-self:flex-start;
  background:var(--maroon);
  color:var(--paper);
  border:none;
  padding:15px 30px;
  font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif;
  font-weight:600;
  font-size:0.95rem;
  border-radius:var(--radius);
  cursor:pointer;
  transition:opacity .2s var(--ease-smooth);
}
.form-submit:hover{opacity:0.85;}

/* ---------- LEGAL / ARTICLE PAGES ---------- */
.article-section{padding:64px 0 96px;}
.article{
  max-width:74ch;
}
.article .updated{
  font-size:0.9rem; color:var(--mid); margin-bottom:44px;
}
.article h2{
  font-size:1.35rem;
  margin-top:44px;
  margin-bottom:14px;
}
.article h2:first-of-type{margin-top:0;}
.article p{
  margin-bottom:16px;
  color:#2a2a28;
}
.article ul{
  margin:0 0 16px 22px;
  color:#2a2a28;
}
.article li{margin-bottom:8px;}
.article strong{font-weight:600;}
.article .placeholder{
  color:var(--maroon);
  background:rgba(124,31,46,0.08);
  padding:1px 6px;
  border-radius:2px;
  font-weight:500;
}

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--line);
  padding:56px 0 40px;
}
.footer-grid{
  display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap;
}
footer .logo{margin-bottom:10px;}
footer .contact-line a{
  border-bottom:1px solid var(--line);
  transition:border-color .2s var(--ease-smooth);
}
footer .contact-line a:hover{border-color:var(--maroon); color:var(--maroon);}
footer .contact-line a.social-icon-link{
  border-bottom:none;
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  color:var(--maroon);
  transition:opacity .2s var(--ease-smooth);
}
footer .contact-line a.social-icon-link:hover{opacity:0.7;}
.social-icon-link svg{display:block;}
.social-icons-row{
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.social-icon-link.is-disabled{color:var(--maroon);}
.footer-legal-links{
  display:flex; gap:20px; font-size:0.9rem; margin-top:14px; flex-wrap:wrap;
}
.footer-legal-links a{
  color:var(--mid);
  border-bottom:1px solid transparent;
}
.footer-legal-links a:hover{color:var(--maroon); border-color:var(--maroon);}
.legal{
  margin-top:36px;
  padding-top:24px;
  border-top:2px solid var(--maroon);
  font-size:0.85rem;
  color:var(--mid);
  max-width:70ch;
}

/* ---------- DBA POLICIES MODAL ---------- */
.dba-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(18,18,18,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:100;
}
.dba-modal-overlay.open{display:flex;}
.dba-modal{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  max-width:420px;
  width:100%;
  padding:32px;
  position:relative;
  animation:dbaModalIn .22s ease;
}
@keyframes dbaModalIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){
  .dba-modal{animation:none;}
}
.dba-modal-close{
  position:absolute;
  top:14px; right:14px;
  background:none;
  border:none;
  cursor:pointer;
  font-size:1.5rem;
  line-height:1;
  color:var(--mid);
  padding:4px;
}
.dba-modal-close:hover{color:var(--maroon);}
.dba-modal h3{
  font-size:1.3rem;
  margin-bottom:8px;
  padding-right:24px;
}
.dba-modal-sub{
  font-size:0.92rem;
  color:var(--mid);
  margin-bottom:24px;
}
.dba-modal-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.dba-modal-list a{
  display:block;
  font-size:0.98rem;
  padding-bottom:2px;
  border-bottom:1px solid var(--line);
  width:fit-content;
}
.dba-modal-list a:hover{color:var(--maroon); border-color:var(--maroon);}

/* ================================================
   SHORT SIZN SUBSITE — additional components
   ================================================ */

/* generic fill-in placeholder (same convention as the legal pages) */
.placeholder{
  color:var(--maroon);
  background:rgba(124,31,46,0.08);
  padding:1px 6px;
  border-radius:2px;
  font-weight:500;
}

/* image/media placeholder box */
.img-placeholder{
  aspect-ratio:1/1;
  max-width:min(300px, 100%);
  background:rgba(27,27,26,0.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px dashed var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9B9A94;
  font-size:0.85rem;
  text-align:center;
  padding:14px;
  box-shadow:0 10px 28px rgba(18,18,18,0.14);
  border-radius:16px;
}
.img-frame{
  aspect-ratio:1/1;
  max-width:min(300px, 100%);
  border-radius:16px;
  box-shadow:0 10px 28px rgba(18,18,18,0.14);
  overflow:hidden;
  display:block;
}
/* video_url variant of .img-frame — 16:9 for an embedded YouTube player
   instead of a 1:1 product image */
.video-frame{
  aspect-ratio:16/9;
  max-width:min(300px, 100%);
  border-radius:16px;
  box-shadow:0 10px 28px rgba(18,18,18,0.14);
  overflow:hidden;
  display:block;
}
.video-frame iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
}
/* The YouTube video is additional to the product image and description,
   not a replacement for either — it sits centered underneath them,
   shown only when a row actually has a Video URL set. */
.product-video{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  margin-top:20px;
  padding:24px;
  background:rgba(201,146,46,0.12);
  border:1px solid rgba(201,146,46,0.3);
  border-radius:14px;
  box-sizing:border-box;
}
.product-video .video-frame{
  width:100%;
  max-width:720px;
}
.info-card.feature-card .product-video .video-frame{max-width:min(400px, 100%);}

/* The normal product-card row (small square image, text beside it) stays
   as-is; a video, when present, spans the full card width underneath
   that row instead of squeezing into the row itself. */
.product-card.has-video{
  flex-wrap:wrap;
}
.product-card.has-video .product-card-row{
  display:flex;
  align-items:center;
  gap:32px;
  width:100%;
}
.product-card.has-video > .product-visit-link{
  margin-top:4px;
  margin-left:auto;
}
.data-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- HUB: path selection cards ---------- */
.path-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:12px;
}
.path-card{
  background:var(--paper);
  padding:64px 44px;
  display:flex;
  flex-direction:column;
  gap:18px;
  transition:background .2s var(--ease-smooth);
}
.path-card:hover{background:#f2f1ec;}
.path-card .path-icon{margin-bottom:8px;}
.path-card h2{font-size:2rem;}
.path-card p{color:#3a3a38; font-size:1.02rem; max-width:36ch;}
.path-card .path-cta{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:10px;
  font-weight:500; font-size:0.98rem;
  padding-bottom:2px; border-bottom:1px solid currentColor;
  width:fit-content;
}
.path-card.music .path-cta{color:var(--maroon);}
.path-card.media .path-cta{color:var(--coral-text);}

@media (max-width:820px){
  .path-cards{grid-template-columns:1fr;}
  .path-card{padding:48px 32px;}
}

/* ---------- sub-page hero ---------- */
.subpage-hero{
  padding:96px 0 64px;
  border-bottom:1px solid var(--line);
}
.subpage-hero .kicker{
  display:flex; align-items:center; gap:8px;
  font-size:0.95rem; margin-bottom:18px;
}
.subpage-hero h1{
  font-size:clamp(2.4rem, 5vw, 3.8rem);
  max-width:16ch;
}
.subpage-hero p.lead{
  margin-top:22px; font-size:1.12rem; max-width:50ch; color:#3a3a38;
}

/* ---------- artist / release grid ---------- */
#about-teaser{border-bottom:1px solid var(--line); padding-bottom:64px;}
.section-head{padding:72px 0 8px;}
#latest .section-head,
#releases .section-head,
#videos .section-head{padding-top:32px;}
.section-head h2{font-size:clamp(1.7rem, 3vw, 2.2rem);}
.section-head p{margin-top:12px; max-width:52ch; color:#3a3a38; font-size:1rem;}

.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 440px));
  justify-content:center;
  gap:28px;
  padding:40px 0 80px;
}
.info-card{
  display:flex; flex-direction:column; gap:14px;
  max-width:360px;
  min-width:0;
}
.info-card h3{font-size:1.2rem;}
.info-card p{font-size:0.95rem; color:#3a3a38;}
.info-card.feature-card{
  max-width:440px;
  min-height:620px;
}
.info-card.feature-card .img-frame,
.info-card.feature-card .img-placeholder{max-width:min(400px, 100%); margin-bottom:14px;}
.info-card.feature-card .panel-cta{margin-top:8px;}
.info-card.artist-card{
  max-width:600px;
}
.slideshow-wrap{max-width:440px;}
.news-list{
  display:flex;
  flex-direction:column;
  max-width:900px;
  margin:0 auto;
}

/* ---------- News: main featured story ---------- */
.news-main{
  display:flex;
  gap:32px;
  padding-bottom:28px;
}
.news-main .img-frame,
.news-main .img-placeholder{
  flex:0 0 260px;
  width:260px;
  max-width:260px;
  margin-bottom:0;
}
.news-main .news-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.news-main .news-body h3{font-size:1.4rem; line-height:1.3; margin:0;}
.news-main .news-meta{font-size:0.85rem; color:var(--mid); letter-spacing:0.2px; margin:0;}
.news-main .news-body > p{font-size:0.98rem; line-height:1.7; color:#3a3a38; margin:2px 0 4px;}
.news-main .panel-tag{margin-bottom:0; align-self:flex-start;}
.news-main .panel-cta{margin-top:4px;}

/* ---------- News: divider between the main story and the secondary teasers ---------- */
.news-main-divider{
  border:none;
  height:2px;
  background:var(--maroon);
  opacity:0.7;
  margin:0 0 8px;
}

/* ---------- News: compact secondary teasers (headline + date, whole row links out) ---------- */
.news-secondary-list{
  display:flex;
  flex-direction:column;
}
.news-secondary-item{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  color:inherit;
}
.news-secondary-item:last-child{border-bottom:none; padding-bottom:0;}
.news-secondary-item .sec-left{
  display:flex;
  align-items:baseline;
  gap:12px;
  min-width:0;
}
.news-secondary-item .panel-tag{margin:0; flex:none;}
.news-secondary-item h4{
  font-size:1rem;
  margin:0;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.news-secondary-item .sec-right{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex:none;
}
.news-secondary-item .sec-meta{font-size:0.82rem; color:#9B9A94;}
.news-secondary-item .sec-arrow{
  font-size:0.85rem;
  font-weight:600;
  color:var(--maroon);
  white-space:nowrap;
}

@media (max-width:640px){
  .news-main{flex-direction:column; gap:16px; padding-bottom:20px;}
  .news-main .img-frame,
  .news-main .img-placeholder{width:100%; max-width:100%; flex:none;}
  .news-secondary-item{flex-direction:column; align-items:flex-start; gap:4px;}
  .news-secondary-item h4{white-space:normal;}
  .news-secondary-item .sec-right{width:100%; justify-content:space-between;}
}

/* ---------- Full news article pages (news/ folder) ---------- */
.article-feature-image{
  width:100%;
  aspect-ratio:16/9;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(18,18,18,0.18);
  margin-bottom:32px;
}
.article-feature-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.article-body{
  max-width:720px;
  margin:0 auto;
  padding-bottom:64px;
}
.article-body p{
  font-size:1.05rem;
  line-height:1.8;
  color:#3a3a38;
  margin:0 0 22px;
}
.article-back-link{
  display:inline-block;
  margin-top:8px;
}
@media (max-width:640px){
  .article-feature-image{aspect-ratio:4/3; border-radius:14px;}
}

/* ---------- inline mini icons (hub path cards) ---------- */
.mini-wave rect{fill:var(--maroon);}
.mini-wave rect:nth-child(2n){fill:var(--coral);}
.mini-frames rect{fill:var(--coral);}
.mini-frames rect.hot{fill:var(--maroon);}

/* ---------- INTRO WORDMARK (landing) ---------- */
body.intro-body{
  min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column;
}
.intro{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:80px 0;
}
.intro-wordmark{
  font-size:clamp(3.2rem, 13vw, 9rem);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:0.95;
  display:inline-flex;
  align-items:center;
  gap:0.15em;
}
.intro-wordmark .logo-icon{
  height:0.75em;
  width:auto;
  display:block;
}
.intro-wordmark .logo-text > span{color:var(--mid); font-weight:500;}
.intro-links{
  display:flex; align-items:center; justify-content:center; gap:48px;
  margin-top:44px;
  font-size:1.05rem;
}
.intro-links a{
  font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif;
  font-weight:500;
  padding-bottom:4px;
  border-bottom:1px solid var(--line);
  transition:border-color .2s var(--ease-smooth), color .2s var(--ease-smooth);
}
.intro-links a:hover{border-color:var(--maroon); color:var(--maroon);}
.intro-footer{
  padding:0 0 40px;
  border-top:none;
}
.intro-footer .legal{
  margin:0 auto;
  max-width:60ch;
  padding-top:0;
  border-top:none;
  text-align:center;
  line-height:1.5;
}
.intro-footer .legal p + p{margin-top:6px;}
.intro-footer .legal a{
  border-bottom:1px solid var(--line);
  transition:border-color .2s var(--ease-smooth), color .2s var(--ease-smooth);
}
.intro-footer .legal a:hover{border-color:var(--maroon); color:var(--maroon);}
.intro-footer .legal a.social-icon-link{
  border-bottom:none;
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  color:var(--maroon);
  transition:opacity .2s var(--ease-smooth);
}
.intro-footer .legal a.social-icon-link:hover{opacity:0.7;}

@media (max-width:720px){
  .intro{padding:64px 0;}
  .intro-links{gap:32px; font-size:1rem;}
  .intro-footer{padding-bottom:32px;}
  .intro-footer .legal{max-width:46ch; font-size:0.8rem;}
}

/* ---------- artist bio toggle & discography ---------- */
.artist-toggle,
.artist-pagelink{
  margin-top:6px;
  margin-right:24px;
  background:none;
  border:none;
  padding:0;
  font-family:'Inter','Inter Fallback',sans-serif;
  font-size:0.9rem;
  font-weight:500;
  color:var(--maroon);
  cursor:pointer;
  border-bottom:1px solid currentColor;
  width:fit-content;
}
.artist-toggle:hover,
.artist-pagelink:hover{opacity:0.75;}
.artist-pagelink{display:block; text-decoration:none;}

.artist-detail{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.artist-detail p{
  margin-bottom:16px;
  color:#3a3a38;
  font-size:0.95rem;
}

.discography-carousel{
  display:flex;
  align-items:center;
  gap:10px;
}
.discography-arrow{
  background:none;
  border:1px solid var(--line);
  border-radius:50%;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--ink);
  font-size:1.1rem;
  line-height:1;
  flex:none;
  transition:border-color .2s var(--ease-smooth), color .2s var(--ease-smooth), transform .2s var(--ease-smooth);
}
.discography-arrow:hover{border-color:var(--maroon); color:var(--maroon); transform:scale(1.08);}
.discography-arrow:active{transform:scale(0.94);}
.discography-scroll{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  flex:1;
  min-width:0;
  touch-action:pan-y;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.discography-scroll::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}
.discography-scroll.dragging{
  cursor:grabbing;
  scroll-snap-type:none;
  scroll-behavior:auto;
}
.discography-tile{
  flex:none;
  width:clamp(150px, 18vw, 190px);
  scroll-snap-align:center;
  background:none;
  border:none;
  padding:0;
  font-family:inherit;
  cursor:pointer;
  text-align:center;
  user-select:none;
}
.discography-tile .img-placeholder,
.discography-tile .img-frame{
  max-width:100%;
  margin-bottom:8px;
}
.discography-tile .img-placeholder{
  font-size:0.85rem;
  padding:14px;
}
.discography-tile p{
  font-size:0.95rem;
  margin-bottom:0;
  text-align:center;
  color:#3a3a38;
}

/* ---------- ALBUM DETAIL MODAL ---------- */
.album-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(18,18,18,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:100;
}
.album-modal-overlay.open{display:flex;}
.album-modal{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  max-width:480px;
  min-height:680px;
  width:100%;
  padding:32px;
  position:relative;
  animation:albumModalIn .22s ease;
}
@keyframes albumModalIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){
  .album-modal{animation:none;}
}
.album-modal-close{
  position:absolute;
  top:14px; right:14px;
  background:none;
  border:none;
  cursor:pointer;
  font-size:1.5rem;
  line-height:1;
  color:var(--mid);
  padding:4px;
}
.album-modal-close:hover{color:var(--maroon);}
.album-modal-cover{
  max-width:100%;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--radius);
  margin-bottom:20px;
}
.album-modal h3{
  font-size:1.25rem;
  margin-bottom:6px;
  padding-right:24px;
}
.album-modal-meta{
  font-size:0.9rem;
  color:var(--mid);
  margin-bottom:16px;
}
.album-modal-note{
  font-size:0.95rem;
  color:#3a3a38;
  margin-bottom:22px;
}

/* ---------- SKIP LINK (accessibility) ---------- */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--ink);
  color:var(--paper);
  padding:10px 18px;
  z-index:200;
  border-radius:0 0 var(--radius) 0;
  font-size:0.9rem;
  font-weight:500;
}
.skip-link:focus{
  left:0;
}

/* ---------- SLIDESHOW (News/Latest, auto-advancing with manual controls) ---------- */
.slideshow-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:16px;
}
.slideshow-arrow{
  background:none;
  border:1px solid var(--line);
  border-radius:50%;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--ink);
  font-size:1rem;
  line-height:1;
  transition:border-color .2s var(--ease-smooth), color .2s var(--ease-smooth);
  flex:none;
  padding:0;
}
.slideshow-arrow:hover{border-color:var(--maroon); color:var(--maroon);}
.slideshow-dots{
  display:flex;
  gap:8px;
}
.slideshow-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--line);
  border:none;
  padding:0;
  cursor:pointer;
  transition:background .2s var(--ease-smooth);
}
.slideshow-dot.active{background:var(--maroon);}

@keyframes fadeInSlide{
  from{ opacity:0; transform:scale(0.98); }
  to{ opacity:1; transform:scale(1); }
}
.slideshow-wrap > .info-card.slide-enter{
  animation:fadeInSlide .6s var(--ease-out-soft);
}
@media (prefers-reduced-motion: reduce){
  .slideshow-wrap > .info-card.slide-enter{ animation:none; }
}

/* ---------- LISTEN buttons (Music page) ---------- */
.listen-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:24px;
}
.listen-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 22px;
  border-radius:30px;
  border:1.5px solid var(--line);
  color:var(--ink);
  font-weight:600;
  font-size:0.95rem;
  background:var(--paper);
  transition:border-color .2s var(--ease-smooth), background .2s var(--ease-smooth), color .2s var(--ease-smooth);
}
.listen-btn svg{width:20px; height:20px; flex:none; display:block;}
.listen-btn:hover{border-color:var(--maroon); background:var(--maroon); color:#fff;}

/* ---------- "Listen everywhere" section: dark background ---------- */
#listen{
  /* night sky of stars and dust behind a dark wash; swap images/listen-night3.svg for your own photo to change it */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.62) 45%, rgba(0,0,0,0.76)),
    url('images/listen-night3.svg') center/cover no-repeat,
    #242424;
  padding-bottom:48px;
}
#listen .section-head h2{color:var(--paper);}
#listen .section-head p{color:#B7B6B0;}
#listen .listen-btn{
  background:transparent;
  border-color:rgba(250,250,247,0.28);
  color:var(--paper);
}
#listen .listen-btn.is-disabled{
  border-color:rgba(250,250,247,0.3);
  color:#8a8a85;
}
#listen .listen-btn:hover{border-color:var(--maroon); background:var(--maroon); color:#fff;}
#listen .section-head{text-align:center;}
#listen .section-head p{margin-left:auto; margin-right:auto;}
#listen .listen-buttons{justify-content:center; margin-top:48px;}

/* Red-tinted glass panel behind the Spotify embed — a translucent maroon
   wash + soft outer glow, so the widget reads as a designed card instead
   of a bare iframe dropped on the page. The track rows inside are
   Spotify's own iframe content and can't be restyled from here. */
.spotify-frame{
  max-width:640px;
  margin:28px auto 0;
  background:linear-gradient(160deg, rgba(124,31,46,0.28), rgba(124,31,46,0.06));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(124,31,46,0.4);
  border-radius:18px;
  padding:14px;
  box-sizing:border-box;
  box-shadow:0 0 40px rgba(124,31,46,0.15);
}
.spotify-frame iframe{
  display:block;
  border-radius:12px;
  border:none;
}

/* ---------- CATEGORY TILES (Media page) ---------- */
.category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:20px;
  margin-top:24px;
  margin-bottom:56px;
}
.category-tile{
  aspect-ratio:1/1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px;
  background:var(--paper);
  border:2px solid var(--tile-accent, var(--maroon));
  border-radius:var(--radius);
  color:var(--tile-accent, var(--maroon));
  font-weight:700;
  font-size:1.05rem;
  text-align:center;
  box-shadow:0 10px 28px rgba(18,18,18,0.14);
  transition:background .32s var(--ease-smooth), color .32s var(--ease-smooth), transform .32s var(--ease-smooth), box-shadow .32s var(--ease-smooth);
}
.category-icon{
  width:30px;
  height:30px;
  flex:none;
  transition:transform .32s var(--ease-smooth);
}
.category-tile:hover{
  background:var(--tile-accent, var(--maroon));
  color:#fff;
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 16px 34px rgba(18,18,18,0.2);
}
.category-tile:hover .category-icon{
  transform:scale(1.12) rotate(-4deg);
}
.category-tile:active{
  transform:translateY(-1px) scale(1);
}
@media (prefers-reduced-motion: reduce){
  .category-tile,
  .category-icon{transition:none;}
  .category-tile:hover{transform:none;}
  .category-tile:hover .category-icon{transform:none;}
}
@media (prefers-reduced-motion: reduce){
  .discography-scroll{scroll-behavior:auto;}
}
.category-section{
  scroll-margin-top:90px;
  padding-bottom:56px;
}
/* Narrower placeholder state: no brand banners or products yet, so the
   glass frame is hidden by JS — trim the bottom spacing that frame used
   to occupy, leaving just the heading, description, and "Coming soon"
   badge in a more compact block. */
.category-section.is-empty{
  padding-bottom:24px;
}

/* ---------- category sections: heavier tint wash, matched to each tile's accent above ---------- */
#film{ background:rgba(124,31,46,0.16); }
#series{ background:rgba(31,138,130,0.18); }
#photography{ background:rgba(201,146,46,0.22); }
#ebook{ background:rgba(124,31,46,0.16); }
#games{ background:rgba(31,138,130,0.18); }
#podcast{ background:rgba(201,146,46,0.22); }

/* ---------- Media page: "Work with Short SIZN Media" band, gold wash to echo the hero ---------- */
#media-work-band{
  background:rgba(201,146,46,0.14);
  padding:56px 0;
}

/* ---------- Category sections: glass frame around the banner + product block ---------- */
.category-frame{
  background:rgba(255,255,255,0.22);
  backdrop-filter:blur(32px) saturate(160%);
  -webkit-backdrop-filter:blur(32px) saturate(160%);
  border:1px solid rgba(255,255,255,0.65);
  border-radius:24px;
  padding:32px;
  box-shadow:0 18px 40px rgba(18,18,18,0.18), inset 0 1px 0 rgba(255,255,255,0.65);
}
.category-frame .brand-banners{margin-top:0; margin-bottom:0;}
.category-frame .product-grid{margin-top:24px; margin-bottom:0;}
.category-frame .card-grid{padding:0;}
/* Padding (not margin) around the frame itself — margins on a last-child box
   like this can collapse straight through an unpadded parent/section and
   spill past a tinted section's background, which is what created the
   uneven gaps here before. Padding on this wrapper can't collapse away. */
.frame-wrap{
  padding-top:32px;
  padding-bottom:32px;
}
@media (max-width:720px){
  .category-frame{
    padding:20px;
    backdrop-filter:blur(14px) saturate(150%);
    -webkit-backdrop-filter:blur(14px) saturate(150%);
  }
  .frame-wrap{
    padding-top:20px;
    padding-bottom:20px;
  }
}

/* ---------- BRAND BANNERS + PRODUCT POSTERS (Entertainment category sections) ---------- */
.brand-banners{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:32px;
  margin-bottom:32px;
}
.brand-banner{
  flex:1 1 100%;
  aspect-ratio:5/1;
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(27,27,26,0.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px dashed var(--line);
  border-radius:16px;
  color:#9B9A94;
  font-weight:600;
  font-size:1rem;
  text-align:center;
  padding:14px;
  box-shadow:0 10px 28px rgba(18,18,18,0.14);
  transition:border-color .2s var(--ease-smooth), color .2s var(--ease-smooth);
}
.brand-banner:hover{border-color:var(--maroon); color:var(--paper);}
/* A brand-group wraps one brand's banner together with only its own
   products, so it takes the full-width row that a lone .brand-banner
   used to take directly (as a flex child of .brand-banners); the
   .product-grid nested inside it keeps its normal stacked-card styles. */
.brand-banners > .brand-group{
  flex:1 1 100%;
  width:100%;
}
/* Small uppercase family label above each brand's banner, so it's never
   mistaken for just another product row once products are stacked under
   it. A thin rule precedes every family after the first one, closing out
   the previous family before the new label announces the next. */
.brand-family-label{
  margin:0 0 10px;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--mid);
  font-weight:600;
}
.brand-banners > .brand-group + .brand-group{
  border-top:1px solid rgba(18,18,18,0.14);
  padding-top:24px;
}
@media (max-width:720px){
  .brand-banner{aspect-ratio:3/1;}
}

/* ---------- PRODUCT LIST (Entertainment category sections): stacked rows,
   image left + text right, rather than a grid of small square cards ---------- */
.product-grid{
  display:flex;
  flex-direction:column;
  margin-top:8px;
  margin-bottom:40px;
}
.product-grid .product-card{
  padding:28px 0;
  border-bottom:1px solid var(--line);
}
.product-grid .product-card:first-child{padding-top:0;}
.product-grid .product-card:last-child{border-bottom:none; padding-bottom:0;}
/* var(--line) all but disappears against the frosted-glass category-frame
   background, so these dividers get a darker, semi-transparent line instead. */
.category-frame .product-grid .product-card{border-bottom-color:rgba(18,18,18,0.14);}
.product-card{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:32px;
  width:100%;
}
.product-card .img-placeholder,
.product-card .img-frame{
  width:min(300px, 40%);
  max-width:300px;
  flex:none;
  margin-bottom:0;
  aspect-ratio:1/1;
}
.product-card .product-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.product-card h3{
  margin:0;
  font-size:1.2rem;
  text-align:left;
}
.product-card .product-desc{
  margin:0;
  font-size:0.95rem;
  line-height:1.65;
  color:#3a3a38;
}
.product-card .product-visit-link{
  margin-left:auto;
  flex:none;
  white-space:nowrap;
  align-self:flex-end;
}
@media (max-width:720px){
  .product-card{
    flex-direction:column;
    gap:16px;
    text-align:left;
  }
  .product-card .img-placeholder,
  .product-card .img-frame{
    width:100%;
    max-width:min(300px, 100%);
  }
  .product-card h3{font-size:1.1rem;}
  .product-card .product-visit-link{
    margin-left:0;
    margin-top:4px;
    align-self:flex-start;
  }
}

/* ---------- Hide dynamic content briefly while it loads, avoiding a flash
   of static placeholder text before real data (or a hide decision) arrives.
   Only applies when JS is confirmed running (html.js) so a visitor with
   JS disabled still sees the graceful static placeholder as a fallback. ---------- */
html.js .card-grid,
html.js .brand-banners,
html.js .product-grid,
html.js .hub-latest-stack{
  opacity:0;
  transition:opacity .3s var(--ease-smooth);
}
html.js.data-loaded .card-grid,
html.js.data-loaded .brand-banners,
html.js.data-loaded .product-grid,
html.js.data-loaded .hub-latest-stack{
  opacity:1;
}
@media (prefers-reduced-motion: reduce){
  html.js .card-grid,
  html.js .brand-banners,
  html.js .product-grid,
  html.js .hub-latest-stack{
    transition:none;
  }
}

/* ---------- subtle tint wash: News/Latest sections and the footer ---------- */
.tint-wrap{
  background: rgba(124, 31, 46, 0.05);
}

/* ================================================================
   GLASS ACCENT — hero panels + tinted-section cards
   Scope: .hero (hub) and .subpage-hero (music/media) get a brand-
   colored gradient background with a floating frosted content panel.
   Hub's path-cards and the News/Latest feature-cards (which already
   sit inside .tint-wrap) become soft glass cards. Nav, footer, and
   text-heavy/legal pages are deliberately left untouched.
   ================================================================ */

.hero,
.subpage-hero.music,
.subpage-hero.media{
  position:relative;
  overflow:hidden;
  padding:110px 0;
  border-bottom:none;
  isolation:isolate;
}
.hero::before,
.subpage-hero.music::before,
.subpage-hero.media::before{
  content:"";
  position:absolute; inset:0;
  z-index:-2;
}
.hero::before{
  background:linear-gradient(135deg, var(--maroon-deep) 0%, var(--maroon) 45%, var(--violet-deep) 100%);
}
.subpage-hero.music::before{
  background:linear-gradient(135deg, var(--maroon-deep) 0%, var(--maroon) 60%, #1B1B1A 100%);
}
.subpage-hero.media::before{
  background:linear-gradient(135deg, var(--coral-deep) 0%, var(--coral) 55%, #1B1B1A 100%);
}
.hero::after,
.subpage-hero.music::after,
.subpage-hero.media::after{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:50%;
  filter:blur(2px);
  pointer-events:none;
}
.hero::after{
  top:-80px; right:-60px; width:280px; height:280px;
  background:rgba(227,181,99,0.20);
}
.subpage-hero.music::after,
.subpage-hero.media::after{
  bottom:-100px; left:8%; width:300px; height:300px;
  background:rgba(255,255,255,0.10);
}

/* .glass-panel only exists in the markup of hub.html/music.html/entertainment.html,
   so this is inert on any other page even though the selector is unscoped */
.glass-panel{
  display:inline-block;
  max-width:680px;
  padding:38px 42px;
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.28);
  border-radius:20px;
}
.subpage-hero .glass-panel{max-width:620px;}

/* text/links inside the glass hero panel need light-on-dark treatment */
.hero .kicker,
.subpage-hero.music .kicker,
.subpage-hero.media .kicker{color:var(--gold-light);}
.hero .kicker .dot.maroon,
.subpage-hero.music .kicker .dot.maroon,
.subpage-hero.media .kicker .dot.maroon{background:var(--gold-light);}
.hero h1,
.subpage-hero.music h1,
.subpage-hero.media h1{color:var(--paper);}
.hero p.lead,
.subpage-hero.music p.lead,
.subpage-hero.media p.lead{color:rgba(250,249,247,0.85);}
.subpage-hero.media .status-badge{
  border-color:rgba(255,255,255,0.5);
  color:var(--paper);
}
.subpage-hero.media .status-badge .pulse-dot{background:var(--paper);}

/* ---------- hub path-cards become glass cards on the gradient hero ---------- */
.path-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  background:transparent;
  border:none;
  margin-top:36px;
}
.path-card{
  background:rgba(255,255,255,0.14);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.24);
  border-radius:16px;
  padding:44px 38px;
  color:var(--paper);
  transition:background .2s var(--ease-smooth);
}
.path-card:hover{background:rgba(255,255,255,0.20);}
.path-card p{color:rgba(250,249,247,0.82);}
.path-card.music .path-cta,
.path-card.media .path-cta{color:var(--gold-light);}
.path-card .status-badge{border-color:rgba(255,255,255,0.5); color:var(--paper);}
.path-card .status-badge .pulse-dot{background:var(--paper);}
.hero .mini-wave rect{fill:var(--gold-light);}
.hero .mini-wave rect:nth-child(2n){fill:var(--paper);}
.hero .mini-frames rect{fill:var(--paper);}
.hero .mini-frames rect.hot{fill:var(--gold-light);}

@media (max-width:820px){
  .path-cards{grid-template-columns:1fr;}
  .path-card{padding:36px 30px;}
}

/* ---------- News/Latest feature-cards: glass, since they already sit on .tint-wrap ---------- */
.tint-wrap .info-card.feature-card{
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:20px;
  box-shadow:0 10px 30px rgba(18,18,18,0.06);
  padding:22px;
}

/* ---------- mobile: dial back blur intensity + drop decorative blobs ---------- */
@media (max-width:720px){
  .hero,
  .subpage-hero.music,
  .subpage-hero.media{padding:64px 0;}
  .hero::after,
  .subpage-hero.music::after,
  .subpage-hero.media::after{display:none;}
  .glass-panel{
    display:block;
    padding:28px 24px;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .path-card{
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .tint-wrap .info-card.feature-card{
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    padding:18px;
  }
  .img-placeholder{
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .brand-banner{
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
}


/* ================================================================
   NEWS + LATEST — magazine style (music + media pages only)
   Accent per page: maroon on music, coral on media. Hub unchanged.
   ================================================================ */
#musicNewsGrid{--nl-rgb:124,31,46; --nl-text:var(--maroon);}
#mediaNewsGrid{--nl-rgb:201,146,46; --nl-text:var(--coral-text);}
#releaseGrid{--nl-rgb:124,31,46; --nl-text:var(--maroon);}
#videosGrid{--nl-rgb:201,146,46; --nl-text:var(--coral-text);}

/* Latest cards: photo on top, flush to the edges */
#releaseGrid.card-grid,
#videosGrid.card-grid{grid-template-columns:repeat(auto-fit, minmax(240px, 320px));}
#releaseGrid .info-card.feature-card,
#videosGrid .info-card.feature-card{
  padding:0;
  gap:0;
  min-height:0;
  max-width:320px;
  overflow:hidden;
  background:#fff;
  border:none;
  border-radius:18px;
  box-shadow:0 14px 30px rgba(18,18,18,0.16);
}
#releaseGrid .info-card.feature-card .img-frame,
#releaseGrid .info-card.feature-card .img-placeholder,
#videosGrid .info-card.feature-card .img-frame,
#videosGrid .info-card.feature-card .img-placeholder{
  max-width:none; width:100%;
  border-radius:0; box-shadow:none;
  margin:0;
}
#releaseGrid .info-card.feature-card > :not(.img-frame):not(.img-placeholder),
#videosGrid .info-card.feature-card > :not(.img-frame):not(.img-placeholder){margin-left:18px; margin-right:18px;}
#releaseGrid .info-card.feature-card h3,
#videosGrid .info-card.feature-card h3{margin-top:16px;}
#releaseGrid .info-card.feature-card > :last-child,
#videosGrid .info-card.feature-card > :last-child{margin-bottom:18px;}
#releaseGrid .info-card.feature-card .panel-cta{color:var(--nl-text) !important; align-self:flex-start;}
#releaseGrid .info-card.feature-card h3::before,
#videosGrid .info-card.feature-card h3::before{
  content:"New";
  display:inline-block; vertical-align:middle;
  margin-right:8px;
  font-family:'Inter','Inter Fallback',sans-serif;
  font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600;
  color:#fff; background:var(--nl-text);
  padding:3px 9px; border-radius:99px;
}


/* Media Latest card: keep the video panel, tag and link inside the card padding */
#videosGrid .info-card.feature-card > .product-video{width:auto; margin-top:16px; box-sizing:border-box;}
#videosGrid .info-card.feature-card > .panel-tag{margin-top:16px; margin-bottom:0;}
#videosGrid .info-card.feature-card > .panel-cta,
#videosGrid .info-card.feature-card > .product-visit-link{align-self:flex-start; margin-top:14px;}
#videosGrid .info-card.feature-card h3{margin-top:12px;}

/* ================================================================
   CATEGORY SECTIONS (entertainment.html) — magazine style
   Each product is its own white card: picture flush on one side,
   text on the other, solid "Visit site" button. Coral accent.
   ================================================================ */
.category-section .brand-family-label{
  display:flex; align-items:center; gap:12px;
  margin:0 0 12px;
  font-size:11px; letter-spacing:0.14em; font-weight:700;
  color:var(--coral-text);
}
.category-section .brand-family-label::after{
  content:""; flex:1; height:1px; background:rgba(138,95,22,0.4);
}
.category-section .brand-banners > .brand-group + .brand-group{border-top:none; padding-top:36px;}
.category-section .brand-banner{
  border-radius:18px;
  box-shadow:0 14px 30px rgba(18,18,18,0.22);
}
.category-section .brand-group > .brand-banner{margin-bottom:18px;}

.category-section .product-grid{gap:18px;}
.category-section .product-grid .product-card,
.category-section .category-frame .product-grid .product-card{
  display:flex; flex-direction:row; flex-wrap:nowrap;
  align-items:stretch; gap:0;
  padding:0;
  background:#fff;
  border:none;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(18,18,18,0.14);
}
.category-section .product-card .img-frame,
.category-section .product-card .img-placeholder{
  width:min(220px, 36%);
  max-width:none;
  flex:none;
  aspect-ratio:auto;
  min-height:200px;
  align-self:stretch;
  border-radius:0;
  box-shadow:none;
  margin:0;
}
.category-section .product-card .img-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.category-section .product-card .product-body{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:10px;
  padding:22px 24px;
}
.category-section .product-card h3{font-size:1.3rem; line-height:1.25;}
.category-section .product-card .product-video{margin-top:4px; padding:14px; width:auto;}
.category-section .product-card .product-visit-link,
.category-section .product-card.has-video > .product-visit-link,
.category-section .product-card .product-body > .product-visit-link{
  align-self:flex-start;
  margin:auto 0 0;
  background:var(--coral-text);
  color:#fff !important;
  border:none;
  padding:9px 18px;
  border-radius:99px;
  font-size:0.84rem; font-weight:600;
  white-space:nowrap;
}
@media (max-width:720px){
  .category-section .product-grid .product-card,
  .category-section .category-frame .product-grid .product-card{flex-direction:column;}
  .category-section .product-card .img-frame,
  .category-section .product-card .img-placeholder{width:100%; min-height:0; aspect-ratio:16/10;}
  .category-section .product-card .product-body{padding:18px;}
}

/* Product cards with a video are tall, so a side image would be cropped into
   a thin strip. Those cards put the picture on top as a wide band instead. */
.category-section .product-grid .product-card.has-video,
.category-section .category-frame .product-grid .product-card.has-video{flex-direction:column;}
.category-section .product-card.has-video .img-frame,
.category-section .product-card.has-video .img-placeholder{
  width:100%;
  min-height:0;
  aspect-ratio:auto;
  height:clamp(200px, 26vw, 300px);
  align-self:auto;
}
.category-section .product-card.has-video .product-visit-link{margin-top:6px;}

/* ================================================================
   HUB "Latest" cards — magazine style
   Cover flush at the top of a white card, NEW tag on the title,
   maroon accent for Music and coral for Media.
   ================================================================ */
#hubLatestMusic{--nl-text:var(--maroon);}
#hubLatestMedia{--nl-text:var(--coral-text);}
#hubLatestMusic.info-card.feature-card,
#hubLatestMedia.info-card.feature-card{
  padding:0;
  gap:10px;
  min-height:0;
  overflow:hidden;
  background:#fff;
  border:none;
  border-radius:18px;
  box-shadow:0 14px 30px rgba(18,18,18,0.16);
}
#hubLatestMusic .slideshow-wrap,
#hubLatestMedia .slideshow-wrap{
  max-width:none;
  display:flex; flex-direction:column; gap:10px;
}
#hubLatestMusic .img-frame, #hubLatestMusic .img-placeholder,
#hubLatestMedia .img-frame, #hubLatestMedia .img-placeholder{
  width:100%; max-width:none;
  margin:0;
  border-radius:0; box-shadow:none;
}
#hubLatestMusic .panel-tag, #hubLatestMedia .panel-tag{margin:6px 18px 0; align-self:flex-start;}
#hubLatestMusic h3, #hubLatestMedia h3,
#hubLatestMusic p, #hubLatestMedia p,
#hubLatestMusic .panel-cta, #hubLatestMedia .panel-cta{margin-left:18px; margin-right:18px;}
#hubLatestMusic .panel-cta, #hubLatestMedia .panel-cta{align-self:flex-start; color:var(--nl-text) !important;}
#hubLatestMusic .slideshow-nav, #hubLatestMedia .slideshow-nav{margin:6px 18px 16px;}
#hubLatestMusic > :last-child:not(.slideshow-wrap),
#hubLatestMedia > :last-child:not(.slideshow-wrap){margin-bottom:18px;}
#hubLatestMusic h3::before, #hubLatestMedia h3::before{
  content:"New";
  display:inline-block; vertical-align:middle;
  margin-right:8px;
  font-family:'Inter','Inter Fallback',sans-serif;
  font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600;
  color:#fff; background:var(--nl-text);
  padding:3px 9px; border-radius:99px;
}

/* ================================================================
   LATEST CARDS — poster style (hub, music, media)
   The picture fills the card; title, date and link sit over a dark
   gradient at the bottom. Accent: maroon (music), coral (media).
   ================================================================ */
#releaseGrid{--nl-text:var(--maroon);}
#videosGrid{--nl-text:var(--coral-text);}

#videosGrid .info-card.feature-card,
#releaseGrid .info-card.feature-card,
#hubLatestMusic.info-card.feature-card,
#hubLatestMedia.info-card.feature-card{
  position:relative;
  isolation:isolate;
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:8px;
  min-height:460px;
  max-width:400px;
  padding:0 0 18px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(var(--nl-rgb),0.9), #171515);
  border:none;
  border-radius:20px;
  box-shadow:0 18px 36px rgba(18,18,18,0.26);
  color:#fff;
}
#hubLatestMusic{--nl-rgb:124,31,46;}
#hubLatestMedia{--nl-rgb:201,146,46;}

/* picture as the card background */
#videosGrid .info-card.feature-card .img-frame,
#videosGrid .info-card.feature-card .img-placeholder,
#releaseGrid .info-card.feature-card .img-frame,
#releaseGrid .info-card.feature-card .img-placeholder,
#hubLatestMusic .img-frame, #hubLatestMusic .img-placeholder,
#hubLatestMedia .img-frame, #hubLatestMedia .img-placeholder{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; max-width:none; min-height:0;
  aspect-ratio:auto;
  margin:0;
  border-radius:0; box-shadow:none;
}
#videosGrid .info-card.feature-card .img-frame img,
#releaseGrid .info-card.feature-card .img-frame img,
#hubLatestMusic .img-frame img,
#hubLatestMedia .img-frame img{width:100%; height:100%; object-fit:cover; display:block;}
#videosGrid .info-card.feature-card .img-placeholder,
#releaseGrid .info-card.feature-card .img-placeholder,
#hubLatestMusic .img-placeholder, #hubLatestMedia .img-placeholder{background:transparent; border:none; color:transparent;}
#videosGrid .info-card.feature-card::after,
#releaseGrid .info-card.feature-card::after,
#hubLatestMusic.info-card.feature-card::after,
#hubLatestMedia.info-card.feature-card::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(0deg, rgba(18,18,18,0.92), rgba(18,18,18,0.12) 70%);
}

/* hub: the slideshow wrapper becomes the bottom text stack */
#hubLatestMusic .slideshow-wrap, #hubLatestMedia .slideshow-wrap{
  flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; max-width:none;
}

/* text over the picture */
#videosGrid .info-card.feature-card h3,
#releaseGrid .info-card.feature-card h3,
#hubLatestMusic h3, #hubLatestMedia h3{color:#fff; font-size:1.3rem; line-height:1.25; margin:0 18px;}
#videosGrid .info-card.feature-card p,
#releaseGrid .info-card.feature-card p,
#hubLatestMusic p, #hubLatestMedia p{color:rgba(255,255,255,0.85); margin:0 18px;}
#videosGrid .info-card.feature-card h3::before,
#releaseGrid .info-card.feature-card h3::before,
#hubLatestMusic h3::before, #hubLatestMedia h3::before{
  background:rgba(255,255,255,0.94); color:var(--nl-text);
}
#videosGrid .info-card.feature-card > .panel-tag,
#hubLatestMusic .panel-tag, #hubLatestMedia .panel-tag{
  align-self:flex-start; margin:0 18px;
  background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.4); color:#fff;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
#videosGrid .info-card.feature-card .panel-cta,
#releaseGrid .info-card.feature-card .panel-cta,
#hubLatestMusic .panel-cta, #hubLatestMedia .panel-cta{
  color:#fff !important; align-self:flex-start; margin:2px 18px 0;
}
#videosGrid .info-card.feature-card > .product-video{
  background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.3);
  margin:6px 18px 0; width:auto;
}
#hubLatestMusic .slideshow-nav, #hubLatestMedia .slideshow-nav{margin:6px 18px 0;}
#hubLatestMusic .slideshow-arrow, #hubLatestMedia .slideshow-arrow{background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.4); color:#fff;}
#hubLatestMusic .slideshow-dot, #hubLatestMedia .slideshow-dot{background:rgba(255,255,255,0.4);}
#hubLatestMusic .slideshow-dot.active, #hubLatestMedia .slideshow-dot.active{background:#fff;}

/* A little more breathing room around the poster-style Latest cards */
.category-frame:has(#videosGrid),
.category-frame:has(#releaseGrid),
.category-frame:has(#hubLatestMusic){padding:44px 32px 52px;}
@media (max-width:720px){
  .category-frame:has(#videosGrid),
  .category-frame:has(#releaseGrid),
  .category-frame:has(#hubLatestMusic){padding:28px 20px 36px;}
}

/* Music Latest release cards: same 400px width as the Latest cards on the
   hub and media pages. Height matches the width so square cover art isn't
   cropped at the sides. */
#releaseGrid.card-grid{grid-template-columns:repeat(auto-fit, minmax(240px, 400px));}
#releaseGrid .info-card.feature-card{max-width:400px; min-height:400px;}

/* ===== News cards — style A (accent card + glass rows) ===== */
#hubNewsGrid{--nl-rgb:124,31,46; --nl-text:var(--maroon);}
#musicNewsGrid .news-list,#mediaNewsGrid .news-list,#hubNewsGrid .news-list{display:flex; flex-direction:column; gap:16px; width:100%;}
#musicNewsGrid .news-main,#mediaNewsGrid .news-main,#hubNewsGrid .news-main{
  display:flex; flex-direction:row; align-items:center; gap:22px;
  padding:20px; background:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.8);
  border-radius:16px;
  box-shadow:0 12px 30px rgba(var(--nl-rgb),0.12);
}
#musicNewsGrid .news-main .img-frame,#musicNewsGrid .news-main .img-placeholder,
#mediaNewsGrid .news-main .img-frame,#mediaNewsGrid .news-main .img-placeholder,
#hubNewsGrid .news-main .img-frame,#hubNewsGrid .news-main .img-placeholder{
  flex:0 0 220px; width:220px; max-width:220px; aspect-ratio:4/3; margin:0; border-radius:12px; overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
}
#musicNewsGrid .news-main .img-frame img,#mediaNewsGrid .news-main .img-frame img,#hubNewsGrid .news-main .img-frame img{width:100%; height:100%; object-fit:cover; display:block;}
#musicNewsGrid .news-main .news-body,#mediaNewsGrid .news-main .news-body,#hubNewsGrid .news-main .news-body{flex:1; min-width:0; padding:0;}
#musicNewsGrid .news-main .news-body::before,#mediaNewsGrid .news-main .news-body::before,#hubNewsGrid .news-main .news-body::before{
  content:"Latest news"; display:inline-block; margin-bottom:10px; padding:4px 12px; border-radius:999px;
  background:rgb(var(--nl-rgb)); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
#musicNewsGrid .news-main .panel-cta,#mediaNewsGrid .news-main .panel-cta,#hubNewsGrid .news-main .panel-cta{color:var(--nl-text); font-weight:700;}
#musicNewsGrid .news-main-divider,#mediaNewsGrid .news-main-divider,#hubNewsGrid .news-main-divider{display:none;}
#musicNewsGrid .news-secondary-list,#mediaNewsGrid .news-secondary-list,#hubNewsGrid .news-secondary-list{display:flex; flex-direction:column; gap:10px;}
#musicNewsGrid .news-secondary-item,#mediaNewsGrid .news-secondary-item,#hubNewsGrid .news-secondary-item{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 16px; background:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.75); border-radius:12px;
  text-decoration:none;
}
#musicNewsGrid .sec-left,#mediaNewsGrid .sec-left,#hubNewsGrid .sec-left{display:flex; align-items:center; gap:10px; min-width:0;}
#musicNewsGrid .sec-left::before,#mediaNewsGrid .sec-left::before,#hubNewsGrid .sec-left::before{
  content:""; flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:rgb(var(--nl-rgb));
}
#musicNewsGrid .sec-right,#mediaNewsGrid .sec-right,#hubNewsGrid .sec-right{display:flex; align-items:center; gap:12px; flex:0 0 auto;}
#musicNewsGrid .sec-arrow,#mediaNewsGrid .sec-arrow,#hubNewsGrid .sec-arrow{color:var(--nl-text); font-weight:700;}
@media (max-width:640px){
  #musicNewsGrid .news-main,#mediaNewsGrid .news-main,#hubNewsGrid .news-main{flex-direction:column; align-items:stretch;}
  #musicNewsGrid .news-main .img-frame,#musicNewsGrid .news-main .img-placeholder,
  #mediaNewsGrid .news-main .img-frame,#mediaNewsGrid .news-main .img-placeholder,
  #hubNewsGrid .news-main .img-frame,#hubNewsGrid .news-main .img-placeholder{flex:none; width:100%; max-width:100%;}
  #musicNewsGrid .news-secondary-item,#mediaNewsGrid .news-secondary-item,#hubNewsGrid .news-secondary-item{flex-wrap:wrap;}
}
#musicNewsGrid .news-main .news-body::before,#mediaNewsGrid .news-main .news-body::before,#hubNewsGrid .news-main .news-body::before{align-self:flex-start; width:fit-content;}
#musicNewsGrid .sec-left,#mediaNewsGrid .sec-left,#hubNewsGrid .sec-left{flex:1; justify-content:flex-start;}
@media (max-width:640px){
  #musicNewsGrid .news-secondary-item,#mediaNewsGrid .news-secondary-item,#hubNewsGrid .news-secondary-item{flex-wrap:nowrap;}
  #musicNewsGrid .sec-left,#mediaNewsGrid .sec-left,#hubNewsGrid .sec-left{flex-wrap:wrap;}
}
@media (max-width:640px){
  #musicNewsGrid .news-secondary-item,#mediaNewsGrid .news-secondary-item,#hubNewsGrid .news-secondary-item{flex-direction:row; align-items:center; gap:12px;}
  #musicNewsGrid .news-secondary-item .sec-right,#mediaNewsGrid .news-secondary-item .sec-right,#hubNewsGrid .news-secondary-item .sec-right{width:auto;}
}
#musicNewsGrid.card-grid,#mediaNewsGrid.card-grid,#hubNewsGrid.card-grid{display:block;}
#musicNewsGrid .news-list,#mediaNewsGrid .news-list,#hubNewsGrid .news-list{max-width:900px; width:100%; margin:0 auto;}
#musicNewsGrid .news-main .news-body p,#mediaNewsGrid .news-main .news-body p,#hubNewsGrid .news-main .news-body p{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;}
#musicNewsGrid .news-main .news-body p.news-meta,#mediaNewsGrid .news-main .news-body p.news-meta,#hubNewsGrid .news-main .news-body p.news-meta{display:block; -webkit-line-clamp:unset;}

/* ===== Artist cards — red panel (option 3: deep gradient + gold edge).
   To switch to plain maroon (option 1), replace the background line with
   background:var(--maroon); and delete the border-left line. ===== */
.info-card.artist-card{
  padding:22px; border-radius:18px;
  background:linear-gradient(160deg,#A8394D,#5c1420);
  border-left:5px solid #e8b04a;
  box-shadow:0 12px 30px rgba(92,20,32,0.25);
  color:#fff;
}
.info-card.artist-card h3,
.info-card.artist-card p{color:#fff;}
.info-card.artist-card .img-frame,
.info-card.artist-card .img-placeholder{border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.3);}
.info-card.artist-card .artist-toggle,
.info-card.artist-card .artist-pagelink{color:#fff;}
.info-card.artist-card .artist-detail{border-top-color:rgba(255,255,255,0.25);}
.info-card.artist-card .artist-detail p{color:rgba(255,255,255,0.92);}
.info-card.artist-card .discography-arrow{background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.4); color:#fff;}
.info-card.artist-card .discography-arrow:hover{border-color:#e8b04a; color:#e8b04a;}
.info-card.artist-card .discography-tile p{color:#fff;}

/* ===== Artist cards — option 4: dark red + glass panel behind the words ===== */
.info-card.artist-card{
  background:radial-gradient(circle at 20% 0%,#7C1F2E 0,transparent 55%),radial-gradient(circle at 90% 100%,#5c1420 0,transparent 55%),#2A0F14;
  box-shadow:0 14px 34px rgba(42,10,16,0.4);
}
.info-card.artist-card .artist-glass{
  background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.2); border-radius:14px;
  padding:16px; margin-top:2px; display:flex; flex-direction:column; gap:14px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.info-card.artist-card .img-frame,
.info-card.artist-card .img-placeholder{box-shadow:0 8px 20px rgba(0,0,0,0.4);}

/* ===== Artist section — one flat maroon wall behind all artist cards ===== */
#artistsGrid.card-grid{
  background:#7C1F2E; border-radius:22px; padding:32px; align-items:start;
}
@media (max-width:640px){ #artistsGrid.card-grid{padding:18px; border-radius:18px;} }

/* ===== Artist section — option E: deep wine wall + frosted glass cards ===== */
#artistsGrid.card-grid{background:#2A0F14;}
.info-card.artist-card{
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.25); border-left:5px solid #e8b04a;
  box-shadow:0 10px 26px rgba(0,0,0,0.3);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.info-card.artist-card .artist-glass{background:none; border:none; padding:0; margin:0; -webkit-backdrop-filter:none; backdrop-filter:none;}

/* ===== Artist section — light wall (slightly darker than the frame), no gold trim ===== */
#artistsGrid.card-grid{background:#E4DBD7;}
.info-card.artist-card{
  background:rgba(96,20,34,0.94);
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:0 12px 28px rgba(42,15,20,0.28);
}

/* ===== Artist cards — red-tinted glass on the light wall ===== */
.info-card.artist-card{
  background:linear-gradient(145deg,rgba(168,57,77,0.72),rgba(92,20,32,0.82));
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:0 14px 30px rgba(92,20,32,0.28), inset 0 1px 0 rgba(255,255,255,0.45);
  -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
}

/* ===== Artist cards — taupe glass, same color as the wall ===== */
.info-card.artist-card{
  background:linear-gradient(145deg,rgba(255,255,255,0.5),rgba(255,255,255,0.12)),#E4DBD7;
  border:1px solid rgba(255,255,255,0.8);
  box-shadow:0 12px 26px rgba(60,40,36,0.18), inset 0 1px 0 rgba(255,255,255,0.8);
  color:var(--ink);
}
.info-card.artist-card h3{color:var(--ink);}
.info-card.artist-card p,
.info-card.artist-card .artist-detail p,
.info-card.artist-card .discography-tile p{color:#3a3a38;}
.info-card.artist-card .artist-toggle,
.info-card.artist-card .artist-pagelink{color:var(--maroon);}
.info-card.artist-card .artist-detail{border-top-color:rgba(18,18,18,0.14);}
.info-card.artist-card .discography-arrow{background:rgba(255,255,255,0.6); border-color:rgba(18,18,18,0.18); color:var(--maroon);}
.info-card.artist-card .discography-arrow:hover{border-color:var(--maroon); color:var(--maroon);}
.info-card.artist-card .img-frame,
.info-card.artist-card .img-placeholder{box-shadow:0 8px 20px rgba(60,40,36,0.22);}

/* ===== Artist cards — no card; text and photos sit directly on the wall ===== */
.info-card.artist-card{
  background:none; border:none; box-shadow:none; border-radius:0; padding:0;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* ===== Artist wall — deep wine, light text ===== */
#artistsGrid.card-grid{background:#2A0F14;}
.info-card.artist-card,
.info-card.artist-card h3,
.info-card.artist-card p,
.info-card.artist-card .artist-detail p,
.info-card.artist-card .discography-tile p{color:#fff;}
.info-card.artist-card p,
.info-card.artist-card .artist-detail p{color:rgba(255,255,255,0.9);}
.info-card.artist-card .artist-toggle,
.info-card.artist-card .artist-pagelink{color:#e8b04a;}
.info-card.artist-card .artist-detail{border-top-color:rgba(255,255,255,0.22);}
.info-card.artist-card .discography-arrow{background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.35); color:#fff;}
.info-card.artist-card .discography-arrow:hover{border-color:#e8b04a; color:#e8b04a;}
.info-card.artist-card .img-frame,
.info-card.artist-card .img-placeholder{box-shadow:0 8px 20px rgba(0,0,0,0.45);}

/* ===== Artist wall — frosted wine glass ===== */
#artistsGrid.card-grid{
  background:linear-gradient(145deg,rgba(124,31,46,0.78),rgba(42,15,20,0.88));
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:0 18px 40px rgba(42,15,20,0.3), inset 0 1px 0 rgba(255,255,255,0.45);
  -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%);
}

/* ===== Artists — Featured stage (one artist large, thumbnails to switch) ===== */
#artistsGrid.card-grid{display:block; padding:34px;}
#artistsGrid .info-card.artist-card{
  display:none; position:relative; max-width:none; width:100%;
  grid-template-columns:1.1fr 1fr; gap:36px; align-items:center;
}
#artistsGrid .info-card.artist-card.is-active{display:grid;}
#artistsGrid .artist-card .img-frame,
#artistsGrid .artist-card .img-placeholder{
  width:100%; max-width:none; aspect-ratio:1; margin:0; border-radius:20px; position:relative;
}
#artistsGrid .artist-card .img-frame .data-img{width:100%; height:100%; object-fit:cover;}
#artistsGrid .artist-card::before{
  content:"Featured"; position:absolute; top:16px; left:16px; z-index:2;
  background:#e8b04a; color:#2A0F14; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:99px;
}
#artistsGrid .artist-card .artist-glass{min-width:0;}
#artistsGrid .artist-tag{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#e8b04a; font-weight:600;}
#artistsGrid .artist-card h3{font-size:clamp(1.8rem,3.6vw,2.6rem); line-height:1.1;}
#artistsGrid .artist-thumbs{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px;}
#artistsGrid .artist-thumb{
  width:64px; height:64px; padding:0; border-radius:10px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; background:rgba(255,255,255,0.12); color:#fff; font-size:1.2rem; opacity:.7;
}
#artistsGrid .artist-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
#artistsGrid .artist-thumb.on{opacity:1; border-color:#e8b04a;}
@media (max-width:760px){
  #artistsGrid.card-grid{padding:18px;}
  #artistsGrid .info-card.artist-card{grid-template-columns:1fr; gap:20px;}
}

/* ===== Latest — Featured stage (music "Latest release" + media "Latest") ===== */
#releaseGrid{--lat-rgb:124,31,46; --lat-deep:42,15,20; --lat-acc:#e8b04a;}
#videosGrid{--lat-rgb:168,118,30; --lat-deep:42,29,10; --lat-acc:#FFE2A8;}
#releaseGrid.card-grid,#videosGrid.card-grid{
  display:block; padding:34px; max-width:none;
  background:linear-gradient(145deg,rgba(var(--lat-rgb),0.82),rgba(var(--lat-deep),0.9));
  border:1px solid rgba(255,255,255,0.55); border-radius:22px;
  box-shadow:0 18px 40px rgba(var(--lat-deep),0.3), inset 0 1px 0 rgba(255,255,255,0.45);
  -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%);
  color:#fff;
}
.latest-card{display:none; position:relative; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center; color:#fff;}
.latest-card.is-active{display:grid;}
.latest-card .img-frame,.latest-card .img-placeholder{
  width:100%; max-width:none; aspect-ratio:1; margin:0; border-radius:20px; position:relative;
  box-shadow:0 12px 28px rgba(0,0,0,0.4);
}
.latest-card .img-frame .data-img{width:100%; height:100%; object-fit:cover;}
.latest-card::before{
  content:"New"; position:absolute; top:16px; left:16px; z-index:2;
  background:var(--lat-acc); color:#2A0F14; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:99px;
}
.latest-text{display:flex; flex-direction:column; gap:12px; min-width:0; align-items:flex-start;}
.latest-tag{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lat-acc); font-weight:600;}
.latest-card h3{color:#fff; font-size:clamp(1.8rem,3.6vw,2.6rem); line-height:1.1; margin:0;}
.latest-card p{color:rgba(255,255,255,0.9); margin:0;}
.latest-cta{color:var(--lat-acc); border-bottom:1px solid currentColor; font-weight:500; text-decoration:none; width:fit-content;}
.latest-cta.is-disabled{pointer-events:none;}
.latest-card .product-video{width:100%; margin:0;}
.latest-thumbs{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px;}
.latest-thumb{
  width:64px; height:64px; padding:0; border-radius:10px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; background:rgba(255,255,255,0.12); color:#fff; font-size:1.2rem; opacity:.7;
}
.latest-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.latest-thumb.on{opacity:1; border-color:var(--lat-acc);}
@media (max-width:760px){
  #releaseGrid.card-grid,#videosGrid.card-grid{padding:18px;}
  .latest-card{grid-template-columns:1fr; gap:20px;}
}

/* ===== Latest — colorless (neutral graphite glass, white accents) ===== */
#releaseGrid,#videosGrid{--lat-rgb:70,70,74; --lat-deep:22,22,24; --lat-acc:#ffffff;}
.latest-card::before{color:#121212;}

/* ===== Latest — just text and image on the page (no wall, no badge) ===== */
#releaseGrid.card-grid,#videosGrid.card-grid{
  background:none; border:none; box-shadow:none; border-radius:0; padding:0;
  -webkit-backdrop-filter:none; backdrop-filter:none; color:var(--ink,#121212);
}
#releaseGrid,#videosGrid{--lat-acc:var(--ink,#121212);}
.latest-card{color:var(--ink,#121212);}
.latest-card::before{display:none;}
.latest-card h3{color:var(--ink,#121212);}
.latest-card p{color:#3a3a38;}
.latest-tag{color:#6E6D67;}
.latest-cta{color:var(--ink,#121212);}
.latest-card .img-frame,.latest-card .img-placeholder{box-shadow:0 10px 28px rgba(18,18,18,0.14);}
.latest-thumb{background:rgba(18,18,18,0.06); color:var(--ink,#121212);}
.latest-thumb.on{border-color:var(--ink,#121212);}

/* ===== Artists — Spotlight (everyone listed, photo alternating left/right) ===== */
#artistsGrid.card-grid{display:flex; flex-direction:column; gap:48px; padding:38px;}
#artistsGrid .info-card.artist-card{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:38px; align-items:center;}
#artistsGrid .info-card.artist-card:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,340px);}
#artistsGrid .info-card.artist-card:nth-child(even) > .img-frame,
#artistsGrid .info-card.artist-card:nth-child(even) > .img-placeholder{order:2;}
#artistsGrid .artist-card::before{display:none;}
#artistsGrid .artist-thumbs{display:none;}
@media (max-width:760px){
  #artistsGrid.card-grid{gap:36px; padding:18px;}
  #artistsGrid .info-card.artist-card,
  #artistsGrid .info-card.artist-card:nth-child(even){grid-template-columns:1fr; gap:20px;}
  #artistsGrid .info-card.artist-card:nth-child(even) > .img-frame,
  #artistsGrid .info-card.artist-card:nth-child(even) > .img-placeholder{order:0;}
}

/* ===== Latest — smaller size (cover up to 380px, smaller title) ===== */
.latest-card{grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:34px;}
.latest-card h3{font-size:clamp(1.5rem,2.6vw,2rem);}
@media (max-width:760px){.latest-card{grid-template-columns:1fr; gap:20px;}}

/* ===== Hub — Latest uses the same stage layout (Music, then Entertainment) ===== */
.hub-latest-stack{display:flex; flex-direction:column; gap:56px; padding:20px 0;}
.hub-stage{display:block; --lat-acc:var(--ink,#121212);}

/* ===== Product cards — images always square; softer card background ===== */
.category-section .product-grid .product-card,
.category-section .category-frame .product-grid .product-card,
.category-section .product-grid .product-card.has-video,
.category-section .category-frame .product-grid .product-card.has-video{
  flex-direction:row; align-items:flex-start;
  background:#FAF1E0;
  border:1px solid rgba(124,80,20,0.14);
}
.category-section .product-card .img-frame,
.category-section .product-card .img-placeholder,
.category-section .product-card.has-video .img-frame,
.category-section .product-card.has-video .img-placeholder{
  width:260px; max-width:42%; height:auto; min-height:0;
  aspect-ratio:1/1; flex:none; align-self:flex-start;
  border-radius:0;
}
.category-section .product-card .img-frame img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:720px){
  .category-section .product-grid .product-card,
  .category-section .category-frame .product-grid .product-card,
  .category-section .product-grid .product-card.has-video,
  .category-section .category-frame .product-grid .product-card.has-video{flex-direction:column; align-items:stretch;}
  .category-section .product-card .img-frame,
  .category-section .product-card .img-placeholder,
  .category-section .product-card.has-video .img-frame,
  .category-section .product-card.has-video .img-placeholder{width:100%; max-width:none; aspect-ratio:1/1; height:auto; min-height:0;}
}

/* ===== Product cards with video — text on top, then square image and video side by side, centered ===== */
.category-section .product-grid .product-card.has-video,
.category-section .category-frame .product-grid .product-card.has-video{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  grid-template-areas:"info info" "img video" "link link";
  gap:20px 24px; align-items:center;
  padding:24px;
}
.category-section .product-card.has-video > .product-body{display:contents;}
.category-section .product-card.has-video .product-info{grid-area:info;}
.category-section .product-card.has-video > .img-frame,
.category-section .product-card.has-video > .img-placeholder{
  grid-area:img; width:300px; max-width:none; align-self:center; border-radius:14px; overflow:hidden;
  box-shadow:0 10px 24px rgba(18,18,18,0.18);
}
.category-section .product-card.has-video .product-video{grid-area:video; align-self:center; margin:0; width:auto;}
.category-section .product-card.has-video .product-visit-link{grid-area:link; margin:0;}
@media (max-width:820px){
  .category-section .product-grid .product-card.has-video,
  .category-section .category-frame .product-grid .product-card.has-video{
    grid-template-columns:1fr; grid-template-areas:"info" "img" "video" "link"; padding:18px;
  }
  .category-section .product-card.has-video > .img-frame,
  .category-section .product-card.has-video > .img-placeholder{width:100%;}
}
.category-section .product-card.has-video .product-visit-link{justify-self:start;}

/* ===== FORMAT RULES for Entertainment categories =====
   1) Product images are ALWAYS square (1:1), at any size or layout.
   2) Brand banners ALWAYS keep one ratio (5:1), at any size, and always sit
      above their own products. */
.product-card .img-frame,
.product-card .img-placeholder,
.category-section .product-card .img-frame,
.category-section .product-card .img-placeholder{
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  min-height:0 !important;
}
.product-card .img-frame img,
.product-card .img-frame .data-img{width:100%; height:100%; object-fit:cover; display:block;}

.brand-banner,
.category-section .brand-banner{
  aspect-ratio:5 / 1 !important;
  min-height:0 !important;
  height:auto;
  width:100%;
}
.brand-banner img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:720px){
  .brand-banner,.category-section .brand-banner{aspect-ratio:5 / 1 !important;}
}
.category-section .brand-group{display:flex; flex-direction:column;}
.category-section .brand-group > .brand-family-label{order:-2;}
.category-section .brand-group > .brand-banner{order:-1;}
.category-section .brand-group > .product-grid{order:0;}

/* Latest — gentle fade when the next card appears */
@media (prefers-reduced-motion: no-preference){
  .latest-card.is-active{animation:latestFade .6s ease both;}
  @keyframes latestFade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
}

/* Hub — thin divider between the Music and Entertainment Latest cards */
.hub-latest-stack{gap:0;}
.hub-stage + .hub-stage{border-top:1px solid rgba(18,18,18,0.14); margin-top:44px; padding-top:44px;}

/* ---------- SIDE GUTTER FIX ----------
   .section-head resets padding to "x 0", which removed the side gutter
   from elements that are both .wrap and .section-head. Restore it. */
.wrap.section-head{padding-left:32px; padding-right:32px;}
@media (max-width:720px){
  .wrap{padding-left:20px; padding-right:20px;}
  .wrap.section-head{padding-left:20px; padding-right:20px;}
}

/* ---------- CONTACT LINK + FOOTER SPACING ---------- */
.info-card > .panel-cta{align-self:flex-start; justify-self:start; width:fit-content; max-width:100%;}
.contact-line .social-icons-row{display:inline-flex; align-items:center; gap:14px; margin-top:14px;}

/* Work-with section: single contact card lines up with the heading on the left */
#media-work-band .card-grid{justify-content:start; padding-bottom:48px;}

/* Anti-flash: pages hide their body until this stylesheet has loaded
   (see the small <style> in each page's <head>). Once this file loads, show it. */
html.sz-guard body{opacity:1;}

/* ---------- tagline ---------- */
.hero-tagline{
  margin-top:14px;
  font-family:'Space Grotesk','Space Grotesk Fallback','Inter','Inter Fallback',sans-serif;
  font-weight:600;
  font-size:1.2rem;
  letter-spacing:0.03em;
  color:var(--gold-light);
}
.footer-tagline{
  margin-top:10px;
  font-family:'Space Grotesk','Space Grotesk Fallback','Inter','Inter Fallback',sans-serif;
  font-weight:600;
  font-size:0.95rem;
  letter-spacing:0.03em;
  color:var(--maroon);
}
.intro-footer .legal p.footer-tagline{margin:0 0 10px; color:var(--maroon);}

/* product card: "View product" + "Visit site" together. The wrapper adds no
   layout of its own, so each link sits exactly where a single link would. */
.product-card .product-actions{display:contents;}
.product-card .product-page-link{margin-right:10px;}

/* product card: keep the author's line breaks; shorten long text with Read more */
.product-card .product-desc{white-space:pre-line;}
.product-card .product-desc.is-clamped{
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-card .product-desc-toggle{
  margin-top:6px;
  background:none;
  border:none;
  padding:0;
  font-family:'Inter','Inter Fallback',sans-serif;
  font-size:0.9rem;
  font-weight:500;
  color:var(--coral-text);
  cursor:pointer;
  border-bottom:1px solid currentColor;
  width:fit-content;
}
.product-card .product-desc-toggle:hover{opacity:0.75;}

/* product cards: soft frosted glass that matches the category frame and page
   background, instead of a separate cream box */
.category-section .product-grid .product-card,
.category-section .category-frame .product-grid .product-card,
.category-section .product-grid .product-card.has-video,
.category-section .category-frame .product-grid .product-card.has-video{
  background:rgba(255,255,255,0.40);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 10px 26px rgba(18,18,18,0.10), inset 0 1px 0 rgba(255,255,255,0.7);
}

/* media product cards: neutral ink buttons/links so they sit quietly on the frosted card */
.category-section .product-card .product-visit-link,
.category-section .product-card.has-video > .product-visit-link,
.category-section .product-card .product-body > .product-visit-link{background:var(--ink,#121212); color:#fff !important;}
.category-section .product-card .product-visit-link:hover{background:#333;}
.product-card .product-desc-toggle{color:var(--ink,#121212);}

/* Latest card with a video: tag, title and date run along the top-left of the card;
   the product image and the video sit side by side in one row below them */
.latest-card:has(.product-video){align-items:start; row-gap:12px;}
.latest-card:has(.product-video) .latest-text{display:contents;}
.latest-card:has(.product-video) .latest-text > *{grid-column:1 / -1;}
.latest-card:has(.product-video) .latest-tag{grid-row:1;}
.latest-card:has(.product-video) h3{grid-row:2;}
.latest-card:has(.product-video) .latest-text > p{grid-row:3;}
.latest-card:has(.product-video) .product-video{grid-row:4; grid-column:2;}
.latest-card:has(.product-video) .latest-cta{grid-row:5;}
.latest-card:has(.product-video) .latest-thumbs{grid-row:6;}
.latest-card:has(.product-video) > .img-frame,
.latest-card:has(.product-video) > .img-placeholder{grid-column:1; grid-row:4; align-self:center;}
.latest-card .product-video{background:rgba(18,18,18,0.04); border:1px solid rgba(18,18,18,0.08); box-shadow:none;}
@media (max-width:760px){
  .latest-card:has(.product-video){row-gap:20px; align-items:stretch;}
  .latest-card:has(.product-video) .latest-text{display:flex;}
  .latest-card:has(.product-video) .latest-text > *,
  .latest-card:has(.product-video) > .img-frame,
  .latest-card:has(.product-video) > .img-placeholder{grid-column:auto; grid-row:auto;}
}

/* phones: bigger touch areas for small controls (looks the same, easier to tap) */
@media (max-width:720px){
  .nav-toggle::after{content:''; position:absolute; inset:-12px;}
  .footer-legal-links a, .intro-footer .legal a:not(.social-icon-link){display:inline-block; padding:11px 0;}
  .social-icon-link{position:relative;}
  .social-icon-link::after{content:''; position:absolute; inset:-9px;}
  .artist-toggle{padding-top:12px; padding-bottom:12px;}
}


/* accessibility: darker text shades where the bright accent colors were too light to read comfortably */
.category-tile{color:var(--tile-text, var(--tile-accent, var(--maroon)));}
.category-tile[style*="--coral"]{--tile-text:var(--coral-text);}
.category-tile[style*="--violet"]{--tile-text:var(--violet-text);}
.category-tile:hover{color:#fff;}
.category-tile[style*="--coral"]:hover{color:var(--ink);}


/* accessibility: clear keyboard focus ring on links, buttons and other controls */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible{
  outline:3px solid #7C1F2E;
  outline-offset:3px;
  box-shadow:0 0 0 2px #fff;
}

/* ===== News cards: pressed-in curved corner triangles with a groove (design level 2; small + soft) ===== */
#musicNewsGrid .news-main,#mediaNewsGrid .news-main,#hubNewsGrid .news-main{position:relative; overflow:hidden;}
#musicNewsGrid .news-main::before,#mediaNewsGrid .news-main::before,#hubNewsGrid .news-main::before,
#musicNewsGrid .news-main::after,#mediaNewsGrid .news-main::after,#hubNewsGrid .news-main::after{
  content:""; position:absolute; width:40px; height:40px; pointer-events:none; background-repeat:no-repeat; background-size:100% 100%;
}
#musicNewsGrid .news-main::before,#mediaNewsGrid .news-main::before,#hubNewsGrid .news-main::before{top:0; left:0;}
#musicNewsGrid .news-main::after,#mediaNewsGrid .news-main::after,#hubNewsGrid .news-main::after{bottom:0; right:0;}
#musicNewsGrid .news-main::before,#hubNewsGrid .news-main::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70 70%22%3E%3Cdefs%3E%3Cfilter id=%22i%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeFlood flood-color=%22%23000%22 flood-opacity=%22.28%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%222.4%22/%3E%3CfeOffset dx=%222%22 dy=%222.5%22 result=%22sh%22/%3E%3CfeComposite in=%22sh%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22ins%22/%3E%3CfeFlood flood-color=%22%23fff%22 flood-opacity=%22.25%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%221.2%22/%3E%3CfeOffset dx=%22-1.2%22 dy=%22-1.4%22 result=%22hl%22/%3E%3CfeComposite in=%22hl%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22hi%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22SourceGraphic%22/%3E%3CfeMergeNode in=%22ins%22/%3E%3CfeMergeNode in=%22hi%22/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23000%22 stop-opacity=%22.04%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%22.12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter=%22url(%23i)%22%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(0 35 35)%22 fill=%22%237C1F2E%22/%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(0 35 35)%22 fill=%22url(%23s)%22/%3E%3C/g%3E%3C/svg%3E");}
#musicNewsGrid .news-main::after,#hubNewsGrid .news-main::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70 70%22%3E%3Cdefs%3E%3Cfilter id=%22i%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeFlood flood-color=%22%23000%22 flood-opacity=%22.28%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%222.4%22/%3E%3CfeOffset dx=%222%22 dy=%222.5%22 result=%22sh%22/%3E%3CfeComposite in=%22sh%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22ins%22/%3E%3CfeFlood flood-color=%22%23fff%22 flood-opacity=%22.25%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%221.2%22/%3E%3CfeOffset dx=%22-1.2%22 dy=%22-1.4%22 result=%22hl%22/%3E%3CfeComposite in=%22hl%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22hi%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22SourceGraphic%22/%3E%3CfeMergeNode in=%22ins%22/%3E%3CfeMergeNode in=%22hi%22/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23000%22 stop-opacity=%22.04%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%22.12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter=%22url(%23i)%22%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(180 35 35)%22 fill=%22%237C1F2E%22/%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(180 35 35)%22 fill=%22url(%23s)%22/%3E%3C/g%3E%3C/svg%3E");}
#mediaNewsGrid .news-main::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70 70%22%3E%3Cdefs%3E%3Cfilter id=%22i%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeFlood flood-color=%22%23000%22 flood-opacity=%22.28%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%222.4%22/%3E%3CfeOffset dx=%222%22 dy=%222.5%22 result=%22sh%22/%3E%3CfeComposite in=%22sh%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22ins%22/%3E%3CfeFlood flood-color=%22%23fff%22 flood-opacity=%22.25%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%221.2%22/%3E%3CfeOffset dx=%22-1.2%22 dy=%22-1.4%22 result=%22hl%22/%3E%3CfeComposite in=%22hl%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22hi%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22SourceGraphic%22/%3E%3CfeMergeNode in=%22ins%22/%3E%3CfeMergeNode in=%22hi%22/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23000%22 stop-opacity=%22.04%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%22.12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter=%22url(%23i)%22%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(0 35 35)%22 fill=%22%23C9922E%22/%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(0 35 35)%22 fill=%22url(%23s)%22/%3E%3C/g%3E%3C/svg%3E");}
#mediaNewsGrid .news-main::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70 70%22%3E%3Cdefs%3E%3Cfilter id=%22i%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeFlood flood-color=%22%23000%22 flood-opacity=%22.28%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%222.4%22/%3E%3CfeOffset dx=%222%22 dy=%222.5%22 result=%22sh%22/%3E%3CfeComposite in=%22sh%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22ins%22/%3E%3CfeFlood flood-color=%22%23fff%22 flood-opacity=%22.25%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%221.2%22/%3E%3CfeOffset dx=%22-1.2%22 dy=%22-1.4%22 result=%22hl%22/%3E%3CfeComposite in=%22hl%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22hi%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22SourceGraphic%22/%3E%3CfeMergeNode in=%22ins%22/%3E%3CfeMergeNode in=%22hi%22/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23000%22 stop-opacity=%22.04%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%22.12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter=%22url(%23i)%22%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(180 35 35)%22 fill=%22%23C9922E%22/%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(180 35 35)%22 fill=%22url(%23s)%22/%3E%3C/g%3E%3C/svg%3E");}
#musicNewsGrid .news-main .news-body,#mediaNewsGrid .news-main .news-body,#hubNewsGrid .news-main .news-body{padding-right:18px;}

/* ===== Feature plates: same corner accent on Latest plates (Hub, Music, Media) and the About cards (design level 2).
   Way back: use style-news-only.css. ===== */
section#latest .category-frame,section#releases .category-frame,#what-we-do .info-card{position:relative; overflow:hidden;}
section#latest .category-frame::before,section#latest .category-frame::after,
section#releases .category-frame::before,section#releases .category-frame::after,
#what-we-do .info-card::before,#what-we-do .info-card::after{
  content:""; position:absolute; width:48px; height:48px; pointer-events:none; background-repeat:no-repeat; background-size:100% 100%; z-index:3;
}
section#latest .category-frame::before,section#releases .category-frame::before,#what-we-do .info-card::before{top:0; left:0;}
section#latest .category-frame::after,section#releases .category-frame::after,#what-we-do .info-card::after{bottom:0; right:0;}
/* Hub: Music corner maroon (top-left), Media corner gold (bottom-right) */
section#latest .category-frame:has(#hubStageMusic)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70 70%22%3E%3Cdefs%3E%3Cfilter id=%22i%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeFlood flood-color=%22%23000%22 flood-opacity=%22.28%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%222.4%22/%3E%3CfeOffset dx=%222%22 dy=%222.5%22 result=%22sh%22/%3E%3CfeComposite in=%22sh%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22ins%22/%3E%3CfeFlood flood-color=%22%23fff%22 flood-opacity=%22.25%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%221.2%22/%3E%3CfeOffset dx=%22-1.2%22 dy=%22-1.4%22 result=%22hl%22/%3E%3CfeComposite in=%22hl%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22hi%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22SourceGraphic%22/%3E%3CfeMergeNode in=%22ins%22/%3E%3CfeMergeNode in=%22hi%22/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23000%22 stop-opacity=%22.04%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%22.12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter=%22url(%23i)%22%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(0 35 35)%22 fill=%22%237C1F2E%22/%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(0 35 35)%22 fill=%22url(%23s)%22/%3E%3C/g%3E%3C/svg%3E");}
section#latest .category-frame:has(#hubStageMusic)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70 70%22%3E%3Cdefs%3E%3Cfilter id=%22i%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeFlood flood-color=%22%23000%22 flood-opacity=%22.28%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%222.4%22/%3E%3CfeOffset dx=%222%22 dy=%222.5%22 result=%22sh%22/%3E%3CfeComposite in=%22sh%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22ins%22/%3E%3CfeFlood flood-color=%22%23fff%22 flood-opacity=%22.25%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%221.2%22/%3E%3CfeOffset dx=%22-1.2%22 dy=%22-1.4%22 result=%22hl%22/%3E%3CfeComposite in=%22hl%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22hi%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22SourceGraphic%22/%3E%3CfeMergeNode in=%22ins%22/%3E%3CfeMergeNode in=%22hi%22/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23000%22 stop-opacity=%22.04%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%22.12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter=%22url(%23i)%22%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(180 35 35)%22 fill=%22%23C9922E%22/%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(180 35 35)%22 fill=%22url(%23s)%22/%3E%3C/g%3E%3C/svg%3E");}
section#releases .category-frame:has(#releaseGrid)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70 70%22%3E%3Cdefs%3E%3Cfilter id=%22i%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeFlood flood-color=%22%23000%22 flood-opacity=%22.28%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%222.4%22/%3E%3CfeOffset dx=%222%22 dy=%222.5%22 result=%22sh%22/%3E%3CfeComposite in=%22sh%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22ins%22/%3E%3CfeFlood flood-color=%22%23fff%22 flood-opacity=%22.25%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%221.2%22/%3E%3CfeOffset dx=%22-1.2%22 dy=%22-1.4%22 result=%22hl%22/%3E%3CfeComposite in=%22hl%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22hi%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22SourceGraphic%22/%3E%3CfeMergeNode in=%22ins%22/%3E%3CfeMergeNode in=%22hi%22/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23000%22 stop-opacity=%22.04%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%22.12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter=%22url(%23i)%22%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(0 35 35)%22 fill=%22%237C1F2E%22/%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(0 35 35)%22 fill=%22url(%23s)%22/%3E%3C/g%3E%3C/svg%3E");}
section#releases .category-frame:has(#releaseGrid)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70 70%22%3E%3Cdefs%3E%3Cfilter id=%22i%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeFlood flood-color=%22%23000%22 flood-opacity=%22.28%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%222.4%22/%3E%3CfeOffset dx=%222%22 dy=%222.5%22 result=%22sh%22/%3E%3CfeComposite in=%22sh%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22ins%22/%3E%3CfeFlood flood-color=%22%23fff%22 flood-opacity=%22.25%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%221.2%22/%3E%3CfeOffset dx=%22-1.2%22 dy=%22-1.4%22 result=%22hl%22/%3E%3CfeComposite in=%22hl%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22hi%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22SourceGraphic%22/%3E%3CfeMergeNode in=%22ins%22/%3E%3CfeMergeNode in=%22hi%22/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23000%22 stop-opacity=%22.04%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%22.12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter=%22url(%23i)%22%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(180 35 35)%22 fill=%22%237C1F2E%22/%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(180 35 35)%22 fill=%22url(%23s)%22/%3E%3C/g%3E%3C/svg%3E");}
section#latest .category-frame:has(#videosGrid)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70 70%22%3E%3Cdefs%3E%3Cfilter id=%22i%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeFlood flood-color=%22%23000%22 flood-opacity=%22.28%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%222.4%22/%3E%3CfeOffset dx=%222%22 dy=%222.5%22 result=%22sh%22/%3E%3CfeComposite in=%22sh%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22ins%22/%3E%3CfeFlood flood-color=%22%23fff%22 flood-opacity=%22.25%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%221.2%22/%3E%3CfeOffset dx=%22-1.2%22 dy=%22-1.4%22 result=%22hl%22/%3E%3CfeComposite in=%22hl%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22hi%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22SourceGraphic%22/%3E%3CfeMergeNode in=%22ins%22/%3E%3CfeMergeNode in=%22hi%22/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23000%22 stop-opacity=%22.04%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%22.12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter=%22url(%23i)%22%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(0 35 35)%22 fill=%22%23C9922E%22/%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(0 35 35)%22 fill=%22url(%23s)%22/%3E%3C/g%3E%3C/svg%3E");}
section#latest .category-frame:has(#videosGrid)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70 70%22%3E%3Cdefs%3E%3Cfilter id=%22i%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeFlood flood-color=%22%23000%22 flood-opacity=%22.28%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%222.4%22/%3E%3CfeOffset dx=%222%22 dy=%222.5%22 result=%22sh%22/%3E%3CfeComposite in=%22sh%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22ins%22/%3E%3CfeFlood flood-color=%22%23fff%22 flood-opacity=%22.25%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%221.2%22/%3E%3CfeOffset dx=%22-1.2%22 dy=%22-1.4%22 result=%22hl%22/%3E%3CfeComposite in=%22hl%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22hi%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22SourceGraphic%22/%3E%3CfeMergeNode in=%22ins%22/%3E%3CfeMergeNode in=%22hi%22/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23000%22 stop-opacity=%22.04%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%22.12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter=%22url(%23i)%22%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(180 35 35)%22 fill=%22%23C9922E%22/%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(180 35 35)%22 fill=%22url(%23s)%22/%3E%3C/g%3E%3C/svg%3E");}
/* About: give the two cards a card surface so the corners have somewhere to sit */
#what-we-do .info-card{background:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.8); border-radius:16px; padding:28px 32px; box-shadow:0 12px 30px rgba(18,18,18,0.08);}
#what-we-do .info-card:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70 70%22%3E%3Cdefs%3E%3Cfilter id=%22i%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeFlood flood-color=%22%23000%22 flood-opacity=%22.28%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%222.4%22/%3E%3CfeOffset dx=%222%22 dy=%222.5%22 result=%22sh%22/%3E%3CfeComposite in=%22sh%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22ins%22/%3E%3CfeFlood flood-color=%22%23fff%22 flood-opacity=%22.25%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%221.2%22/%3E%3CfeOffset dx=%22-1.2%22 dy=%22-1.4%22 result=%22hl%22/%3E%3CfeComposite in=%22hl%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22hi%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22SourceGraphic%22/%3E%3CfeMergeNode in=%22ins%22/%3E%3CfeMergeNode in=%22hi%22/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23000%22 stop-opacity=%22.04%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%22.12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter=%22url(%23i)%22%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(0 35 35)%22 fill=%22%237C1F2E%22/%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(0 35 35)%22 fill=%22url(%23s)%22/%3E%3C/g%3E%3C/svg%3E");}
#what-we-do .info-card:nth-child(1)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70 70%22%3E%3Cdefs%3E%3Cfilter id=%22i%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeFlood flood-color=%22%23000%22 flood-opacity=%22.28%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%222.4%22/%3E%3CfeOffset dx=%222%22 dy=%222.5%22 result=%22sh%22/%3E%3CfeComposite in=%22sh%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22ins%22/%3E%3CfeFlood flood-color=%22%23fff%22 flood-opacity=%22.25%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%221.2%22/%3E%3CfeOffset dx=%22-1.2%22 dy=%22-1.4%22 result=%22hl%22/%3E%3CfeComposite in=%22hl%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22hi%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22SourceGraphic%22/%3E%3CfeMergeNode in=%22ins%22/%3E%3CfeMergeNode in=%22hi%22/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23000%22 stop-opacity=%22.04%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%22.12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter=%22url(%23i)%22%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(180 35 35)%22 fill=%22%237C1F2E%22/%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(180 35 35)%22 fill=%22url(%23s)%22/%3E%3C/g%3E%3C/svg%3E");}
#what-we-do .info-card:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70 70%22%3E%3Cdefs%3E%3Cfilter id=%22i%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeFlood flood-color=%22%23000%22 flood-opacity=%22.28%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%222.4%22/%3E%3CfeOffset dx=%222%22 dy=%222.5%22 result=%22sh%22/%3E%3CfeComposite in=%22sh%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22ins%22/%3E%3CfeFlood flood-color=%22%23fff%22 flood-opacity=%22.25%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%221.2%22/%3E%3CfeOffset dx=%22-1.2%22 dy=%22-1.4%22 result=%22hl%22/%3E%3CfeComposite in=%22hl%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22hi%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22SourceGraphic%22/%3E%3CfeMergeNode in=%22ins%22/%3E%3CfeMergeNode in=%22hi%22/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23000%22 stop-opacity=%22.04%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%22.12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter=%22url(%23i)%22%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(0 35 35)%22 fill=%22%23C9922E%22/%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(0 35 35)%22 fill=%22url(%23s)%22/%3E%3C/g%3E%3C/svg%3E");}
#what-we-do .info-card:nth-child(2)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70 70%22%3E%3Cdefs%3E%3Cfilter id=%22i%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeFlood flood-color=%22%23000%22 flood-opacity=%22.28%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%222.4%22/%3E%3CfeOffset dx=%222%22 dy=%222.5%22 result=%22sh%22/%3E%3CfeComposite in=%22sh%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22ins%22/%3E%3CfeFlood flood-color=%22%23fff%22 flood-opacity=%22.25%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%221.2%22/%3E%3CfeOffset dx=%22-1.2%22 dy=%22-1.4%22 result=%22hl%22/%3E%3CfeComposite in=%22hl%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22hi%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22SourceGraphic%22/%3E%3CfeMergeNode in=%22ins%22/%3E%3CfeMergeNode in=%22hi%22/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23000%22 stop-opacity=%22.04%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%22.12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter=%22url(%23i)%22%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(180 35 35)%22 fill=%22%23C9922E%22/%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(180 35 35)%22 fill=%22url(%23s)%22/%3E%3C/g%3E%3C/svg%3E");}
@media (max-width:720px){
  section#latest .category-frame::before,section#latest .category-frame::after,
  section#releases .category-frame::before,section#releases .category-frame::after,
  #what-we-do .info-card::before,#what-we-do .info-card::after{width:36px; height:36px;}
}

/* Latest plates: soft white card surface so the corner accents sit on something (design level 2) */
section#latest .category-frame,section#releases .category-frame{
  background:rgba(255,255,255,0.72);
  border:1px solid rgba(255,255,255,0.85);
  box-shadow:0 12px 30px rgba(18,18,18,0.10);
}
/* Latest plates have larger rounded edges, so their corner accents are a bit bigger to show fully */
section#latest .category-frame::before,section#latest .category-frame::after,
section#releases .category-frame::before,section#releases .category-frame::after{width:72px; height:72px;}
@media (max-width:720px){
  section#latest .category-frame::before,section#latest .category-frame::after,
  section#releases .category-frame::before,section#releases .category-frame::after{width:52px; height:52px;}
}

/* No outer white rim on the cards with corner accents: the thin light edge is drawn inside (inset shadow)
   so the corner pieces reach the very edge of the card. */
#musicNewsGrid .news-main,#mediaNewsGrid .news-main,#hubNewsGrid .news-main{
  border:0; padding:21px;
  box-shadow:0 12px 30px rgba(var(--nl-rgb),0.12), inset 0 0 0 1px rgba(255,255,255,0.8);
}
#what-we-do .info-card{
  border:0; padding:29px 33px;
  box-shadow:0 12px 30px rgba(18,18,18,0.08), inset 0 0 0 1px rgba(255,255,255,0.8);
}
section#latest .category-frame,section#releases .category-frame{
  border:0;
  box-shadow:0 12px 30px rgba(18,18,18,0.10), inset 0 0 0 1px rgba(255,255,255,0.85);
}

.hero .wrap,.subpage-hero .wrap{position:relative;}
.hero-art{position:absolute; right:2%; top:50%; transform:translateY(-50%); width:min(34%,360px); height:auto; pointer-events:none; opacity:.95;}
.hero .hero-art{top:0; transform:none;}
@media (max-width:900px){.hero-art{display:none;}}

/* ===== COMPACT HERO PREVIEW: slim banner, small type, small art, no big glass box ===== */
.hero,.subpage-hero,.subpage-hero.music,.subpage-hero.media{padding:40px 0 36px;}
.hero::after,.subpage-hero.music::after,.subpage-hero.media::after{display:none;}
.hero .glass-panel,.subpage-hero .glass-panel{
  background:none; border:0; box-shadow:none; padding:0; max-width:560px;
  -webkit-backdrop-filter:none; backdrop-filter:none; border-radius:0;
}
.hero h1,.subpage-hero h1{font-size:clamp(26px,3.2vw,34px); line-height:1.15; margin:8px 0 10px; letter-spacing:-0.01em;}
.hero p.lead,.subpage-hero p.lead,.subpage-hero .glass-panel p{font-size:15px; line-height:1.55; max-width:520px; margin:0 0 6px;}
.hero .hero-tagline{font-size:13px; margin:0 0 8px; letter-spacing:.12em;}
.hero .kicker,.subpage-hero .kicker{font-size:13px;}
.hero .glass-panel + .path-cards{margin-top:28px;}
.hero-art,.hero .hero-art{position:absolute; right:2%; top:50%; transform:translateY(-50%); width:150px; height:auto; opacity:.9;}
.hero .hero-art{top:0; transform:none; width:150px;}
.subpage-hero .coming-soon-badge,.subpage-hero .badge{transform:scale(.9); transform-origin:left;}

.about-art{width:260px !important;}

/* Short SIZN wave mark before the main section titles (Hub, Music, Media, About) — design level 2 */
.mark-titles .section-head h2::before{
  content:""; display:inline-block; width:22px; height:28px; margin-right:12px; vertical-align:-3px;
  background:url(images/mark-window.svg) center/contain no-repeat;
}
@media (max-width:720px){
  .mark-titles .section-head h2::before{width:18px; height:23px; margin-right:9px; vertical-align:-2px;}
}
/* the Media category headings (Film, Series, ...) stay plain so the page is not busy */
.mark-titles .category-section .section-head h2::before{display:none;}

/* ---------- page color accents (set per artist/release in admin) ---------- */
.info-card.artist-card.has-pc{border-top:6px solid var(--pc);}
.discography-tile.has-pc{border-bottom:4px solid var(--pc);}
.latest-card.has-pc{border-top:6px solid var(--pc); padding-top:14px;}
.album-modal.has-pc{border-top:6px solid var(--pc);}

/* ---------- MUSIC: BROWSE BY GENRE + FEATURED ---------- */
#genres .wrap:last-child{padding-bottom:56px;}
.genre-heading{font-size:1.15rem; margin:28px 0 14px;}
.genre-filter{display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 4px;}
.genre-filter:empty{display:none;}
.genre-chip{
  font-family:inherit; font-size:.9rem; padding:9px 18px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,0.6); color:var(--ink);
  cursor:pointer; transition:background .2s var(--ease-smooth), color .2s var(--ease-smooth), border-color .2s var(--ease-smooth);
}
.genre-chip:hover{border-color:var(--maroon);}
.genre-chip:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}
.genre-chip.on{background:var(--maroon); border-color:var(--maroon); color:#fff;}
.genre-tiles{display:flex; flex-wrap:wrap; gap:22px;}
.genre-tiles .discography-tile{width:clamp(140px, 22vw, 190px);}
.genre-group[hidden]{display:none;}
@media (prefers-reduced-motion:reduce){ .genre-chip{transition:none;} }

/* genre sections: artists under each genre */
.genre-artists{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:20px;}
.genre-artist{background:rgba(255,255,255,0.55); border:1px solid var(--line); border-radius:18px; padding:20px;}
.genre-artist-head{display:flex; gap:14px; align-items:flex-start;}
.genre-artist-head h4{font-size:1.05rem; margin:0 0 4px;}
.genre-artist-head p{font-size:.88rem; color:#3a3a38; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.genre-artist-photo{flex:none; width:72px; height:72px; border-radius:50%; overflow:hidden; background:#7C1F2E; color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-size:1.6rem;}
.genre-artist-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.genre-tiles.small{gap:14px; margin-top:16px;}
.genre-tiles.small .discography-tile{width:104px;}
.genre-tiles.small .discography-tile p{font-size:.8rem;}
.genre-artist .artist-toggle{margin-top:14px;}
.genre-artist .artist-detail{margin-top:10px; font-size:.9rem;}
.genre-empty{color:var(--mid); margin:24px 0;}
#featured .wrap:last-child{padding-bottom:40px;}
#artistsByGenre .wrap:last-child{padding-bottom:56px;}

/* nav: Music dropdown (hover or keyboard focus on desktop; always listed in the phone menu) */
.nav-item{position:relative;}
.nav-sub{
  position:absolute; top:100%; left:-16px; min-width:170px; padding:14px 8px 8px;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s var(--ease-smooth), transform .18s var(--ease-smooth), visibility .18s;
  z-index:60;
}
.nav-sub::before{
  content:''; position:absolute; top:10px; left:0; right:0; bottom:0;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 28px rgba(18,18,18,0.14); z-index:-1;
}
.nav-item.has-sub:hover .nav-sub,
.nav-item.has-sub:focus-within .nav-sub{opacity:1; visibility:visible; transform:translateY(0);}
.nav-sub a{padding:9px 14px; border-bottom:none; white-space:nowrap; border-radius:8px;}
.nav-sub a:hover{background:rgba(124,31,46,0.08); color:var(--maroon);}
@media (prefers-reduced-motion:reduce){ .nav-sub{transition:none;} }
@media (max-width:720px){
  .nav-sub{position:static; opacity:1; visibility:visible; transform:none; min-width:0; padding:0 0 0 18px; gap:0;}
  .nav-sub::before{display:none;}
  .nav-item > a{display:block;}
  .nav-sub a{padding:12px 0; border-bottom:1px solid var(--line); border-radius:0; font-size:.98rem; color:#3a3a38;}
  .nav-sub a:hover{background:none;}
}

/* ---------- Featured artist / artist spotlight band ---------- */
#spotlight{
  background:linear-gradient(100deg,#7C1F2E 0%,#5b1621 55%,#2A0F14 100%);
  color:#fff; padding:26px 0;
}
#spotlight .wrap{display:flex; flex-wrap:wrap; gap:28px 48px; align-items:center;}
.spot-item{display:flex; align-items:center; gap:20px; min-width:0; flex:1 1 360px;}
.spot-photo{flex:none; width:84px; height:84px; border-radius:50%; overflow:hidden; background:rgba(255,255,255,0.14); border:2px solid #e8b04a; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-size:2rem; color:#fff;}
.spot-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.spot-text{min-width:0;}
.spot-kicker{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#e8b04a; font-weight:600;}
.spot-text h3{font-size:1.35rem; color:#fff; margin:2px 0 4px;}
.spot-text p{margin:0; font-size:.92rem; color:rgba(255,255,255,0.88); max-width:60ch;}
.spot-link{display:inline-block; margin-top:8px; font-size:.9rem; color:#e8b04a; border-bottom:1px solid rgba(232,176,74,0.5);}
.spot-link:hover{color:#fff; border-color:#fff;}
.spot-release{flex:none; width:96px;}
.spot-release .discography-tile{width:96px;}
.spot-release .discography-tile p{color:#fff; font-size:.78rem;}
@media (max-width:640px){ #spotlight{padding:22px 0;} .spot-item{flex-wrap:wrap;} }

/* ===== Music page: Latest release card, a smaller cover and tighter frame ===== */
#releases .category-frame{padding:24px;}
#releases .latest-card{grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:28px;}
@media (max-width:760px){#releases .category-frame{padding:18px;} #releases .latest-card{grid-template-columns:1fr; gap:16px;} #releases .latest-card .img-frame,#releases .latest-card .img-placeholder{max-width:300px; margin:0 auto;}}
#featured .genre-tiles{margin-top:20px;}

/* ===== Music page: Latest release card as black glass ===== */
section#releases{background:none;}
.tint-wrap:has(#releases), .tint-wrap:has(#videosGrid){
  background:linear-gradient(100deg,#7C1F2E 0%,#3A1219 45%,#14090c 100%);
}
.tint-wrap:has(#releases) .section-head h2, .tint-wrap:has(#videosGrid) .section-head h2,
.tint-wrap:has(#releases) .section-head p, .tint-wrap:has(#videosGrid) .section-head p{color:#fff;}
/* keep the black glass Latest card readable on the dark band */
section#releases .category-frame, section#latest .category-frame:has(#videosGrid){border-color:rgba(255,255,255,.34);box-shadow:0 22px 48px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 1px rgba(229,183,105,.28);}
section#releases .category-frame{
  position:relative;
  background:linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 28%), rgba(6,6,8,.82);
  -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 22px 48px rgba(18,18,18,.38), inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}
#releases .latest-card, #releases .latest-card h3{color:#fff;}
#releases .latest-card p{color:#d8d6d0;}
#releases .latest-card .latest-tag{color:#E5B769;}
#releases .latest-card a, #releases .latest-cta{color:#fff; border-color:#fff;}
#releases .latest-card .img-frame, #releases .latest-card .img-placeholder{box-shadow:0 12px 30px rgba(0,0,0,.7);}
#releases .latest-thumb{border-color:rgba(255,255,255,.18);}
#releases .latest-thumb.on{outline:2px solid #E5B769;}

/* ===== Entertainment page: Latest card as black glass over sound waves (scoped so the hub is unaffected) ===== */
section#latest:has(#videosGrid){background:none;}
section#latest .category-frame:has(#videosGrid){
  position:relative; padding:24px;
  background:linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 28%), rgba(6,6,8,.82);
  -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 22px 48px rgba(18,18,18,.38), inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}
#videosGrid .latest-card, #videosGrid .latest-card h3{color:#fff;}
#videosGrid .latest-card p{color:#d8d6d0;}
#videosGrid .latest-card .latest-tag{color:#E5B769;}
#videosGrid .latest-card a, #videosGrid .latest-cta{color:#fff; border-color:#fff;}
#videosGrid .latest-card .img-frame, #videosGrid .latest-card .img-placeholder{box-shadow:0 12px 30px rgba(0,0,0,.7);}
#videosGrid .latest-thumb{border-color:rgba(255,255,255,.18);}
#videosGrid .latest-thumb.on{outline:2px solid #E5B769;}
#videosGrid .latest-card{grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:28px;}
@media (max-width:760px){section#latest .category-frame:has(#videosGrid){padding:18px;} #videosGrid .latest-card{grid-template-columns:1fr; gap:16px;} #videosGrid .latest-card .img-frame,#videosGrid .latest-card .img-placeholder{max-width:300px; margin:0 auto;}}

/* ===== Hub: Latest section sized like the Music / Entertainment cards ===== */
section#latest .category-frame:has(.hub-latest-stack){padding:24px;}
.hub-latest-stack .latest-card{grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:28px;}
.hub-latest-stack .latest-card h3{font-size:clamp(1.4rem,2.4vw,1.9rem);}
@media (max-width:760px){
  section#latest .category-frame:has(.hub-latest-stack){padding:18px;}
  .hub-latest-stack .latest-card{grid-template-columns:1fr; gap:16px;}
  .hub-latest-stack .latest-card .img-frame,.hub-latest-stack .latest-card .img-placeholder{max-width:300px; margin:0 auto;}
}

/* ===== Entertainment page: gold band (Music keeps dark maroon) ===== */
.tint-wrap:has(#videosGrid){background:linear-gradient(100deg,#A9781F 0%,#5e4214 45%,#1b1408 100%);}

/* ===== News frame: no white lining on the dark bands (Music + Entertainment) ===== */
.tint-wrap:has(#releases) #news .category-frame,
.tint-wrap:has(#videosGrid) #news .category-frame{background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; padding:0;}
/* Latest card: gold edge only, no white lining */
section#releases .category-frame, section#latest .category-frame:has(#videosGrid){border-color:rgba(229,183,105,.45); box-shadow:0 22px 48px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);}

/* ===== News card: whiter on the dark bands ===== */
.tint-wrap:has(#releases) #musicNewsGrid .news-main,
.tint-wrap:has(#videosGrid) #mediaNewsGrid .news-main{background:rgba(255,255,255,.96); border-color:transparent;}


/* ===== Hub: News + Latest on a maroon-to-gold band ===== */
.tint-wrap:has(#hubNewsGrid){background:linear-gradient(100deg,#7C1F2E 0%,#4a1a1c 38%,#7a5316 78%,#A9781F 100%);}
.tint-wrap:has(#hubNewsGrid) .section-head h2,
.tint-wrap:has(#hubNewsGrid) .section-head p{color:#fff;}
.tint-wrap:has(#hubNewsGrid) #news .category-frame{background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; padding:0;}
.tint-wrap:has(#hubNewsGrid) #hubNewsGrid .news-main{background:rgba(255,255,255,.96); border-color:transparent;}
.tint-wrap:has(#hubNewsGrid) section#latest .category-frame{box-shadow:0 22px 48px rgba(0,0,0,.35);}
.tint-wrap:has(#hubNewsGrid) section#latest .category-frame{background:rgba(255,255,255,.96); border-color:transparent;}
/* hub news card: gold bottom-right corner */
#hubNewsGrid .news-main::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70 70%22%3E%3Cdefs%3E%3Cfilter id=%22i%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeFlood flood-color=%22%23000%22 flood-opacity=%22.28%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%222.4%22/%3E%3CfeOffset dx=%222%22 dy=%222.5%22 result=%22sh%22/%3E%3CfeComposite in=%22sh%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22ins%22/%3E%3CfeFlood flood-color=%22%23fff%22 flood-opacity=%22.25%22/%3E%3CfeComposite in2=%22SourceAlpha%22 operator=%22out%22/%3E%3CfeGaussianBlur stdDeviation=%221.2%22/%3E%3CfeOffset dx=%22-1.2%22 dy=%22-1.4%22 result=%22hl%22/%3E%3CfeComposite in=%22hl%22 in2=%22SourceAlpha%22 operator=%22in%22 result=%22hi%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22SourceGraphic%22/%3E%3CfeMergeNode in=%22ins%22/%3E%3CfeMergeNode in=%22hi%22/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23000%22 stop-opacity=%22.04%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%22.12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter=%22url(%23i)%22%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(180 35 35)%22 fill=%22%23C9922E%22/%3E%3Cpath d=%22M0 0H70Q22 22 0 70Z%22 transform=%22rotate(180 35 35)%22 fill=%22url(%23s)%22/%3E%3C/g%3E%3C/svg%3E");}


/* ===== Hero + News + Latest: vertical fade (Music maroon, Entertainment gold) ===== */
body:has(#releases) .subpage-hero.music::before{background:linear-gradient(180deg,#14090c 0%,#3A1219 100%);}
.tint-wrap:has(#releases){background:linear-gradient(180deg,#3A1219 0%,#7C1F2E 45%,#3A1219 100%);}
body:has(#videosGrid) .subpage-hero.media::before{background:linear-gradient(180deg,#1b1408 0%,#5e4214 100%);}
.tint-wrap:has(#videosGrid){background:linear-gradient(180deg,#5e4214 0%,#A9781F 45%,#5e4214 100%);}

/* ===== Genre selector: color tiles ===== */
.genre-filter{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin:28px 0 10px;}
.genre-chip{position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:2px; min-height:96px; padding:14px 16px; border:0; border-radius:16px; color:#fff; font-weight:700; font-size:1.05rem; line-height:1.2; text-align:left; cursor:pointer; background:linear-gradient(135deg,#7C1F2E,#3A1219); box-shadow:0 8px 20px rgba(18,18,18,.18); transition:transform .15s;}
.genre-chip:nth-child(4n+2){background:linear-gradient(135deg,#B07A1E,#5e4214);}
.genre-chip:nth-child(4n+3){background:linear-gradient(135deg,#5b2a63,#24102a);}
.genre-chip:nth-child(4n+4){background:linear-gradient(135deg,#1f5a57,#0e2a29);}
.genre-chip:first-child{background:linear-gradient(135deg,#2a2a2a,#0e0e0e);}
.genre-chip:hover{transform:translateY(-2px); border-color:transparent;}
.genre-chip .gc-n{display:block; font-weight:500; font-size:.78rem; opacity:.85;}
.genre-chip.on{outline:3px solid #E5B769; outline-offset:2px; background-color:transparent; color:#fff; border-color:transparent;}
@media (prefers-reduced-motion:reduce){ .genre-chip{transition:none;} .genre-chip:hover{transform:none;} }


/* ===== Hub: About section, beefed up with wide curved edges and larger type ===== */
.hero{padding-bottom:240px;}
#about-teaser{
  position:relative; z-index:2; background:var(--paper,#faf9f5);
  margin-top:-90px; padding:70px 0 60px; border-bottom:0; border-radius:0;
  overflow-x:clip;
}
/* wide ellipses, wider than the screen, so the curve runs off both edges */
#about-teaser::before, #about-teaser::after{
  content:""; position:absolute; left:-15%; width:130%; height:200px; background:var(--paper,#faf9f5); border-radius:50%; z-index:-1; pointer-events:none;
}
#about-teaser::before{top:-100px;}
#about-teaser::after{bottom:-100px;}
.tint-wrap:has(#hubNewsGrid){position:relative; z-index:1; margin-top:-100px; padding-top:150px;}
#about-teaser .section-head{padding-top:0;}
#about-teaser h2{font-size:clamp(2.2rem,4.6vw,3.4rem); letter-spacing:-.01em; line-height:1.08; margin-bottom:6px;}
#about-teaser .section-head p{font-size:1.18rem; line-height:1.75; max-width:780px !important;}
#about-teaser .section-head p:nth-of-type(1){font-size:clamp(1.3rem,2.2vw,1.6rem); line-height:1.55; font-weight:500; color:#121212;}
#about-teaser .section-head p:nth-of-type(4){
  margin-top:26px !important; padding:14px 0 14px 22px; border-left:5px solid #C9922E;
  font-weight:700; font-size:clamp(1.35rem,2.4vw,1.8rem); line-height:1.3; color:var(--maroon,#7C1F2E);
}
#about-teaser .panel-cta{font-size:1.05rem;}
@media (max-width:760px){
  .hero{padding-bottom:130px;}
  #about-teaser{margin-top:-56px; padding:72px 0 40px;}
  #about-teaser::before, #about-teaser::after{height:110px; left:-25%; width:150%;}
  #about-teaser::before{top:-55px;} #about-teaser::after{bottom:-55px;}
  .tint-wrap:has(#hubNewsGrid){margin-top:-56px; padding-top:90px;}
}


/* ===== Hub About: image slot beside the text (drop a picture at images/hub-about.jpg; hides itself if the file is missing) ===== */
@media (min-width:900px){
  #about-teaser .section-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); column-gap:56px; align-items:start;}
  #about-teaser .section-head > *{grid-column:1;}
  #about-teaser .section-head > .about-photo{grid-column:2; grid-row:1 / span 7; margin-top:6px;}
}
.about-photo{margin:0; position:relative;}
.about-photo[hidden]{display:none;}
.about-photo img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:22px; box-shadow:0 22px 48px rgba(18,18,18,.22);}
.about-photo::after{content:""; position:absolute; right:-10px; bottom:-10px; width:84px; height:84px; border-right:5px solid #C9922E; border-bottom:5px solid #C9922E; border-radius:0 0 22px 0; pointer-events:none;}
@media (max-width:899px){ .about-photo{order:2; max-width:300px; margin:28px 0 8px;} #about-teaser .section-head{display:flex; flex-direction:column;} #about-teaser .section-head > .about-photo{order:10;} }

/* ===== Entertainment: Featured band (gold twin of the Music artist spotlight) ===== */
#ent-featured{background:linear-gradient(100deg,#A9781F 0%,#5e4214 55%,#1b1408 100%); color:#fff; padding:30px 0;}
#ent-featured .wrap{display:flex; flex-wrap:wrap; gap:28px 48px; align-items:center;}
#ent-featured .spot-photo.ent-spot-photo{width:104px; height:104px; border-radius:16px; border-color:#f0c878;}
#ent-featured .spot-kicker{color:#f6d892;}
#ent-featured .spot-link{color:#f6d892; border-color:rgba(246,216,146,.55);}
#ent-featured .spot-link:hover{color:#fff; border-color:#fff;}
@media (max-width:640px){#ent-featured{padding:24px 0;} #ent-featured .spot-photo.ent-spot-photo{width:84px; height:84px;}}
@media (max-width:640px){#ent-featured .spot-item{flex-wrap:nowrap; align-items:flex-start; gap:16px;}}

/* more breathing room under the Latest cards (Hub, Music, Entertainment) */
#releases, #latest{padding-bottom:40px;}
@media (max-width:760px){#releases, #latest{padding-bottom:28px;}}

/* separator line between the hero and News (Music + Entertainment) */
.tint-wrap:has(#releases), .tint-wrap:has(#videosGrid){position:relative;}
.tint-wrap:has(#releases)::before, .tint-wrap:has(#videosGrid)::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1116px, calc(100% - 40px)); height:2px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(246,216,146,0), rgba(246,216,146,.85) 20%, rgba(246,216,146,.85) 80%, rgba(246,216,146,0));
}

/* gold fading separator on the light "Work with" / mailing-list sections (replaces the plain gray rule) */
.structure{position:relative; border-top:0;}
.structure::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1116px, calc(100% - 40px)); height:2px; pointer-events:none;
  background:linear-gradient(90deg, rgba(201,146,46,0), rgba(201,146,46,.8) 20%, rgba(201,146,46,.8) 80%, rgba(201,146,46,0));
}

/* "Work with" columns line up with the heading instead of floating in the middle */
.structure .card-grid{justify-content:start; padding-bottom:0;}

/* News card runs the full width like the Latest card below it */
#musicNewsGrid, #mediaNewsGrid, #hubNewsGrid{grid-template-columns:minmax(0,1fr); justify-content:stretch;}
#musicNewsGrid .news-list, #mediaNewsGrid .news-list, #hubNewsGrid .news-list{max-width:none; width:100%;}
#musicNewsGrid .news-main, #mediaNewsGrid .news-main, #hubNewsGrid .news-main{max-width:none; width:100%; box-sizing:border-box;}

/* a lone featured item sits centered in its band */
#spotlight .wrap:has(.spot-item:only-child), #ent-featured .wrap:has(.spot-item:only-child){justify-content:center;}
#spotlight .spot-item:only-child, #ent-featured .spot-item:only-child{flex:0 1 auto;}
#musicNewsGrid .news-main .panel-cta, #mediaNewsGrid .news-main .panel-cta, #hubNewsGrid .news-main .panel-cta{align-self:flex-start;}

/* ===== Window logo mark replaces the waveform icon in headers, footers and the intro wordmark ===== */
.logo-icon{height:1.95em; width:auto;}
.logo{gap:10px;}
.intro-wordmark .logo-icon{height:1.05em; width:auto;}
.intro-wordmark{gap:0.2em;}

/* Hub Music card: sun and hills replace the old bars */
.mini-view .sun{fill:var(--coral);}
.mini-view .hill{fill:var(--maroon);}
.mini-view .hill.back{opacity:.55;}
.hero .mini-view .sun{fill:var(--gold-light);}
.hero .mini-view .hill{fill:var(--paper);}
.hero .mini-view .hill.back{opacity:.5;}

/* Sunrise over mountains: Entertainment "coming soon" icon */
.sunrise .mtn{fill:var(--maroon);}
.sunrise .mtn.b{opacity:.5;}
.sunrise .sun{fill:var(--coral);}
.sunrise .rays{stroke:var(--coral);}
.hero .sunrise .mtn{fill:var(--paper);}
.hero .sunrise .sun{fill:var(--gold-light);}
.hero .sunrise .rays{stroke:var(--gold-light);}
.sunrise.mini-sunrise{margin-bottom:6px;}
@media (prefers-reduced-motion:no-preference){.sunrise .rays{animation:srglow 3.6s ease-in-out infinite;}}
@keyframes srglow{0%,100%{opacity:.45}50%{opacity:1}}

/* Hub: standing tree with falling leaves, drawn larger than the other hero art */
.hero .hero-art.hub-tree{width:230px; right:1%; top:-10px;}