/* =====================
  PROJECT STYLESHEET
  -------------------
  This stylesheet contains:
    - Design tokens (colors, spacing, type)
    - Global resets and accessibility helpers
    - Layout utilities (containers, grid, responsive rules)
    - Component styles (navbar, gallery, lightbox, merch cards)

  Many sections are annotated to explain the intent and how to tweak
  values safely (for example: changing --accent or type scale variables).
*/
/* =====================
  RESET & GLOBALS
===================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{
  --bg: #ffffff;
  --muted:#777777;
  --text:#2b2b2b;
  --accent:#000000;
  --primary:#111111;
  --panel:#fafafa;
  --max-width:1100px;
  --container-padding:18px;
  --fluid-gap: clamp(12px, 2.5vw, 32px);
  --radius:8px;

  /* Typography tokens */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --type-scale-ratio: 1.35;
  --fs-1: 2.488rem; /* h1 */
  --fs-2: 1.953rem; /* h2 */
  --fs-3: 1.563rem; /* h3 */
  --fs-base: 1rem; /* body */

  /* Spacing */
  --space-xxs:4px;
  --space-xs:8px;
  --space-sm:12px;
  --space-md:20px;
  --space-lg:32px;
  --space-xl:48px;
}

body{
  font-family: var(--font-sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  /* Make page a column flex container so footer can be pushed to bottom */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img{
  display:block;
  width:100%;
}

/* =====================
   LINKS
===================== */
a{
  text-decoration:none;
  color:inherit;
}

/* Focus styles for keyboard users */
:focus-visible{
  outline:3px solid rgba(0,0,0,0.12);
  outline-offset:3px;
}

.nav-explain{ /* helper for documentation only */ }

/* =====================
   NAVBAR
   -----
   Simple, accessible top navigation. The `.logo` is left aligned and the
   `nav` element is a flex row pushed to the right. We use `gap` between
   links so spacing is consistent — this prevents the CTA button from
   visually jumping when other links change.

   Notes:
     - Keep the CTA inside the `nav` for keyboard accessibility. If you
       want it visually separated, it can be moved outside the `nav`.
     - Use `.active` on the current page's link to highlight it.
===================== */
.navbar{
  display:flex;
  align-items:center;
  padding: clamp(10px, 2.5vw, 18px) clamp(12px, 3vw, 30px);
  border-bottom:1px solid #eee;
  /* slight translucency to improve contrast while keeping a light appearance */
  background: rgba(255,255,255,0.96);
  /* stronger fallback to ensure visible contrast across browsers */
  background-color: rgba(255,255,255,0.98) !important;
  backdrop-filter: blur(4px);
  position:sticky;
  top:0;
  z-index:10;
}

/* Auto-hide on scroll: animate transform when the helper class is toggled. */
.navbar{
  transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 200ms ease;
  will-change: transform;
}
.navbar.nav-hidden{
  transform: translateY(-110%);
}
/* Keep navbar visible while menu is open, when focused, or when hovered */
.navbar.nav-open,
.navbar:focus-within,
.navbar:hover{
  transform: translateY(0) !important;
}

.logo{
  font-size:22px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:12px;
}

.logo-img{ width: clamp(40px, 6vw, 66px); height: auto; object-fit:contain; display:block; }
.logo-text{ font-weight:700; font-size: clamp(0.95rem, 1.2vw, 1.125rem); }
/* Hide mobile-inserted CTA by default (only show on small screens) */
.logo .mobile-cta{ display:none !important; }

@media(max-width:520px){
  .hero-center{ width:100%; padding:0 12px; }
  .hero-media{ height:320px; }
  .hero-layer{ object-fit:cover; }
  .hero-caption h1{ font-size:1.6rem; }
  /* Prevent footer overlapping hero on small screens by adding
     extra bottom padding to the hero area. Also ensure the footer
     sits above content when needed. */
  .hero-home{ padding-bottom: calc(var(--header-h, 56px) + 88px); }
  footer{ position:relative; z-index:5; }
}
/* make nav a single flex row and push it to the right; use gap for spacing so CTA placement is stable */
.navbar nav{
  margin-left:auto;
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.navbar nav a{
  margin-left:0; /* spacing handled by gap */
  font-weight:500;
  position:relative;
}

.navbar nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:#000;
  transition:width 0.3s ease;
}

.navbar nav a:hover::after{
  width:100%;
}

.navbar nav a.active{
  font-weight:700;
}

.navbar nav a.active::after{
  width:100%;
}

/* Dropdown menu for Gallery categories */
.nav-dropdown{
  position:relative;
}
.nav-dropdown > .dropdown-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.dropdown-menu{
  position:absolute;
  top:100%; /* align directly under the toggle (no gap) */
  left:0;
  margin-top:0;
  background: #fff;
  border-radius:8px;
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
  min-width:180px;
  padding:8px 0;
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity 180ms ease, transform 180ms ease;
  z-index:200;
}
.dropdown-menu a{
  display:block;
  padding:10px 14px;
  color:var(--text);
  white-space:nowrap;
}
.dropdown-menu a:hover{ background:rgba(0,0,0,0.03); }

/* Show dropdown on hover or when focused via keyboard */
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

@media(max-width:820px){
  /* On small screens, make dropdown items full-width inside the nav flow */
  .dropdown-menu{ position:static; transform:none; opacity:1; pointer-events:auto; box-shadow:none; background:transparent; padding:0; display:none; }
  .nav-dropdown:focus-within .dropdown-menu,
  .nav-dropdown.open .dropdown-menu{ display:block; }
  .dropdown-menu a{ padding:10px 6px; }
}

/* =====================
   HERO
===================== */
.hero{
  min-height:60vh;
  background:transparent;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* Centered hero that becomes side-by-side on desktop and occupies
   the middle 40% of the viewport width. */
.hero-home{ padding:28px 0; }
.hero-center{ display:flex; flex-direction:column; align-items:center; gap: clamp(12px, 2.5vw, 32px); max-width: min(1200px, 96%); margin:0 auto; }
.hero-media{ width:100%; max-width:920px; height: clamp(320px, 50vh, 760px); position:relative; border-radius:12px; overflow:hidden; background:var(--panel); box-shadow:0 22px 48px rgba(0,0,0,0.06); }
.hero-caption{ max-width: min(820px, 92%); }
.hero-caption h1{ margin:0 0 6px; font-family:var(--font-serif); font-size:var(--fs-1); color:var(--primary); }
.hero-caption .lead{ margin:0 auto; color:var(--muted); font-size:1.05rem; }
.hero-caption .cta{ margin-top:12px; display:inline-block; }

/* Layered hero images — positioned absolutely so we can crossfade
   between two images without changing the hero layout. The background
   is the page panel color to avoid visible black bars when using
   `object-fit: contain`. */
.hero-layer{ position:absolute; inset:0; width:100%; height:100%; display:block; object-position:center; transition: opacity 1.2s ease, transform 1.2s ease; will-change: opacity, transform; background:transparent; }
.hero-layer{ object-fit:contain; }

@media(max-width:980px){
  /* On small screens keep stacked layout and allow more presence */
  .hero-center{ width:100%; padding:0 12px; }
  .hero-media{ height:320px; }
  .hero-layer{ object-fit:cover; }
  .hero-caption h1{ font-size:1.6rem; }
}

@media (min-width: 981px) {
  /* Center the hero content and make it occupy the middle 40% of viewport */
  .hero-home{ height: calc(70vh - var(--header-h, 56px)); display:flex; align-items:center; }
    /* Keep the hero block centered but never let it become too thin on
      medium/large screens. Use `clamp()` so it scales but respects a
      reasonable minimum and maximum width. */
    .hero-center{ width:clamp(520px, 40vw, 920px); max-width:920px; flex-direction:row; align-items:center; gap:160px; }
  /* Ensure the container and center block fill the hero height so child
     elements with 100% height (like .hero-media) have a reference. */
  .hero-home > .container{ height:100%; display:flex; align-items:center; }
  .hero-center{ height:100%; align-items:stretch; }
  /* Let the image take slightly more space inside the 40vw block so
     the photo is prominent while the caption remains readable. */
  .hero-media{ width:60%; height:100%; border-radius:10px; background:var(--panel); }
  /* Homepage hero should show only the images — make the container transparent */
  .hero-home .hero-media{ background: transparent !important; /* remove panel look */ box-shadow: none !important; border-radius: 16px !important; overflow: hidden; }

  /* Apply shadow directly to the image layers so only the photo has a drop shadow
    and match the container's rounded corners for a consistent look. */
  .hero-home .hero-layer{ border-radius:16px; box-shadow: 0 20px 44px rgba(0,0,0,0.16); clip-path: inset(0 round 16px); }

  /* Extra selector targeting the hero image IDs to ensure clipping in all browsers */
  #hero-cycle-a, #hero-cycle-b{ border-radius:16px; clip-path: inset(0 round 16px); }
  /* Stronger fallback for browsers that may ignore clip-path on positioned images */
  .hero-home .hero-media img,
  .hero-home .hero-layer,
  #hero-cycle-a,
  #hero-cycle-b {
    border-radius:16px !important;
    clip-path: inset(0 round 16px) !important;
    -webkit-clip-path: inset(0 round 16px) !important;
    overflow: hidden !important;
  }
  /* Extra enforcement: ensure images fill the layer and inherit clipping */
  .hero-home .hero-media img,
  #hero-cycle-a,
  #hero-cycle-b,
  .hero-home .hero-layer {
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:16px !important;
    -webkit-border-radius:16px !important;
    box-shadow: 0 20px 44px rgba(0,0,0,0.16) !important;
    will-change: opacity, transform !important;
  }
  .hero-caption{ width:40%; text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; padding:0 12px; min-width:240px; }

  /* Ensure layered images are visible and crossfade cleanly. The first
     hero layer is visible by default; the back layer starts transparent. */
  .hero-layer{ opacity:0; }
  #hero-cycle-a{ opacity:1; }
}

/* Adjust hero spacing on small screens to account for the sticky header
   so content doesn't get clipped beneath the navbar. The actual header
   height is computed in JS and exposed via --header-h. */
@media(max-width:820px){
  /* Increase top padding so the sticky navbar doesn't overlap hero text */
  .hero-home{ padding-top: calc(var(--header-h, 56px) + 148px); }
  .hero-right{ overflow:hidden; }
  .hero-right img{ border-radius:8px; }
}

/* =====================
   MASONRY GRID
===================== */
.grid{
  column-count:3;
  column-gap:16px;
  padding:24px;
}

@media(max-width:900px){
  .grid{ column-count:2; }
}

@media(max-width:500px){
  .grid{ column-count:1; }
}

.grid img{
  width:100%;
  height:auto;
  margin-bottom:16px;
  break-inside:avoid;
  border-radius:8px;
  cursor:zoom-in;
  transition:
    transform 0.28s cubic-bezier(.2,.9,.2,1),
    box-shadow 0.28s cubic-bezier(.2,.9,.2,1),
    filter 0.28s cubic-bezier(.2,.9,.2,1);
}


.grid img:hover{
  transform:scale(1.03);
  box-shadow:0 20px 40px rgba(0,0,0,0.25);
  filter:brightness(1.05);
}


/* =====================
   SECTIONS
===================== */
.gallery-section h1{
  text-align:center;
  margin-top:32px;
}

/* Merch grid - uniform cards with fixed image height and spacing */
.merch-grid{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:center;
  padding:28px 0 48px;
}

.merch-item{
  width: clamp(200px, 26%, 260px);
  background:var(--bg);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,0.06);
  text-align:center;
  display:flex;
  flex-direction:column;
}

.merch-item img{
  width:100%;
  height: clamp(160px, 30vh, 220px);
  object-fit:cover;
  display:block;
}

.merch-item figcaption{
  padding:14px 12px;
}

.merch-item h3{
  font-size:1rem;
  margin:0 0 8px 0;
}

.merch-item .desc{
  margin:0;
  color:var(--muted);
  font-size:0.95rem;
  line-height:1.4;
}

@media(max-width:520px){
  .merch-item{ width:100%; }
}

/* Category cards used on top-level Gallery */
.category-grid{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  justify-content:center;
  padding:36px 0 60px;
}

.category-card{
  width: clamp(200px, 30%, 320px);
  border-radius:10px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background:var(--bg);
  box-shadow:0 12px 30px rgba(0,0,0,0.06);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
  display:flex;
  flex-direction:column;
}

.category-card img{
  width:100%;
  height: clamp(140px, 26vh, 200px);
  object-fit:cover;
  display:block;
}

.category-card .card-body{
  padding:16px;
}

/* Primary CTA in header */
.navbar .cta{
  margin-left:18px;
  padding:8px 14px;
  background:var(--accent);
  color:#fff;
  border-radius:8px;
  font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}
.navbar .cta:hover{ transform:translateY(-2px); }

/* Mobile nav toggle (hamburger) */
.nav-toggle{
  display:none; /* shown on small screens */
  background:none;
  border:none;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nav-toggle .bar{
  width:22px;
  height:2px;
  background:var(--text);
  display:block;
  border-radius:2px;
  position:relative;
}
.nav-toggle .bar::before,
.nav-toggle .bar::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:var(--text);
  border-radius:2px;
}
.nav-toggle .bar::before{ top:-7px; }
.nav-toggle .bar::after{ top:7px; }

/* Base heading styles */
h1{ font-size:var(--fs-1); font-family:var(--font-serif); margin-bottom:var(--space-sm); }
h2{ font-size:var(--fs-2); font-family:var(--font-serif); }
h3{ font-size:var(--fs-3); }

/* Small utility to make images visually pop */
.card, .merch-item, .category-card{ transition: box-shadow 220ms ease, transform 220ms ease; }

.category-card h3{ margin:0 0 6px 0; }
.category-card p{ margin:0; color:var(--muted); }

.category-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,0.08); }

@media(max-width:740px){ .category-card{ width:48%; } }
@media(max-width:520px){ .category-card{ width:100%; } }

/* Category page layout: left info column, right images */
.category-page{
  display:grid;
  grid-template-columns: clamp(220px, 28%, 360px) 1fr;
  gap: clamp(16px, 2.5vw, 32px);
  align-items:start;
  padding:28px 0 56px;
}

.category-info{
  background:var(--panel);
  border-radius:10px;
  padding:20px;
}

.category-info h1{ margin:0 0 8px; }

/* Make the left info column static on desktop by using position:sticky.
   It will remain within the viewport while the right image column scrolls. */
@media(min-width:981px){
  .category-info{
    position:sticky;
    top: calc(var(--header-h, 56px) + 20px);
    align-self:start;
    max-height: calc(100vh - var(--header-h, 56px) - 40px);
    overflow:auto;
    padding-right:18px;
  }
  /* Allow hero to expand naturally on small screens and add a modest
    bottom padding to ensure footer doesn't visually overlap content. */
  .hero-home{ padding-bottom: calc(var(--header-h, 56px) + 88px); }
  footer{ position:relative; z-index:5; }
}
.category-info p{ margin:0; color:var(--muted); line-height:1.6; }

.category-images .grid{
  /* slightly larger masonry for category pages */
  column-count:2;
  column-gap:16px;
  padding:0;
}
.category-images .grid img{ margin-bottom:16px; border-radius:8px; }

@media(min-width:1200px){
  .category-images .grid{ column-count:3; }
  .category-page{ grid-template-columns: 420px 1fr; }
}

@media(max-width:980px){
  .category-page{ grid-template-columns: 1fr; }
  .dropdown-menu{ position:static; transform:none; opacity:1; pointer-events:auto; box-shadow:none; background:transparent; padding:0; display:none; }
  .nav-dropdown:focus-within .dropdown-menu,
  .nav-dropdown.open .dropdown-menu{ display:block; }
  .dropdown-menu a{ padding:10px 6px; }

  /* Compact nav: hide inline links and show a menu toggle */
  .nav-toggle{ display:inline-flex; }
  .navbar nav{ display:none; }
  /* Push the hamburger to the right side of the header */
  .nav-toggle{ margin-left:auto; }
  .navbar.nav-open nav{
    display:flex;
    flex-direction:column;
    gap:8px;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:var(--panel);
    padding:12px 16px;
    box-shadow:0 12px 30px rgba(0,0,0,0.08);
    z-index:250;
  }
  /* Keep CTA styling intact inside the mobile menu; only neutralize
     background for regular links so the CTA remains prominent. */
  .navbar.nav-open nav a:not(.cta){ padding:10px 12px; background:transparent; border-radius:6px; }
  .navbar.nav-open nav .cta{ background:var(--accent); color:#fff; display:inline-block; }

  /* Ensure dropdown submenu is visible and interactive inside the
     stacked mobile nav. Also allow the navbar to overflow so the
     submenu won't be clipped by ancestor containers. */
  .navbar{ overflow:visible; }
  /* Only show submenu when the specific dropdown is opened (has .open).
     Avoid making every dropdown visible when the hamburger menu is opened. */
  .navbar.nav-open .nav-dropdown.open .dropdown-menu{
    display:block;
    position:static;
    opacity:1;
    transform:none;
    pointer-events:auto;
    box-shadow:none;
    background:transparent;
    padding-left:10px;
    margin:6px 0 0 0;
  }
  /* Center Gallery toggle like other links and style the submenu items
     to be slightly smaller and lighter, centered beneath the toggle. */
  .navbar.nav-open nav .nav-dropdown{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
  }
  .navbar.nav-open nav .nav-dropdown > .dropdown-toggle{
    display:block;
    width:100%;
    text-align:center;
    padding:12px 0 2px; /* significantly reduce bottom padding so chevron sits much closer */
    font-weight:600;
  }
  .navbar.nav-open nav .nav-dropdown .dropdown-menu{
    width:100%;
    padding:6px 0 10px;
    margin:0;
    padding-left:0;
  }
  .navbar.nav-open nav .nav-dropdown .dropdown-menu a{
    display:block;
    text-align:center;
    color:var(--muted);
    font-size:0.95rem;
    padding:8px 12px;
  }

  /* Small expander (chevron) next to the Gallery link on mobile */
  .dropdown-expander{
    /* Hidden by default; explicitly shown on small screens below. */
    display: none;
    margin:2px auto 6px; /* pull chevron much closer to the label when shown */
    border:none;
    background:transparent;
    color:var(--text);
    font-size:16px;
    padding:4px 0 0;
    cursor:pointer;
  }

  /* Show the expander only on small screens (mobile/touch layouts). */
  @media (max-width:980px) {
    .dropdown-expander{
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      width: auto !important;
      height: auto !important;
    }
  }
  /* No pointer/hover guard: visibility handled by viewport breakpoint only. */

  /* Ensure all nav links are full-width blocks and centered so the
     Gallery toggle lines up with other items. */
  .navbar.nav-open nav a{ display:block; width:100%; text-align:center; padding:12px 0; }
  .navbar.nav-open nav a.cta{ /* keep CTA visually prominent but centered */ display:block; }

  /* Make every nav link centered and full-width in the opened mobile menu
     so Gallery lines up with other links. Keep CTA appearance. */
  .navbar.nav-open nav a{ width:100%; text-align:center; }
  .navbar.nav-open nav a.cta{ display:inline-block; width:auto; }

}

/* =====================
   MERCH PAGE
   Carousel + two-column features
===================== */
.merch-intro{ max-width:var(--max-width); margin:18px auto 22px; padding:0 12px; text-align:center; }
.merch-intro h1{ margin:0 0 8px; }
.merch-intro p{ margin:0 auto; max-width:820px; color:var(--muted); }

/* Simple merch fade changer styles */
.merch-carousel-simple{ max-width:var(--max-width); margin:18px auto 28px; padding:0 12px; }
.merch-carousel-simple .image-frame{ position:relative; width:100%; height: clamp(260px, 44vh, 460px); border-radius:12px; overflow:hidden; background:var(--panel); display:flex; align-items:center; justify-content:center; }
.merch-carousel-simple img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; transition:opacity 600ms ease; opacity:1; }
.merch-carousel-simple .carousel-arrow{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.9); border:1px solid rgba(0,0,0,0.06); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; }
.merch-carousel-simple .carousel-arrow.left{ left:12px; }
.merch-carousel-simple .carousel-arrow.right{ right:12px; }
.merch-carousel-simple .carousel-overlay{ position:absolute; left:0; right:0; bottom:0; height:15%; display:flex; align-items:flex-end; pointer-events:none; }
.merch-carousel-simple .carousel-overlay .overlay-inner{ width:100%; padding:10px 16px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); color:#fff; }


.merch-carousel{
  display:grid;
  grid-template-columns: 1fr min(28%, 260px); /* slides | controls/side */
  gap: clamp(12px, 2.5vw, 24px);
  align-items:center;
  margin:18px 0 32px;
  max-width:var(--max-width);
  margin-left:auto; margin-right:auto;
}
.carousel-slides{ position:relative; width:100%; height: clamp(240px, 40vh, 420px); overflow:hidden; border-radius:10px; }
.merch-carousel .carousel-slides{ position:relative; width:100%; height:420px; overflow:hidden; border-radius:10px; background:transparent; }
.merch-carousel .carousel-slides{ display:flex; transition: transform 600ms ease; will-change: transform; }
.merch-carousel .carousel-slide{
  /* each slide takes full width and centers its image */
  flex: 0 0 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:transparent;
}
.merch-carousel .carousel-slide img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  object-position:center;
  display:block;
  background:transparent;
  opacity:1;
  z-index:1;
}
.merch-carousel .carousel-slide.fit-width img{ width:auto; height:auto; }
.merch-carousel .carousel-slide.fit-height img{ width:auto; height:auto; }
.merch-carousel .carousel-overlay{
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:15%;
  z-index:3; /* sit above slides but below controls */
  display:flex;
  align-items:flex-end;
  pointer-events:none; /* don't block controls */
}
.merch-carousel .carousel-overlay .overlay-inner{
  width:100%;
  padding:10px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
  color: #fff;
  display:flex;
  align-items:flex-end;
}
.overlay-text{ margin:0; font-size:0.98rem; opacity:0.95; }
/* removed .carousel-static (left description) — layout uses slides + controls */
.merch-carousel .carousel-info{ padding:8px 12px; display:flex; align-items:center; justify-content:center; }
.merch-carousel .carousel-controls{ display:flex; gap:8px; }
.merch-carousel .carousel-controls button{ background:var(--panel); border:1px solid #ddd; padding:8px 12px; border-radius:6px; cursor:pointer; }

.merch-two-column{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:var(--max-width); margin:0 auto 48px; padding:0 12px; }
.merch-feature{ display:flex; gap:18px; align-items:center; background:var(--panel); padding:14px; border-radius:10px; }
.merch-feature .feature-image{ width:44%; }
.merch-feature .feature-image img{ width:100%; height:100%; object-fit:cover; border-radius:8px; }
.merch-feature .feature-body{ width:56%; }
.merch-feature h3{ margin:0 0 8px; }

@media(max-width:980px){
  .merch-carousel{ grid-template-columns:1fr; }
  .carousel-slides{ height:300px; }
  .merch-two-column{ grid-template-columns:1fr; }
  .merch-feature{ flex-direction:column; }
  .merch-feature .feature-image, .merch-feature .feature-body{ width:100%; }
}

/* Stacked merch photos layout (tossed-on-table look) */
.merch-stack-container{
  display:grid;
  grid-template-columns: 1fr 560px;
  gap:28px;
  align-items:center;
  max-width:var(--max-width);
  margin:18px auto 32px;
  padding:0 12px;
}
.merch-stack-container .merch-text{ padding:12px 18px; }
.merch-stack-container .merch-text h2{ margin-top:0; margin-bottom:8px; font-size:1.6rem; }
.merch-stack-container .merch-text p{ color:var(--muted); line-height:1.6; }

.merch-stack{
  position:relative;
  width:100%;
  height:420px;
  border-radius:12px;
  overflow:hidden; /* crop edges so pile doesn't overlap following content */
  display:block;
}
.merch-stack .stack-item{
  position:absolute;
  width:50%;
  height:auto;
  left:20%;
  top:12%;
  object-fit:cover;
  border-radius:10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease, z-index 10ms linear;
  cursor:pointer;
  transform-origin: center center;
}
/* tighter, more condensed pile - offsets kept within container bounds */
.merch-stack .stack-item:nth-child(1){ transform: rotate(-6deg) translate(-2%, -2%); z-index:1; left:18%; top:14%; width:52%; }
.merch-stack .stack-item:nth-child(2){ transform: rotate(4deg) translate(0%, -4%); z-index:2; left:26%; top:8%; width:50%; }
.merch-stack .stack-item:nth-child(3){ transform: rotate(-3deg) translate(-1%, 3%); z-index:3; left:20%; top:22%; width:50%; }
.merch-stack .stack-item:nth-child(4){ transform: rotate(6deg) translate(2%, 2%); z-index:4; left:30%; top:18%; width:48%; }
.merch-stack .stack-item:nth-child(5){ transform: rotate(-8deg) translate(-3%, 4%); z-index:5; left:16%; top:8%; width:54%; }
.merch-stack .stack-item:nth-child(6){ transform: rotate(2deg) translate(0%, 6%); z-index:6; left:24%; top:30%; width:46%; }

/* Hover brings image forward and straightens it slightly */
.merch-stack .stack-item:hover{
  z-index:999 !important;
  transform: translate(0,0) scale(1.06) rotate(0deg);
  box-shadow: 0 28px 60px rgba(0,0,0,0.36);
}

@media(max-width:980px){
  .merch-stack-container{ grid-template-columns: 1fr; }
  .merch-stack{ height:340px; margin-top:16px; }
  .merch-stack .stack-item{ position:relative; width:48%; left:auto; top:auto; display:inline-block; margin:8px; transform:none !important; }
  .merch-stack .stack-item:hover{ transform: scale(1.03) rotate(0deg); z-index:10 !important; }
}

/* Merch cycler (two-layer crossfade) */
.merch-carousel-container{
  display:grid;
  grid-template-columns: 1fr 560px;
  gap:28px;
  align-items:center;
  max-width:var(--max-width);
  margin:18px auto 32px;
  padding:0 12px;
}
.merch-carousel-container .merch-text{ padding:12px 18px; }
.merch-carousel-container .merch-text h2{ margin-top:0; margin-bottom:8px; font-size:1.6rem; }

.merch-media{
  width:100%;
  height:420px;
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:var(--panel);
  box-shadow: 0 20px 44px rgba(0,0,0,0.08);
}
.merch-layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition: opacity 1.2s ease, transform 1.2s ease; opacity:0; }
#merch-cycle-a{ opacity:1; }

@media(max-width:980px){
  .merch-carousel-container{ grid-template-columns: 1fr; }
  .merch-media{ height:300px; }
}

/* About page image cycler styling */
.about-photo{ display:flex; align-items:center; justify-content:center; }
.about-photo .about-media{
  width:100%;
  max-width:560px;
  height: clamp(240px, 40vh, 420px);
  position:relative;
  border-radius:10px;
  overflow:hidden;
  background:var(--panel);
}
.about-photo .about-layer{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition: opacity 1.2s ease, transform 1.2s ease; opacity:0;
}
.about-photo #about-cycle-a{ opacity:1; }

@media(max-width:820px){
  .about-photo .about-media{ height:300px; max-width:100%; }
}

/* Common container to constrain content width */
.container{
  max-width: min(1100px, 95%);
  margin:0 auto;
  padding:0 clamp(12px, 2.5vw, 28px);
}

/* Wider container variant for category pages to use more horizontal space */
.container--wide{
  max-width: min(1600px, 98%);
  padding:0 clamp(12px, 3vw, 36px);
}

/* About / Contact sections share the gallery/index visual rhythm */
.about-section,
.contact-section{
  padding:48px 0 56px;
}

.about-section h1,
.contact-section h1{
  text-align:center;
  margin-top:8px;
  margin-bottom:12px;
}

.about-section p,
.contact-section p{
  max-width:720px;
  margin:0 auto;
  color:#55555500;
  text-align:center;
  font-size:1.05rem;
  line-height:1.7;
}

/* About two-column layout: image left, text right */
.about-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:28px;
  align-items:center;
  padding-top:6px;
}

.about-photo img{
  width:100%;
  height:420px;
  object-fit:cover;
  border-radius:8px;
  display:block;
}

.about-text{ text-align:right; }
.about-text h1{ margin-top:0; }
.about-text p{ max-width:560px; margin-left:auto; color:var(--muted); }

@media(max-width:820px){
  .about-grid{ grid-template-columns:1fr; }
  .about-text{ text-align:left; margin-top:16px; }
  .about-photo img{ height:300px; }
}

/* Custom star cursor
  ------------------
  A decorative element created and animated from JavaScript. It uses
  `mix-blend-mode: difference` with a white background to visually invert
  the pixels beneath it. This is purely visual and intentionally non-
  interactive (`pointer-events: none`) so it never interferes with UI.

  The companion JS disables this on touch/coarse-pointer devices so it
  doesn't conflict with native touch interactions or obscure content.
*/
.cursor-star{
  position:fixed;
  left:0;
  top:0;
  width: clamp(44px, 9vw, 88px);
  height: clamp(44px, 9vw, 88px);
  pointer-events:none;
  transform:translate(-50%,-50%) scale(1);
  transition:transform 150ms linear, opacity 200ms ease;
  z-index:9999;
  mix-blend-mode: difference;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M21 6h-3.2l-1.6-2.4A1 1 0 0 0 15.5 3h-7a1 1 0 0 0-.7.3L6.2 6H3a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zM12 17a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 72% 72%;
  opacity:0.95;
}

/* smaller on touch / hidden */
@media (hover: none) and (pointer: coarse){
  .cursor-star{ display:none !important; }
}

.cursor-star--active{ transform:translate(-50%,-50%) scale(1.35); }

/* Contact form styles */
.contact-form{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}

.contact-form input,
.contact-form textarea{
  padding:12px 14px;
  border:1px solid #e6e6e6;
  border-radius:6px;
  font-size:1rem;
  background: #fff;
}

.contact-form button{
  align-self:center;
  padding:10px 18px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
}

/* Screen-reader only helper */
.sr-only{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Dark theme: respect user's system preference */
@media (prefers-color-scheme: dark) {
  /* Softer dark theme (not pure black) */
  :root{
    --bg: #0f1720;      /* deep slate */
    --muted: #9aa6af;   /* softer muted text */
    --text: #e7eef6;    /* off-white */
    --accent: #f6c667;  /* warm soft accent */
    --primary: #ffffff;
    --panel: #191f25;   /* lightened panel for better contrast */
  }

  body{ background:var(--bg); color:var(--text); }

  .navbar{ background:transparent; border-bottom:1px solid rgba(255,255,255,0.06); }
  .logo-text{ color:var(--text); }

  a{ color:var(--text); }
  .navbar .cta{ background:var(--accent); color:#111; }
  /* Ensure navbar uses a soft translucent dark background in dark mode */
  .navbar{ background-color: rgba(15,23,32,0.48) !important; backdrop-filter: blur(6px); }
  .navbar nav a{ color: var(--text); }

  /* Panels and cards become slightly lifted against the background */
  .hero-media, .merch-feature, .category-card, .category-info, .contact-section, .merch-item{
    background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008));
    background-color:var(--panel);
  }

  /* Lightbox background: softer overlay */
  #lightbox{ background: rgba(7,10,12,0.72); }

  /* Keep the decorative camera cursor inverting underlying pixels in dark mode too */
  .cursor-star{ mix-blend-mode: difference; filter: none; }

  /* Ensure homepage hero container stays transparent in dark mode too */
  .hero-home .hero-media{ background: transparent !important; }

  /* Softer shadows for dark backgrounds */
  .hero-media, .category-card, .merch-item{ box-shadow: 0 10px 22px rgba(2,6,10,0.24); }

  /* Ensure focus/outline is visible on dark backgrounds */
  :focus-visible{ outline:3px solid rgba(231,238,246,0.10); }

  /* Invert the logo SVG so it reads on dark backgrounds. Use filter so
     it works whether the SVG has dark fills or strokes. */
  .logo-img{ filter: invert(1) brightness(1.2) contrast(1.05); }

  /* Style the Gallery dropdown to match the dark panels */
  .dropdown-menu{
    background: var(--panel);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 10px 30px rgba(2,6,10,0.30);
    color: var(--text);
  }
  .dropdown-menu a{ color: var(--text); }
  .dropdown-menu a:hover{ background: rgba(255,255,255,0.02); }
  .nav-dropdown > .dropdown-toggle{ color: var(--text); }
  /* Use the accent color for the underline/highlight on hovered/active nav links */
  .navbar nav a::after,
  .navbar nav a:hover::after,
  .navbar nav a.active::after{
    background: var(--accent);
  }
}

/* Keep About page transparent in dark mode too */
@media (prefers-color-scheme: dark){
  .about-section,
  .about-grid{ background: transparent !important; }
}

/* Strong mobile override: ensure hamburger replaces inline nav on narrow viewports.
   This is defensive in case earlier rules were ignored or overridden. */
@media (max-width:980px){
  .navbar nav{ display:none !important; }
  .nav-toggle{ display:inline-flex !important; }
  .navbar.nav-open nav{ display:flex !important; flex-direction:column; }
  /* Hide the in-menu CTA on narrow viewports and show the mobile CTA next to the logo */
  .navbar nav a.cta{ display:none !important; }
  .logo .mobile-cta{ display:none; }
  .logo .mobile-cta.cta{ display:inline-flex !important; margin-left:8px; align-items:center; }
  /* Smaller compact CTA for mobile header */
  .logo .mobile-cta.cta{
    font-size:0.78rem !important;
    padding:6px 8px !important;
    line-height:1 !important;
    height:auto !important;
    border-radius:8px !important;
    white-space:nowrap !important;
  }
}

/* Social icons under homepage CTA */
.hero-caption .social{
  display:flex;
  gap:7px; /* reduced spacing (≈50% closer) */
  margin-top:10px;
  justify-content:center;
  align-items:center;
}
.hero-caption .social-link{
  display:inline-flex;
  width: clamp(44px, 8vw, 80px);
  height: clamp(44px, 8vw, 80px);
  align-items:center;
  justify-content:center;
  border-radius: clamp(8px, 3vw, 20px);
  background: color-mix(in srgb, var(--bg) 92%, rgba(0,0,0,0.06) 8%);
  color: rgba(0,0,0,0.6);
  text-decoration:none;
}
.hero-caption .social-link svg{ width:36px; height:36px; }
.hero-caption .social-link img{ width:36px; height:36px; display:block; }

@media (prefers-color-scheme: dark){
  .hero-caption .social-link{ background: color-mix(in srgb, var(--bg) 94%, rgba(255,255,255,0.04) 6%); color: var(--text); }
}

.about-section{ background: transparent; }
.contact-section{ background: transparent; }

@media (prefers-color-scheme: dark){
  .contact-section p{ color: rgba(231,238,246,0.85); }
  .contact-section .contact-form button{ color: #111; }
}

/* =====================
   FOOTER
===================== */
/* Ensure footer sits at the bottom of the viewport when content is short */
footer{
  text-align:center;
  padding:12px 16px;
  color:#777;
  border-top:1px solid #eee;
  margin-top:0;
}

/* Let the page content grow to fill space between header and footer */
body > :not(header):not(footer){
  flex: 1 0 auto;
}

@media (max-width:520px){
  footer{ margin-top:16px; }
}

/* =====================
   ANIMATIONS
===================== */
@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* =====================
   LIGHTBOX (POLISHED)
===================== */
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999;
}

#lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-content {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  cursor: grab;
}

#lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
  transform-origin: center center;
  user-select: none;
  pointer-events: none;
}

.lightbox-close {
  position: fixed;
  top: 24px;
  right: 24px;
  font-size: 28px;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 1000;
}

.lightbox-close:hover {
  opacity: 1;
}

#lightbox-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10%;
  padding: 10px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
  color: white;
  font-family: 'Arial', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* so it doesn’t block dragging */
}

#lightbox-desc h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
}

#lightbox-desc p {
  margin: 2px 0 0;
  font-size: 0.9rem;
  line-height: 1.2rem;
}

/* show description when active */
#lightbox.active #lightbox-desc {
  opacity: 1;
}

/* Lightbox navigation arrows */
.lightbox-prev, .lightbox-next{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  border-radius:50%;
  background: rgba(255,255,255,0.06);
  color:#fff;
  border:none;
  font-size:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:1001;
  backdrop-filter: blur(4px);
}
.lightbox-prev{ left:22px; }
.lightbox-next{ right:22px; }
.lightbox-prev:hover, .lightbox-next:hover{ background: rgba(255,255,255,0.12); transform: translateY(-50%) scale(1.04); }

@media(max-width:700px){
  .lightbox-prev, .lightbox-next{ width:44px; height:44px; font-size:22px; left:12px; right:12px; }
}

/* Mobile-specific adjustments: reduce hero height, tighter spacing, and
   hide desktop-only controls (arrows). Increase touch target sizes so
   controls are easier to tap. */
@media(max-width:700px){
  .hero{ height:45vh; }
  .grid{ column-gap:12px; padding:12px; }
  .merch-grid{ gap:16px; padding:18px 0 32px; }
  .merch-item img{ height:180px; }
  .navbar nav{ gap:10px; }
  .navbar .cta{ padding:10px 16px; }

  /* Hide arrow buttons on small screens — we use swipe gestures instead */
  .lightbox-prev, .lightbox-next{ display:none; }

  /* Make close button easier to tap */
  .lightbox-close{ top:12px; right:12px; width:48px; height:48px; font-size:20px; }

  /* Hide decorative star cursor on small screens as a fallback */
  .cursor-star{ display:none !important; }
}






@keyframes zoomIn{
  from{
    transform:scale(0.96);
    opacity:0;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}

/* Ensure footer sits below page content and does not overlap hero */
footer{
  clear: both;
  position: relative;
  z-index: 50;
  margin-top: 28px;
}

/* Camera flash overlay used for a quick snap effect when CTA is clicked */
#camera-flash{
  position:fixed;
  inset:0;
  background:#ffffff8f;
  opacity:0;
  pointer-events:none;
  z-index:10000; /* above everything */
  transition: opacity 220ms ease-out;
}
#camera-flash.flash{
  opacity:1;
}

/* Small-screen safeguard: add extra bottom padding to the hero area so
   the footer never visually overlaps stacked hero content on narrow viewports. */
@media (max-width:820px){
  .hero-home{ padding-bottom: calc(var(--header-h, 56px) + 120px); }
}

/* Temporarily hide lightbox titles and descriptions without removing code */
#lightbox-desc,
#desc-title,
#desc-text{
  display: none !important;
}