/* Target Paragraphs inside Marquee Blocks to look like H1 */
.sqs-block-marquee p {
    font-family: var(--heading-font-font-family) !important;
    font-size: 2rem !important; 
    font-weight: 1000 !important;
    text-transform: uppercase;
    line-height: 1em !important;
    margin: 0;
    color: #FF0000 !important; /* CHANGE THIS HEX CODE TO YOUR RED */
}

/* Optional: If you chose Heading 2 instead of Paragraph, use this instead */
.sqs-block-marquee h2 {
    font-size: 1rem !important; 
    font-family: var(--heading-font-font-family) !important;
}

/* ============================================
   HERO VIDEO FIX - TARGETING ACTUAL STRUCTURE
   ============================================ */

/* Kill background on the section element itself */
body.homepage .page-section.kfr-has-video {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Kill the section-border element's background */
body.homepage .page-section.kfr-has-video > .section-border {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Kill any canvas elements (Squarespace uses these for generative backgrounds) */
body.homepage .page-section.kfr-has-video canvas {
  display: none !important;
}

/* Force our video to be visible */
.kfr-video-container {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 0 !important;
}

.kfr-video-bg {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Content stays above */
body.homepage .page-section.kfr-has-video > .content-wrapper {
  position: relative !important;
  z-index: 2 !important;
}

/* ============================================

   MINIMAL HORROR AESTHETIC - NO MOBILE BREAKING

   Only visual effects, no layout changes

   ============================================ */



/* --- YOUR ORIGINAL STYLES (keeping these) --- */

.item-pagination[data-collection-type^="portfolio"] {

  display: none;

}



.summary-title {

  font-size: 22px !important;

  font-weight: bold;

  color: #0000ff !important;

}



.summary-header-text {

  text-align: left !important;

}



h4, h1, h2, h3, p, .p1, .p2, .p3, .p4,

#block-03f18212a0b5a6942778,

#block-yui_3_17_2_1_1765441354450_236539,

#block-yui_3_17_2_1_1765512790991_26271,

#block-6d538b73be5104e3d97d,

#block-22697d492de114d424ff,

#block-cad010491bef54dc9126,

#block-3e6cd489a51874576164,

#block-44504905f5746a9ec19e,

#block-23a7a3c294cb1f98ecba,

#block-yui_3_17_2_1_1765873827494_3520,

#block-yui_3_17_2_1_1765875792090_3201,

#block-8705df9ed82cd04615f9 {

  -webkit-text-stroke-width: .5px;

  -webkit-text-stroke-color: #000000;

}



details summary {

  cursor: pointer;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

}



details summary::marker {

  content: "";

}



details[open] summary {

  opacity: 0.0;

}



.details-content {

  opacity: 0;

  max-height: 0;

  overflow: hidden;

  transition: opacity 3.5s ease-out, max-height 3.5s ease-out;

}



details[open] .details-content {

  opacity: 1;

  max-height: 4000px;

}



/* QUOTE BLOCK (global) */

.sqs-block-quote blockquote,

.sqs-block-quote blockquote p {

  color: #ffffff !important;

  font-size: clamp(22px, 0.5vw + 16px, 26px)!important;

  line-height: 1.35 !important;

  letter-spacing: 0.01em;

  font-weight: bold;

  text-shadow: 0 2px 2px rgba(0,0,0,0.65);

}



.sqs-block-quote figcaption,

.sqs-block-quote cite,

.sqs-block-quote .source {

  color: #edd4ff !important;

  font-size: 18px !important;

  letter-spacing: 0.06em;

  font-weight: bold;

  text-shadow: 0 2px 2px rgba(0,0,0,0.65);

  text-transform: uppercase;

}



/* Center wrapper */

.kfr-card-wrap {

  display: flex;

  justify-content: center;

  width: 100%;

}



/* The pill */

.kfr-card {

  box-sizing: border-box;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: rgba(20,20,24,.15);

  border: 2px solid #8b0000;

  border-radius: 999px;

  padding: 10px 22px;

  margin: 14px 0;

  color: #edd4ff;

  box-shadow: 0 12px 24px rgba(0,0,0,.35);

  -webkit-text-stroke-width: 1px;

}



.kfr-card a {

  color: inherit;

  text-decoration: none;

  font-weight: 100;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  text-align: center;

  display: inline-block;

  font-family: "America Faster", Arial, sans-serif;

  font-weight: 900;

  font-size: clamp(30px, 0.9vw + 14px, 45px);

  line-height: 1.1;

  color: #ff0000;

}



.kfr-card a:hover {

  color: #ff6666;

}



#block-yui_3_17_2_1_1765855962706_302067,

#block-23a7a3c294cb1f98ecba,

#block-yui_3_17_2_1_1765873827494_3520,

#block-yui_3_17_2_1_1765874278509_27412,

#block-yui_3_17_2_1_1765875792090_3201,

#block-03f18212a0b5a6942778,

#block-yui_3_17_2_1_1765512790991_26271 {

  background-color: rgba(0,0,0,0.3);

  color: #ffffff;

  border-radius: 19px;

  padding: 9px;

  margin-left: auto;

  margin-right: auto;

  box-sizing: border-box;

}



#block-yui_3_17_2_1_1765441354450_32876 {

  transform: rotate(66deg);

}



@media screen and (max-width: 767px) {

  .kfr-card {

    padding: 4px;

  }

  .kfr-card h2, .kfr-card h3 {

    font-size: 48px;

    line-height: 1;

  }

  .kfr-card p {

    font-size: 16px;

    line-height: 1;

  }

  

  #block-yui_3_17_2_1_1765855962706_302067,

  #block-23a7a3c294cb1f98ecba,

  #block-yui_3_17_2_1_1765873827494_3520,

  #block-yui_3_17_2_1_1765874278509_27412,

  #block-yui_3_17_2_1_1765875792090_3201,

  #block-03f18212a0b5a6942778,

  #block-yui_3_17_2_1_1765512790991_26271 {

    padding: 9px;

  }

}



@media only screen and (max-width: 767px) {

  h1 { font-size: 61px; }

  h2 { font-size: 48px; }

  h3 { font-size: 39px; }

  h4 { font-size: 31px; }

  #siteWrapper .sqs-button-element--primary {

    font-size: .90rem;

  }

  #siteWrapper .sqs-button-element--secondary {

    font-size: 2.1rem;

  }

  #siteWrapper .sqs-button-element--tertiary {

    font-size: 1.8rem;

  }

}



/* ============================================

   HORROR AESTHETIC

   ============================================ */



body {

  background-color: #0a0a0a;

  background-image: linear-gradient(180deg, #0d0d0d 0%, #050505 100%);

  color: #d4d4d4;

}



.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: transparent !important;
  border-bottom: none !important;
}

.header-logo img {
  height: 50px;
  width: auto;
}



.header-nav-item a:hover {

  color: #ff3333 !important;

}



/* 3D BUTTONS */

.sqs-block-button-element {

  background: linear-gradient(145deg, #1a1a1a, #0a0a0a) !important;

  border: 3px solid #4a0000 !important;

  color: #ff3333 !important;

  box-shadow: 

    0 6px 0 #330000,

    0 8px 3px rgba(0, 0, 0, 0.5) !important;

  transition: all 0.2s ease !important;

}



.sqs-block-button-element:hover {

  background: linear-gradient(145deg, #4a0000, #660000) !important;

  color: #ffffff !important;

  transform: translateY(4px) !important;

  box-shadow: 

    0 2px 0 #220000,

    0 4px 2px rgba(0, 0, 0, 0.6) !important;

}



/* HEADERS */

h1, h2, h3 {

  color: #f33333 !important;

  text-shadow: 

    2px 2px 0 #330000,

    4px 4px 10px rgba(0, 0, 0, 0.8) !important;

}



/* ============================================

   HOMEPAGE HEADER - EXCLUSION BLEND

   ============================================ */



body.homepage .header {

  mix-blend-mode: exclusion !important;

}



body.homepage .header-nav-item a,

body.homepage .header-actions--right a,

body.homepage .cart-quantity {

  color: #00ff00 !important;

}



body.homepage .header-actions--right svg,

body.homepage .icon--cart {

  fill: #00ff00 !important;

}



body.homepage .header-burger .burger-inner,

body.homepage .header-burger .burger-inner::before,

body.homepage .header-burger .burger-inner::after {

  background-color: #00ff00 !important;

}



/* ============================================

   KILL BLEND MODE WHEN MENU IS OPEN

   ============================================ */



body.header--menu-open .header,

body.homepage.header--menu-open .header {

  mix-blend-mode: normal !important;

}



/* ============================================

   MOBILE MENU - SOLID BACKGROUND

   ============================================ */



.header-menu {

  background: #0a0a0a !important;

}



.header-menu-bg {

  background: #0a0a0a !important;

  opacity: 1 !important;

}



.header-menu-nav-item a {

  color: #ffffff !important;

}



.header-menu-nav-item a:hover {

  color: #ff3333 !important;

}



/* ============================================

   RESET COLORS WHEN MENU IS OPEN

   ============================================ */



body.homepage.header--menu-open .header-actions--right a,

body.homepage.header--menu-open .cart-quantity {

  color: #ff0000 !important;

}



body.homepage.header--menu-open .header-actions--right svg,

body.homepage.header--menu-open .icon--cart {

  fill: #ff0000 !important;

}



body.homepage.header--menu-open .header-burger .burger-inner,

body.homepage.header--menu-open .header-burger .burger-inner::before,

body.homepage.header--menu-open .header-burger .burger-inner::after {

  background-color: #ff0000 !important;

}



/* ============================================
   BURGER THICKNESS FIX
   ============================================ */

.header-burger .burger-inner,
.header-burger .burger-inner::before,
.header-burger .burger-inner::after {
  height: 2px !important;
  border-radius: 2px !important;
  background-color: currentColor !important;
}

/* ============================================

   FIX INVISIBLE IMAGES BUG

   Forces images to appear immediately without waiting

   ============================================ */

   

/* Force the container to be visible */

.sqs-block-image .image-block-wrapper {

    opacity: 1 !important;

    visibility: visible !important;

}



/* Force the actual image to show and disable stuck animations */

.sqs-block-image img {

    opacity: 1 !important;

    visibility: visible !important;

    transition: opacity 0s !important; 

}



/* ============================================

   CRT SCANLINE OVERLAY

   Adds a subtle texture over the whole site

   ============================================ */

body::before {

    content: " ";

    display: block;

    position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    /* Creates thin horizontal lines */

    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));

    z-index: 9999; /* Sits on top of everything */

    background-size: 100% 3px, 3px 100%; /* Size of the lines */

    pointer-events: none; /* Lets you click through it */

}

/* ============================================
   HERO VIDEO BACKGROUND FIX
   Forces Squarespace section backgrounds to be
   transparent so our injected videos show through
   ============================================ */

/* Make the native section background transparent on hero sections */
.page-section.kfr-has-video .section-background {
  background-color: transparent !important;
  background-image: none !important;
}

/* Kill any residual Squarespace video player containers */
.page-section.kfr-has-video .sqs-video-background-native,
.page-section.kfr-has-video .sqs-video-background,
.page-section.kfr-has-video [data-video-overlay-theme] {
  display: none !important;
}

/* Ensure video container sits behind content but is visible */
.kfr-video-container {
  z-index: -1 !important;
}

/* Bump content above the video */
.page-section.kfr-has-video .content-wrapper {
  z-index: 2 !important;
}
/* ============================================
   HERO VIDEO + BLEND MODE FIX
   ============================================ */

/* Kill ALL backgrounds on hero section and children */
body.homepage .page-section.kfr-has-video,
body.homepage .page-section.kfr-has-video > .section-border,
body.homepage .page-section.kfr-has-video > .content-wrapper,
body.homepage .page-section.kfr-has-video .content,
body.homepage .page-section.kfr-has-video [data-fluid-engine],
body.homepage .page-section.kfr-has-video .fluid-engine,
body.homepage .page-section.kfr-has-video .sqs-block-content {
  background: transparent !important;
  background-color: transparent !important;
}

/* Remove stacking context isolation from ancestors */
body.homepage .page-section.kfr-has-video > .content-wrapper,
body.homepage .page-section.kfr-has-video .content,
body.homepage .page-section.kfr-has-video [data-fluid-engine],
body.homepage .page-section.kfr-has-video .fluid-engine {
  isolation: auto !important;
  z-index: auto !important;
  transform: none !important;
}

/* Video container - position without creating stacking context */
.kfr-video-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -1 !important;
}

/* Kill canvas backgrounds */
body.homepage .page-section.kfr-has-video canvas {
  display: none !important;
}
/* --- SPECIAL RULE FOR TOP MARQUEE ONLY --- */
#block-9e79b210b368d8d891b1 p {
    font-size: 11rem !important;  /* Much larger than the others */
    line-height: 1em !important; /* Tighter spacing for big text */
    color: #FF0000 !important;   /* Ensure it stays red */
    font-weight: 800 !important; /* Extra bold */
}
/* ============================================
   GLOBAL HEADER STYLES
   (Required for the JS Header Injection)
   ============================================ */

/* 1. Base Header Layout */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10050;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition: transform 0.3s ease, background 0.3s ease;
}

/* 2. Hide Header on Scroll */
.header.header--hidden {
  transform: translateY(-100%);
}

/* 3. Logo Sizing (Fixes the Giant Logo Issue) */
.header-logo {
  display: flex;
  align-items: center;
}

.header-logo img {
  height: 50px; /* This forces the logo to be small */
  width: auto;
}

/* 4. Desktop Navigation */
.header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-nav-item a {
  font-family: 'America Faster', Impact, sans-serif; /* Ensure font matches your site */
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 20px;
  text-decoration: none;
  color: #ffffff; /* Default to white */
  transition: color 0.2s ease;
}

.header-nav-item a:hover {
  color: #ff0000;
}

/* 5. Cart & Burger */
.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.cart-link {
  font-family: 'America Faster', Impact, sans-serif;
  font-size: 20px;
  color: #ffffff;
  text-decoration: none;
}

.header-burger {
  display: none; /* Hidden on desktop */
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  color: #ffffff;
}

.burger-inner, 
.burger-inner::before, 
.burger-inner::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease;
}

.burger-inner { top: 50%; }
.burger-inner::before { top: -8px; }
.burger-inner::after { top: 8px; }

/* 6. Mobile & Tablet Responsive */
@media (max-width: 768px) {
  .header-nav { display: none; } /* Hide desktop nav */
  .header-burger { display: block; } /* Show burger */
  
  /* Force white icons on mobile to ensure visibility */
  .header-burger, .cart-link {
    color: #ffffff !important;
    mix-blend-mode: normal !important;
  }
}

/* 7. Mobile Menu Overlay */
.header-menu {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: none; /* Hidden by default */
  background: #000000;
  padding: 100px 24px;
}

body.header--menu-open .header-menu {
  display: block; /* Show when open */
}

.header-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.header-menu-nav-item a {
  font-family: 'America Faster', Impact, sans-serif;
  font-size: 32px;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  border: 2px solid #8b0000;
  padding: 15px 30px;
  width: 100%;
  max-width: 300px;
  text-align: center;
}

/* 8. Blend Modes (Homepage Only) */
body.homepage .header {
  mix-blend-mode: exclusion;
}
body.header--menu-open .header {
  mix-blend-mode: normal;
}
/* ============================================================
   KFR LIQUID GLASS (exact demo filter)
   Uses embedded SVG filters from kfr-glass.js (id="switcher")
   ============================================================ */

:root{
  --c-glass: #bbbbbc;
  --c-light: #fff;
  --c-dark: #000;
  --glass-reflex-dark: 1;
  --glass-reflex-light: 1;
  --saturation: 150%;
}

.kfr-glass-pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
  backdrop-filter: blur(8px) url(#switcher) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  box-shadow: 
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), 
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), 
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), 
    inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent), 
    inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), 
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), 
    inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 
    0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 
    0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
  transition: 
    background-color 400ms 
      cubic-bezier(1, 0.0, 0.4, 1),
    box-shadow 400ms
      cubic-bezier(1, 0.0, 0.4, 1);
}

/* Artist streaming pills (from Black) */
.streaming-section .plat.kfr-glass-pill,
.streaming-row .plat.kfr-glass-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--pillH, 64px);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(20,15,15,0.6);
  backdrop-filter: blur(8px) url(#switcher) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  border: 1px solid rgba(80,60,60,0.35);
  box-shadow: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.streaming-section .plat.kfr-glass-pill:hover,
.streaming-row .plat.kfr-glass-pill:hover{
  transform: translateY(-2px) scale(1.05);
  background: rgba(40,30,30,0.7);
  border-color: rgba(120,90,90,0.5);
}

/* Ensure artist page stream links behave like pills */
.stream-link.kfr-glass-pill,
.streaming-row a.kfr-glass-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Override stronger selectors in page-specific styles */
#platformBar .plat.kfr-glass-pill,
#streamingBar .plat.kfr-glass-pill,
.plat.kfr-glass-pill,
#platformBar a.kfr-glass-pill,
#streamingBar a.kfr-glass-pill{
  background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
  backdrop-filter: blur(8px) url(#switcher) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  box-shadow: 
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), 
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), 
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), 
    inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent), 
    inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), 
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), 
    inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 
    0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 
    0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}

@media (max-width: 480px){
  .kfr-glass-pill{ padding: 9px 14px; }
}