/* ====================================
   Typography Styles
==================================== */

:root {
  --font-size-xxs: 0.625rem; 
  --font-size-xs: 0.75rem;   
  --font-size-sm: 0.875rem;  
  --font-size-md: 1rem;      
  --font-size-lg: 1.25rem; 
  --font-size-xl: 1.5rem;  
  --font-size-xxl: 2rem;     
  --font-size-xxxl: 2.5rem;
  --font-size-jumbo: 3.75rem;  
  --font-heading: 'Roboto', sans-serif;
  --font-body: 'Roboto Serif', serif;
  --font-quote: 'Hepta Slab', serif;
  --font-code: 'Roboto Mono', monospace;
  --font-slab: 'Roboto Slab', serif;
  --color-primary: #007BFF;
  --color-secondary: #666; 
  --color-third: #cecece;
  --color-dark: #333;
  --color-white: #fff;
  --color-off-white: #efefef;
  --color-dark-mode: #111111;
  --lightbox-bg-color: rgba(0, 0, 0, 0.75);
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem; 
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --border-radius-xs: 0.15rem; 
  --border-radius-sm: 0.25rem; 
  --border-radius-m: 0.5rem; 
  --border-radius-l: 0.75rem;
  --border-radius-xl: 1rem;
  --font-weight-thin: 300; 
  --font-weight-rg: 400;
  --font-weight-md: 500;
  --font-weight-bold: 700;
  --line-height-sm: 1.2;
  --line-height-reg: 1.6;
  --max-width-xs: 20rem;
  --max-width-sm: 40rem;
  --max-width-md: 60rem;
  --max-width-lg: 80rem;
  --icon-size-reg: 1.75rem;
  --icon-size-lg: 2.5rem;
  --letter-spacing-xs: 0.03rem;
  --letter-spacing-sm: 0.05rem;
  --album-cover: 12rem;
  --drop-shadow-1: 0 4px 10px rgba(0, 0, 0, 0.2);
  --drop-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.3);
  --color-text-primary: #111;
  --color-text-secondary: #666;
  --card-bg: #fff;
  --card-border: #e0e6ed;
}

/* General Text Styles */
body, p, span {
  line-height: var(--line-height-reg, 1.6);
  font-size: var(--font-size-md, 1rem);
}

body.dark-mode {
  background-color: var(--color-dark-mode, #111);
  color: var(--color-white, #fff);
}


/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading, 'Roboto', sans-serif);
  color: var(--color-dark, #333);
  margin-bottom: var(--spacing-sm, 1rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-sm, 1.2);
}
h1 { font-size: var(--font-size-xxxl, 2.5rem); }
h2 { font-size: var(--font-size-xxl, 2rem); }
h3 { font-size: var(--font-size-xl, 1.5rem); }
h4 { font-size: var(--font-size-lg, 1.25rem); }
h5 { font-size: var(--font-size-xs, 0.75rem); }
h6 { font-size: var(--font-size-sm, 0.875rem); }

/* Headings for Dark Mode */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--color-white, #fff); /* Light color for dark background */
  font-family: var(--font-heading, 'Roboto', sans-serif); /* Retain heading font */
  margin-bottom: var(--spacing-sm, 1rem); /* Maintain existing spacing */
  font-weight: var(--font-weight-bold, 700); /* Retain bold styling */
  line-height: var(--line-height-sm, 1.2); /* Keep line height */
}

/* Paragraphs */
p {
  margin-bottom: var(--spacing-sm, 1rem);
}

p b, strong {
  font-weight: var(--font-weight-bold, 700);
}

p i, em {
  font-style: italic;
}

/* ====================================
   Button / Component Styles
==================================== */

:root {
  --button-bg: #fff; /* Button default background */
  --button-color: #333; /* Default text color */
  --button-hover-bg: #333; /* Hover background */
  --button-hover-color: #fff; /* Hover text color */
  --button-border: 1px solid #333;
  --button-padding: 0.5rem 1rem; /* Adjust padding */

  --black-button-bg: #111111; /* Button default background */
  --black-button-color: #fff; /* Default text color */
  --black-button-hover-bg: #fff; /* Hover background */
  --black-button-hover-color: #fff; /* Hover text color */
  --black-button-border: 1px solid #111111;
  --black-button-padding: 0.5rem 1rem; /* Adjust padding */
}


/* ====================================
   White Buttons
==================================== */

.manual-update-btn,
#run-sketch,
.nav-link,
.button,
.link-button,
.lyrics-button,
.nav-btn,
.screenplay-button,
.myfonts-download-button,
.back-link,
.code-container-button.copy-button,
.code-container-button.download-button {
  display: inline-block;
  padding: var(--button-padding);
  border: var(--button-border);
  border-radius: var(--border-radius-sm);
  background-color: var(--button-bg);
  color: var(--button-color);
  font-family: var(--font-heading, 'Roboto', sans-serif);
  font-size: var(--font-size-md, 1rem);
  font-weight: var(--font-weight-bold, 700);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
  margin: 1rem;
}

.manual-update-btn:hover,
#run-sketch:hover,
.nav-link:hover,
.button:hover,
.link-button:hover,
.lyrics-button:hover,
.nav-btn:hover,
.screenplay-button:hover,
.myfonts-download-button:hover,
.back-link:hover,
.code-container-button.copy-button:hover,
.code-container-button.download-button:hover {
  color: var(--button-hover-color); /* Explicitly use hover color variable */
  background-color: var(--button-hover-bg); /* Background for hover */
}

/* ====================================
   Black Buttons
==================================== */

.store-button,
.label-button,
.carousel-btn,
.buy-button {
  display: inline-block;
  padding: var(--black-button-padding);
  border: var(--black-button-border);
  border-radius: var(--border-radius-sm);
  background-color: var(--black-button-bg);
  color: var(--black-button-color);
  font-family: var(--font-heading, 'Roboto', sans-serif);
  font-size: var(--font-size-md, 1rem);
  font-weight: var(--font-weight-bold, 700);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
  margin: 1rem;
}

.store-button:hover,
.label-button:hover,
.carousel-btn:hover,
.buy-button:hover {
  color: var(--black-button-bg); /* Explicitly use hover color variable */
  background-color: var(--black-button-hover-bg); /* Background for hover */
}

nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap; /* Enables wrapping on smaller screens */
}

.nav-btn {
  display: flex; /* Keeps arrows and text in the same line */
  align-items: center; /* Centers text and arrows vertically */
  gap: var(--spacing-xs); /* Spacing between text and arrows */
  white-space: nowrap; /* Prevents wrapping */
}

.nav-link {
  font-family: var(--font-heading, 'Roboto', sans-serif);
  text-decoration: none;
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  font-size: var(--font-size-md);
  border: 1px solid transparent;
  box-sizing: border-box;
  transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
  border-radius: var(--border-radius-sm);
}

.nav-link:hover {
  border: 1px solid var(--color-dark);
  color: var(--button-hover-color); /* Consistent hover color */
}

.nav-link:active {
  background-color: var(--color-dark);
  border: 1px solid var(--color-dark);
}

.nav-link.active {
  color: var(--color-dark);
}

.nav-link.active:hover {
  color: var(--color-white);
}

.video-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg, 2rem);
  margin: var(--spacing-lg);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max-width-md);
  margin: var(--spacing-md) auto;
  gap: var(--spacing-md);
}

.btn-arrow {
  font-size: var(--font-size-md);
  line-height: var(--line-height-sm);
  display: inline-flex;
  align-items: center;
}

.btn-arrow-left {
  margin-right: var(--spacing-xs, 0.5rem);
}

.btn-arrow-right {
  margin-left: var(--spacing-xs, 0.5rem);
}

.button-container,
.link-button-container,
.resume-button-container {
  display: flex;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
}

.button-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.link-button-container {
  flex-direction: column;
  align-items: center;
}

/* General Dark Mode Button Styles */
body.dark-mode {
  --button-bg: #111; /* Button background for dark mode */
  --button-color: #fff; /* Button text color for dark mode */
  --button-hover-bg: #fff; /* Hover background for dark mode */
  --button-hover-color: #111; /* Hover text color for dark mode */
  --button-border: 1px solid #444; /* Button border color for dark mode */

  --black-button-text: 'Roboto', sans-serif;
}

/* Apply to All Buttons in Dark Mode */
body.dark-mode .manual-update-btn,
body.dark-mode #run-sketch,
body.dark-mode .nav-link,
body.dark-mode .button,
body.dark-mode .link-button,
body.dark-mode .lyrics-button,
body.dark-mode .nav-btn,
body.dark-mode .screenplay-button,
body.dark-mode .myfonts-download-button,
body.dark-mode .code-container-button.copy-button,
body.dark-mode .code-container-button.download-button {
  background-color: var(--button-bg);
  color: var(--button-color);
  border: var(--button-border);
}

body.dark-mode .manual-update-btn:hover,
body.dark-mode #run-sketch:hover,
body.dark-mode .nav-link:hover,
body.dark-mode .button:hover,
body.dark-mode .link-button:hover,
body.dark-mode .lyrics-button:hover,
body.dark-mode .nav-btn:hover,
body.dark-mode .screenplay-button:hover,
body.dark-mode .myfonts-download-button:hover,
body.dark-mode .code-container-button.copy-button:hover,
body.dark-mode .code-container-button.download-button:hover {
  background-color: var(--button-hover-bg);
  color: var(--button-hover-color);
}

body.dark-mode .store-button,
body.dark-mode .carousel-btn,
body.dark-mode .buy-button,
body.dark-mode .store-button {
  font-family: var(--black-button-text);
  background-color: var(--button-color);
  color: var(--color-dark-mode);
}

body.dark-mode .store-button:hover,
body.dark-mode .carousel-btn:hover,
body.dark-mode .buy-button:hover,
body.dark-mode .store-button:hover {
  font-family: var(--font-body);
  background-color: var(--color-dark-mode);
  color: var(--button-color);
  border: 1px solid var(--button-color);
}

/* Lists */
ul, ol {
  margin: var(--spacing-sm, 1rem) 0;
  padding-left: var(--spacing-md, 1.5rem);
  line-height: var(--line-height-reg, 1.5);
}

li {
  margin-bottom: var(--spacing-xs, 0.5rem);
}

li.no-bullet {
  list-style-type: none;
}

/* Links */
a {
  font-family: var(--font-body, 'Roboto Serif', serif);
  color: var(--color-secondary, #666);
  text-decoration: none;
  transition: color 0.3s ease;
}

/* a:hover {
  color: var(--color-dark, #333);
} */

/* Code Blocks */
code, pre {
  font-family: var(--font-code, 'Roboto Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  padding: var(--spacing-xs, 0.5rem);
  border-radius: var(--border-radius-sm, 0.25rem);
}

/* Utility Classes */
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }

.u-margin-top { margin-top: var(--spacing-md, 1.5rem); }
.u-margin-bottom { margin-bottom: var(--spacing-md, 1.5rem); }

/* Divider */

.divider {
  border: none;
  border-top: 1px solid #ddd;
  margin: var(--spacing-lg, 2rem) 0;
}

/* MAIN PAGE */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
/* General Body and Typography */
body {
  font-family: var(--font-body, 'Roboto Serif', serif);
  color: var(--color-dark, #333);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 8rem;
}

body p,
.side-container.small ul,
.content-about ol,
.content-about ul {
  font-family: var(--font-body, 'Roboto Serif', serif);
  font-weight: var(--font-weight-rg, 400); 
}

body p b { font-weight: var(--font-weight-md, 500); } /* Bold paragraphs */
body p i { font-weight: 550; } /* Italic paragraphs */

header {
  width: 100%;
  max-width: 1200px;
  padding: var(--spacing-lg, 2rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Site Notice */
.site-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 2rem;
  opacity: 0.7;
}

.notice-text {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-secondary, #666);
  font-family: var(--font-code, 'Roboto Mono', monospace);
  line-height: 1.2;
  margin: 0;
}

/* Dark mode support for site notice */
body.dark-mode .notice-text {
  color: var(--color-off-white, #efefef);
  opacity: 0.8;
}



.logo-container {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  border: 1px solid transparent;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  transition: border 0.3s ease, background 0.3s ease;
}

.logo-container:hover {
  border: 1px solid var(--color-third);
  background-color: var(--black-button-bg);
}

.logo-container:hover .logo {
  filter: invert(1);
  transition: filter 0.3s ease;
}

.logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: filter 0.3s ease;
}

body.dark-mode .logo-container:hover {
  border: 1px solid var(--color-third);
  background-color: var(--color-white);
}

body.dark-mode .logo-container:hover .logo {
  filter: invert(0);
}


main {
  width: 100%;
  max-width: auto;
}

/* Base Gallery Styling */
.gallery {
  display: grid;
  gap: var(--spacing-xs, 0.5rem);
  margin: var(--spacing-lg, 2rem);
  background-color: var(--color-white, #fff);
}

.gallery img {
  border: 1px solid transparent;
}

body.dark-mode .gallery {
  background-color: var(--color-dark-mode, #111);
}


/* Dynamic Grid Columns */
.gallery[class*="gallery-"] {
  display: grid;
  gap: var(--spacing-xs, 0.5rem);
}

.gallery-10 { grid-template-columns: repeat(10, 1fr); }
.gallery-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-item-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9; /* Maintains a 3:4 aspect ratio */
  margin: 0;
}

.gallery-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
  border-radius: var(--border-radius-l);
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-dark);
  padding: var(--spacing-xs) var(--spacing-sm);
  opacity: 0;
  font-family: var(--font-heading, 'Roboto', sans-serif);
  text-transform: uppercase;
  font-size: var(--font-size-lg, 1.2rem);
  font-weight: var(--font-weight-bold, 700);
  text-align: center;
  transition: opacity 0.3s ease;
  background-color: none;
  pointer-events: none;
  z-index: 3;
}

body.dark-mode .overlay-text {
  color: var(--color-white, #fff);
}

.gallery-item-wrapper:hover .gallery-item {
  opacity: 0;
}

.gallery-item-wrapper:hover .overlay-text {
  opacity: 1;
}

.gallery-item-fade {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 2;
}
.gallery-item-wrapper:hover .gallery-item-fade {
  opacity: 1;
}

/* Dark mode: fade to black instead */
body.dark-mode .gallery-item-fade {
  background: #111; /* or black (#000) if you want it even darker */
} 

/* ===========================
   Powered By (NFT sections)
=========================== */

.powered-by {
  text-align: center;
  margin: 2rem 0;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
}

.powered-by a {
  font-family: var(--font-code);
  text-decoration: none;
  margin: 0 0.25em;
}

.powered-by a:hover {
  text-decoration: underline;
}


/* ====================================
   Footer
==================================== */

footer {
  display: flex;
  align-items: center; /* Vertically align items */
  justify-content: center; /* Center items horizontally */
  gap: var(--spacing-sm, 1rem); /* Add spacing between items */
  width: 100%;
  padding: var(--spacing-xs, 0.5rem); /* Reduce padding for a smaller footer */
  background-color: var(--color-white);
  position: fixed;
  bottom: 0;
  left: 0;
  transition: box-shadow 1.0s ease;
  z-index: 100;
}

body.dark-mode footer {
  background-color: var(--color-dark-mode, #111);
  color: var(--color-white, #fff);
}

/* Initially, no shadow */
.footer-box-shadow {
  box-shadow: 0 .5em 2em 0em rgb(187, 187, 187);
}

body.dark-mode .footer-box-shadow {
  box-shadow: none; /* Remove the box shadow in dark mode */
}

footer p {
  display: flex;
  align-items: center; /* Align email text with the toggle */
  font-size: var(--font-size-md, 1rem);
  color: var(--color-secondary, #666);
  margin: 0;
}

body.dark-mode footer {
  color: var(--color-white, #fff);
}

body.dark-mode footer p,
body.dark-mode footer .contact-label,
body.dark-mode footer .email-link {
  color: var(--color-white, #fff);
}
.contact-label {
font-weight: var(--font-weight-bold, 700);
color: var(--color-dark, #333);
margin-right: 5px;
text-transform: uppercase;
}

body.dark-mode .contact-label p {
  color: var(--color-white, #fff);
}

.email-link {
color: var(--color-dark);
border-radius: var(--border-radius-sm);
padding: var(--spacing-sm, 1rem);
text-decoration: none;
transition: color 0.3s ease, background-color 0.3s ease;
}

.email-link:hover {
color: var(--color-white);
background-color: var(--color-dark);
}


.toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}


/* ========================
   Dark Mode Slider 
=========================== */

.dark-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-secondary, #666);
  border-radius: 25px;
  cursor: pointer;
  transition: 0.4s;
}

/* Default slider button (unchecked state) */
.dark-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px; /* Position for unchecked state */
  bottom: 3.5px;
  background-color: var(--color-white, #fff); /* Default color */
  border-radius: 50%;
  transition: 0.4s ease;
}

/* Checked state (sliding + color change) */
input:checked + .dark-slider:before {
  transform: translateX(24px); /* Creates the sliding effect */
  background-color: var(--color-white, #666); /* Active toggle button color */
}

/* Dark mode slider button (overrides color in dark mode) */
body.dark-mode .dark-slider:before {
  background-color: var(--color-white, #fff); /* Button color in dark mode */
}

/* ========================
   Content 
=========================== */

.content-about-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--spacing-lg, 2rem);
  margin-bottom: var(--spacing-lg, 2rem);
  width: 100%; /* Ensure full-width parent container */
}

.content-about {
  max-width: var(--max-width-md, 60rem);
  padding: 0 8rem;
}

.content-about-wide {
  max-width: var(--max-width-lg, 80rem);
  padding: 0 8rem;
}

.content-about-wide h1, h2, h3 {
  font-family: var(--font-heading, 'Roboto', sans-serif);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-dark, #333);
}

.content-about h1, h2, h3 {
  font-family: var(--font-heading, 'Roboto', sans-serif);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-dark, #333);
}

.content-about-wide h1,
.content-about h1 {
  font-size: var(--font-size-xxl, 2rem);
}

.content-about-wide h2,
.content-about h2 {
  font-size: var(--font-size-xl, 1.5rem);
}

.content-about-wide h3,
.content-about h3 {
  font-size: var(--font-size-lg, 1.25rem);
}

.content-about p a {
  font-family: var(--font-body, 'Roboto Serif', serif);
  font-size: var(--font-size-md, 1rem);
  color: var(--color-primary, #007BFF);
}

.content-about p a:hover {
  text-decoration: underline;
  color: inherit;
}

.content-about li {
  padding-left: var(--spacing-lg, 2rem);
  text-indent: -1.5rem; 
  list-style-position: inside; 
  line-height: var(--line-height-reg, 1.5);
  margin: var(--spacing-xs, 0.5rem);
}

.content-about li.no-bullet {
  list-style-type: none;
}

/* ========================
   Images 
=========================== */

.featured-image-small-shadow,
.featured-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.featured-image img {
  height: auto;
  display: block;
  width: 100%;
  padding: var(--spacing-lg, 2rem);
  padding: 0 8rem;
  border-radius: 10px;
  margin-bottom: 1rem;
}

.featured-image-small-shadow img {
  max-width: var(--max-width-md, 60rem); 
  border-radius: 10px;
  width: 100%;
  box-shadow: var(--drop-shadow-1);
}


.featured-image-small img { 
  max-width: var(--max-width-md, 60rem); 
  border-radius: 10px;
  width: 100%;
}

.featured-image-medium img {
  width: 100%; /* Make the image responsive */
  max-width: 70rem; /* Restrict the maximum size */
  border-radius: 10px;
}

.featured-image-xsmall img { 
  max-width: var(--max-width-xs, 20rem); 
  border-radius: 10px;
  margin: 0; 
  padding: 0; 
}

.featured-image-xsmall,
.featured-image-small,
.featured-image-medium {
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  padding: var(--spacing-lg, 2rem);
  width: 100%; /* Allow the container to stretch */
}

.featured-image-process p,
.featured-image p,
.featured-image-xsmall p,
.featured-image-small p,
.featured-image-medium p {
  margin: 1rem;
}


/* ========================
   Centered Layout Wrapper
=========================== */

.centered-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-lg, 2rem);
  margin: 4rem auto 2rem auto;
  max-width: var(--max-width-lg, 80rem);
}

.side-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 30rem;
}

.side-container img {
  width: 100%;
  height: auto;
  display: block;
  padding: var(--spacing-lg, 2rem);
}

.side-container.large {
  flex: 2;
}

.side-container.small {
  flex: 1;
  height: 100%;
  padding: var(--spacing-lg, 2rem);
}

.side-container.small h2,
.side-container.small h3,
.side-container.small h4,
.side-container.small p,
.side-container.small ul {
  margin-bottom: var(--spacing-md, 1.5rem);
  text-align: left;
}

.side-container.small h3 {
  margin-top: var(--spacing-lg, 2rem);
}

.side-container.small p {
  margin-bottom: var(--spacing-md, 1.5rem); /* Maintain proper spacing */
  display: block; /* Restore block behavior */
}

.side-container.small p a {
  display: inline; /* Ensure links stay inline */
  white-space: nowrap; /* Prevent links from wrapping unnecessarily */
  vertical-align: baseline; /* Align links with surrounding text */
  color: var(--color-primary, #007BFF);
}

.side-container.small p strong {
  font-weight: var(--font-weight-bold, 700);
}

.side-container.small p span {
  display: inline; /* Ensure any spans are inline as expected */
}


/* Links Grid */
.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 15px;
  max-width: 400px;
  margin: 0 auto;
}


/* ========================
   Captions
=========================== */

.caption {
  margin-top: var(--spacing-xs, 0.5rem);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-dark, #333);
}

body.dark-mode .caption {
  color: var(--color-white, #fff);
}

.caption-container {
  width: 100%; /* Full width to match the image */
  max-width: 20rem; /* Match image width */
  text-align: left; /* Align text to the left */
  margin-top: 0.5rem; /* Space between image and caption */
}

.caption-container-center {
  width: 100%;
  max-width: 40rem;
  margin: 0.5rem auto; /* Centers the container itself */
  text-align: center; /* Ensures content inside is center-aligned */
  margin-bottom: 2rem;
}

.caption-container-center .caption {
  margin: 0; /* Removes default margin */
}

.caption-container-center,
.caption-container {
  font-size: var(--font-size-xs, 0.875rem);
  color: var(--color-dark, #333);
}

/* ========================
   Lightbox
=========================== */

.lightbox-caption {
  margin-top: var(--spacing-xs, 0.5rem);
  margin-bottom: var(--spacing-sm, 1rem);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-dark, #333);
  text-align: center;
}

body.dark-mode .lightbox-caption {
  color: var(--color-white, #fff)
}

.laurel-wrapper {
  padding-left: var(--spacing-sm, 1rem);
  padding-right: var(--spacing-sm, 1rem);
}

.laurel-container {
  display: flex;
  flex-wrap: wrap; /* Wrap laurels into new rows */
  gap: 1rem; /* Space between laurels */
  justify-content: center; /* Center the entire container */
  margin: 2rem 0;
}

.laurel-container img {
  flex: 0 0 calc(20% - 1rem); 
  max-width: calc(20% - 1rem); 
  height: auto;
  object-fit: contain; 
}

/* Invert laurels in dark mode */
body.dark-mode .laurel-container img {
  filter: invert(1); /* Invert colors for dark mode */
  transition: filter 0.3s ease; /* Smooth transition */
}

/* Lightbox Grid */
.lightbox-grid-8,
.lightbox-grid-6,
.lightbox-grid-5,
.lightbox-grid-4,
.lightbox-grid-3,
.lightbox-grid-2,
.lightbox-grid-1 {
  display: grid;
  padding: var(--spacing-lg, 2rem);
}

.lightbox-grid-8 { grid-template-columns: repeat(8, 1fr); }
.lightbox-grid-6 { grid-template-columns: repeat(6, 1fr); }
.lightbox-grid-5 { grid-template-columns: repeat(5, 1fr); }
.lightbox-grid-4 { grid-template-columns: repeat(4, 1fr); }
.lightbox-grid-3 { grid-template-columns: repeat(3, 1fr); }
.lightbox-grid-2 { grid-template-columns: repeat(2, 1fr); }
.lightbox-grid-1 { grid-template-columns: repeat(1, 1fr); }

/* Grid Items */
.lightbox-grid-item,
.store-grid-item {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-grid-item img,
.store-grid-item img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Store Grid */
.store-grid-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-lg, 2rem);
  box-sizing: border-box;
}

.store-grid-4,
.store-grid-3,
.store-grid-2 {
  display: grid;
  gap: var(--spacing-lg, 2rem);
  max-width: var(--max-width-lg, 80rem);
  margin: 0 auto;
}

.store-grid-4 { grid-template-columns: repeat(4, 1fr); }
.store-grid-3 { grid-template-columns: repeat(3, 1fr); }
.store-grid-2 { grid-template-columns: repeat(2, 1fr); }

.store-grid-2 img,
.store-grid-3 img,
.store-grid-4 img {
  width: 100%;
  height: auto;
  max-height: 8rem;
  object-fit: contain;
  display: block;
  cursor: pointer;
}

/* Hover Effects */
.store-grid-item:hover,
.lightbox-grid-item:hover {
  transform: scale(1.05);
}

.featured-image .lightbox-grid-item:hover {
  transform: scale(1.01);
}

/* ========================
      Modal Styles
=========================== */

.modal {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--lightbox-bg-color, rgba(0, 0, 0, 0.75));
  z-index: 9999;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.modal-content {
  position: relative;
  max-width: 80%;
  max-height: 80%;
  margin: auto;
}

.modal-content img {
  max-height: 80vh;
  max-width: 100%;
  height: auto;
  display: block;
}

.close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
}

.arrow.prev {
  left: 1rem;
}

.arrow.next {
  right: 1rem;
}

.arrow:disabled {
  display: none; /* Hide arrows when not applicable */
}

/* ========================
      Block Gallery
=========================== */

.block-gallery {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg, 2rem);
  padding: var(--spacing-lg, 2rem);
  flex-wrap: wrap;
}

.block-gallery-item {
  text-align: center;
  max-width: 300px;
}

.block-gallery-item img {
  width: 100%;
  height: auto;
  box-shadow: var(--drop-shadow-1);
}

.block-gallery-item p {
  margin-top: var(--spacing-sm, 1rem);
  font-size: var(--font-size-md, 1rem);
  color: var(--color-dark, #333);
  text-align: left;
}

body.dark-mode .block-gallery-item p {
  color: var(--color-off-white, #efefef);
}

/* ========================
   Pull quotes
=========================== */


.pull-quotes-wrapper {
  display: flex;
  justify-content: center;
}

.pull-quotes-container {
  max-width: var(--max-width-lg, 80rem);
  padding: var(--spacing-lg, 2rem);
  text-align: center;
}

.pull-quote {
  margin: 40px 0;
}

.pull-quote p {
  font-size: var(--font-size-xl, 1.25rem);
  font-family: var(--font-quote, 'Hepta Slab', serif);
  font-weight: var(--font-weight-md, 500);
  line-height: var(--line-height-reg, 1.5);
  color: var(--color-dark, #333);
  margin: var(--spacing-sm, 1rem);
}

body.dark-mode .pull-quote p {
  color: var(--color-white, #fff);
}

.source {
  font-family: var(--font-heading, 'Roboto', sans-serif);
  display: block;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-secondary, #666);
  text-transform: uppercase;
  margin-top: var(--spacing-sm, 1rem);
}

body.dark-mode .source,
body.dark-mode .double-pull-quote .source  {
  color: var(--color-off-white, #efefef);
}

.double-pull-quotes-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px 40px;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 0 12rem;
  box-sizing: border-box;
}

.double-pull-quote {
  flex: 0 0 calc(48%);
  text-align: center;
  font-size: var(--font-size-lg, 1.25rem);
  line-height: var(--line-height-reg, 1.5);
}

body.dark-mode .double-pull-quote p {
  color: var(--color-white, #fff);
}

.double-pull-quote p {
  font-size: var(--font-size-lg, 1.25rem);
  font-size: var(--font-size-lg, 1.25rem);
  margin-bottom: var(--spacing-sm, 1rem);
  color: var(--color-dark, #333);
  font-family: var(--font-quote, 'Hepta Slab', serif);
  font-optical-sizing: auto;
  font-weight: var(--font-weight-md, 500);
  font-style: normal;
}

.double-pull-quote .source {
  display: block;
  margin-top: var(--spacing-sm, 1rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-secondary, #666);
  text-transform: uppercase;
  font-size: var(--font-size-sm, 0.875rem);
}


/* ========================
  SVG DARK MODES
=========================== */

body.dark-mode .logo {
  filter: invert(1);
}

body.dark-mode #letterboxd-logo {
  content: url('/assets/img/brands/letterboxd-dark.svg');
}

body.dark-mode #letterboxd2-logo {
  content: url('/assets/img/brands/letterboxd2-dark.svg');
}

body.dark-mode #jimmytheghost-logo {
  content: url('/assets/img/brands/JimmyTheGhost-logo-dark.svg');
}

body.dark-mode #vbv-logo {
  content: url('/assets/img/brands/VBV_Logo-dark.svg');
}

body.dark-mode #cloudsofacid-logo {
  content: url('/assets/img/brands/CloudsOfAcid-dark.svg');
}

body.dark-mode #motorcrusher-logo {
  content: url('/assets/img/brands/motorcrusher-dark.svg');
}

body.dark-mode #jimmysavage-logo {
  content: url('/assets/img/brands/JimmySavage-dark.svg');
}

body.dark-mode #darkprotocol-logo {
  content: url('/assets/img/brands/DarkProtocol-bw-dark.svg');
}

body.dark-mode #darkprotocol2-logo {
  content: url('/assets/img/brands/DarkProtocol-logo-2-dark.svg');
}

body.dark-mode #thejumpscares-logo {
  content: url('/assets/img/brands/thejumpscares-alpha-dark.svg');
}

body.dark-mode #jewelpod-logo {
  content: url('/assets/img/brands/JewelPod-logo-dark.svg');
}

body.dark-mode #jewelpod-logo2 {
  content: url('/assets/img/brands/JewelPod-logo-2-dark.svg');
}

body.dark-mode #politeriot-logo {
  content: url('/assets/img/brands/PoliteRiot-dark.svg');
}

body.dark-mode #politeriot2-logo {
  content: url('/assets/img/brands/PoliteRiot-2-Dark.svg');
}

body.dark-mode #vf-logo {
  content: url('/assets/img/brands/VF-logo-dark.svg');
}

body.dark-mode #vinny-logo {
  content: url('/assets/img/brands/VD-logo-dark.svg');
}

/* Temporarily disabled due to rate limiting
body.dark-mode #itunes-icon {
  content: url('/assets/img/brands/itunes-dark.svg');
}

body.dark-mode #prime-icon {
  content: url('/assets/img/brands/amazon-prime-dark.svg');
}

body.dark-mode #apple-music {
  content: url('/assets/img/brands/apple-music-listen-dark.svg');
}

body.dark-mode #spotify-icon {
  content: url('/assets/img/brands/spotify-listen-dark.svg');
}
*/

body.dark-mode #amazon-icon {
  content: url('/assets/img/brands/amazon-black.svg');
}

body.dark-mode #amazon-icon {
  content: url('/assets/img/brands/amazon-black.svg');
}

body.dark-mode #jimmy-icon {
  content: url('/assets/img/brands/JimmyTheGhost-Skull-white.svg');
}

/* General skull icon dark mode rule */
body.dark-mode .ghost-skull-icon,
body.dark-mode img[src*="JimmyTheGhost-Skull.svg"] {
  content: url('/assets/img/brands/JimmyTheGhost-Skull-white.svg');
}

/* Temporarily disabled due to rate limiting
body.dark-mode #ppp-logo {
  content: url('/assets/img/brands/PrettyPeoplePictures-dark.svg');
}
*/

body.dark-mode #ppr-logo {
  content: url('/assets/img/brands/PrettyPeopleRecords-dark.svg');
}

body.dark-mode #ppradio-logo {
  content: url('/assets/img/brands/ppradio-logo-dark.svg');
}

body.dark-mode #hen-logo {
  content: url('/assets/img/brands/HEN-logo-dark.svg');
}

body.dark-mode #purehorror-logo {
  content: url('/assets/img/brands/PureHorror-dark.svg');
}

body.dark-mode #benign-logo {
  content: url('/assets/img/brands/Benign-dark.svg');
}

body.dark-mode #benign-logo-2 {
  content: url('/assets/img/brands/benign-logo-dark.svg');
}

body.dark-mode #nuvixscript-logo {
  content: url('/assets/img/brands/NuvixScript-Logo-2-dark.svg');
}

body.dark-mode #xeroshot-logo {
  content: url('/assets/img/brands/XeroShot-Logo-dark.svg');
}

body.dark-mode #star-stocks-logo {
  content: url('/assets/img/brands/star-stocks-dark.svg');
}





/* ========================
   Responsive Design
=========================== */


@media (max-width: 1400px) {

  .double-pull-quotes-container {
    flex-wrap: wrap;
    gap: 40px 20px; /* Adjust spacing for better fit */
    padding: 0 12rem; /* Reduce padding */
  }

  .double-pull-quote {
    flex: 0 0 calc(100% - 40px); /* Stack quotes */
    text-align: center;
  }
}


@media (max-width: 1024px) {

  .logo {
    width: 4rem;
  }

  .laurel-wrapper {
    padding: 0 1rem; 
  }

  .laurel-container img {
    flex: 0 0 calc(33% - 1rem); /* Two laurels per row on smaller screens */
    max-width: calc(33% - 1rem);
  }

  /* Arrows Adjust horizontal position closer */
  #prev-arrow {
    left: 5%; 
  }

  #next-arrow {
    right: 5%; 
  }

  /* Galleries */
  .gallery-10,
  .gallery-5,
  .gallery-4,
  .gallery-3,
  .gallery-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Content Items */
  .content-item {
    flex-direction: column;
  }

  .content-image {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }

  .content-info {
    width: 100%;
  }

  /* Lightbox */
  .lightbox-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); 
    padding: 2rem;
  }

  .lightbox-grid-8 { grid-template-columns: repeat(4, 1fr); }
  .lightbox-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .lightbox-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .lightbox-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .lightbox-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .lightbox-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .lightbox-grid-1 { grid-template-columns: repeat(1, 1fr); }

  .centered-wrapper {
    flex-direction: column;
    gap: var(--spacing-xs, .05rem); /* Reduce gap between products */
    margin: 2rem auto 1rem auto; /* Reduce margin around the container */
  }

  /* Side Containers */
  .side-container.large,
  .side-container.small {
    flex: none; /* Reset sizes for mobile */
    width: 100%;
  }
}

@media (max-width: 850px) {

  .logo {
    width: 4rem;
  }



  nav {
    flex-direction: row; /* Stack items vertically */
    align-items: center; /* Center-align buttons */
    margin: 0; /* Reset margins */
    padding: 0; /* Reset padding */
  }

  .nav-link {
    font-size: var(--font-size-sm); /* Smaller font size for mobile */
    padding: 0.5rem 0.5rem; /* Minimal padding for buttons */
    margin: 0; /* Remove extra margins */
  }

  .nav-btn {
    margin: .25rem;
  }


  .nav-container {
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
  }

  footer p {
    display: flex;
    align-items: center; /* Align email text with the toggle */
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-secondary, #666);
    margin: 0;
  }
  
  .contact-label {
  font-size: var(--font-size-sm, 00.875rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-dark, #333);
  margin-right: 2px;
  text-transform: uppercase;
  }
  
  
  .email-link {
  color: var(--color-dark);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-xs, .5rem);
  }
  
  
  .toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
  }
  
  .toggle input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .gallery.gallery-4 {
    display: grid; 
    grid-template-columns: repeat(1, 1fr); /* Two columns */
    margin: 0;
    padding: 0 1rem;
  }

  .gallery.gallery-3 {
    display: grid; 
    grid-template-columns: repeat(1, 1fr); /* Two columns */
    margin: 0;
    padding: 0 1rem;
  }

  .gallery.gallery-2 {
    display: grid; 
    grid-template-columns: repeat(1, 1fr); /* Two columns */
    margin: 0;
    padding: 0 1rem;
  }

  .gallery-item-wrapper {
    margin: 0; /* Remove child element margins */
  }

  /* Featured Images */
  .featured-image-small img {
    max-width: 30rem;
    border-radius: 10px;
  }

  .featured-image-xsmall img {
    max-width: var(--max-width-xs, 20rem);
    margin: 0;
    padding: 0;
    border-radius: 10px;
  }

  .featured-image img {
    height: auto;
    display: block;
    width: 100%;
    margin: var(--spacing-lg, 2rem);
    padding: 0 1rem;
    border-radius: 10px;
  }

  .laurel-container img {
    flex: 0 0 calc(50% - 1rem); /* Two laurels per row on smaller screens */
    max-width: calc(50% - 1rem);
  }

  .store-grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Gallery Text */
  .gallery-title {
    font-size: 1.5rem;
  }

  .gallery-description {
    font-size: 0.9rem;
  }

  /* Content About Section */
  .content-about {
    max-width: 100%; /* Full width for mobile */
    padding: 0 2rem; /* Minimal padding on mobile */
    margin: 1rem 0;
  }

  .content-about h2 {
    max-width: 100%; /* Full width for mobile */
    padding: 0 !important; /* Minimal padding on mobile */
  }

  .content-about-container {
    margin: 0; /* Remove any margin */
    padding: 0; /* Remove any padding */
  }

  .centered-wrapper {
    gap: var(--spacing-xs, .05rem); /* Reduce gap between products */
    margin: 2rem auto 1rem auto; /* Reduce margin around the container */
  }

  .side-container {
    min-height: auto; /* Remove fixed height */
  }
  

  .side-container img {
    padding: var(--spacing-sm, 1rem); /* Reduce padding around images */
  }

  .side-container .caption {
    margin-top: var(--spacing-xs, 0.5rem); /* Reduce spacing above captions */
  }

  .lightbox-grid-8 { grid-template-columns: repeat(2, 1fr); }
  .lightbox-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .lightbox-grid-5 { grid-template-columns: repeat(1, 1fr); }
  .lightbox-grid-4 { grid-template-columns: repeat(1, 1fr); }
  .lightbox-grid-3 { grid-template-columns: repeat(1, 1fr); }
  .lightbox-grid-2 { grid-template-columns: repeat(1, 1fr); }
  .lightbox-grid-1 { grid-template-columns: repeat(1, 1fr); }

  .content-about li {
    padding-left: 0;
    list-style-position: inside; 
    line-height: var(--line-height-reg, 1.5);
    margin: 0;
  }

  .pull-quotes-container,
  .double-pull-quotes-container {
    flex-direction: column; /* Stack quotes in a single column */
    gap: 30px; /* Reduce gap */
    padding: 0 2rem; /* Add padding for smaller screens */
  }

  .pull-quote,
  .double-pull-quote {
    flex: 0 0 100%; /* Full width for quotes */
    margin: 0 auto; /* Center the quotes */
    text-align: left; /* Align text to the left for better readability */
  }

  .pull-quote p,
  .double-pull-quote p {
    font-size: 1rem; /* Slightly reduce font size */
  }

  .pull-quote .source,
  .double-pull-quote .source {
    font-size: 0.75rem; /* Slightly reduce source font size */
  }
}

@media (max-width: 480px) {
  body {
    font-size: 1.1rem;
  }
  

}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', sans-serif !important;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  font-size: 2rem;
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
}