/* ... Previous CSS ... */

@import url("https://use.typekit.net/xpp4cir.css");

/* Update CSS to support data-theme on HTML tag as well as BODY */
:root {
  /* Font Family */
  --font-sans: "Google Sans", "Product Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Google Sans", "Product Sans", sans-serif;
  --font-mono: "Google Sans Code", "Roboto Mono", monospace;
  
  /* Light Mode Colors Defaults */
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
  --text-secondary: #666666;
  --accent-color: #000000;
  --border-color: #e5e5e5;
  --overlay-bg: rgba(255, 255, 255, 0.95);
  --card-bg: #f5f5f5;
  
  /* Spacing */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
  
  /* Grid */
  --grid-gap: 1px;
  
  /* Header Height */
  --header-height: 80px;
  
  /* Gradient Defaults (Light) */
  --gradient-color: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #0a0a0a;
    --text-color: #ededed;
    --text-secondary: #a1a1a1;
    --accent-color: #ffffff;
    --border-color: #333333;
    --overlay-bg: rgba(10, 10, 10, 0.95);
    --card-bg: #1f1f1f;
    --gradient-color: #ffffff; /* Dark mode likely wants fade to black? 
       Actually, user said "black or white depending on theme".
       Usually dark mode = black background, so fade to black.
       Light mode = white background, so fade to white.
       
       Wait, the user REQUEST: "0% to 100% black or white depending on the theme".
       Usually for an image overlay text readability:
       If image is bright, you need black overlay.
       If image is dark, you need nothing or black overlay?
       
       context: "The page headers... when no featured header images... should look like about page"
       context: "Also when there is a featured header image... that image should be a full cover... no visual gap"
       
       If the background behind the image is the page background color.
       Fading the bottom of the image into the page background color makes a smooth transition.
       
       Light Mode (White BG) -> Fade to White (#ffffff).
       Dark Mode (Black BG) -> Fade to Black (#000000).
       
       Let's correct my assumption.
       */
    --gradient-color: #0a0a0a; /* Match --bg-color */
  }
}

/* Theme overrides targeting HTML tag now */
html[data-theme='light'] {
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
  --text-secondary: #666666;
  --accent-color: #000000;
  --border-color: #e5e5e5;
  --overlay-bg: rgba(255, 255, 255, 0.95);
  --card-bg: #f5f5f5;
  --gradient-color: #ffffff; /* Fade to white */
}

html[data-theme='dark'] {
  --bg-color: #0a0a0a;
  --text-color: #ededed;
  --text-secondary: #a1a1a1;
  --accent-color: #ffffff;
  --border-color: #333333;
  --overlay-bg: rgba(10, 10, 10, 0.95);
  --card-bg: #1f1f1f;
  --gradient-color: #0a0a0a; /* Fade to black/bg */
}

/* Reset & Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-color); /* This will now inherit from root if not set, but using variable is safer */
  color: var(--text-color);
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-height); /* Prevent content from hiding behind fixed header */
}

body[data-template="home"], body[data-has-cover="true"] {
  padding-top: 0;
}

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

img {
  max-width: 100%;
  display: block;
  height: auto;
}

/* Header Layout */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--bg-color); /* Need solid background for fixed header */
  /* Border removed */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--spacing-lg);
  z-index: 900;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.transparent-mode {
  background-color: transparent;
  border-bottom-color: transparent;
  color: #ffffff;
}

.site-header.transparent-mode a,
.site-header.transparent-mode .theme-toggle {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.site-header.transparent-mode .mobile-category-dropdown select {
    background-color: rgba(255,255,255,0.15);
    color: white;
    border-color: rgba(255,255,255,0.4);
    backdrop-filter: blur(4px);
}

.site-header.scrolled {
  background-color: var(--bg-color); /* use rgba for glassiness if desired, but solidity is safer for content reading */
  /* Or use semi-transparent bg + blur */
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  /* Border removed */
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

[data-theme='dark'] .site-header.scrolled {
  background-color: rgba(10, 10, 10, 0.9);
}

.header-left, .header-right {
  flex: 1;
  display: flex;
  align-items: center;
}

.header-right {
  justify-content: flex-end;
}

.header-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  /* mix-blend-mode removed to allow explicit light/dark logo assets */
  /* color: #ffffff; Removed to allow natural text color inheritance unless forced by header state */
}

/* Nav Visibility Classes */
@media (min-width: 769px) {
  .desktop-category {
    display: block;
  }
  
  .mobile-category-dropdown {
    display: none;
  }
}

@media (max-width: 768px) {
  /* Show Dropdown, Hide List on Mobile */
  .desktop-category {
    display: none;
  }
  
  .mobile-category-dropdown {
    display: none;
  }
}

.mobile-category-dropdown select {
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Main Menu */
.main-menu ul {
  display: flex;
  list-style: none;
  gap: var(--spacing-md);
  align-items: center;
  padding: 0;
  margin: 0;
}

.main-menu a {
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.8;
  transition: opacity 0.2s;
  white-space: nowrap; /* Prevent breaking names */
}

.main-menu a:hover, .main-menu a.active {
  opacity: 1;
}

/* Theme Toggle */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-color);
  font-size: 1.1rem;
  padding: 0.25rem;
  display: flex;
  align-items: center;
}

/* Layout */
.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--spacing-lg);
  min-height: calc(100vh - var(--header-height));
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .site-header {
        padding: 0 var(--spacing-md);
    }
}

@media (max-width: 768px) {
  .site-header {
    height: auto;
    flex-wrap: wrap;
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
  }
  
  body {
    padding-top: 140px; /* Adjust based on wrapped header height */
  }

  .header-left {
    order: 1;
    width: 100%;
    margin-bottom: var(--spacing-sm);
    justify-content: center; /* Keep logo centered on mobile */
  }
  
  .header-right {
    order: 3;
    justify-content: center; /* Center menu on mobile */
    width: 100%;
  }
  
  .main-menu ul {
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--spacing-sm);
  }
  
}

/* Masonry Grid */
.masonry-grid {
  column-count: 1;
  column-gap: var(--grid-gap);
}

@media (min-width: 640px) {
  .masonry-grid {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .masonry-grid {
    column-count: 3;
  }
}

.grid-item {
  break-inside: avoid;
  margin-bottom: var(--grid-gap);
  position: relative;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 4px;
}

.grid-item img {
  width: 100%;
  transition: transform 0.5s ease;
}

.grid-item:hover img {
  transform: scale(1.02);
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-bg);
  z-index: 1000;
  overflow-y: auto;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease;
}

.modal.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.modal-content {
  max-width: 95vw;
  max-height: 85vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.modal-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  border-radius: 2px;
}

.modal-info {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.modal-info h3 {
  color: var(--text-color);
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.exif-data {
  display: flex;
  gap: var(--spacing-md);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.close-modal {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  font-size: 2rem;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--text-color);
  z-index: 1001;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Blocks Styling */
.page-content {
  max-width: 1200px; /* Increased max-width for column layouts */
  margin: 0 auto;
}

.page-content-full {
  width: 100%;
}

.page-content h1 {
  margin-bottom: var(--spacing-lg);
  font-size: 2.5rem;
  font-weight: 300;
  text-align: center;
}

/* Layout System */
.layouts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.layout-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}

.column {
  grid-column: span var(--span);
}

@media (min-width: 1024px) {
    /* Constrain text-only layouts (no images) to 800px and center them */
    .layout-grid:not(:has(.block-type-image)) {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Responsive Columns */
@media (max-width: 768px) {
  .layout-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg); /* Add gap between stacked columns */
  }
  
  /* Break out images to full width on mobile for layout grids containing images */
  .layout-grid:has(.block-type-image) {
      width: calc(100% + 2 * var(--spacing-lg));
      margin-left: calc(-1 * var(--spacing-lg));
      margin-right: calc(-1 * var(--spacing-lg));
      gap: 1px;
  }
  
  /* If a mixed layout has text, we need to add padding back to the text column so it's not edge-to-edge */
  .layout-grid:has(.block-type-image) .column:has(.block-type-text),
  .layout-grid:has(.block-type-image) .column:has(.block-type-markdown),
  .layout-grid:has(.block-type-image) .column:has(.block-type-heading) {
      padding-left: var(--spacing-lg);
      padding-right: var(--spacing-lg);
  }

  /* Make sure images inside these full-width layouts don't have border-radius if they are touching edges? 
     User said "work like other images... 1px gap". 
     The generic .block-type-image img has border-radius: 4px. 
     Full bleed usually looks better square. */
  .layout-grid:has(.block-type-image) .block-type-image img {
      border-radius: 0;
  }
  
  .column {
    width: 100%;
    /* Ensure content inside doesn't hit edges if not using container padding, 
       but container usually handles this. */
  }
}

.blocks {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Basic Kirby Blocks Defaults */
.block-type-heading h1, .block-type-heading h2, .block-type-heading h3 {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
}

.block-type-image figure {
    margin: 0;
}

.block-type-image img {
    border-radius: 4px;
}

.block-type-quote {
    border-left: 3px solid var(--accent-color);
    padding-left: var(--spacing-md);
    font-style: italic;
    font-size: 1.1rem;
    margin: var(--spacing-md) 0;
}

/* Hero / Cover Section */
.hero-cover {
    position: relative;
    width: 100%;
    position: relative;
    width: 100%;
    height: 85vh; /* almost full height */
    /* Ensure mobile browsers respect height properly */
    height: 85svh; 
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
    background-color: var(--card-bg); /* Fallback */
}

/* If full immersive cover is active, make it full height */
body[data-has-cover="true"] .hero-cover {
    height: 100vh;
}

/* Ensure header doesn't cover the top of the hero if it's transparent, 
   but currently header is solid. If we want transparent header effect over hero, 
   we'd need more JS/CSS tricks. For now, it sits below header. */

/* Background Image Container shared styles */
.background-image-container,
.hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Ensure images always cover the container */
.background-image,
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Theme-aware Hero Overlay */
.overlay-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use CSS variable if we want it to verify by theme, 
       but "overlay-dark" implies dark. 
       User asked for "0% to 100% black or white depending on the theme". 
       So let's define that gradient variable. */
    background: linear-gradient(
        to bottom, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,0) 66%,
        var(--gradient-color) 100%
    );
    z-index: 2;
}

/* Fallback/Legacy class support */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,0) 66%,
        var(--gradient-color) 100%
    );
    z-index: 2;
}

/* Hero Content Bottom Left */
.hero-content-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    text-align: left;
    padding: 64px;
    max-width: 45vw;
    color: var(--text-color); /* Flip depending on theme (black/white) */
    /* Ensure it sits above the gradient overlay (z-index 2) */
}

/* Compensate for the gradient being 50% to 100% black. 
   Content needs to be readable. 50% starts the fade.
   If text is very long, it might go above 50% height.
   Since gradient starts transparent at 50% height, text above 50% might be hard to read 
   against a potentially light image. 
   Safety: Text shadow */

.hero-content-bottom-left h2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
    /* text-shadow removed */
}

.hero-content-bottom-left .subtitle {
    font-size: 1.1rem; /* Paragraph sized */
    line-height: 1.6;
    opacity: 0.9;
    font-weight: 400;
    max-width: 650px;
    max-width: 650px;
    /* text-shadow removed */
}

/* Hide Intro Section on Desktop */
@media (min-width: 1024px) {
  .intro-section.hide-on-desktop {
    display: none;
  }
}

/* ensure intro section shows on mobile */
@media (max-width: 1023px) {
  .intro-section.hide-on-desktop {
    display: flex; /* Restore flex display */
    flex-direction: column;
    justify-content: center;
    background-color: var(--bg-color); /* Ensure visible background */
  }

  .intro-container {
      width: 100%;
      padding: var(--spacing-xl) var(--spacing-lg); /* Add padding */
      margin: 0 auto;
      max-width: 800px;
  }
  
  .intro-content h2 {
      font-size: 2rem;
      margin-bottom: var(--spacing-md);
      line-height: 1.2;
  }

  .intro-body {
      font-size: 1.1rem;
      line-height: 1.6;
      color: var(--text-color);
  }
  
  /* Use default center on mobile for hero? Or keep bottom left?
     User "I want on the bottom left". Assuming for desktop given context "Hide middle section... on full desktop".
     But usually hero consistency is good. Let's keep it bottom left but adjust padding. */
  .hero-content-bottom-left {
      display: none;
  }
}

.content-center {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: var(--spacing-xl);
    max-width: 1000px;
}



/* Sets / Portfolio Styling */
.sets-grid {
    margin-top: var(--spacing-lg);
}

.set-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}

.set-card:hover {
    transform: translateY(0);
}

/* Simple Page Header (No Cover) */
.simple-page-header {
    text-align: center;
    padding-top: var(--header-height); /* 80px */
    padding-bottom: var(--header-height); /* 80px */
}

.simple-page-header h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 300;
    margin: 0;
}

/* Use aspect ratio for set covers if possible, else cover */
.set-card img, .set-card .placeholder-image {
    width: 100%;
    aspect-ratio: 3/2; 
    object-fit: cover;
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.set-info {
    padding: var(--spacing-md) 0;
}

.set-info h2 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
}

.set-info p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

.set-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    text-transform: uppercase;
}

/* Individual Set Page */
.set-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto var(--spacing-xl);
    padding-top: var(--spacing-lg);
}

.gallery-section .container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.gallery-section .masonry-grid {
    padding: 0;
    margin: 0;
    width: 100%;
}

.set-header h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: var(--spacing-md);
}

.set-meta {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-family: var(--font-sans);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.category-tag {
    background: var(--card-bg);
    padding: 0.2em 0.6em;
    border-radius: 4px;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 600;
}

.set-description {
    max-width: 720px;
    margin: 0 auto var(--spacing-xl);
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Text block typography */
.block-type-text p,
.block-type-markdown p {
    margin-bottom: var(--spacing-md);
}

.block-type-text p:last-child,
.block-type-markdown p:last-child {
    margin-bottom: 0;
}

/* Set Descriptions & Generic Page Content */
.set-description p, 
.page-content p, 
.text-content p {
    margin-bottom: var(--spacing-md);
}

.set-description p:last-child, 
.page-content p:last-child, 
.text-content p:last-child {
    margin-bottom: 0;
}

/* Hero Meta Override */
.hero-content-bottom-left .set-meta {
    justify-content: flex-start;
    color: rgba(255, 255, 255, 0.8);
    margin-top: var(--spacing-md);
}

.hero-content-bottom-left .category-tag {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    backdrop-filter: blur(4px);
}

.set-gallery {
    margin-bottom: var(--spacing-xl);
}

/* Logo Image */
.logo-image {
  height: 48px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  vertical-align: middle;
}

/* Theme-specific Logo Toggling */
.logo-light {
  display: block;
}
.logo-dark {
  display: none !important;
}

/* When dark mode is active */
[data-theme='dark'] .logo-light {
  display: none !important;
}
[data-theme='dark'] .logo-dark {
  display: block !important;
}

/* If header is transparent (over dark image), force the "Dark Mode" logo 
   (which is designed for dark backgrounds, i.e. usually white/light) 
   to be visible, and hide the "Light Mode" logo (usually black/dark). */
.site-header.transparent-mode .logo-light {
    display: none !important;
}
.site-header.transparent-mode .logo-dark {
    display: block !important;
}

/* Footer */
.site-footer {
  /* Make footer a full screen section for snap scrolling */
  min-height: 100vh;
  display: flex;
  align-items: flex-end; /* Pin content to bottom */
  justify-content: center;
  /* Top: XL, Horizontal: LG, Bottom: LG */
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
  /* Border removed */
  background-color: var(--bg-color);
  width: 100%;
}

.footer-container {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}

.footer-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center; /* Center vertically relative to each other */
    margin-bottom: var(--spacing-xl);
}

@media (max-width: 768px) {
    .site-footer {
        height: auto;
        min-height: auto; /* Allow natural height on mobile or keep 100vh if snap is critical? */
        /* User said "footer has disappeared", likely because of snap or overflow. 
           Let's standardise it to a normal block on mobile if snap isn't strictly enforced there.
           Or keeps min-height 100svh if we want snap. 
           Let's try min-height: fit-content or just auto padding. */
        min-height: 100svh; 
        align-items: center;
        padding-bottom: var(--spacing-xl); /* Add bottom padding for scroll */
    }

    .footer-content-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-lg);
    }
    
    .footer-brand-section {
        text-align: center;
        order: 2; /* Brand below nav on mobile? Or keep top? */
        /* usually brand top. default order is 0. */
    }
    
    .footer-nav-section {
        justify-content: center;
        flex-direction: column;
        gap: var(--spacing-lg);
    }
}

.footer-brand-section {
    text-align: left;
}

.footer-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 10vw, 8rem); 
  line-height: 0.8;
  text-transform: uppercase;
  color: #333333;
  letter-spacing: -0.04em;
}

.footer-nav-section {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-xl);
}

.footer-nav-column h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    opacity: 0.7;
}

.footer-nav-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-column li {
    margin-bottom: var(--spacing-sm);
}

.footer-nav-column a {
    font-size: 1.5rem; /* Larger footer links */
    font-weight: 300;
    color: var(--text-color);
    text-decoration: none;
    transition: opacity 0.2s;
}

.footer-nav-column a:hover {
    opacity: 0.6;
}

[data-theme='dark'] .footer-brand {
  color: #2a2a2a; 
}

.footer-logo-image {
  max-width: 100%; /* Can take full width of its column */
  width: auto;
  max-height: 400px; /* Allow it to be bigger in split layout */
  display: block; 
  /* margin: 0 auto; Removed auto margin for left align */
}

.footer-bottom {
  border-top: 1px solid var(--border-color);
  padding-top: var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

@media (max-width: 768px) {
  .site-footer {
      padding: var(--spacing-lg);
  }

  .footer-content-grid {
      grid-template-columns: 1fr; /* Stack on mobile */
      text-align: center;
      gap: var(--spacing-lg);
  }
  
  .footer-brand-section {
      text-align: center;
      order: 2; /* Put logos below nav on mobile? Or above? Let's keep above default or 2 if we want nav first. */
      /* Actually usually brand top is better */
      order: 1;
  }
  
  .footer-logo-image {
      margin: 0 auto; /* Center on mobile */
  }

  .footer-nav-section {
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--spacing-lg);
      text-align: center;
      order: 2;
  }
  
  .footer-nav-column a {
      font-size: 1.2rem;
  }
  
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* Full Width Sets Grid */
.sets-grid-full {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    width: 100%;
}

@media (min-width: 768px) {
    .sets-grid-full {
        grid-template-columns: 1fr 1fr;
    }
}

.set-card-full {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3/2; /* consistent ratio */
    overflow: hidden;
    color: white;
}

.set-image-wrapper {
    width: 100%;
    height: 100%;
}

.set-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.set-card-full:hover .set-image-wrapper img {
    transform: scale(1.03);
}

.set-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.set-card-full:hover .set-overlay {
    background: rgba(0,0,0,0.15); /* lighten on hover */
}

.set-overlay-content {
    text-align: center;
    padding: var(--spacing-lg);
    z-index: 2;
}

.set-overlay-content h2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.set-overlay-content .set-date {
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
/* Fullscreen / Snap Layout */
.snap-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

.fullscreen-section {
    min-height: 100vh;
    min-height: 100svh; /* Mobile fix */
    width: 100%;
    position: relative;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Ensure Home Hero respects fullscreen */
/* Ensure Home Hero respects fullscreen */
.hero-section {
    /* Hero should usually fill screen exactly, but allow growth if text is huge */
    min-height: 100vh; 
    min-height: 100svh;
}