/* =========================
   bhapstar astrophotography
   styles.css — THEME: NEBULA DRIFT
   ---------------------------------------------------------
   Direction: Maximalist cosmic · Aurora palette · Vivid chromatic
   Typography: Geometric sans display + light tracking
   Mood: Standing inside a nebula — immersive, saturated, alive
   Key changes from v2:
   - Vivid expanded palette: coral-rose, cobalt, teal, violet
   - Multiple accent variables for aurora colour cycling
   - Larger, bolder section heads with gradient text
   - Cards with multi-hue glow tied to position
   - Luminous, oversized background nebula bloom
   - Faster, more energetic transitions
   - Pill-shaped UI elements throughout
========================= */


/* =========================
   THEME TOKENS
========================= */
:root{
  /* Aurora accent system — vivid, multi-hue */
  --accent:       #a78bfa;          /* aurora violet */
  --accent2:      #60a5fa;          /* cobalt blue */
  --accent3:      #34d399;          /* teal-green */
  --accent4:      #f472b6;          /* rose-pink */
  --accent5:      #fb923c;          /* amber */
  --accent-rgb:   167,139,250;
  --accent2-rgb:  96,165,250;
  --accent3-rgb:  52,211,153;
  --accent4-rgb:  244,114,182;

  --glow:   rgba(167,139,250,0.26);
  --glow2:  rgba(96,165,250,0.14);

  /* Deep saturated background */
  --bg:          #050414;           /* deep indigo-black */
  --bg2:         #0a0720;
  --header:      rgba(5,4,20,0.90);
  --header-solid:#08051a;
  --text:        rgba(255,255,255,0.96);
  --muted:       rgba(200,195,235,0.64);
  --line:        rgba(167,139,250,0.18);
  --soft:        rgba(167,139,250,0.07);

  /* Layout */
  --max:  1200px;
  --pad:  22px;

  /* Rounded, organic shapes */
  --radius:  18px;
  --shadow:  0 30px 90px rgba(0,0,0,0.75);

  /* Bold geometric sans */
  --font: "Outfit", "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Snappier easing — more energetic feel */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color: inherit; text-decoration: none; }
a:hover{ opacity: 1; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* =========================
   Deep-space background
   Oversized, vivid nebula blooms — the signature of this theme
========================= */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .70;
  background:
    radial-gradient(1400px 900px  at 5%   20%,  rgba(167,139,250,0.22), transparent 52%),
    radial-gradient(1000px 800px  at 95%  15%,  rgba(96,165,250,0.18),  transparent 55%),
    radial-gradient(1200px 1000px at 50%  100%, rgba(244,114,182,0.16), transparent 52%),
    radial-gradient(800px  600px  at 20%  75%,  rgba(52,211,153,0.12),  transparent 50%),
    radial-gradient(600px  500px  at 75%  55%,  rgba(251,146,60,0.10),  transparent 48%),
    radial-gradient(circle at 15% 35%, rgba(255,255,255,0.12) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 35% 65%, rgba(255,255,255,0.09) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,0.11) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 88% 80%, rgba(255,255,255,0.09) 0 1px, transparent 1px 100%);
  background-size:
    auto, auto, auto, auto, auto,
    220px 220px, 300px 300px, 260px 260px, 340px 340px;
  mix-blend-mode: screen;
  filter: blur(0.3px);
}

/* Animated second nebula layer for extra depth */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .25;
  background:
    radial-gradient(700px 500px at 60% 40%, rgba(167,139,250,0.30), transparent 50%),
    radial-gradient(500px 400px at 30% 60%, rgba(96,165,250,0.25),  transparent 50%);
  mix-blend-mode: screen;
  animation: nebulaPulse 14s ease-in-out infinite alternate;
}
@keyframes nebulaPulse{
  from{ opacity: .18; transform: scale(1.00); }
  to{   opacity: .30; transform: scale(1.04); }
}

/* =========================
   Header / navigation
========================= */
header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header);
  backdrop-filter: blur(18px) saturate(1.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  border-bottom: 1px solid rgba(167,139,250,0.10);
  box-shadow:
    0 1px 0 rgba(167,139,250,0.14),
    0 0 0 1px rgba(96,165,250,0.06),
    0 6px 30px rgba(0,0,0,0.36);
}

.navbar{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.brand{
  justify-self: center;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 14px;
  position: relative;
  border-radius: 999px;
  transition: background 180ms ease;
}
.brand:hover{ background: rgba(167,139,250,0.06); }
.brand .mark{
  font-family: var(--mono);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-size: 13px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand .sub{
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  -webkit-text-fill-color: unset;
}

/* Aurora shimmer underline */
.brand::after{
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 1px;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(167,139,250,0.90),
    rgba(96,165,250,0.80),
    rgba(52,211,153,0.70),
    transparent
  );
  opacity: 0;
  transform: scaleX(0.3) translateY(3px);
  transform-origin: center;
  transition: opacity 240ms ease, transform 240ms var(--ease-out-expo);
}
.brand:hover::after{
  opacity: 1;
  transform: scaleX(1) translateY(0);
}

/* Burger */
.burger{
  justify-self: end;
  background: none; border: 0; cursor: pointer;
  display: inline-flex; flex-direction: column; gap: 5px;
  padding: 10px; border-radius: 999px;
  transition: background 180ms ease;
}
.burger:hover{ background: rgba(167,139,250,0.08); }
.burger span{
  width: 22px; height: 2px;
  background: var(--text);
  display: block; border-radius: 2px;
  transition: transform 240ms var(--ease-out-expo), opacity 200ms ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Dropdown nav */
.nav-menu{
  position: absolute;
  top: calc(100% + 8px); right: 0;
  background: var(--header-solid);
  border: 1px solid rgba(167,139,250,0.14);
  border-radius: 20px;
  padding: 10px; display: none; flex-direction: column; gap: 4px;
  min-width: 240px;
  box-shadow:
    0 28px 80px rgba(0,0,0,0.65),
    0 0 0 1px rgba(167,139,250,0.06) inset,
    0 0 60px rgba(167,139,250,0.05);
  animation: menuSlideIn 200ms var(--ease-out-expo) both;
}
.nav-menu.open{ display:flex; }
@keyframes menuSlideIn{
  from{ opacity:0; transform: translateY(-6px) scale(0.97); }
  to{   opacity:1; transform: translateY(0)    scale(1); }
}

.nav-menu a{
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 12px;
  font-size: 11.5px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--muted);
  transition: background 150ms ease, color 150ms ease;
}
.nav-menu a{
  position: relative;
}
.nav-menu a:hover{
  background: transparent;
}
.nav-menu a::after{
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 6px;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(167,139,250,0.90),
    rgba(96,165,250,0.80),
    rgba(52,211,153,0.70),
    transparent
  );
  opacity: 0;
  transform: scaleX(0.3) translateY(3px);
  transform-origin: center;
  transition: opacity 240ms ease, transform 240ms var(--ease-out-expo);
  pointer-events: none;
}
.nav-menu a:hover::after{
  opacity: 1;
  transform: scaleX(1) translateY(0);
}
.nav-menu a.active{
  color: var(--text);
  background: rgba(167,139,250,0.12);
  border: 1px solid rgba(167,139,250,0.18);
}

/* ── Puzzles submenu ── */
.nav-group{ position: relative; }

.nav-group-btn{
  display: flex; align-items: center; gap: 7px;
  width: 100%; padding: 11px 13px; border-radius: 12px;
  background: none; border: none; cursor: pointer;
  font-size: 11.5px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--muted); font-family: inherit;
  transition: color 150ms ease;
}
.nav-group-btn:hover{ color: var(--text); }
.nav-group-btn svg{
  transition: transform 200ms ease;
  opacity: 0.55; flex-shrink: 0; margin-left: auto;
}
.nav-group-btn[aria-expanded="true"] svg{ transform: rotate(180deg); }
.nav-group-btn[aria-expanded="true"]{ color: var(--text); }

.nav-submenu{
  display: none; flex-direction: column; gap: 3px;
  padding: 4px 0 6px 10px;
  border-left: 1px solid rgba(167,139,250,0.20);
  margin: 0 13px 4px 13px;
}
.nav-submenu.open{ display: flex; }
.nav-submenu a{
  font-size: 11px !important;
  padding: 9px 10px !important;
  border-radius: 10px !important;
  color: var(--muted) !important;
  letter-spacing: 0.14em !important;
}
.nav-submenu a:hover{
  color: var(--text) !important;
  background: rgba(167,139,250,0.07) !important;
}
.nav-submenu a.active{
  color: var(--text) !important;
  background: rgba(167,139,250,0.12) !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
}

/* =========================
   Hero
========================= */
.hero{
  position: relative;
  min-height: calc(100vh - 60px);
  display: grid; place-items: center;
  overflow: hidden;
}

.hero-bg{ position: absolute; inset: 0; z-index: 0; }
.hero-bg-layer{
  position: absolute; inset: -6%;
  background-size: cover; background-position: center;
  filter: saturate(1.12) contrast(1.03) blur(3px);
  transform: translate3d(0,0,0) scale(1.08);
  opacity: 0; transition: opacity 1800ms ease;
  will-change: transform, opacity;
}
.hero-bg-layer.is-on{ opacity: 1; }

@keyframes heroDriftA{
  0%   { transform: translate3d(-2.2%,-1.6%,0) scale(1.13); }
  50%  { transform: translate3d( 2.0%, 2.4%,0) scale(1.19); }
  100% { transform: translate3d(-2.2%,-1.6%,0) scale(1.13); }
}
@keyframes heroDriftB{
  0%   { transform: translate3d( 2.3%, 1.8%,0) scale(1.14); }
  50%  { transform: translate3d(-2.1%,-2.2%,0) scale(1.20); }
  100% { transform: translate3d( 2.3%, 1.8%,0) scale(1.14); }
}
.layer-a{ animation: heroDriftA 44s ease-in-out infinite; }
.layer-b{ animation: heroDriftB 48s ease-in-out infinite; }

/* Multi-hue vignette */
.hero::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(5,4,20,0.72) 0%,
    rgba(5,4,20,0.06) 38%,
    rgba(5,4,20,0.64) 100%
  );
  box-shadow:
    inset 0 0 180px rgba(0,0,0,0.50),
    inset 0 -60px 100px rgba(167,139,250,0.06);
  z-index: 1;
}

#heroStars{
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0.72;
}

.hero .content{
  position: relative; z-index: 3;
  text-align: center; padding: 60px 20px;
  max-width: 880px; margin: 0 auto;
}

.kicker{
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(167,139,250,0.25);
  background: rgba(167,139,250,0.08);
  color: rgba(200,195,235,0.88);
  margin-bottom: 22px;
}

/* Bold gradient headline */
h1{
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.08;
  /*
   * FIX: -webkit-background-clip:text crops the paint box to the content rect,
   * which at line-height:1.08 slices off descenders (g, y, p, q, j).
   * padding-bottom gives the clipping region extra room; the negative
   * margin-bottom compensates so spacing to the next element stays the same.
   */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

/* Shared gradient used for both hero h1 lines — matches header brand */
h1:first-of-type,
h1.hero-byline{
  background: linear-gradient(90deg, #7c3aed, #38bdf8, #7c3aed, #38bdf8);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientRoll 4s linear infinite reverse;
}

@keyframes gradientRoll {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Byline is a touch smaller and lighter than the main title */
h1.hero-byline{
  font-size: clamp(18px, 2.2vw, 32px);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-top: 4px;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: rgba(200,195,235,0.72);
  background-clip: unset;
  color: rgba(200,195,235,0.72);
}

.lead{
  margin: 20px auto 32px;
  max-width: 56ch;
  color: rgba(200,195,235,0.72);
  font-size: 15.5px;
  line-height: 1.72;
}

.actions{
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
}

/* =========================
   Buttons — rounded pill, aurora glow
========================= */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid rgba(167,139,250,0.28);
  background: rgba(167,139,250,0.06);
  color: var(--text);
  letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 11.5px; font-family: inherit;
  cursor: pointer; position: relative; isolation: isolate;
  transition: background 200ms ease, border-color 200ms ease,
              transform 150ms var(--ease-spring), box-shadow 200ms ease;
}
.btn:hover{
  background: rgba(167,139,250,0.12);
  border-color: rgba(167,139,250,0.50);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.38), 0 0 20px rgba(167,139,250,0.12);
}
.btn:active{ transform: translateY(0); }

.btn.primary{
  background: linear-gradient(
    150deg,
    rgba(167,139,250,0.26) 0%,
    rgba(96,165,250,0.18) 100%
  );
  border-color: rgba(167,139,250,0.45);
  box-shadow: 0 0 24px rgba(167,139,250,0.14);
}
.btn.primary:hover{
  background: linear-gradient(
    150deg,
    rgba(167,139,250,0.35) 0%,
    rgba(96,165,250,0.25) 100%
  );
  border-color: rgba(167,139,250,0.70);
  box-shadow: 0 0 36px rgba(167,139,250,0.22), 0 0 60px rgba(96,165,250,0.10),
              0 8px 28px rgba(0,0,0,0.45);
}

/* Multi-colour animated border ring */
.btn::before{
  content: "";
  position: absolute; inset: -1px; border-radius: 999px; padding: 1px;
  background: linear-gradient(
    120deg,
    rgba(167,139,250,0.70),
    rgba(96,165,250,0.60),
    rgba(52,211,153,0.55),
    rgba(167,139,250,0.70)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0; transition: opacity 220ms ease; z-index: -1;
}
.btn:hover::before{ opacity: 1; }

/* =========================
   Sections
========================= */
.section{
  padding: 64px 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(167,139,250,0.04), transparent 44%),
    radial-gradient(circle at 78% 70%, rgba(96,165,250,0.03),  transparent 48%);
}

.section-head{
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 16px;
  margin-bottom: 24px;
}
.section-head h2{
  margin: 0; font-weight: 700;
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  background: linear-gradient(90deg, rgba(255,255,255,0.90), rgba(200,195,235,0.70));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.section-head p{
  margin: 0; color: var(--muted); font-size: 13px;
}

/* Card grid */
.grid{
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px;
}

.card{
  grid-column: span 4;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(167,139,250,0.10);
  background: rgba(167,139,250,0.03);
  transform: translateY(0);
  transition: transform 240ms var(--ease-spring),
              box-shadow 240ms ease, border-color 240ms ease;
  position: relative; display: block;
}
/* Staggered glow colours on nth-child for visual variety */
.card:nth-child(3n+1):hover{
  border-color: rgba(167,139,250,0.35);
  box-shadow: 0 28px 80px rgba(0,0,0,0.65),
              0 0 50px rgba(167,139,250,0.16);
}
.card:nth-child(3n+2):hover{
  border-color: rgba(96,165,250,0.35);
  box-shadow: 0 28px 80px rgba(0,0,0,0.65),
              0 0 50px rgba(96,165,250,0.14);
}
.card:nth-child(3n):hover{
  border-color: rgba(52,211,153,0.30);
  box-shadow: 0 28px 80px rgba(0,0,0,0.65),
              0 0 50px rgba(52,211,153,0.12);
}
.card:hover{ transform: translateY(-7px); }
.card img{
  width: 100%; height: auto; display: block;
  object-fit: cover; aspect-ratio: 4/3;
  filter: saturate(1.06) contrast(1.02);
  transition: transform 300ms var(--ease-out-expo), filter 240ms ease;
}
.card:hover img{
  transform: scale(1.05);
  filter: saturate(1.14) contrast(1.06);
}
.card video{
  width: 100%; height: auto; display: block;
  border-radius: 0; object-fit: cover; aspect-ratio: 4/3;
}
.card .cap{
  position: absolute; left: 12px; right: 12px; bottom: 11px;
  padding: 10px 13px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(5,4,20,0.50);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background 220ms ease;
}
.card:hover .cap{
  background: rgba(5,4,20,0.66);
  border-color: rgba(167,139,250,0.20);
}
.card .cap .t{
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.95);
}
.card .cap .d{
  font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4;
}

/* Skeleton */
.card-skeleton{
  grid-column: span 4; border-radius: var(--radius);
  border: 1px solid rgba(167,139,250,0.07);
  background: rgba(167,139,250,0.025);
  aspect-ratio: 4/3; position: relative; overflow: hidden;
}
.card-skeleton::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    transparent 25%,
    rgba(167,139,250,0.06) 50%,
    transparent 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer{
  0%  { background-position: 200% center; }
  100%{ background-position: -200% center; }
}

/* Cols */
.cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.panel{
  border-radius: var(--radius);
  border: 1px solid rgba(167,139,250,0.10);
  background: rgba(167,139,250,0.025);
  padding: 24px;
}
.panel h3{
  margin: 0 0 12px; font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,0.92);
}
.panel p{ color: var(--muted); margin: 0 0 14px; font-size: 14px; line-height: 1.68; }

.hr{ border: 0; border-top: 1px solid rgba(167,139,250,0.08); margin: 18px 0; }

/* Forms */
input, textarea, select{ font-family: inherit; font-size: 14px; }
input, textarea{
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(167,139,250,0.15);
  background: rgba(167,139,250,0.04); color: var(--text); outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
input:focus, textarea:focus{
  border-color: rgba(167,139,250,0.50);
  box-shadow: 0 0 0 4px rgba(167,139,250,0.10);
}
textarea{ min-height: 130px; resize: vertical; }
input::placeholder, textarea::placeholder{ color: rgba(200,195,235,0.32); }

.note{ color: rgba(200,195,235,0.48); font-size: 12px; letter-spacing: 0.02em; }

/* Scroll reveal */
.reveal{
  opacity: 0; transform: translateY(18px);
  transition: opacity 540ms var(--ease-out-expo), transform 540ms var(--ease-out-expo);
}
.reveal.in{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-bg-layer{ animation:none !important; transition:none !important; transform:none !important; }
  .layer-a, .layer-b{ animation:none !important; }
}

/* Gallery */
.section-head.gallery-head{ display: block; margin-bottom: 24px; }
.gallery-topline{ display: flex; align-items: baseline; justify-content: flex-start; gap: 12px; }
.gallery-topline h2{ margin: 0; }
.gallery-intro{
  margin: 16px 0 0; color: rgba(200,195,235,0.72); font-size: 14px;
  line-height: 1.72; max-width: 72ch;
}
.gallery-filter{ margin-top: 14px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.gallery-filter-label{ font-size: 12px; letter-spacing: 0.08em; color: rgba(200,195,235,0.58); }
.gallery-filter-row{ display: flex; align-items: center; gap: 10px; width: 100%; }
.gallery-filter-select{
  background-color: #12103a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a78bfa' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(167,139,250,0.22); border-radius: 12px;
  padding: 10px 36px 10px 14px; outline: none; max-width: 270px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  color-scheme: dark;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.gallery-filter-select:hover{
  background-color: #1a1650;
  border-color: rgba(167,139,250,0.38);
}
.gallery-filter-select:focus{
  border-color: rgba(167,139,250,0.58);
  box-shadow: 0 0 0 4px rgba(167,139,250,0.10);
  background-color: #1a1650;
}
.gallery-filter-select option{
  background-color: #12103a;
  color: rgba(255,255,255,0.92);
}
.gallery-filter-select option:checked{
  background-color: #2d1f6e;
  color: #ffffff;
}
.gallery-filter-spacer{ flex: 1; }
.gallery-hint{ margin-top: 10px; font-size: 12px; color: rgba(200,195,235,0.46); }

.view-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(167,139,250,0.16);
  background: rgba(167,139,250,0.05); color: var(--text);
  cursor: pointer; font-family: inherit; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: transform 120ms var(--ease-spring), background 150ms ease, border-color 150ms ease;
}
.view-toggle:hover{ background: rgba(167,139,250,0.10); border-color: rgba(167,139,250,0.28); }
.view-toggle:active{ transform: translateY(1px); }
.view-toggle[aria-pressed="true"]{
  background: rgba(167,139,250,0.14);
  border-color: rgba(167,139,250,0.40);
}

#galleryGrid.list-view, #gearGrid.list-view{ display: grid; grid-template-columns: 1fr; gap: 12px; }
#galleryGrid.list-view .card, #gearGrid.list-view .card{
  display: grid; grid-template-columns: 230px 1fr;
  gap: 0; align-items: stretch; aspect-ratio: unset;
}
#galleryGrid.list-view .card img, #gearGrid.list-view .card img{
  width: 100%; height: 150px; object-fit: cover;
  border-radius: 18px 0 0 18px; aspect-ratio: unset;
}
#galleryGrid.list-view .cap, #gearGrid.list-view .cap{
  position: static; display: flex; flex-direction: column; justify-content: center;
  padding: 18px 20px; background: transparent; border: none; backdrop-filter: none; border-radius: 0;
}
#galleryGrid.list-view .cap .t, #gearGrid.list-view .cap .t{ font-size: 13px; letter-spacing: 0.12em; }
#galleryGrid.list-view .cap .d, #gearGrid.list-view .cap .d{ font-size: 13px; margin-top: 6px; }

.multi-badge{
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(167,139,250,0.25);
  background: rgba(5,4,20,0.55);
  color: rgba(255,255,255,0.92); font-size: 11.5px; line-height: 1;
  backdrop-filter: blur(8px); pointer-events: none;
}
.multi-badge .stack{
  width: 12px; height: 12px; display: inline-block; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(167,139,250,0.35) inset, 3px 3px 0 0 rgba(167,139,250,0.12);
}

@media (max-width: 720px){
  .card .cap .d{ display: none; }
  #galleryGrid.list-view .card, #gearGrid.list-view .card{ grid-template-columns: 1fr; }
  #galleryGrid.list-view .card img, #gearGrid.list-view .card img{ height: 200px; border-radius: 18px 18px 0 0; }
  #galleryGrid.list-view .cap, #gearGrid.list-view .cap{ padding: 14px; }
  .view-toggle{ display: none !important; }
}

.gallery-error{ grid-column: 1/-1; }

/* About page */
.page-about .cols{ grid-template-columns: 1fr; justify-items: center; }
.page-about .panel{ width: 100%; max-width: 800px; padding: 32px 30px; }
.page-about .section{
  background:
    radial-gradient(900px 520px at 20% 10%,  rgba(167,139,250,0.07), transparent 58%),
    radial-gradient(820px 560px at 85% 65%,  rgba(96,165,250,0.06),  transparent 60%);
}
.page-about .about-panel p{ margin: 0 0 16px; line-height: 1.80; font-size: 15px; color: rgba(255,255,255,0.82); }

.about-header{ display: flex; justify-content: center; margin-bottom: 1.8rem; }
.about-photo{
  width: 130px; height: 130px; object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(167,139,250,0.20);
  box-shadow: 0 8px 32px rgba(0,0,0,0.48), 0 0 0 1px rgba(167,139,250,0.10),
              0 0 40px rgba(167,139,250,0.08);
  opacity: 0.92;
  transition: opacity 280ms ease, box-shadow 280ms ease;
}
.about-photo:hover{
  opacity: 1;
  box-shadow: 0 12px 44px rgba(0,0,0,0.56), 0 0 0 2px rgba(167,139,250,0.26),
              0 0 60px rgba(167,139,250,0.14);
}

@media (min-width: 768px){
  .about-header{ float: left; margin: 0 1.8rem 0.8rem 0; }
}

.astro-divider{ margin-top: 30px; text-align: center; opacity: 0.60; clear: both; }
.astro-divider span{
  font-family: var(--mono); letter-spacing: 0.40em; font-size: 11px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.page-about .contact-section{
  border-top: 0; margin-top: 0; padding-top: 18px; padding-bottom: 56px;
}
.page-about .about-panel{ margin-bottom: 0; }
.page-about .contact-panel .section-head{ margin-bottom: 12px; }

/* =========================
   Index page — About + Contact sections
   Centred, wider, fluid on all viewports
========================= */
.index-about-section .cols,
.index-contact-section .cols{
  grid-template-columns: 1fr;
  justify-items: center;
}
.index-about-section .about-panel{
  width: 100%;
  max-width: 860px;
  padding: 36px 40px;
}
.index-about-section .about-panel p{
  margin: 0 0 16px;
  line-height: 1.80;
  font-size: 15px;
  color: rgba(255,255,255,0.82);
}
.index-about-section .section-head{
  max-width: 860px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.index-contact-section .contact-panel{
  max-width: 860px;
  width: 100%;
  padding: 36px 40px;
}
.index-contact-section .contact-form,
.index-contact-section .contact-intro{
  max-width: 100%;
}
@media (max-width: 760px){
  .index-about-section .about-panel,
  .index-contact-section .contact-panel{
    padding: 24px 20px;
  }
}
@media (max-width: 480px){
  .index-about-section .about-panel,
  .index-contact-section .contact-panel{
    padding: 18px 14px;
  }
}

.contact-panel{
  position: relative; max-width: 720px; margin: 0 auto; padding: 28px 30px;
}
.contact-panel::before{
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1.5px;
  background: linear-gradient(
    90deg, transparent,
    rgba(167,139,250,0.55), rgba(96,165,250,0.65),
    rgba(52,211,153,0.45), transparent
  );
  opacity: 0.55;
}
@media (hover:hover){
  .contact-panel{ transition: box-shadow .32s ease, border-color .32s ease, transform .32s ease; }
  .contact-panel:hover{
    border-color: rgba(167,139,250,0.24);
    box-shadow: 0 0 0 1px rgba(167,139,250,0.07), 0 14px 40px rgba(0,0,0,0.44),
                0 0 50px rgba(167,139,250,0.06);
    transform: translateY(-2px);
  }
}

.contact-form{ max-width: 520px; }
.contact-form label{ display: block; margin-bottom: 1.25rem; }
.contact-form span{
  display: block; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(200,195,235,0.58); margin-bottom: 6px;
}
.contact-form input,
.contact-form textarea{
  width: 100%; background: rgba(167,139,250,0.04);
  border: 1px solid rgba(167,139,250,0.14); color: var(--text);
  padding: 11px 14px; font-size: 14px; border-radius: 12px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline: none; border-color: rgba(167,139,250,0.48);
  box-shadow: 0 0 0 4px rgba(167,139,250,0.10);
}
.contact-form button{ margin-top: 6px; }
.contact-intro{
  max-width: 520px; color: rgba(200,195,235,0.70); font-size: 14px;
  line-height: 1.67; margin: 6px 0 1.8rem;
}

.hidden{ display: none; }

/* Support panels */
.support-panel--about{ margin: 28px 0; }
.page-about .section .panel{ max-width: 800px; }

.support-wrap{ padding-top: 10px; }
.support-panel{
  display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 14px;
  align-items: center; position: relative; overflow: hidden;
}
.support-title{
  margin: 0 0 8px 0;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  background: linear-gradient(90deg, rgba(255,255,255,0.90), rgba(200,195,235,0.70));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.support-text{ margin: 0; color: rgba(200,195,235,0.76); font-size: 13px; line-height: 1.62; }
.support-right{ display: flex; flex-direction: column; gap: 8px; align-items: flex-end; justify-content: center; }
.support-btn{ width: fit-content; }
.support-mini{ font-size: 12px; color: rgba(200,195,235,0.60); line-height: 1.4; text-align: right; }
.support-panel::before{
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1.5px;
  background: linear-gradient(
    90deg, transparent,
    rgba(167,139,250,0.60), rgba(96,165,250,0.70),
    rgba(52,211,153,0.55), transparent
  );
  opacity: 0.60;
}
@media (hover:hover){
  .support-panel{ transition: box-shadow .32s ease, border-color .32s ease, transform .32s ease; }
  .support-panel:hover{
    border-color: rgba(167,139,250,0.32);
    box-shadow: 0 0 0 1px rgba(167,139,250,0.10), 0 14px 44px rgba(0,0,0,0.50),
                0 0 60px rgba(167,139,250,0.08);
    transform: translateY(-2px);
  }
}
@media (max-width: 860px){
  .support-panel{ grid-template-columns: 1fr; }
  .support-right{ align-items: flex-start; text-align: left; }
  .support-mini{ text-align: left; }
}

/* Prints */
.prints-layout{ display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.prints-main{ display: grid; gap: 18px; }
.prints-side{ display: grid; gap: 18px; }
@media (min-width: 980px){ .prints-layout{ grid-template-columns: 1fr 360px; } }

.page-prints .support-panel{ max-width: 960px; margin: 0 auto; grid-template-columns: 1fr auto; }
.page-prints .support-right{ align-items: flex-end; }
.page-prints .support-mini{ text-align: right; }
@media (max-width: 860px){
  .page-prints .support-panel{ grid-template-columns: 1fr; }
  .page-prints .support-right{ align-items: flex-start; }
  .page-prints .support-mini{ text-align: left; }
}

.prints-panel{ position: relative; overflow: hidden; }
.prints-panel::before{
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1.5px;
  background: linear-gradient(
    90deg, transparent,
    rgba(167,139,250,0.50), rgba(96,165,250,0.62),
    rgba(167,139,250,0.50), transparent
  );
  opacity: 0.55;
}
@media (hover:hover){
  .prints-panel{ transition: box-shadow .32s ease, border-color .32s ease, transform .32s ease; }
  .prints-panel:hover{
    border-color: rgba(167,139,250,0.28);
    box-shadow: 0 0 0 1px rgba(167,139,250,0.08), 0 14px 44px rgba(0,0,0,0.48);
    transform: translateY(-2px);
  }
}

.steps{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 16px;
}
@media (max-width: 860px){ .steps{ grid-template-columns: 1fr; } }
.step{
  padding: 16px; border: 1px solid rgba(167,139,250,0.09);
  background: rgba(167,139,250,0.025); border-radius: 18px;
  transition: border-color 200ms ease, background 200ms ease;
}
.step:hover{ border-color: rgba(167,139,250,0.22); background: rgba(167,139,250,0.05); }
.step .k{
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid rgba(167,139,250,0.34);
  background: rgba(167,139,250,0.10);
  font-weight: 700; font-size: 13px; margin-bottom: 10px; color: var(--accent);
}
.step h4{ margin: 0 0 6px; font-size: 13px; }
.step p{ margin: 0; color: rgba(200,195,235,0.74); font-size: 13px; line-height: 1.55; }
.step p.helper{ font-size: 12px; color: rgba(200,195,235,0.58); margin-top: 6px; }

.picker{
  display: grid; gap: 12px; padding: 16px; border-radius: 18px;
  border: 1px solid rgba(167,139,250,0.10); background: rgba(167,139,250,0.02);
}
.picker .row{ display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; }
@media (max-width: 520px){
  .picker .row{ grid-template-columns: 1fr; }
  .picker .row label{ margin-bottom: -2px; }
}
.picker label{
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(200,195,235,0.58);
}
.picker select, .picker input, .picker textarea{
  width: 100%; padding: 10px 13px; border-radius: 12px;
  border: 1px solid rgba(167,139,250,0.18);
  background-color: #12103a;
  color: rgba(255,255,255,0.92); outline: none; font-family: inherit; font-size: 13px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.picker select{
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a78bfa' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  appearance: none; -webkit-appearance: none;
  color-scheme: dark;
  cursor: pointer;
}
.picker select:hover{
  background-color: #1a1650;
  border-color: rgba(167,139,250,0.38);
}
.picker select option{
  background-color: #12103a;
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  padding: 6px 10px;
}
.picker select option:disabled,
.picker select option[value=""]{
  color: rgba(200,195,235,0.50);
}
.picker select option:checked{
  background-color: #2d1f6e;
  color: #ffffff;
}
.picker select:focus, .picker input:focus, .picker textarea:focus{
  border-color: rgba(167,139,250,0.55); box-shadow: 0 0 0 4px rgba(167,139,250,0.10);
  background-color: #1a1650;
}
.picker .row > div{ min-width: 0; }

.helper{ font-size: 12px; color: rgba(200,195,235,0.65); line-height: 1.55; margin-top: 6px; }

.template-box{
  padding: 16px; border-radius: 16px;
  border: 1px solid rgba(167,139,250,0.10); background: rgba(0,0,0,0.22);
}
.template-box pre{
  margin: 0; white-space: pre-wrap;
  font-family: var(--mono); font-size: 12px; line-height: 1.65; color: rgba(255,255,255,0.82);
}

.faq{ margin-top: 18px; display: grid; gap: 8px; }
details.faq-item{
  border: 1px solid rgba(167,139,250,0.09); border-radius: 16px;
  background: rgba(167,139,250,0.018); padding: 13px 16px;
  transition: border-color 200ms ease, background 200ms ease;
}
details.faq-item[open]{
  border-color: rgba(167,139,250,0.22); background: rgba(167,139,250,0.05);
}
details.faq-item summary{
  cursor: pointer; list-style: none; font-size: 13px;
  font-weight: 600; color: rgba(255,255,255,0.90); line-height: 1.4;
}
details.faq-item summary::-webkit-details-marker{ display: none; }
details.faq-item p{
  margin: 10px 0 0; color: rgba(200,195,235,0.76); font-size: 13px; line-height: 1.62;
}

.framed-tile{ pointer-events: none; }
.framed-tile img{
  width: 100%; height: auto; display: block; aspect-ratio: 16/10; object-fit: cover;
  border-bottom: 1px solid rgba(167,139,250,0.07);
}

.items-area{ display: grid; gap: 10px; }
.item-row{
  display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px;
  border-radius: 16px; border: 1px solid rgba(167,139,250,0.09); background: rgba(0,0,0,0.14);
}
@media (min-width: 860px){
  .item-row{ grid-template-columns: 1fr 1fr; align-items: center; }
  .item-row select:nth-child(1){ grid-column: 1/-1; }
  .item-row select:nth-child(2){ grid-column: 1/2; }
  .item-row select:nth-child(3){ grid-column: 2/3; }
  .item-row .item-actions{ grid-column: 1/-1; display: flex; justify-content: flex-end; }
}
.item-row select{
  width: 100%; padding: 10px 36px 10px 13px; border-radius: 12px;
  border: 1px solid rgba(167,139,250,0.22);
  /* Solid dark background — ensures option list is never white */
  background-color: #12103a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a78bfa' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: rgba(255,255,255,0.92); outline: none; font-family: inherit; font-size: 13px;
  appearance: none; -webkit-appearance: none;
  /* Tell browser to use dark-mode chrome for the native dropdown */
  color-scheme: dark;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.item-row select:hover{
  background-color: #1a1650;
  border-color: rgba(167,139,250,0.40);
}
.item-row select:focus{
  border-color: rgba(167,139,250,0.65);
  box-shadow: 0 0 0 4px rgba(167,139,250,0.12);
  background-color: #1a1650;
}
/* Force option list to use dark theme in all browsers */
.item-row select option{
  background-color: #12103a;
  color: rgba(255,255,255,0.92);
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
}
.item-row select option:disabled,
.item-row select option[value=""]{
  color: rgba(200,195,235,0.50);
}
.item-row select option:checked{
  background-color: #2d1f6e;
  color: #ffffff;
}
.item-actions{ display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.item-actions .btn{ padding: 8px 14px; }
.items-controls{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

.calendar-example-img{
  width: 100%; height: auto; border-radius: 14px;
  border: 1px solid rgba(167,139,250,0.09); display: block; margin-top: 10px;
}

.checkline{
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer; text-transform: none !important; letter-spacing: normal !important;
}
.picker input[type="checkbox"]{
  width: auto !important; padding: 0 !important;
  border-radius: 4px; background: transparent !important; box-shadow: none !important;
  border: 1px solid rgba(167,139,250,0.38);
  accent-color: var(--accent); flex: 0 0 auto; margin-top: 3px;
}
.checkline span{ white-space: normal; overflow-wrap: anywhere; color: rgba(200,195,235,0.76); font-size: 13px; line-height: 1.55; }
.faq-link{ margin-left: 6px; color: var(--accent); font-size: 12px; text-decoration: underline; }
.faq-link:hover{ opacity: 0.85; }
#pNotes{ min-height: 4.5em; resize: vertical; }

/* About panel */
.about-panel{ position: relative; overflow: hidden; }
.about-panel::before{
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1.5px;
  background: linear-gradient(
    90deg, transparent,
    rgba(167,139,250,0.40), rgba(96,165,250,0.55),
    rgba(52,211,153,0.35), transparent
  );
  opacity: 0.50;
}
@media (hover:hover){
  .about-panel{ transition: box-shadow .32s ease, border-color .32s ease, transform .32s ease; }
  .about-panel:hover{
    border-color: rgba(167,139,250,0.26);
    box-shadow: 0 0 0 1px rgba(167,139,250,0.07), 0 14px 40px rgba(0,0,0,0.46);
    transform: translateY(-2px);
  }
}

/* Footer */
footer{
  padding: 28px 0 48px;
  border-top: 1px solid rgba(167,139,250,0.08);
  color: var(--muted); font-size: 11.5px; letter-spacing: 0.08em;
}
.footer-links{
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: center;
}

/*
 * Aurora shimmer underline on all footer links — mirrors the header brand animation.
 * position:relative creates the stacking context for the ::after pseudo-element.
 */
.footer-links a{
  position: relative;
  color: var(--muted);
  transition: color 200ms ease, opacity 200ms ease;
  /* nudge inline-flex icons so the underline sits flush */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-bottom: 2px;
}
.footer-links a:hover{
  opacity: 1;
}

/* The shimmer line — same gradient + animation as .brand::after */
.footer-links a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(167,139,250,0.90),
    rgba(96,165,250,0.80),
    rgba(52,211,153,0.70),
    transparent
  );
  opacity: 0;
  transform: scaleX(0.3) translateY(3px);
  transform-origin: center;
  transition: opacity 240ms ease, transform 240ms var(--ease-out-expo);
  pointer-events: none;
}
.footer-links a:hover::after{
  opacity: 1;
  transform: scaleX(1) translateY(0);
}

/* Social icon links: icon colour transitions to accent on hover */
.footer-links .social-icon{
  display: inline-flex; align-items: center;
  color: inherit; opacity: 0.80;
  transition: color 200ms ease, opacity 200ms ease;
}
.footer-links .social-icon:hover{
  opacity: 1;
  color: var(--accent2);
}

/* Brand link in footer keeps its gradient text treatment */
.footer-brand{
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
}
/* gradient-text elements need the shimmer line brightened slightly */
.footer-brand::after{
  background: linear-gradient(
    90deg,
    transparent,
    rgba(167,139,250,1.00),
    rgba(96,165,250,0.95),
    rgba(52,211,153,0.85),
    transparent
  );
}
.footer-brand:hover{ opacity: 1; }

/* Responsive grid */
@media (max-width: 980px){ .card{ grid-column: span 6; } .cols{ grid-template-columns: 1fr; } }
@media (max-width: 560px){ .card{ grid-column: span 12; } }

/* Utility */
.grid-span-all{ grid-column: 1/-1; }
.spacer-12{ height: 12px; }
.spacer-14{ height: 14px; }
.mt-10{ margin-top: 10px !important; }
.actions.actions-left{ justify-content: flex-start; flex-wrap: wrap; }
.row.row-start{ align-items: flex-start !important; }
.grid.grid-single{ grid-template-columns: 1fr; margin-top: 14px; }

/* Toast */
.toast{
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0.94);
  background: rgba(5,4,20,0.92);
  border: 1px solid rgba(167,139,250,0.28);
  box-shadow: 0 0 50px rgba(167,139,250,0.14), 0 0 80px rgba(96,165,250,0.08),
              0 24px 70px rgba(0,0,0,0.72);
  color: rgba(255,255,255,0.96); padding: 22px 30px; border-radius: 20px;
  font-size: 15px; font-weight: 500; line-height: 1.55;
  max-width: min(90vw, 540px); text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 240ms ease, transform 240ms var(--ease-out-expo); z-index: 99999;
}
.toast.show{ opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* Image protection */
img.protect, #galleryGrid img, .featured-grid img, .hero img{
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none; pointer-events: none;
}
.protect, .protect *{ -webkit-user-select: none; user-select: none; }

/* Lightbox */
.lightbox{
  --wm-opacity: .06;
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0); z-index: 9999; padding: 18px;
  transition: background 280ms ease;
}
.lightbox.open{
  display: flex; background: rgba(0,0,0,0.94);
  animation: lbFadeIn 280ms ease both;
}
@keyframes lbFadeIn{ from{ opacity: 0; } to{ opacity: 1; } }

.lightbox-inner{
  position: relative; width: min(1200px, 100%); height: min(82vh, 900px);
  border-radius: 22px; overflow: hidden;
  background: rgba(0,0,0,0.30);
  box-shadow: 0 40px 100px rgba(0,0,0,0.62), 0 0 0 1px rgba(167,139,250,0.08),
              0 0 80px rgba(167,139,250,0.05);
  animation: lbSlideUp 300ms var(--ease-out-expo) both;
}
@keyframes lbSlideUp{
  from{ transform: translateY(18px) scale(0.97); opacity: 0; }
  to{   transform: translateY(0)     scale(1);    opacity: 1; }
}

.lightbox-img{ width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.lightbox-vid{ width: 100%; height: 100%; display: none; }
.lightbox-vid iframe.lb-iframe{ width: 100%; height: 100%; border: 0; display: block; }

.lightbox-close{
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(167,139,250,0.20);
  background: rgba(0,0,0,0.44); color: #fff;
  display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px);
  z-index: 6; font-size: 16px; transition: background 180ms ease, transform 180ms ease;
}
.lightbox-close:hover{ background: rgba(0,0,0,0.66); transform: scale(1.06); }

body.noscroll{ overflow: hidden; }

.lightbox-meta{
  position: absolute; left: 14px; bottom: 14px; right: 14px;
  display: flex; gap: 10px; align-items: flex-end; justify-content: space-between;
  pointer-events: none; z-index: 6;
}
.lightbox-meta .title{ font-weight: 700; font-size: 14px; opacity: .96; color: rgba(255,255,255,.94); text-shadow: 0 8px 22px rgba(0,0,0,.62); max-width: 70%; line-height: 1.25; }
.lightbox-meta .meta-left{ display: flex; flex-direction: column; gap: 6px; max-width: 75%; }
.lightbox-meta .desc{ font-size: 12px; line-height: 1.40; opacity: .88; color: rgba(255,255,255,.88); text-shadow: 0 8px 22px rgba(0,0,0,.60); }
.lightbox-meta .count{ font-size: 13px; opacity: 0.70; color: rgba(255,255,255,.88); text-shadow: 0 4px 12px rgba(0,0,0,.55); white-space: nowrap; }
.lightbox-meta .title-row{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
@media (max-width: 720px){
  .lightbox-meta .title{ max-width: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

.lightbox-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 999px;
  border: 1px solid rgba(167,139,250,0.18);
  background: rgba(5,4,20,0.58); color: #fff; font-size: 30px; line-height: 1;
  display: grid; place-items: center; cursor: pointer; z-index: 6; user-select: none;
  backdrop-filter: blur(6px);
  transition: background 180ms ease, transform 180ms var(--ease-spring), opacity 180ms ease;
}
.lightbox-nav:hover{ background: rgba(5,4,20,0.78); transform: translateY(-50%) scale(1.08); }
.lightbox-nav:disabled{ opacity: 0.28; cursor: default; }
.lightbox-nav.prev{ left: 14px; }
.lightbox-nav.next{ right: 14px; }

.lightbox-thumbs{
  width: 100%; display: none; gap: 8px; padding: 10px 12px 13px; overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: rgba(167,139,250,0.18) transparent;
}
.lightbox-thumbs.show{ display: flex; }
.lightbox-thumbs::-webkit-scrollbar{ height: 6px; }
.lightbox-thumbs::-webkit-scrollbar-thumb{ background: rgba(167,139,250,0.16); border-radius: 999px; }

.lb-thumb{
  flex: 0 0 auto; padding: 0; border-radius: 10px;
  border: 1px solid rgba(167,139,250,0.15); background: rgba(0,0,0,0.25); overflow: hidden;
  cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease;
}
.lb-thumb img{ display: block; height: 60px; width: auto; }
.lb-thumb.active{ border-color: rgba(167,139,250,0.72); box-shadow: 0 0 0 2px rgba(167,139,250,0.22); }

/* Calendar modal */
.calendar-modal{
  position: fixed; inset: 0; background: rgba(0,0,0,0.82); display: none;
  align-items: center; justify-content: center; z-index: 99999;
  animation: lbFadeIn 220ms ease both;
}
.calendar-modal.open{ display: flex; }
.calendar-modal-inner{
  position: relative; max-width: min(92vw, 720px); max-height: 90vh;
  background: rgba(5,4,20,0.97);
  border: 1px solid rgba(167,139,250,0.18); border-radius: 24px; padding: 16px;
  box-shadow: 0 44px 130px rgba(0,0,0,0.85), 0 0 80px rgba(167,139,250,0.08);
  animation: lbSlideUp 280ms var(--ease-out-expo) both;
}
.calendar-modal-inner img{ width: 100%; height: auto; display: block; border-radius: 16px; }
.calendar-close{
  position: absolute; top: 8px; right: 12px;
  background: none; border: none; color: rgba(255,255,255,0.85); font-size: 26px;
  cursor: pointer; line-height: 1; transition: opacity 160ms ease;
}
.calendar-close:hover{ opacity: 0.68; }

/* Puzzle page */
.page-puzzle .puzzle-wrap{ max-width: 980px; margin: 0 auto; padding: 16px; }
.page-puzzle .puzzle-top{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  border: 1px solid rgba(167,139,250,0.12); border-radius: 20px; padding: 14px 16px;
  background: rgba(167,139,250,0.03); margin: 18px 0 14px;
}
.page-puzzle .puzzle-top h2{ margin: 0; font-size: 18px; font-weight: 700; }
.page-puzzle .puzzle-top .sub{ font-size: 12px; opacity: .74; margin-top: 4px; }
.page-puzzle .puzzle-controls{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.puzzle-controls select,
.page-puzzle .puzzle-controls button{
  border-radius: 999px;
  border: 1px solid rgba(167,139,250,0.22);
  color: rgba(255,255,255,0.92);
  padding: 10px 16px;
  font-size: 13px; font-family: inherit;
  cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease;
}
.puzzle-controls select{
  background-color: #12103a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a78bfa' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  appearance: none; -webkit-appearance: none;
  color-scheme: dark;
}
.page-puzzle .puzzle-controls button{
  background-color: rgba(0,0,0,0.36);
}
.puzzle-controls select:hover{
  background-color: #1a1650;
  border-color: rgba(167,139,250,0.40);
}
.page-puzzle .puzzle-controls button:hover{
  background-color: rgba(167,139,250,0.10);
  border-color: rgba(167,139,250,0.36);
}
.puzzle-controls select option{
  background-color: #12103a;
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  border-radius: 0;
}
.puzzle-controls select option:checked{
  background-color: #2d1f6e;
  color: #ffffff;
}
.page-puzzle .puzzle-board{
  border: 1px solid rgba(167,139,250,0.12); border-radius: 20px;
  background: rgba(167,139,250,0.02); padding: 12px; overflow: hidden;
}
.page-puzzle #c{ display: block; margin: 0 auto; border-radius: 16px; background: #040312; touch-action: none; max-width: 100%; }
.page-puzzle .puzzle-msg{
  margin-top: 10px; padding: 10px 14px; border-radius: 14px;
  border: 1px solid rgba(167,139,250,0.12); background: rgba(0,0,0,0.22);
  font-size: 13px; opacity: .88; transition: border-color 300ms ease, background 300ms ease;
}
.page-puzzle .win-overlay{
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  z-index: 9999; background: rgba(0,0,0,.16); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.page-puzzle .win-overlay.show{ display: flex; }
.page-puzzle .win-card{
  width: min(520px, calc(100% - 28px)); border-radius: 24px;
  border: 1px solid rgba(167,139,250,0.22);
  background: rgba(5,4,20,.96);
  box-shadow: 0 24px 70px rgba(0,0,0,.65), 0 0 60px rgba(167,139,250,0.10);
  padding: 26px; text-align: center;
  animation: lbSlideUp 280ms var(--ease-out-expo) both;
}
.page-puzzle .win-card h3{ margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.page-puzzle .win-card p{ margin: 0 0 16px; font-size: 13px; color: rgba(200,195,235,.76); line-height: 1.55; }
.page-puzzle .win-actions{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.page-puzzle .win-actions .btn{ border-radius: 999px; padding: 10px 18px; }
.page-puzzle .puzzle-msg.win{
  font-size: 16px; font-weight: 700; text-align: center; padding: 16px 18px;
  background: linear-gradient(135deg, rgba(167,139,250,.16), rgba(96,165,250,.08));
  border: 1px solid rgba(167,139,250,.42);
  box-shadow: 0 0 32px rgba(167,139,250,.18), 0 0 60px rgba(96,165,250,.08);
  animation: pulseWin 1.8s ease-in-out infinite alternate;
}
@keyframes pulseWin{
  from{ transform: scale(1); }
  to{   transform: scale(1.026); }
}
.page-puzzle .fx-canvas{ background: transparent !important; }

/* PRINTS LINKS — uncomment to hide */
 a[href="prints.html"], a[href*="prints"] {
  display: none !important;
} 

/* BUY ME A COFFEE PANEL — uncomment to hide */
 .support-panel {
  display: none;
}