/* ============ RESET & BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-0: #f2f1ef;
  --bg-1: #e7e6e3;
  --text: #232321;
  --text-dim: rgba(35, 35, 33, 0.6);
  --text-faint: rgba(35, 35, 33, 0.38);
  --glass-bg: rgba(255, 255, 255, 0.4);
  --glass-bg-strong: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(0, 0, 0, 0.1);
  --glass-border-strong: rgba(0, 0, 0, 0.16);
  /* layered "physical glass" elevation — a tight contact shadow, a medium
     shadow, and a large soft ambient shadow read as much more premium than
     a single flat shadow. Rim/hairline layers fake the thickness of the
     glass edge catching light top and bottom. Dark mode just redefines
     these once and every component picks it up automatically. */
  --glass-shadow-contact: 0 1px 1px rgba(0, 0, 0, 0.05);
  --glass-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08);
  --glass-shadow: 0 1px 1px rgba(0,0,0,0.05), 0 6px 20px rgba(0,0,0,0.08), 0 26px 60px rgba(0, 0, 0, 0.12);
  --glass-shadow-lg: 0 2px 2px rgba(0,0,0,0.06), 0 14px 34px rgba(0,0,0,0.12), 0 40px 90px rgba(0, 0, 0, 0.16);
  --glass-rim-top: inset 0 1.5px 0.5px rgba(255, 255, 255, 0.95);
  --glass-rim-top-hover: inset 0 1.5px 0.5px rgba(255, 255, 255, 1);
  --glass-rim-bottom: inset 0 -1px 0.5px rgba(255, 255, 255, 0.4);
  --glass-hairline: inset 0 0 0 0.5px rgba(0, 0, 0, 0.05);
  --frost: blur(14px) saturate(180%) brightness(1.05) contrast(1.02);
  --accent-1: #5c5c58;   /* neutral mid-grey */
  --accent-2: #86867f;   /* neutral grey */
  --accent-3: #6e6e69;   /* neutral grey */
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* gentle overshoot — window/sheet open, macOS-style */
  --ease-press: cubic-bezier(0.45, 0, 0.55, 1);        /* snappy — instant feel for button/tile press */
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  background: linear-gradient(165deg, #f6f5f2 0%, #ecebe7 42%, #e0dfda 74%, #d6d4cf 100%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
em { font-style: italic; font-weight: 300; color: var(--accent-1); }

/* ============ BACKGROUND ORBS ============ */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.orb-1 {
  width: 520px; height: 520px;
  background: #ffffff;
  top: -120px; left: -120px;
  animation: float1 18s ease-in-out infinite;
}
.orb-2 {
  width: 600px; height: 600px;
  background: #c9c7c1;
  bottom: -200px; right: -150px;
  animation: float2 22s ease-in-out infinite;
}
.orb-3 {
  width: 420px; height: 420px;
  background: #ffffff;
  top: 45%; left: 50%;
  opacity: 0.4;
  animation: float3 26s ease-in-out infinite;
}

@keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(80px, 60px); } }
@keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-100px, -80px); } }
@keyframes float3 { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-30%, -70%); } }

.grain {
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.04;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

.glass-filters {
  position: absolute;
  width: 0; height: 0;
  pointer-events: none;
}

/* ============ GLASS PRIMITIVES ============ */
/* iOS-style liquid glass: frosted translucent fill, bright rim-light edges,
   soft depth shadow. Applied to nav, cards, buttons and chips. */
.glass-card,
.glass-btn,
.glass-chip {
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: blur(14px) saturate(180%) brightness(1.05);
}
/* nav: fully transparent, only a hint of blur on what's behind it */
.glass-nav {
  backdrop-filter: url(#glass-soft) blur(5px) saturate(160%);
  -webkit-backdrop-filter: blur(5px) saturate(160%);
}

.glass-card {
  background: rgba(255, 255, 255, 0.34);     /* bright frosted glass on light bg */
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--glass-shadow),
    var(--glass-rim-top),
    var(--glass-rim-bottom),
    var(--glass-hairline);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* glossy top sheen — two stops for a rounder, less "flat gradient" falloff */
.glass-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 20% -10%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.06) 30%, transparent 55%);
  pointer-events: none;
  z-index: 1;
}
.glass-card:hover {
  transform: translateY(-4px);
  box-shadow:
    var(--glass-shadow-lg),
    var(--glass-rim-top-hover),
    var(--glass-rim-bottom),
    var(--glass-hairline);
}
/* keep real content above the highlight layer */
.glass-card > * { position: relative; z-index: 2; }

.glass-chip {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  box-shadow:
    var(--glass-rim-top),
    var(--glass-rim-bottom),
    var(--glass-shadow-md);
}

.glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.38);
  color: var(--text);
  transition: all 0.35s var(--ease);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    var(--glass-rim-top),
    var(--glass-rim-bottom),
    var(--glass-shadow-contact),
    0 4px 16px rgba(0,0,0,0.1);
}
.glass-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.52);
  box-shadow:
    var(--glass-rim-top-hover),
    var(--glass-rim-bottom),
    var(--glass-shadow-contact),
    0 10px 26px rgba(0,0,0,0.14);
}
/* Apple-style tactile press: snaps down instantly, springs back on release */
.glass-btn:active {
  transform: scale(0.96);
  transition: transform 0.12s var(--ease-press);
}
.glass-btn.primary {
  /* was a fully opaque solid fill — backdrop-filter has nothing to show
     through an alpha-1 background, so it never actually read as glass.
     A darker, more transparent tint keeps it reading as the primary CTA
     while letting the blurred backdrop show through properly. */
  background: rgba(35, 35, 31, 0.46);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
  /* the shared bright white rim-light (meant to catch light on a pale
     glass surface) reads as a harsh hard edge against this dark fill —
     tone it down instead of inheriting --glass-rim-top/-bottom. */
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.16),
    inset 0 -1px 0.5px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.18);
}
.glass-btn.primary:hover {
  background: rgba(50, 50, 45, 0.54);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.22),
    inset 0 -1px 0.5px rgba(0, 0, 0, 0.12),
    0 8px 22px rgba(0, 0, 0, 0.22);
}
.glass-btn.ghost { background: rgba(255,255,255,0.2); }
.glass-btn.pill { padding: 10px 22px; font-size: 14px; }

/* ============ NAV ============ */
.glass-nav {
  position: fixed;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 12px 24px;
  /* transparent body, but the edges catch light like liquid glass */
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 999px;
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,0.95),   /* bright top inner rim */
    inset 0 -2px 6px rgba(0,0,0,0.06),          /* soft bottom inner shade */
    inset 0 0 0 1px rgba(255,255,255,0.25),     /* hairline glass rim */
    0 1px 0 rgba(255,255,255,0.7),              /* crisp bottom outer highlight */
    0 2px 6px rgba(0,0,0,0.06),                 /* tight contact shadow */
    0 20px 50px rgba(0,0,0,0.16);                /* large soft ambient shadow */
  z-index: 50;
  overflow: hidden;
}
/* specular sheen sweeping the top edge */
.glass-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.5) 0%,
    rgba(255,255,255,0.08) 32%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}
/* faint edge-glow ring just outside the pill */
.glass-nav::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
  pointer-events: none;
  z-index: 0;
}
.glass-nav > * { position: relative; z-index: 1; }

.nav-right { display: flex; align-items: center; gap: 10px; }

/* round dark-mode toggle, sitting next to "Let's talk" */
.theme-toggle {
  position: relative;
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.22);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    var(--glass-rim-top),
    var(--glass-rim-bottom),
    0 2px 8px rgba(0,0,0,0.1);
  transition: background 0.25s var(--ease), transform 0.15s var(--ease-press);
}
.theme-toggle:hover { background: rgba(255,255,255,0.38); }
.theme-toggle:active { transform: scale(0.88); transition: transform 0.1s var(--ease-press); }
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute;
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease-spring);
}
.theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-60deg) scale(0.5); }
html.dark-mode .theme-toggle .icon-sun { opacity: 0; transform: rotate(60deg) scale(0.5); }
html.dark-mode .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }

.brand {
  display: flex;
  align-items: center;
}
.brand-logo {
  height: 30px;
  width: auto;
  display: block;
  /* schwarzes PNG bleibt schwarz auf hellem Hintergrund */
  filter: none;
  transition: filter 0.3s var(--ease), transform 0.3s var(--ease);
}
.brand:hover .brand-logo {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25));
  transform: scale(1.04);
}
.brand:active .brand-logo {
  transform: scale(0.92);
  transition: transform 0.12s var(--ease-press);
}
.nav-links {
  display: flex;
  gap: 28px;
}
.nav-links a {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  transition: color 0.3s var(--ease), transform 0.12s var(--ease-press);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:active { transform: scale(0.94); }

/* ============ HERO ============ */
.hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 24px 80px;
  text-align: center;
  overflow: hidden;
}
/* black & white video banner that melts into the background at the edges */
.hero-banner {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 70%;
  overflow: hidden;
  filter: grayscale(1) contrast(1.06);
  opacity: 0.42;
  z-index: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 22%, #000 50%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0%, #000 22%, #000 50%, transparent 100%);
}
.hero-banner video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
/* second banner, anchored to the bottom of the hero — fills the empty
   space below the CTAs the same way the top one fills the space above,
   fading in from the top edge instead of out */
.hero-banner-bottom {
  top: auto;
  bottom: 0;
  height: 36%;    /* smaller — the top banner is the important one and should stay dominant */
  /* stays hidden through the title/CTA area, only fading in low down (below
     the buttons), holds briefly, then fades back out before the section's
     own edge so it dissolves into whatever comes next */
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 60%, #000 82%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0%, #000 60%, #000 82%, transparent 100%);
}
.hero-banner-bottom video { object-position: center 35%; }
.hero-banner-bottom { opacity: 0.32; }   /* a touch fainter than the top banner, which should read as the primary image */
.hero-inner { max-width: 920px; position: relative; z-index: 1; margin-top: 130px; }
.eyebrow { margin-bottom: 28px; }
.hero-title {
  font-size: clamp(48px, 8vw, 104px);
  font-weight: 700;
  /* a tighter line-height (was 1.02) leaves barely any room below the
     baseline, so descenders (the tail of "g" in "Crafting") get clipped by
     the line box at the larger end of the clamp — most visible once the
     viewport is wide enough for the font-size to grow close to its max. */
  line-height: 1.15;
  /* -0.04em at this font-size makes adjacent glyphs overlap (especially
     italic pairs like the "ls" in "visuals") — with a gradient painted via
     -webkit-background-clip: text, the anti-aliased edges where glyphs
     overlap don't fully cover each other, letting the background show
     through as a "cut" right through the letters. Less aggressive tracking
     keeps the tight display-type look without the glyphs touching. */
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  /* was a gradient painted via -webkit-background-clip: text — a WebKit/
     Safari technique that's known to fail to fill certain glyphs (visible
     as the background bleeding straight through specific letters). A plain
     solid color sidesteps that whole bug class. */
  color: #2a2a26;
}
.hero-sub {
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--text-dim);
  max-width: 580px;
  margin: 0 auto 44px;
  line-height: 1.6;
}
.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* scroll indicator — a soft halo (opposite of the text color) keeps it
   legible no matter how bright/dark the banner is directly behind it */
.scroll-hint {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(255,255,255,0.8), 0 1px 10px rgba(255,255,255,0.5);
}
.scroll-hint span {
  width: 1.5px; height: 36px;
  background: linear-gradient(180deg, var(--text-dim), transparent);
  box-shadow: 0 0 6px rgba(255,255,255,0.6);
}
html.dark-mode .scroll-hint {
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 1px 10px rgba(0,0,0,0.5);
}
html.dark-mode .scroll-hint span { box-shadow: 0 0 6px rgba(0,0,0,0.6); }

/* ============ SECTIONS ============ */
.section {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 100px 24px;
}
.section-head {
  text-align: center;
  margin-bottom: 60px;
}
.section-head .eyebrow { margin-bottom: 18px; }
.section-head h2 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.section-head p {
  color: var(--text-dim);
  font-size: 17px;
  max-width: 540px;
  margin: 0 auto;
}

/* ============ WORK GRID ============ */
/* folders arranged in a clean, tightly-spaced group (≈3 per row) */
.work-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 26px;
  max-width: 720px;
  margin: 0 auto;
}
/* ---- category = a translucent iOS/macOS folder (liquid glass) with the artwork as a file inside ---- */
.project.folder {
  flex: 0 0 190px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
.folder-graphic {
  position: relative;
  width: 100%;
  aspect-ratio: 1.16 / 1;
  filter: drop-shadow(0 16px 22px rgba(40,90,170,0.3));
  transition: transform 0.4s var(--ease);
}
.project.folder:hover .folder-graphic { transform: translateY(-7px) scale(1.03); }
/* Apple-style tactile press when tapping a folder open */
.project.folder:active .folder-graphic {
  transform: scale(0.94);
  transition: transform 0.15s var(--ease-press);
}

/* folder tab */
.folder-tab {
  position: absolute;
  left: 6%; top: 5%;
  width: 42%; height: 16%;
  border-radius: 9px 13px 0 0;
  background: linear-gradient(180deg, rgba(158,204,255,0.75), rgba(124,182,250,0.68));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
/* folder back wall */
.folder-back {
  position: absolute;
  left: 0; right: 0; top: 17%; bottom: 0;
  border-radius: 5px 14px 14px 14px;
  background: linear-gradient(180deg, rgba(152,200,255,0.62), rgba(112,172,248,0.54));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 0 0 1px rgba(255,255,255,0.35);
  backdrop-filter: blur(8px) saturate(165%);
  -webkit-backdrop-filter: blur(8px) saturate(165%);
}
/* the artwork sitting inside like a photo/file */
.folder-file {
  position: absolute;
  left: 16%; right: 16%; top: 20%; bottom: 24%;
  z-index: 2;
  border-radius: 4px;
  background: #fff center/cover no-repeat;
  border: 2px solid #fff;
  box-shadow: 0 8px 14px rgba(20,50,100,0.34);
  transform: rotate(-4deg);
  transition: transform 0.4s var(--ease);
}
.project.folder:hover .folder-file { transform: rotate(-1.5deg) translateY(-7px); }
/* glossy translucent front pocket — the file's lower part shows faintly through */
.folder-front {
  position: absolute;
  left: 0; right: 0; top: 40%; bottom: 0;
  z-index: 3;
  border-radius: 12px 12px 14px 14px;
  background: linear-gradient(180deg,
    rgba(216,236,255,0.78) 0%,
    rgba(150,198,255,0.5) 16%,
    rgba(118,176,250,0.52) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.98),
    inset 0 0 0 1px rgba(255,255,255,0.4),
    0 -1px 3px rgba(30,70,140,0.1);
  backdrop-filter: blur(4px) saturate(150%);
  -webkit-backdrop-filter: blur(4px) saturate(150%);
}
/* keep the .visual-N artworks as the file's picture */
.visual-1 { background-image: url("COVERARTS/terrified-web.jpg"); }
.visual-2 { background-image: url("ARTWORKS/FEATURES-web.jpg"); }
.visual-3 { background-image: url("AI VIDEO DIRECTION/0609-poster.jpg"); }
.visual-4 { background-image: url("TOUR/flyer 3-web.jpg"); }
.visual-5 { background-image: url("CUSTOM EMOJIS/all-web.jpg"); }
.visual-6 { background-image: url("CLOTHIG DESIGN/IMG_7526-web.jpg"); }
/* filename label under the folder */
.project-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  text-align: center;
}

/* ============ GALLERY — macOS FINDER WINDOW ============ */
.gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: rgba(60,60,64,0.22);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.gallery-overlay.open { opacity: 1; visibility: visible; }

.finder-window {
  position: relative;
  width: min(1040px, 100%);
  height: min(760px, 86vh);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.28);    /* liquid glass — bright, clear */
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.1),
    0 20px 50px rgba(0,0,0,0.22),
    0 60px 140px rgba(0,0,0,0.34),
    var(--glass-rim-top),
    var(--glass-rim-bottom),
    var(--glass-hairline);
  backdrop-filter: url(#glass-soft) blur(18px) saturate(180%) brightness(1.04) contrast(1.02);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.04);
  transform: translateY(20px) scale(0.97);
  opacity: 0;
  transition: transform 0.55s var(--ease-spring), opacity 0.35s var(--ease);
}
.gallery-overlay.open .finder-window { transform: translateY(0) scale(1); opacity: 1; }

/* tiny disclosure note, only shown for categories flagged with `aiNotice` —
   kept deliberately quiet (small, low-contrast, corner-tucked) so it reads
   as a footnote rather than a banner */
.finder-ai-note {
  display: none;
  position: absolute;
  /* clear the finder-content scrollbar (kept always-reserved via
     scrollbar-gutter: stable), which otherwise overlaps a note this
     close to the right edge */
  right: 30px;
  bottom: 10px;
  z-index: 5;
  font-size: 10px;
  letter-spacing: 0.01em;
  color: rgba(35,35,33,0.32);
  pointer-events: none;
}
.finder-ai-note.show { display: block; }

/* --- title bar --- */
.finder-titlebar {
  position: relative;
  flex: 0 0 auto;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  background: rgba(255,255,255,0.26);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
.traffic-lights { display: flex; align-items: center; gap: 8px; z-index: 2; }
.tl {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: none;
  padding: 0;
  display: block;
  transition: transform 0.15s var(--ease-press), filter 0.15s var(--ease);
}
.tl-close { background: #ff5f57; cursor: pointer; transition: transform 0.15s var(--ease-press), filter 0.15s var(--ease); }
.tl-min { background: #febc2e; }
.tl-max { background: #28c840; }
.tl-close:hover { filter: brightness(0.9); }
.tl-close:active { transform: scale(0.8); transition: transform 0.1s var(--ease-press); }

.finder-title {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: rgba(35,35,33,0.85);
  letter-spacing: -0.01em;
  pointer-events: none;
}
.finder-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  z-index: 2;
}
.ft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 26px;
  border-radius: 7px;
  color: rgba(35,35,33,0.5);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ft-btn:hover:not(:disabled) {
  background: rgba(35,35,33,0.08);
  color: rgba(35,35,33,0.8);
}
.ft-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.ft-spacer { width: 4px; }

/* --- body: sidebar + content --- */
.finder-body { flex: 1 1 auto; display: flex; min-height: 0; }

.finder-sidebar {
  flex: 0 0 200px;
  padding: 14px 10px;
  background: rgba(255,255,255,0.28);
  border-right: 1px solid rgba(0,0,0,0.07);
  overflow-y: auto;
  overflow-x: hidden;   /* long names ellipsize instead of forcing a scrollbar */
}
.fs-group {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(35,35,33,0.5);
  padding: 4px 10px 6px;
}
.fs-list { display: flex; flex-direction: column; gap: 1px; }
.fs-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(35,35,33,0.85);
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.fs-item .fs-icon { flex: 0 0 auto; }
.fs-item span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fs-item:hover { background: rgba(0,0,0,0.06); }
.fs-item.active { background: rgba(0,0,0,0.1); color: #111; }
.fs-item:active { background: rgba(0,0,0,0.14); transition: background 0.1s var(--ease-press); }

.finder-content {
  flex: 1 1 auto;
  padding: 16px 22px 26px;
  /* ALWAYS reserve the scrollbar's width (never toggle between with/without).
     With `auto`, the scrollbar appearing/disappearing changes the available
     width for the CSS-columns masonry below, which can flip the column
     count — and multi-column layout fully re-balances (reshuffles) every
     item across columns whenever that happens. If the resulting content
     height then crosses the "needs a scrollbar" threshold again, the two
     states keep re-triggering each other, which reads as thumbnails
     endlessly jumping/blinking between positions. Fixing the scrollbar
     width removes the feedback loop at its root. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
  background: transparent;
}
.finder-section-title {
  font-size: 16px;
  font-weight: 700;
  color: rgba(35,35,33,0.92);
  letter-spacing: -0.01em;
  margin: 6px 4px 18px;
}

/* Masonry — built with explicit JS-distributed flex columns rather than
   CSS `column-width`. CSS multi-column re-balances (reshuffles) every item
   across columns any time the container's available width crosses a
   threshold — including from a scrollbar merely appearing/disappearing.
   In Safari this created a self-triggering feedback loop (scrollbar toggles
   the width → columns rebalance → content height changes → scrollbar
   toggles again → ...), which is the "blinking" thumbnails bug. A flex
   layout with columns assigned once in JS never auto-rebalances, so there's
   nothing left to thrash. */
.finder-masonry {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.finder-masonry-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
}
.finder-item {
  display: block;
  width: 100%;
  padding: 6px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.finder-item:hover { background: rgba(0,0,0,0.05); }
.finder-item:active .finder-thumb {
  transform: scale(0.96);
  transition: transform 0.15s var(--ease-press);
}
.finder-thumb {
  width: 100%;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(0,0,0,0.05);
  transition: transform 0.35s var(--ease);
}
/* the actual artwork — full image, never cropped */
.finder-thumb img {
  display: block;
  width: 100%;
  height: auto;
}
/* videos: fill the reserved aspect-ratio box exactly (rather than sizing off
   their own intrinsic ratio via height:auto) — before a video's metadata has
   loaded, `height: auto` collapses to the browser's default 150px box, which
   reads as a blank/empty tile. Absolute-filling the already-sized .finder-thumb
   guarantees the video (or its poster) is visible from the very first frame. */
.finder-thumb video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.finder-thumb.is-placeholder { width: 100%; }
.finder-item:hover .finder-thumb { transform: translateY(-3px); }

/* featured items (the 2 Artworks gif-videos + the wide Features photo) —
   pulled out of the masonry flow into their own full-width stack, up front,
   so they're never buried and always read at the window's full width */
.finder-featured-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}
.finder-featured-row .finder-item {
  width: 100%;
}
.finder-featured-row .finder-thumb { width: 100%; }

/* play badge for video thumbnails */
.finder-thumb .play-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: #fff;
  padding-left: 3px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.35s var(--ease), background 0.3s var(--ease);
}
.finder-item:hover .play-badge { transform: translate(-50%, -50%) scale(1.08); background: rgba(0,0,0,0.55); }

/* ============ LIGHTBOX ============ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: rgba(3,3,6,0);
  backdrop-filter: blur(0px) saturate(120%);
  -webkit-backdrop-filter: blur(0px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), backdrop-filter 0.6s var(--ease),
              background 0.6s var(--ease), visibility 0.5s var(--ease);
}
.lightbox.open {
  opacity: 1;
  visibility: visible;
  background: rgba(60,60,64,0.35);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}
/* the liquid-glass window that wraps each image and adapts to it */
.lightbox-window {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.12),
    0 24px 60px rgba(0,0,0,0.26),
    0 70px 160px rgba(0,0,0,0.38),
    var(--glass-rim-top),
    var(--glass-rim-bottom),
    var(--glass-hairline);
  backdrop-filter: url(#glass-soft) blur(20px) saturate(180%) brightness(1.04) contrast(1.02);
  -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.04);
  transform: scale(0.8);
  opacity: 0;
  transition: transform 0.6s var(--ease-spring), opacity 0.4s var(--ease);
}
.lightbox.open .lightbox-window { transform: scale(1); opacity: 1; }

.lb-titlebar {
  display: flex;
  align-items: center;
  height: 14px;
  padding: 0 2px;
  flex: 0 0 auto;
}
.lb-media {
  position: relative;
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.lb-media .ph-label { display: none; }   /* no filenames */
/* full image / video — width & height sized in JS, never cropped */
.lb-media-el {
  display: block;
  border-radius: 6px;
  max-width: calc(100vw - 96px);
  max-height: calc(100vh - 150px);
}
.lb-media img.lb-media-el { object-fit: contain; cursor: pointer; }
.lb-media video.lb-media-el { background: #000; object-fit: contain; }

/* prev / next navigation arrows */
.lb-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.55);
  color: #232321;
  cursor: pointer;
  z-index: 220;
  backdrop-filter: blur(16px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.05);
  box-shadow:
    var(--glass-rim-top),
    var(--glass-rim-bottom),
    0 2px 4px rgba(0,0,0,0.08),
    0 8px 22px rgba(0,0,0,0.18);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lb-prev:hover { background: rgba(255,255,255,0.8); transform: translateY(-50%) scale(1.08); }
.lb-next:hover { background: rgba(255,255,255,0.8); transform: translateY(-50%) scale(1.08); }
.lb-nav:active {
  transform: translateY(-50%) scale(0.88);
  transition: transform 0.12s var(--ease-press);
}
@media (max-width: 480px) {
  .lb-nav { width: 44px; height: 44px; }
  .lb-prev { left: 10px; }
  .lb-next { right: 10px; }
}

/* ---- Cover-Flow teasers of the neighbouring artworks ---- */
.lb-side {
  position: fixed;
  top: 50%;
  width: 230px;
  z-index: 203;            /* behind the centre window, above backdrop */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
  perspective: 1100px;
}
.lb-side img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 8px;
  cursor: pointer;
  pointer-events: auto;
  filter: grayscale(0.35) brightness(0.82) contrast(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  -webkit-box-reflect: below 4px linear-gradient(transparent 62%, rgba(0,0,0,0.22));
  transition: filter 0.4s var(--ease), transform 0.45s var(--ease);
}
.lightbox.open .lb-side { opacity: 1; }
/* tilt the side art inward like classic Cover Flow */
.lb-side-prev { left: -54px; transform: translateY(-50%); transform-origin: left center; }
.lb-side-prev img { transform: rotateY(38deg) scale(0.9); transform-origin: left center; }
.lb-side-next { right: -54px; transform: translateY(-50%); transform-origin: right center; }
.lb-side-next img { transform: rotateY(-38deg) scale(0.9); transform-origin: right center; }
.lb-side img:hover { filter: grayscale(0) brightness(1) contrast(1); }
.lb-side-prev img:hover { transform: rotateY(30deg) scale(0.95); }
.lb-side-next img:hover { transform: rotateY(-30deg) scale(0.95); }
.lb-side-prev img:active { transform: rotateY(30deg) scale(0.86); transition: transform 0.12s var(--ease-press); }
.lb-side-next img:active { transform: rotateY(-30deg) scale(0.86); transition: transform 0.12s var(--ease-press); }
.lb-side.is-hidden { display: none; }
@media (max-width: 760px) {
  .lb-side { display: none; }   /* not enough room for teasers on small screens */
}

/* ============ ABOUT ============ */
.about-wrap { display: flex; justify-content: center; }
.about-card {
  padding: 60px;
  max-width: 820px;
  text-align: center;
}
.about-card h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 18px 0 20px;
}
.about-card p {
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 40px;
}
.stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}
.stats > div { display: flex; flex-direction: column; gap: 4px; }
.stats strong {
  font-size: 36px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stats span {
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============ SERVICES ============ */
.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 940px;
  margin: 0 auto;
}
.service {
  flex: 0 1 280px;
  padding: 34px 26px;
  text-align: center;
}
.service-icon {
  font-size: 28px;
  color: var(--accent-1);
  margin-bottom: 18px;
}
.service h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.service p { color: var(--text-dim); font-size: 14px; line-height: 1.55; }

/* ============ CONTACT ============ */
.contact-card {
  padding: 70px 40px;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.contact-card h2 {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 18px 0 14px;
}
.contact-card p { color: var(--text-dim); margin-bottom: 36px; font-size: 17px; }
.contact-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============ E-MAIL ENQUIRY PANEL ============ */
.email-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(60,60,64,0.28);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.email-overlay.open { opacity: 1; visibility: visible; }
.email-panel {
  position: relative;
  width: min(460px, 100%);
  padding: 44px;
  text-align: left;
  transform: translateY(16px) scale(0.97);
  opacity: 0;
  transition: transform 0.5s var(--ease-spring), opacity 0.3s var(--ease);
}
.email-overlay.open .email-panel { transform: translateY(0) scale(1); opacity: 1; }
.email-panel h3 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 16px 0 8px;
}
.email-panel-sub { color: var(--text-dim); font-size: 14px; line-height: 1.5; margin-bottom: 24px; }
.email-panel form { display: flex; flex-direction: column; gap: 16px; }
.email-panel label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.email-panel input,
.email-panel textarea {
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 12px;
  padding: 11px 14px;
  resize: vertical;
  box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.9);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.email-panel input:focus,
.email-panel textarea:focus {
  outline: none;
  background: rgba(255,255,255,0.75);
  border-color: rgba(0,0,0,0.18);
}
.email-submit { width: 100%; margin-top: 4px; }
.email-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.5);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glass-rim-top), var(--glass-rim-bottom), 0 2px 8px rgba(0,0,0,0.1);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.email-close:hover { background: rgba(255,255,255,0.75); transform: rotate(90deg); }
.email-close:active { transform: rotate(90deg) scale(0.85); transition: transform 0.12s var(--ease-press); }

/* ============ FOOTER ============ */
.footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px 24px 60px;
  color: var(--text-faint);
  font-size: 13px;
}

/* ============ REVEAL ANIMATIONS ============ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .about-card { padding: 40px 24px; }
  .stats { gap: 32px; }
}
@media (max-width: 860px) {
  /* folder (gallery) thumbnails keep their size on tablet */
  .finder-window { height: min(82vh, 740px); }
  .finder-sidebar { flex-basis: 150px; }
}
@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
  .contact-card { padding: 50px 24px; }
  .gallery-overlay { padding: 12px 8px; }
  .finder-window { height: 90vh; }
  .finder-sidebar { flex-basis: 116px; padding: 10px 6px; }
  .finder-content { padding: 14px 14px 20px; }
  /* folder thumbnails: tighter gap on mobile (column count is set in JS) */
  .finder-masonry, .finder-masonry-col { gap: 10px; }
  /* portfolio folders: 2 per row, smaller on mobile */
  .work-grid { gap: 24px 16px; max-width: 340px; }
  .project.folder { flex: 0 0 140px; }
  .project-title { font-size: 14px; }
}

/* ============================================================
   DARK MODE — only active while <html> carries .dark-mode,
   toggled by the round button in the nav. Same liquid-glass
   language throughout, re-tinted for a dark background instead
   of overridden with a different visual system.
   ============================================================ */
html.dark-mode {
  --bg-0: #17171a;
  --bg-1: #0f0f11;
  --text: #f3f2f0;
  --text-dim: rgba(243, 242, 240, 0.62);
  --text-faint: rgba(243, 242, 240, 0.4);
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-border-strong: rgba(255, 255, 255, 0.22);
  /* same layered-elevation recipe, just deepened for a dark backdrop —
     every component built on these vars re-tints automatically */
  --glass-shadow-contact: 0 1px 1px rgba(0, 0, 0, 0.3);
  --glass-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.32);
  --glass-shadow: 0 1px 1px rgba(0,0,0,0.3), 0 8px 26px rgba(0,0,0,0.36), 0 30px 70px rgba(0, 0, 0, 0.5);
  --glass-shadow-lg: 0 2px 2px rgba(0,0,0,0.32), 0 16px 40px rgba(0,0,0,0.42), 0 44px 100px rgba(0, 0, 0, 0.58);
  --glass-rim-top: inset 0 1.5px 0.5px rgba(255, 255, 255, 0.18);
  --glass-rim-top-hover: inset 0 1.5px 0.5px rgba(255, 255, 255, 0.26);
  --glass-rim-bottom: inset 0 -1px 0.5px rgba(255, 255, 255, 0.05);
  --glass-hairline: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25);
  --accent-1: #c9c9c4;
  --accent-2: #9a9a94;
  --accent-3: #b2b2ac;
}

html.dark-mode body {
  background: linear-gradient(165deg, #2a2a2d 0%, #1c1c1f 42%, #131315 74%, #0c0c0d 100%);
}
html.dark-mode .orb-1 { background: #55555c; }
html.dark-mode .orb-2 { background: #3a3a40; }
html.dark-mode .orb-3 { background: #6b6b73; }

/* glass surfaces: same frosted-glass structure, dark tint instead of white.
   box-shadow is inherited unchanged — it's built from the --glass-* vars
   redefined above, so it re-tints automatically. Only fill/border change. */
html.dark-mode .glass-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
html.dark-mode .glass-card::before {
  background:
    radial-gradient(120% 90% at 20% -10%, rgba(255,255,255,0.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 26%, transparent 50%);
}
html.dark-mode .glass-chip {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
}
html.dark-mode .glass-btn {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.09);
}
html.dark-mode .glass-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}
html.dark-mode .glass-btn.primary {
  background: rgba(243, 242, 239, 0.5);   /* light CTA stands out on the dark theme */
  border-color: rgba(255,255,255,0.16);
  color: #17171a;
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.2),
    inset 0 -1px 0.5px rgba(0, 0, 0, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.3);
}
html.dark-mode .glass-btn.primary:hover {
  background: rgba(243, 242, 239, 0.6);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.28),
    inset 0 -1px 0.5px rgba(0, 0, 0, 0.1),
    0 8px 22px rgba(0, 0, 0, 0.34);
}
html.dark-mode .glass-btn.ghost { background: rgba(255,255,255,0.07); }

/* nav */
html.dark-mode .glass-nav {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,0.2),
    inset 0 -2px 6px rgba(0,0,0,0.3),
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 1px 0 rgba(255,255,255,0.1),
    0 12px 34px rgba(0,0,0,0.4);
}
html.dark-mode .glass-nav::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 32%, transparent 60%);
}
html.dark-mode .glass-nav::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }

html.dark-mode .theme-toggle {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
}
html.dark-mode .theme-toggle:hover { background: rgba(255,255,255,0.15); }

/* the logo is a black PNG — invert it to white on the dark theme */
html.dark-mode .brand-logo { filter: invert(1); }
html.dark-mode .brand:hover .brand-logo { filter: invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }

html.dark-mode .hero-title {
  color: #f4f3f1;
}
/* the b&w banner video reads a little brighter against a dark backdrop */
html.dark-mode .hero-banner { opacity: 0.5; }
html.dark-mode .hero-banner-bottom { opacity: 0.36; }

/* category folder-name text sits over busy artwork — swap the light halo for a dark one */
html.dark-mode .project-title {
  text-shadow: 0 1px 12px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.8);
}

/* Finder gallery window — macOS also ships a dark Finder skin, so this
   switch is authentic to the metaphor, not just a re-color */
html.dark-mode .gallery-overlay { background: rgba(10,10,12,0.5); }
html.dark-mode .finder-window {
  background: rgba(40,40,44,0.6);
  border-color: rgba(255,255,255,0.14);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.3),
    0 20px 50px rgba(0,0,0,0.45),
    0 60px 140px rgba(0,0,0,0.6),
    var(--glass-rim-top),
    var(--glass-rim-bottom),
    var(--glass-hairline);
}
html.dark-mode .finder-titlebar {
  background: rgba(255,255,255,0.05);
  border-bottom-color: rgba(0,0,0,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
html.dark-mode .finder-ai-note { color: rgba(243,242,240,0.28); }
html.dark-mode .finder-title { color: rgba(243,242,240,0.85); }
html.dark-mode .ft-btn { color: rgba(243,242,240,0.5); }
html.dark-mode .ft-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.1);
  color: rgba(243,242,240,0.85);
}
html.dark-mode .finder-sidebar {
  background: rgba(255,255,255,0.03);
  border-right-color: rgba(0,0,0,0.3);
}
html.dark-mode .fs-group { color: rgba(243,242,240,0.45); }
html.dark-mode .fs-item { color: rgba(243,242,240,0.85); }
html.dark-mode .fs-item:hover { background: rgba(255,255,255,0.07); }
html.dark-mode .fs-item.active { background: rgba(255,255,255,0.14); color: #fff; }
html.dark-mode .fs-item:active { background: rgba(255,255,255,0.18); }
html.dark-mode .finder-section-title { color: rgba(243,242,240,0.92); }
html.dark-mode .finder-item:hover { background: rgba(255,255,255,0.06); }
html.dark-mode .finder-thumb { box-shadow: 0 8px 24px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.06); }

/* lightbox */
html.dark-mode .lightbox.open { background: rgba(5,5,6,0.6); }
html.dark-mode .lightbox-window {
  background: rgba(40,40,44,0.55);
  border-color: rgba(255,255,255,0.16);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.35),
    0 24px 60px rgba(0,0,0,0.5),
    0 70px 160px rgba(0,0,0,0.65),
    var(--glass-rim-top),
    var(--glass-rim-bottom),
    var(--glass-hairline);
}
html.dark-mode .lb-media { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
html.dark-mode .lb-nav {
  border-color: rgba(255,255,255,0.18);
  background: rgba(40,40,44,0.6);
  color: #f3f2f0;
  box-shadow: var(--glass-rim-top), var(--glass-rim-bottom), 0 2px 4px rgba(0,0,0,0.3), 0 8px 22px rgba(0,0,0,0.42);
}
html.dark-mode .lb-prev:hover,
html.dark-mode .lb-next:hover { background: rgba(60,60,64,0.75); }

/* e-mail enquiry panel */
html.dark-mode .email-overlay { background: rgba(10,10,12,0.45); }
html.dark-mode .email-panel input,
html.dark-mode .email-panel textarea {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.15);
}
html.dark-mode .email-panel input:focus,
html.dark-mode .email-panel textarea:focus {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
}
html.dark-mode .email-close {
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  box-shadow: var(--glass-rim-top), var(--glass-rim-bottom), 0 2px 8px rgba(0,0,0,0.3);
}
html.dark-mode .email-close:hover { background: rgba(255,255,255,0.16); }