/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
  --black: #0a0a0a;
  --off-black: #111111;
  --dark: #1a1a1a;
  --dark-mid: #222222;
  --mid: #888888;
  --light-mid: #aaaaaa;
  --light: #dddddd;
  --off-white: #f5f2ee;
  --white: #ffffff;
  --gold: #c9a96e;
  --gold-light: #e4c99a;
  --gold-dark: #a07040;
  --link-blue: #40aadd;
  --link-blue-hover: #6bc0e8;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Montserrat', sans-serif;

  --header-h: 78px;
  --transition: 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--black);
  color: var(--light);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  transition: background var(--transition), box-shadow var(--transition);
}

/* Opaque-dark header style shared by two triggers:
   - .scrolled  — user has scrolled past 60px (toggled by client/main.ts)
   - .hover-revealed — user moved mouse / tapped on the splash panel so
     the nav is briefly readable against a bright splash background
     (toggled by client/splash.ts; auto-removed ~2.5 s after last
     interaction so the splash stays clean when no one's actively using
     the page). The .site-header `transition: background` rule above
     gives the fade in/out for free. */
.site-header.scrolled,
.site-header.hover-revealed {
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(201,169,110,0.15);
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}

.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(8px, 1.4vw, 16px);
  text-decoration: none;
}

.logo-icon {
  width: clamp(35px, 6vw, 70px);
  height: clamp(21px, 3.6vw, 42px);
  flex-shrink: 0;
}

.logo-main {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3.2vw, 2.25rem);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #40aadd;
}

.logo-img {
  max-height: clamp(29px, 5vw, 58px);
  width: auto;
  display: block;
  object-fit: contain;
  /* Nudge down a touch so the eye shape optically aligns with the wordmark
     baseline (flex-center alone lands it slightly high). Scales with logo size. */
  position: relative;
  top: clamp(2px, 0.5vw, 6px);
}

.main-nav {
  display: flex;
  gap: 36px;
  align-items: center;
}

.main-nav a {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--light-mid);
  transition: color var(--transition);
  position: relative;
}

.main-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--transition);
}

.main-nav a:hover { color: var(--white); }
.main-nav a:hover::after { transform: scaleX(1); }
.main-nav a.nav-admin { color: var(--gold); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--white);
  transition: var(--transition);
}

/* ── Flash Messages ──────────────────────────────────────────────────────── */
.flash-messages {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  min-width: 320px;
}

.flash {
  padding: 14px 24px;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-align: center;
  animation: fadeInDown 0.4s ease, fadeOut 0.4s ease 3.5s forwards;
}

.flash-success { background: rgba(100,180,100,0.15); border: 1px solid rgba(100,180,100,0.4); color: #90ee90; }
.flash-error { background: rgba(200,60,60,0.15); border: 1px solid rgba(200,60,60,0.4); color: #ff9999; }

@keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* ── Splash Screen ───────────────────────────────────────────────────────── */
.splash-screen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* height: 100vh comes from .hp-panel */
}

.splash-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  animation: slowZoom 20s ease-in-out infinite alternate;
}

.splash-bg-a {
  z-index: 0;
}

.splash-bg-b {
  z-index: 1;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
}

.splash-bg-b.fade-in {
  opacity: 1;
}

.splash-placeholder {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-mid) 100%);
}

@keyframes slowZoom {
  from { transform: scale(1.05); }
  to { transform: scale(1.12); }
}

.splash-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.3) 0%,
    rgba(0,0,0,0.5) 50%,
    rgba(0,0,0,0.8) 100%
  );
}

.splash-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 20px;
}

.splash-title {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 10vw, 8rem);
  font-weight: 300;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.3);
  line-height: 1;
  animation: fadeUp 1.2s ease 0.3s both;
}

.splash-subtitle {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 16px;
  animation: fadeUp 1.2s ease 0.6s both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.splash-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: fixed;
  bottom: 36px;
  left: 0;
  width: 100vw;
  z-index: 9001;
  color: rgba(255,255,255,0.65);
  font-size: 1.0rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0;
  transition: color var(--transition), opacity 0.4s ease;
  pointer-events: none;
}

.splash-scroll-hint:hover { color: rgba(255,255,255,0.95); }

.splash-scroll-hint svg {
  width: 28px;
  height: 28px;
  animation: bounce 2s ease infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ── Home-page "Slideshow" header link ─────────────────────────────────
   Square gold-bordered button styled like the .view-btn used on gallery
   pages, but living inside .main-nav alongside Galleries/Directory/About.
   Only rendered when the route flags splashPage + hasHomeSlideshow
   (see views/partials/header.hbs).
   The .main-nav a base styles add a hover-underline ::after — suppress
   it here because the button already has its own hover affordance. */
.nav-home-slideshow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.2);
  /* Override .main-nav a font sizing to match .view-btn proportions. */
  font-size: 0.65rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  /* Match the brightness of the other nav links — they use --light-mid;
     --mid was visibly dimmer and harder to read. Hover still flips to
     gold to match the other view-btn hover affordance. */
  color: var(--light-mid) !important;
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.nav-home-slideshow svg { width: 12px; height: 12px; flex: 0 0 auto; }
.nav-home-slideshow:hover {
  color: var(--gold) !important;
  border-color: var(--gold);
  background: rgba(201,169,110,0.08);
}
/* Suppress the .main-nav hover underline on this button only. */
.main-nav a.nav-home-slideshow::after { display: none; }

/* Mobile-only twin: a plain text link inside the hamburger menu with a
   clearer "Home slideshow" label so it's unambiguous what it triggers.
   Hidden on desktop (where .nav-home-slideshow handles it). */
.main-nav a.nav-home-slideshow-mobile { display: none; }

/* ── Floating Photos (splash animation) ─────────────────────────────────── */
.floating-photos {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}

.floating-photos.visible {
  opacity: 1;
}

.floating-photo {
  position: absolute;
  will-change: transform;
  perspective: 900px;
}

.floating-photo-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.floating-photo-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
}

.floating-photo-back {
  transform: rotateY(180deg);
}

.floating-photo-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  background: transparent;
}

/* ── Scrolling Photos Section ────────────────────────────────────────────── */
/* ── Homepage scroll: JS-driven fixed panels ────────────────────────────── */
/* The container height is set by JS to N*100vh, providing the scroll runway.
   Tracks are invisible scroll-space divs. Panels are position:fixed and
   translated by JS — panel 0 starts at 0, panels 1..N start at 100vh and
   slide up as the user scrolls into their window. */
.hp-scroll-container {
  /* height set by JS */
}

.hp-track {
  height: 100vh; /* each track = one scroll step; JS reads offsetTop */
}

.hp-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /* z-index = panel-index + 1 */
  z-index: calc(var(--panel-index) + 1);
  /* panels start translated below viewport; JS animates them */
  transform: translateY(100vh);
  will-change: transform;
}
/* First panel starts visible */
.hp-panel[style*="--panel-index:0"] {
  transform: translateY(0);
}

/* Photo panels */
.hp-photo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.hp-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1;
}

.hp-photo-caption {
  position: absolute;
  bottom: 80px;
  width: 260px;
  z-index: 2;
}
.hp-photo-caption.caption-right { right: 60px; text-align: right; }
.hp-photo-caption.caption-left  { left: 60px; }

.hp-photo-caption p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--off-white);
  line-height: 1.5;
  padding: 16px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  border-left: 2px solid var(--gold);
}
.hp-photo-caption.caption-right p { border-left: none; border-right: 2px solid var(--gold); }

/* Galleries panel */
.hp-galleries-panel {
  background: var(--black);
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp-galleries-panel .featured-galleries {
  width: 100%;
  max-height: 100vh;
  overflow-y: auto;
}

/* ── Scroll counter ──────────────────────────────────────────────────────── */
body.hp-on-splash .hp-counter { opacity: 0; pointer-events: none; }
body.hp-on-splash .splash-scroll-hint { opacity: 1; pointer-events: auto; }
/* Hide hint on non-splash panels */
body:not(.hp-on-splash) .splash-scroll-hint { opacity: 0; pointer-events: none; }

.hp-counter {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.6);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.hp-counter-sep {
  font-size: 0.65rem;
  opacity: 0.6;
}
#hp-counter-current {
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 400;
}

/* ── Featured Galleries ─────────────────────────────────────────────────── */
.featured-galleries {
  padding: 80px 40px;
  max-width: 1400px;
  margin: 0 auto;
}
/* Inside the hp-galleries-panel the container needs no extra top padding */
.hp-galleries-panel .featured-galleries { padding-top: calc(var(--header-h) + 40px); }

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 48px;
}

.section-header h2 {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--white);
}

.view-all {
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.view-all:hover { border-color: var(--gold); }

/* ── Gallery Grid ────────────────────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2px;
}

.gallery-grid-large {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 3px;
}

.gallery-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--dark);
}

.gallery-card-img {
  position: relative;
  width: 100%;
  height: 100%;
}

.gallery-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.gallery-card:hover .gallery-card-img img {
  transform: scale(1.05);
}

.gallery-card-placeholder {
  width: 100%;
  height: 100%;
  background: var(--dark-mid);
}

.gallery-lock {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 1rem;
  background: rgba(0,0,0,0.6);
  padding: 4px 8px;
  border-radius: 2px;
}

/* SceneScape mark badge — inline at start of caption on scene photo/video cards. */
.gallery-scene-badge {
  display: inline-flex;
  align-items: center;
  pointer-events: none;
  flex-shrink: 0;
}
.gallery-scene-badge .scene-badge-mark {
  height: 2rem !important;
  width: auto !important;
  object-fit: unset !important;
  display: block;
}

/* Variant used in the folder-card count line (e.g. "3 videos") */
.gallery-scene-badge-count .scene-badge-mark {
  height: 1.5rem !important;
}

/* Caption row: badge + caption text side by side */
.photo-caption-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Scene page ──────────────────────────────────────────────────────────── */

/* Folder scene: outer wrapper (stacks single-wrap + filmstrip vertically).
   Horizontal padding matches the site header (40px each side) so all edges align. */
.scene-folder-wrap {
  display: flex;
  flex-direction: column;
  padding: 0 40px;
}

/* Filmstrip: horizontal scrollable row of thumbnails */
.scene-filmstrip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 12px 0 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--mid) transparent;
}
.scene-filmstrip::-webkit-scrollbar { height: 4px; }
.scene-filmstrip::-webkit-scrollbar-thumb { background: var(--mid); border-radius: 2px; }

.scene-filmstrip-item {
  display: block;
  width: 120px;
  height: 80px;
  position: relative;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface, #111);
  padding: 0;
  transition: border-color 0.15s;
}
.scene-filmstrip-item:hover  { border-color: var(--mid); }
.scene-filmstrip-item.active { border-color: var(--accent, #c8a96e); }

.scene-filmstrip-item img,
.scene-filmstrip-item video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

.scene-filmstrip-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.25);
  pointer-events: none;
}

/* Scene description: editorial prose below the title */
.scene-description {
  margin-top: 1.4rem;
  max-width: 70ch;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--light-mid);
}

.scene-description p { margin-bottom: 1em; }
.scene-description p:last-child { margin-bottom: 0; }

/* Prev / Next navigation bar — horizontal padding matches site header */
.scene-nav {
  display: flex;
  gap: 16px;
  margin: 60px 0 20px;
  padding: 32px 40px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.scene-nav-single.scene-nav-has-next { justify-content: flex-end; }
.scene-nav-single.scene-nav-has-prev { justify-content: flex-start; }
.scene-nav-both .scene-nav-prev { margin-right: auto; }
.scene-nav-both .scene-nav-next { margin-left: auto; }

.scene-nav-card {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 340px;
  padding: 12px 16px;
  background: var(--dark-mid);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}

.scene-nav-card:hover {
  background: var(--dark-light);
  border-color: rgba(201,169,110,0.3);
}

.scene-nav-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 48px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--dark-dark);
}

.scene-nav-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scene-nav-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.scene-nav-label {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
}

.scene-nav-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scene-nav-arrow {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--light-mid);
  opacity: 0.6;
}

/* ── Scene top bar: breadcrumbs (left) + Manage Folder (right, admin only) ── */
.scene-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--header-h) + 14px) 40px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ── Single-item scene: side-by-side media + info ──────────────────────────── */
.scene-single-wrap {
  display: flex;
  margin-top: 0; /* top bar handles header clearance */
  align-items: flex-start;
  gap: 3rem; /* column gap doubles as row gap on mobile — no left padding needed on info */
  padding: 0 40px; /* match header edges; overridden to 0 when inside .scene-folder-wrap */
}
.scene-folder-wrap .scene-single-wrap {
  padding: 0; /* .scene-folder-wrap already provides the 40px horizontal padding */
}

.scene-single-media {
  flex: 0 0 62%;
  background: #000;
  line-height: 0; /* collapse whitespace around block media */
}

/* Video: width fills the column; height driven by natural aspect ratio —
   no black bars above/below, controls sit right at the bottom edge. */
.scene-single-video {
  width: 100%;
  height: auto;
  display: block;
  max-height: calc(100vh - var(--header-h)); /* safety cap on very tall viewports */
}

.scene-single-img {
  width: 100%;
  height: auto;
  display: block;
  max-height: calc(100vh - var(--header-h));
  object-fit: contain;
}

.scene-single-info {
  flex: 1; /* take remaining space after media + gap — avoids percentage overflow with gap */
  min-width: 0; /* allow text to wrap rather than blow out the column */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 0 2rem 0;
  border-left: 1px solid var(--border-subtle, rgba(255,255,255,0.07));
}

.scene-single-breadcrumb {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--light-mid);
  opacity: 0.7;
}
.scene-single-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.scene-single-breadcrumb a:hover { color: var(--gold); opacity: 1; }

.scene-single-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  color: var(--white);
}

.scene-single-description {
  /* Cap height so description scrolls rather than pushing past the video bottom.
     250px = top-bar + title + gaps/padding + actions row. */
  max-height: calc(100vh - var(--header-h) - 250px);
  overflow-y: auto;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--light-mid);
  /* thin scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.scene-single-description::-webkit-scrollbar { width: 4px; }
.scene-single-description::-webkit-scrollbar-track { background: transparent; }
.scene-single-description::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
.scene-single-description p { margin-bottom: 0.9em; }
.scene-single-description p:last-child { margin-bottom: 0; }

/* When a child scene is active, halve the parent description's max-height.
   --scene-desc-max-h is set by JS (ResizeObserver on media panel); fallback is a
   reasonable static value if JS hasn't run yet. */
.scene-single-info.has-child-scene .scene-single-description {
  max-height: var(--scene-desc-max-h, 100px);
}

/* Child scene info block — shown below parent description when a scene filmstrip item is active */
.scene-child-info[hidden] { display: none; }

.scene-child-divider {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 0.85rem;
}

.scene-child-title {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 400;
  margin: 0 0 0.5rem;
  line-height: 1.25;
  color: var(--light);
  opacity: 0.9;
}

.scene-child-description {
  max-height: var(--scene-desc-max-h, 100px);
  overflow-y: auto;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--light-mid);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.scene-child-description:empty { display: none; }
.scene-child-description::-webkit-scrollbar { width: 4px; }
.scene-child-description::-webkit-scrollbar-track { background: transparent; }
.scene-child-description::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
.scene-child-description p { margin-bottom: 0.8em; }
.scene-child-description p:last-child { margin-bottom: 0; }

/* Count label above filmstrip in scene view */
.scene-count-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #888);
  padding: 8px 0 2px;
}

/* Filmstrip item wrapper — provides positioning context for the info overlay button */
.scene-filmstrip-item-wrap {
  flex: 0 0 auto;
  position: relative;
}

/* Info button overlaid on each filmstrip thumbnail */
.scene-filmstrip-info-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  border: none;
  border-radius: 3px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.scene-filmstrip-item-wrap:hover .scene-filmstrip-info-btn { opacity: 1; }
/* On touch devices always show it */
@media (hover: none) {
  .scene-filmstrip-info-btn { opacity: 1; }
}

/* Filmstrip scene badge — small icon overlay on scene items (bottom-left) */
.scene-filmstrip-scene-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0,0,0,0.55);
  border-radius: 3px;
  padding: 2px 3px 1px;
  display: flex;
  align-items: center;
  color: var(--accent, #c8a96e);
  pointer-events: none;
}

.scene-single-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1rem;
}

/* Info panel EXIF button — larger than card variant to suit the spacious context */
.scene-single-exif-btn {
  width: 36px;
  height: 36px;
}
.scene-single-exif-btn svg { width: 18px; height: 18px; }

/* Narrow viewports: stack vertically — info above video.
   Threshold chosen so the description column doesn't get cramped while
   still sharing the row with a ~62%-wide media panel. */
@media (max-width: 1000px) {
  .scene-single-wrap {
    flex-direction: column-reverse; /* DOM order: media, info — reversed so info appears above */
  }
  .scene-single-media {
    flex: none;
    width: 100%;
  }
  .scene-single-video,
  .scene-single-img {
    max-height: 56vw;
    object-fit: contain;
  }
  .scene-single-info {
    flex: none;
    padding: 2rem 0 0 0;
    border-left: none;
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.07));
    min-height: auto;
  }
}

.gallery-card-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 40px 20px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  transform: translateY(8px);
  transition: transform var(--transition);
}

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

.gallery-card-info h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--white);
}

.gallery-card-info span,
.gallery-card-info p {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--light-mid);
  margin-top: 4px;
}

/* ── Page Hero ───────────────────────────────────────────────────────────── */
.page-hero {
  padding: calc(var(--header-h) + 40px) 40px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(201,169,110,0.12);
}

.page-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--white);
}

.page-hero p {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 12px;
}

/* ── Gallery Page ─────────────────────────────────────────────────────────── */
.gallery-page-header {
  padding: calc(var(--header-h) + 36px) 40px 28px;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gallery-breadcrumb {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 10px;
  display: block;
}

.gallery-breadcrumb a { color: var(--gold); transition: color var(--transition); }
.gallery-breadcrumb a:hover { color: var(--gold-light); }

/* Title + item count on one line */
.gallery-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 24px;
}

.gallery-page-header h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--white);
  margin: 0;
}

.gallery-item-count {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
  white-space: nowrap;
  flex-shrink: 0;
}

.gallery-desc {
  margin-top: 10px;
  color: var(--light-mid);
  max-width: 100%;
}

.view-switcher {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}

/* Header-level slideshow button — pushed to right edge of header */
.gallery-page-header .view-switcher {
  margin-top: 24px;
  align-self: flex-end;
}

.view-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--mid);
  transition: all var(--transition);
}

.view-btn svg { width: 14px; height: 14px; }
.view-btn:hover { border-color: var(--gold); color: var(--gold); }
.view-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(201,169,110,0.08); }

/* ── Photo Grid ─────────────────────────────────────────────────────────── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 3px;
  padding: 0 0 80px;
}

.photo-grid-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4/3;
  background: var(--dark);
}

.photo-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

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

.photo-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 16px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--off-white);
  opacity: 0;
  transition: opacity var(--transition);
}

.photo-grid-item:hover .photo-caption { opacity: 1; }

/* ── Photo Strip (lightbox trigger view) ─────────────────────────────────── */
/* ── Sub-gallery section ─────────────────────────────────────────────────── */
.sub-galleries {
  margin-bottom: 60px;
  padding: 0 40px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.section-divider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 32px;
  padding: 0 40px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.section-divider-row .view-switcher {
  margin: 0;
  position: static; /* override the header absolute rule */
}
.section-divider-row--bottom {
  margin-top: 48px;
}

.section-divider {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--mid);
  margin: 0;
}

.photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 10px;
  gap: 9px;
  padding: 0 60px 120px;
  align-items: start;
}

.photo-strip-item {
  cursor: pointer;
  overflow: hidden;
  position: relative;
  display: block;
  width: 100%;
}

.photo-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

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

/* Captions are absolute overlays — no longer static text below the photo */
.photo-strip-item .photo-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 16px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--off-white);
  opacity: 0;
  transition: opacity var(--transition);
}
.photo-strip-item:hover .photo-caption { opacity: 1; }

/* ── Photo info button & EXIF modal ─────────────────────────────────────── */
.photo-strip-item-wrap {
  position: relative;
  margin-bottom: 0;
  /* Fill the allocated grid rows completely */
  height: 100%;
  min-height: 0;
}
/* The <a> inside the wrap fills the wrap height */
.photo-strip-item-wrap .photo-strip-item {
  margin-bottom: 0;
  height: 100%;
  display: block;
}
.photo-strip-item-wrap .photo-strip-item img,
.photo-strip-item-wrap .photo-strip-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-exif-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
  padding: 0;
  backdrop-filter: blur(4px);
  flex-shrink: 0;
}
.photo-exif-btn svg { width: 16px; height: 16px; }
.photo-exif-btn:hover { border-color: var(--gold); color: var(--gold); }
.photo-exif-btn:hover svg { stroke: var(--gold); }

/* EXIF modal */
.exif-modal {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exif-modal[hidden] { display: none; }

.exif-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
}

.exif-modal-box {
  position: relative;
  z-index: 1;
  background: var(--off-black);
  border: 1px solid rgba(255,255,255,0.1);
  width: min(520px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  padding: 32px;
  border-radius: 2px;
}

.exif-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--mid);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color var(--transition);
}
.exif-modal-close:hover { color: var(--white); }

.exif-modal-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 24px;
}

.exif-loading, .exif-error {
  color: var(--mid);
  font-size: 0.85rem;
  text-align: center;
  padding: 24px 0;
}

.exif-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  align-items: baseline;
}
.exif-row:last-child { border-bottom: none; }

.exif-label {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}

.exif-value {
  font-size: 0.85rem;
  color: var(--off-white);
  word-break: break-word;
}

.exif-gps-link {
  color: var(--off-white);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  transition: color var(--transition), text-decoration-color var(--transition);
}
.exif-gps-link:hover {
  color: var(--white);
  text-decoration-color: var(--white);
}

/* ── Map view ─────────────────────────────────────────────────────────────── */

.map-container {
  width: 100%;
  height: 70vh;
  min-height: 400px;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 16px;
  position: relative;
  z-index: 0;
  border: 1px solid rgba(201, 169, 110, 0.2);  /* --gold at low opacity */
}

/* Thumbnail popup — absolutely positioned inside the map container.
   Width tuned for ~6 thumbnails (72px + 6px gap) per row so big clusters
   (e.g. a folder of 17 Paris photos) stay readable. max-height caps the
   popup at roughly 4 rows; anything bigger gets internal scroll rather
   than running off the bottom of the viewport. */
.map-thumb-popup {
  position: absolute;
  display: flex;
  flex-direction: row;
  gap: 6px;
  background: rgba(20, 20, 20, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 8px;
  z-index: 1200;
  transform: translate(-50%, -115%);
  pointer-events: all;
  max-width: 560px;
  max-height: 360px;
  overflow-y: auto;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 640px) {
  .map-thumb-popup { max-width: 92vw; max-height: 60vh; }
}

.map-thumb-item {
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  line-height: 0;
}

.map-thumb-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  transition: opacity 0.15s;
}

.map-thumb-item:hover .map-thumb-img {
  opacity: 0.85;
}

.map-thumb-video-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.map-cluster-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-cluster-inner {
  background: #c9a96e;  /* --gold */
  color: #111;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-sans, sans-serif);
  letter-spacing: 0.02em;
  border: 2px solid rgba(255,255,255,0.3);
  box-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

/* Pin wrapper — needed so the badge can be positioned relative to the pin */
.map-pin-wrap {
  position: relative;
  overflow: visible !important;
}

/* Home control — sits below the zoom buttons, same leaflet-bar style */
.map-home-control a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  width: 30px;
  height: 30px;
  color: #555;
  text-decoration: none;
  cursor: pointer;
}
.map-home-control a:hover {
  color: #c9a96e;   /* --gold */
  background: #f4f4f4;
}

/* Count badge shown on pins with more than one photo at the same location */
.map-pin-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #1a1a1a;  /* --dark */
  color: #c9a96e;        /* --gold */
  border: 1px solid rgba(201, 169, 110, 0.5);
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--font-sans, sans-serif);
  line-height: 1;
  padding: 2px 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
  pointer-events: none;
  white-space: nowrap;
}

.map-no-gps {
  margin-top: 24px;
  color: var(--muted-text, #999);
  font-size: 0.95rem;
  text-align: center;
}

/* ── Contact form confirmation modal ─────────────────────────────────────── */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
}

.contact-modal-box {
  position: relative;
  z-index: 1;
  background: var(--off-black);
  border: 1px solid rgba(255,255,255,0.1);
  width: min(440px, 92vw);
  padding: 48px 40px 40px;
  border-radius: 2px;
  text-align: center;
  animation: contact-modal-in 220ms ease-out;
}

@keyframes contact-modal-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.contact-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--mid);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color var(--transition);
}
.contact-modal-close:hover { color: var(--white); }

.contact-modal-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
}
.contact-modal-icon svg {
  width: 32px;
  height: 32px;
}
.contact-modal-icon-success { color: var(--gold); }
.contact-modal-icon-error   { color: #d9534f; }

.contact-modal-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}

.contact-modal-text {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--off-white);
  line-height: 1.5;
  margin: 0 0 28px;
}

.contact-modal-ok {
  min-width: 140px;
}

/* ── Lightbox ────────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox[hidden] { display: none; }

.lb-content {
  max-width: 90vw;
  max-height: 90vh;
  text-align: center;
}

.lb-content img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  margin: 0 auto;
}

#lb-caption {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--light-mid);
}

.lb-close, .lb-prev, .lb-next {
  position: fixed;
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  cursor: pointer;
  transition: all var(--transition);
  font-size: 1.5rem;
  line-height: 1;
}

.lb-close {
  top: 24px; right: 24px;
  width: 44px; height: 44px;
  font-size: 1.2rem;
}

.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); padding: 16px 20px; }
.lb-next { right: 24px; top: 50%; transform: translateY(-50%); padding: 16px 20px; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { border-color: var(--gold); color: var(--gold); }

/* ── Slideshow ───────────────────────────────────────────────────────────── */
/* ── Full-window Slideshow ───────────────────────────────────────────────── */

/* When the full-window slideshow is active, hide surrounding page chrome */
body.fws-active .gallery-page-header,
body.fws-active #site-header,
body.fws-active .splash-scroll-hint,
body.fws-active footer { display: none; }
body.fws-active main { padding: 0; }
/* Belt-and-suspenders: when the fullwin slideshow takes over the
   viewport, lock the page so a stray taller-than-100vh layer can't
   produce a scrollbar. The home template also skips rendering the
   underlying splash/featured panels in slideshow mode, so there's
   nothing meaningful to scroll past anyway. */
body.fws-active { overflow: hidden; }

.fullwin-slideshow {
  position: fixed;
  /* inset:0 covers the visual viewport. On iOS with `viewport-fit=cover`
     in the page's <meta name="viewport">, this extends under the notch /
     Dynamic Island and the bottom home indicator — so the slideshow
     reaches the physical edges of the screen on phones, not just the
     safe-area edges. The URL bar itself is browser chrome and can't be
     removed from JS; tap the fullscreen button (uses the Fullscreen
     API) or Add to Home Screen for that. */
  inset: 0;
  width: 100vw;
  height: 100vh;
  /* Dynamic viewport unit — replaces 100vh on iOS so layout doesn't
     jump when the URL bar collapses on scroll. Falls back to 100vh on
     older browsers that don't know dvh. */
  height: 100dvh;
  z-index: 100;
  background: var(--black);
  overflow: hidden;
}
/* Push controls inward from the home indicator / notch on iOS so they
   stay tappable on devices where viewport-fit=cover extends the page
   behind those areas. Existing position math in .fws-controls already
   uses padding/margin from the bottom; this just adds the safe-area
   inset on top. */
@supports (padding: max(0px)) {
  .fws-controls {
    padding-left:   max(0px, env(safe-area-inset-left));
    padding-right:  max(0px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* Two crossfade background layers */
.fws-layer {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000; /* black bars fill uncovered area */
}

#fws-b {
  opacity: 0;
  transition: opacity 0.8s ease;
}
#fws-b.visible { opacity: 1; }

/* Caption */
.fws-caption {
  position: absolute;
  bottom: 24px;
  right: 24px;
  left: auto;
  transform: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: rgba(255,255,255,0.9);
  text-align: right;
  padding: 6px 14px;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-right: 2px solid rgba(255,255,255,0.18);
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 2px 0 0 2px;
}
.fws-caption:not(:empty) { opacity: 1; }

/* ── Music attribution overlay (home slideshow only) ────────────────────────
   Sits in the lower-LEFT as a mirror of .fws-caption (which is lower-right),
   slightly smaller and quieter visually since it's a courtesy/legal credit
   rather than primary content. Clickable — opens the .fws-music-attribution-
   modal below for the full details. */
.fws-music-attribution {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 42vw;
  padding: 6px 12px;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 0;
  border-left: 2px solid rgba(255,255,255,0.18);
  border-radius: 0 2px 2px 0;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  /* z-index must be ABOVE .fws-controls (z-index: 20) so clicks at the
     bottom-left land here instead of being absorbed by the controls'
     `inset: 0` layer when it's pointer-events:auto on hover. */
  z-index: 25;
  transition: color var(--transition), background var(--transition);
}
.fws-music-attribution:hover,
.fws-music-attribution:focus-visible {
  color: var(--white);
  background: rgba(0,0,0,0.45);
  outline: none;
}
.fws-music-attribution svg {
  width: 13px;
  height: 13px;
  opacity: 0.7;
  flex-shrink: 0;
}
.fws-music-attribution span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Details popup — centered modal on top of the slideshow. Layers above
   .fws-controls so it's clickable even when the slideshow is "paused"
   visually but still has its overlay drawn. */
.fws-music-attribution-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fws-music-attribution-modal[hidden] { display: none; }
.fws-music-attribution-modal-inner {
  position: relative;
  max-width: min(640px, 92vw);
  max-height: 80vh;
  overflow: auto;
  padding: 36px 32px 32px;
  background: rgba(20,20,20,0.98);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: var(--light-mid);
}
.fws-music-attribution-modal-inner h3 {
  margin: 0 0 14px 0;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--white);
  letter-spacing: 0.05em;
}
.fws-music-attribution-body {
  font-size: 0.9rem;
  line-height: 1.55;
  word-break: break-word;
}
/* Common HTML elements inside the details body — admin-authored content,
   so we trust the markup but style it consistently with the rest of the
   modal. */
.fws-music-attribution-body p { margin: 0 0 0.6em 0; }
.fws-music-attribution-body p:last-child { margin-bottom: 0; }
.fws-music-attribution-body a {
  color: var(--gold);
  text-decoration: underline;
}
.fws-music-attribution-body a:hover { color: var(--white); }
.fws-music-attribution-body ul,
.fws-music-attribution-body ol { padding-left: 1.2em; margin: 0 0 0.6em 0; }
.fws-music-attribution-body li { margin: 0.2em 0; }
.fws-music-attribution-body em { font-style: italic; }
.fws-music-attribution-body strong { font-weight: 600; color: var(--white); }
.fws-music-attribution-body br + br { display: none; }   /* collapse stacked <br>s */
.fws-music-attribution-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: 0;
  color: var(--mid);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color var(--transition);
}
.fws-music-attribution-close:hover,
.fws-music-attribution-close:focus-visible { color: var(--white); outline: none; }

/* Controls overlay — hidden until hover */
.fws-controls {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
/* JS adds this class on mousemove; removes it after 2.5 s idle */
.fws-controls-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Top-right cluster: caption toggle + close */
.fws-top-right {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
}

/* Prev / next sit at the sides, vertically centred */
.fws-prev, .fws-next { flex-shrink: 0; }

/* Bottom-centre cluster: play, fullscreen, counter */
.fws-middle {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.fws-counter {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-sans);
  white-space: nowrap;
}

/* Button base */
.fws-btn {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--white);
  cursor: pointer;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
  backdrop-filter: blur(4px);
  padding: 0;
}
.fws-btn:hover {
  background: rgba(0,0,0,0.6);
  border-color: var(--gold);
}
.fws-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: block;
  stroke: var(--white);
  transition: stroke 0.2s ease;
}
.fws-btn:hover svg { stroke: var(--gold); }
.fws-playpause svg, .fws-fs svg, .fws-caption-toggle svg, .fws-close svg { width: 18px; height: 18px; }
.fws-prev svg, .fws-next svg { width: 26px; height: 26px; }
/* fill-based icons (play/pause) */
.fws-playpause svg { fill: var(--white); stroke: none; }
.fws-playpause:hover svg { fill: var(--gold); stroke: none; }
/* Active state for caption toggle — gold border when captions are on */
.fws-btn-active {
  border-color: var(--gold) !important;
}
.fws-btn-active svg { stroke: var(--gold) !important; }
/* Close button: slightly smaller, always visible hint */
.fws-close { width: 44px; height: 44px; }

/* ── glightbox theme overrides ───────────────────────────────────────────── */
.glightbox-clean .gslide-description { background: rgba(0,0,0,0.75) !important; }
.glightbox-clean .gdesc-inner { padding: 14px 20px !important; }
.glightbox-clean .gslide-title { display: none; }
.glightbox-clean .gslide-desc {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 1rem !important;
  color: var(--off-white) !important;
  margin: 0 !important;
}
.glightbox-clean .gnext, .glightbox-clean .gprev {
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 50% !important;
}
.glightbox-clean .gnext:hover, .glightbox-clean .gprev:hover {
  background: rgba(0,0,0,0.6) !important;
  border-color: var(--gold) !important;
}


/* ── Photo title caption (larger than regular caption) ────────────────────── */
.photo-caption-title {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--off-white);
  background: var(--off-black);
  padding: 8px 12px 4px;
  margin: 0;
}
.photo-caption-title + .photo-caption {
  padding-top: 2px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 48px 0 80px;
}
.page-btn {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 10px 28px;
  transition: all var(--transition);
  background: rgba(255,255,255,0.05);
}
.page-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,169,110,0.08); }
.page-info { font-size: 0.78rem; color: var(--light-mid); letter-spacing: 0.1em; }

/* ── Keyword browser (admin) ─────────────────────────────────────────────── */
.exif-folder-select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  padding: 8px 12px;
  border-radius: 2px;
  min-width: 320px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition);
}
.exif-folder-select:hover,
.exif-folder-select:focus { border-color: var(--gold); }
.exif-folder-select option {
  background: #1a1a1a;
  color: var(--white);
}

.keyword-list {
  max-height: 500px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 8px 0;
}
.keyword-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.keyword-row:last-child { border-bottom: none; }
.keyword-link {
  font-size: 0.8rem;
  color: var(--light-mid);
  transition: color var(--transition);
}
.keyword-link:hover { color: var(--gold); }
.keyword-count {
  font-size: 0.7rem;
  color: var(--mid);
  background: rgba(255,255,255,0.06);
  padding: 1px 7px;
  border-radius: 10px;
  flex-shrink: 0;
}

/* ── Gallery header admin actions ────────────────────────────────────────── */
.gallery-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}
.gallery-header-actions .view-switcher {
  margin-top: 0;
  align-self: auto;
}

.btn-admin-manage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: rgba(201,169,110,0.08);
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-admin-manage:hover {
  background: rgba(201,169,110,0.18);
}
/* ── Password Gate ───────────────────────────────────────────────────────── */
.password-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.password-gate-inner {
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.lock-icon {
  font-size: 3rem;
  margin-bottom: 24px;
}

.password-gate-inner h1 {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--white);
  margin-bottom: 12px;
}

.password-gate-inner p {
  color: var(--mid);
  margin-bottom: 32px;
}

.error-msg { color: #ff9999; margin-bottom: 16px !important; }

.share-link-notice {
  background: rgba(255, 200, 100, 0.08);
  border: 1px solid rgba(255, 200, 100, 0.25);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 0 0 20px !important;
  color: var(--light);
  font-size: 0.95rem;
  text-align: left;
}

.password-gate-inner input {
  width: 100%;
  padding: 14px 18px;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--white);
  font-size: 1rem;
  text-align: center;
  letter-spacing: 0.2em;
  margin-bottom: 16px;
  transition: border-color var(--transition);
}

.password-gate-inner input:focus {
  outline: none;
  border-color: var(--gold);
}

/* ── About Page ──────────────────────────────────────────────────────────── */
.about-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 40px 40px;
}

.about-text h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--white);
  margin-bottom: 32px;
  line-height: 1.1;
  text-align: center;
}

.about-text h2 {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--white);
  margin: 1.2em 0 0.5em;
}

.about-text h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--white);
  margin: 1em 0 0.4em;
}

.about-text p {
  color: var(--light-mid);
  margin-bottom: 20px;
  font-size: 1.05rem;
  line-height: 1.8;
}

.about-text a { color: var(--gold); }
.about-text a:hover { color: var(--gold-light); }

.about-text ul, .about-text ol {
  color: var(--light-mid);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 20px;
  padding-left: 1.5em;
}
.about-text li { margin-bottom: 6px; }

/* ── Editor content — shared styles for any div rendered from the Quill editor ── */
/* Applied via the editor-content class on about-text, gallery-desc, hp-feat-desc, etc. */
.editor-content img {
  border-radius: 4px;
  max-width: 100%;
  height: auto !important;  /* override inline height set by resize module so proportions
                               are maintained when width is constrained by the container */
}
.editor-content img[style*="float: left"],
.editor-content img[style*="float:left"]  { margin-right: 1.5em; margin-bottom: 0.75em; }
.editor-content img[style*="float: right"],
.editor-content img[style*="float:right"] { margin-left:  1.5em; margin-bottom: 0.75em; }

.editor-content table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.editor-content td {
  border: 1px solid rgba(255,255,255,0.12);
  padding: 14px 20px;
  vertical-align: top;
}

/* Image cells: shrink-wrap the column to the image's inline width (set by the
   resize module) so the pixel size chosen in the editor matches the public page.
   width:1% tells the browser "prefer minimum width" — it then expands the column
   to the image's intrinsic/inline width rather than auto-distributing table space.
   max-width:none lets the inline width be authoritative; the general max-width:100%
   on .editor-content img would otherwise create a circular dependency with the
   table's auto-layout and cause the column to collapse to near-zero. */
.editor-content td:has(img) {
  width: 1%;
}
.editor-content td:has(img) img {
  max-width: none;
  height: auto !important;
  display: block;
  border-radius: 4px;
}

/* Inline text size from the Quill "size" dropdown. Values match Quill's
   in-editor defaults so the public page renders exactly as the editor shows. */
.editor-content .ql-size-small { font-size: 0.75em; }
.editor-content .ql-size-large { font-size: 1.5em; }
.editor-content .ql-size-huge  { font-size: 2.5em; }

/* Font family from the Quill "font" dropdown. The default (no class) keeps
   the site sans body font; serif uses the site's design-token serif. */
.editor-content .ql-font-serif     { font-family: var(--font-serif); }
.editor-content .ql-font-monospace { font-family: 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace; }

/* Hyperlinks inside editor-produced content. The global `a` rule strips
   color and underline, so we need to re-establish a subtle treatment here
   to make embedded links discoverable inside scene descriptions, about
   pages, gallery intros, etc. */
.editor-content a {
  color: var(--link-blue);
  transition: color 0.2s ease;
}
.editor-content a:hover {
  color: var(--link-blue-hover);
}


/* ── Contact Page ────────────────────────────────────────────────────────── */
.contact-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 30px 40px 120px;
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  transition: border-color var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.form-group textarea { resize: vertical; min-height: 140px; }

/* File inputs — restyle the OS-rendered Choose-File button to match the
   site's gold-on-dark aesthetic (matches .btn-primary). The file input
   itself inherits .form-group input's dark background; we just add a
   little vertical padding tweak and a pointer cursor. */
.form-group input[type="file"] {
  padding: 10px 14px;
  cursor: pointer;
}
.form-group input[type="file"]::file-selector-button {
  padding: 8px 18px;
  margin-right: 14px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
}
.form-group input[type="file"]::file-selector-button:hover {
  background: var(--gold);
  color: var(--black);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  padding: 14px 36px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-primary:hover {
  background: var(--gold);
  color: var(--black);
}

.btn-secondary {
  display: inline-block;
  padding: 10px 24px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--light-mid);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-secondary:hover { border-color: var(--white); color: var(--white); }

/* Disabled state for .btn-secondary — the HTML `disabled` attribute alone
   gives no visual feedback (cursor stays pointer, opacity stays 1), so the
   button looks unchanged when JS sets disabled to communicate "scan in
   progress, click ignored." These rules add the missing affordance:
   greyed appearance, not-allowed cursor, no hover effect. */
.btn-secondary:disabled,
.btn-secondary[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-secondary:disabled:hover,
.btn-secondary[disabled]:hover {
  border-color: rgba(255,255,255,0.2);
  color: var(--light-mid);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid rgba(201,169,110,0.12);
  padding: 32px 40px;
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.footer-row-main {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-logo {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-decoration: none;
}
.footer-logo:hover { color: var(--gold-light); }

.footer-nav {
  display: flex;
  gap: 24px;
}

.footer-nav a {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  transition: color var(--transition);
}

.footer-nav a:hover { color: var(--white); }

.footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mid);
  transition: color var(--transition);
  line-height: 0;
}
.footer-social-link:hover { color: var(--white); }
.footer-social-link svg {
  width: 17px;
  height: 17px;
}

.footer-copy {
  font-size: 0.7rem;
  color: var(--light-mid);
  letter-spacing: 0.05em;
}

/* ── Platform attribution (Built with Dave's Gaze) ───────────────────────── */
.platform-attribution-line {
  margin: 8px 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /* Same hue as .footer-copy so the two lines visually belong together;
     opacity on the link below makes the attribution slightly less prominent
     than the copyright above it. */
  color: var(--light-mid);
}

.platform-attribution {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.platform-attribution:hover {
  opacity: 1;
  text-decoration: underline;
}

.platform-attribution-mark {
  height: 30px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.platform-attribution-name {
  font-style: italic;
}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.not-found {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}

.not-found h1 {
  font-family: var(--font-serif);
  font-size: 8rem;
  font-weight: 300;
  color: var(--dark-mid);
  line-height: 1;
}

.not-found p {
  color: var(--mid);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}

/* ── Empty State ─────────────────────────────────────────────────────────── */
.empty-state {
  padding: 80px 40px;
  text-align: center;
  color: var(--mid);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}

/* ── Galleries Page ──────────────────────────────────────────────────────── */
.galleries-page {
  padding: 40px 40px 80px;
  max-width: 1400px;
  margin: 0 auto;
}
.galleries-intro {
  margin-bottom: 40px;
}

.photo-count {
  display: flex;        /* block-level flex so height is reliably included in parent flow */
  align-items: center;
  gap: 10px;
  height: 1.5rem;       /* fixed height = badge height; keeps all card titles at same level */
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--mid);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

body.admin-page { background: #0f0f0f; }

.admin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-login-box {
  width: 100%;
  max-width: 380px;
  padding: 48px 40px;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--off-black);
}

.admin-logo {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--gold);
  letter-spacing: 0.12em;
  margin-bottom: 32px;
}

.admin-login-box h1 {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 32px;
}

.admin-back-link {
  display: block;
  margin-top: 24px;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--mid);
  text-align: center;
  transition: color var(--transition);
}

.admin-back-link:hover { color: var(--white); }

.admin-dashboard { padding: calc(var(--header-h) + 40px) 40px 80px; max-width: 1200px; margin: 0 auto; }

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.admin-header h1 {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--white);
}

.admin-breadcrumb {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
  display: inline;
}
.admin-breadcrumb-sep {
  font-size: 0.7rem;
  color: var(--mid);
  margin: 0 4px;
  display: inline;
}
.admin-breadcrumb-row {
  display: block;
  margin-bottom: 8px;
  line-height: 1.6;
}

.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.admin-card {
  padding: 32px;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--off-black);
  transition: border-color var(--transition);
  display: block;
}

.admin-card:hover { border-color: var(--gold); }

.admin-card-icon { font-size: 2rem; margin-bottom: 16px; }
.admin-card h2 { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 300; color: var(--white); }
.admin-card p { font-size: 0.75rem; color: var(--mid); margin-top: 8px; letter-spacing: 0.1em; }

.admin-section { padding: calc(var(--header-h) + 40px) 40px 80px; max-width: 1200px; margin: 0 auto; }

.admin-card-panel {
  background: var(--off-black);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 32px;
  margin-bottom: 24px;
}

/* High-visibility nag for the manage page when the admin broadens
   folderMode without rescanning. Amber-on-dark with a thick left bar
   so it pops out of the otherwise-monochrome admin layout. */
.rescan-needed-banner {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #2d240a;
  border: 1px solid #c9a23b;
  border-left: 6px solid #f0c649;
  border-radius: 4px;
  padding: 18px 22px;
  margin: 0 0 24px 0;
  box-shadow: 0 0 0 1px rgba(240, 198, 73, 0.15) inset;
}
.rescan-needed-banner-icon {
  font-size: 1.6rem;
  line-height: 1;
  color: #f0c649;
  flex-shrink: 0;
  padding-top: 2px;
}
.rescan-needed-banner-body strong {
  display: block;
  color: #f0c649;
  font-size: 0.95rem;
  margin-bottom: 6px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.rescan-needed-banner-body p {
  color: #e8d9a8;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}
.rescan-needed-banner-body a {
  color: #f0c649;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rescan-needed-banner-body a:hover {
  color: #ffe287;
}

.admin-card-panel h2 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--white);
  margin-bottom: 24px;
}

/* Scene panel — subtle gold-tinted border to distinguish from plain folders */
.admin-card-scene {
  border-color: rgba(201,169,110,0.22);
}

.admin-scene-value {
  font-size: 0.95rem;
  color: var(--white);
  margin: 0;
}

.admin-scene-desc {
  font-size: 0.85rem;
  color: var(--light-mid);
  line-height: 1.65;
  max-height: 120px;
  overflow: hidden;
  position: relative;
  /* Fade the bottom edge when content overflows */
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.admin-scene-path {
  display: block;
  font-size: 0.78rem;
  color: var(--mid);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 3px;
  padding: 8px 12px;
  word-break: break-all;
}

.admin-scene-format {
  font-size: 0.78rem;
  color: var(--mid);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 3px;
  padding: 10px 14px;
  margin: 6px 0 0;
  white-space: pre;
  overflow-x: auto;
  line-height: 1.6;
}

.admin-scene-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.admin-card-panel h2 small {
  font-size: 0.65rem;
  font-family: var(--font-sans);
  letter-spacing: 0.1em;
  color: var(--mid);
  margin-left: 12px;
}

/* Settings sub-card — collapsible details inside a settings form */
.settings-subcard {
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 12px 16px;
  margin: 0 0 20px;
}
.settings-subcard > summary {
  cursor: pointer;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--light-mid);
  list-style: none;
  user-select: none;
  padding: 2px 0;
  position: relative;
  padding-left: 18px;
}
.settings-subcard > summary::-webkit-details-marker { display: none; }
.settings-subcard > summary::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--mid);
  font-size: 0.75rem;
  transition: transform var(--transition);
}
.settings-subcard[open] > summary::before { transform: rotate(90deg); }
.settings-subcard > summary:hover { color: var(--gold); }
.settings-subcard > summary:hover::before { color: var(--gold); }

/* Settings form footer — separates Save button from form fields */
.settings-form-footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: flex-end;
}

/* Invalidate-shares form — sub-action below Security Save */
.invalidate-shares-form {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed rgba(255,255,255,0.08);
}

/* Upload */
.upload-form { display: flex; flex-direction: column; gap: 12px; }

.file-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px;
  border: 2px dashed rgba(255,255,255,0.12);
  cursor: pointer;
  transition: border-color var(--transition);
  color: var(--mid);
}

.file-drop-zone:hover { border-color: var(--gold); color: var(--gold); }
.file-drop-zone span { font-size: 0.9rem; }
.file-drop-zone small { font-size: 0.7rem; letter-spacing: 0.1em; }
/* Only hide native file inputs inside a styled drop zone — bare file
   inputs in ordinary forms must remain visible and clickable. */
.file-drop-zone input[type="file"] { display: none; }

/* Admin photo grid */
.admin-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.admin-photo-item {
  position: relative;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.05);
  cursor: grab;
  user-select: none;
}

.admin-photo-item.dragging { opacity: 0.4; }
.admin-photo-item.drag-over { border-color: var(--gold); }

.admin-photo-item.is-cover {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.admin-photo-cover-badge {
  display: none;
  position: absolute;
  top: 6px; left: 6px;
  background: var(--gold);
  color: var(--black);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  pointer-events: none;
}
.admin-photo-item.is-cover .admin-photo-cover-badge { display: block; }

.admin-photo-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.btn-secondary-sm {
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--light-mid);
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn-secondary-sm:hover,
.admin-photo-item.is-cover .btn-secondary-sm {
  border-color: var(--gold);
  color: var(--gold);
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--light-mid);
  margin-bottom: 8px;
  cursor: pointer;
}
.radio-label input[type="radio"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
}

.admin-photo-name {
  font-size: 0.7rem;
  color: var(--mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
}

.admin-hint {
  font-size: 0.8rem;
  color: var(--mid);
  margin: -8px 0 16px;
}

.admin-photo-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  pointer-events: none;
}

.admin-photo-controls {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.caption-input {
  width: 100%;
  padding: 6px 10px;
  background: var(--dark-mid);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--white);
  font-size: 0.75rem;
  font-family: var(--font-sans);
  transition: border-color var(--transition);
}

.caption-input:focus { outline: none; border-color: var(--gold); }

.btn-danger {
  display: inline-block;
  padding: 10px 24px;
  background: transparent;
  border: 1px solid rgba(200,60,60,0.5);
  color: rgba(220,80,80,0.9);
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-danger:hover { background: rgba(200,60,60,0.12); border-color: rgba(220,80,80,0.9); color: #e05050; }

.btn-danger-sm {
  padding: 5px 10px;
  background: transparent;
  border: 1px solid rgba(200,60,60,0.3);
  color: rgba(200,60,60,0.8);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-sans);
}

.btn-danger-sm:hover { background: rgba(200,60,60,0.15); border-color: rgba(200,60,60,0.8); }

/* ── Gallery type-conversion dialog ─────────────────────────────────────── */
.gallery-convert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-convert-modal {
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 28px 32px;
  max-width: 440px;
  width: 90%;
}
.gallery-convert-modal h3 {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--white);
  margin-bottom: 12px;
}
.gallery-convert-modal p {
  font-size: 0.85rem;
  color: var(--light-mid);
  line-height: 1.65;
  margin-bottom: 24px;
}
.gallery-convert-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Gallery admin list */
.admin-gallery-list { display: flex; flex-direction: column; gap: 2px; }

.admin-gallery-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.04);
}

.admin-gallery-thumb {
  width: 80px;
  height: 60px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--dark-mid);
}

.admin-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.no-thumb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: var(--mid); }

.admin-gallery-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-gallery-info strong { color: var(--white); font-weight: 400; }
.admin-gallery-info span { font-size: 0.7rem; color: var(--mid); letter-spacing: 0.05em; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  border-radius: 2px;
  text-transform: uppercase;
}

.badge-lock { background: rgba(201,169,110,0.15); color: var(--gold); border: 1px solid rgba(201,169,110,0.3); }

.admin-gallery-actions { display: flex; gap: 8px; }

.gallery-settings-panel {
  padding: 24px;
  background: var(--dark-mid);
  border: 1px solid rgba(201,169,110,0.15);
  border-top: none;
  margin-bottom: 2px;
}

.inline-form { display: flex; gap: 12px; }
.inline-form input {
  flex: 1;
  padding: 10px 14px;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--white);
  font-size: 0.85rem;
  transition: border-color var(--transition);
}

.inline-form input:focus { outline: none; border-color: var(--gold); }

.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.form-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold); }
.form-check label {
  font-size: 0.8rem;
  color: var(--light-mid);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0;
}

.empty-msg { color: var(--mid); font-size: 0.85rem; letter-spacing: 0.05em; }

/* Login/Logout nav link is mobile-only; on desktop the bottom-right ghost  */
/* button handles auth. The mobile-visible rules live in the                */
/* @media (max-width: 900px) block below.                                    */
.main-nav a.nav-auth { display: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hp-photo-caption { display: none; }
  .contact-form .form-row { grid-template-columns: 1fr; }
  .photo-strip { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (max-width: 900px) {
  .header-inner { padding: 0 20px; }

  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: rgba(10,10,10,0.98);
    flex-direction: column;
    padding: 32px 20px;
    gap: 24px;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition);
    z-index: 99;
  }

  .main-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .nav-toggle { display: flex; }

  /* Show Login/Logout at the bottom of the hamburger menu, and hide the    */
  /* fixed bottom-right ghost button so it can't overlap slideshow controls */
  .main-nav a.nav-auth {
    display: block;
    margin-top: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.12);
    color: var(--mid);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .main-nav a.nav-auth:hover { color: var(--white); }

  /* Home-slideshow link: in the hamburger menu it's the mobile-twin
     text link (".nav-home-slideshow-mobile") with the unambiguous
     "Home slideshow" label. The desktop square button hides here. */
  .nav-home-slideshow { display: none; }
  .main-nav a.nav-home-slideshow-mobile {
    display: block;
    color: var(--mid);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .main-nav a.nav-home-slideshow-mobile:hover { color: var(--white); }

  .featured-galleries { padding: 60px 20px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid-large { grid-template-columns: 1fr; }
  .page-hero { padding: calc(var(--header-h) + 30px) 20px 20px; }
  .gallery-page-header { padding: calc(var(--header-h) + 24px) 20px 20px; }
  .galleries-page { padding: 32px 20px 60px; }
  .sub-galleries { padding: 0 20px; }
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .photo-strip { grid-template-columns: 1fr; }
  .section-header { padding: 0 20px; }
  .about-page, .contact-page { padding: 40px 20px 80px; }
  .admin-section, .admin-dashboard { padding: calc(var(--header-h) + 24px) 20px 60px; }
  .admin-photo-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .admin-gallery-row { flex-wrap: wrap; }
  .admin-gallery-actions { width: 100%; }
}


/* ── Child display toggle button ────────────────────────────────────────── */
.child-display-toggle-form {
  display: inline-flex;
}
.btn-child-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-child-display svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.btn-child-display:hover {
  border-color: rgba(255,255,255,0.4);
  color: var(--white);
  background: rgba(255,255,255,0.08);
}
/* ── Ghost sign-in button (bottom-right, appears on hover) ──────────────── */
/* Resting: nearly invisible. Hover: clearly visible. Fully passive UX.    */
.signin-ghost {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid transparent;
  color: transparent;
  background: transparent;
  opacity: 1;
  transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease;
  z-index: 9999;
  text-decoration: none;
  cursor: pointer;
}
.signin-ghost svg {
  width: 36px;
  height: 36px;
}
.signin-ghost:hover {
  color: rgba(255,255,255,0.7);
  border-color: rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.45);
}

/* On narrow screens the ghost button is hidden — Login/Logout lives in the
   hamburger menu (.main-nav a.nav-auth) instead. This block must come AFTER
   the .signin-ghost defaults above so source order beats the default
   display:flex. */
@media (max-width: 900px) {
  .signin-ghost,
  .signout-ghost { display: none !important; }
}

/* ── Video thumbnails in gallery grid ───────────────────────────────────── */
.video-thumb-link {
  position: relative;
  display: block;
  overflow: hidden;
}
.video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16/9;
  background: #000;
}
.video-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16/9;
}
.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.25);
  transition: background var(--transition);
}
.video-play-overlay svg {
  width: 48px;
  height: 48px;
  color: rgba(255,255,255,0.85);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.video-thumb-link:hover .video-play-overlay {
  background: rgba(0,0,0,0.4);
}

/* ── Video in fullscreen slideshow ──────────────────────────────────────── */
.fws-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  z-index: 1;
}

/* ── Ratings browser (admin) ─────────────────────────────────────────────── */
.ratings-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rating-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px;
}
.rating-stars {
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--gold);
  flex-shrink: 0;
  min-width: 90px;
}
.rating-count {
  font-size: 0.75rem;
  color: var(--mid);
  flex: 1;
}
.rating-links {
  display: flex;
  gap: 12px;
}
.rating-links .keyword-link {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Homepage featured panels ────────────────────────────────────────────── */
.hp-featured-panel {
  display: flex;
  align-items: stretch;
  cursor: pointer;
  overflow: hidden;
  /* Reserve space at the top so the photo (and text column) start below
     the fixed header instead of slipping under it. Without this, portrait
     photos on this panel get clipped at the top by the header strip —
     most noticeable in the narrow/single-column layout where the media
     area is on top of the text. Same approach used on `.hp-galleries-panel`
     (see earlier in this file). Splash panel intentionally skips this
     so its photo can bleed full-bleed under the transparent header. */
  padding-top: var(--header-h);
  box-sizing: border-box;
}
/* left side = media left, text right */
.hp-featured-left  { flex-direction: row; }
/* right side = text left, media right */
.hp-featured-right { flex-direction: row-reverse; }

.hp-feat-media {
  position: relative;
  flex: 0 0 60%;
  overflow: hidden;
  background: #000;
  display: flex;
  flex-direction: column;
}
.hp-feat-slideshow {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.hp-feat-text {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(32px, 5vw, 80px);
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(2px);
}

/* Main content block: fills remaining space and centers its children */
.hp-feat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Title row: gallery name on left, "N of M" counter on right */
.hp-feat-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.hp-feat-counter {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  padding-top: 0.45em; /* optical alignment with title cap-height */
  flex-shrink: 0;
}

/* Footer: copyright + optional attribution, pinned to bottom of text panel */
.hp-feat-footer {
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 0;
}
.hp-feat-copyright {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.05em;
  margin: 0;
}
.hp-feat-attribution {
  color: inherit;
  opacity: 0.8;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.hp-feat-attribution:hover { opacity: 1; text-decoration: underline; }

/* Mini slideshow layers — position relative, fills flex parent */
.hp-feat-layer {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
  transition: opacity 1s ease;
}
.hp-feat-b { opacity: 0; }
.hp-feat-b.visible { opacity: 1; }

/* Mini slideshow controls */
/* hp-feat-below-media removed — mute button moved into hp-feat-actions */
.hp-feat-actions {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.hp-feat-mute {
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
  margin-bottom: 0px;
}
.hp-feat-mute:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
.hp-feat-mute svg  { width: 18px; height: 18px; }

.hp-feat-view-all {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
  white-space: nowrap;
  flex: 1;
}
.hp-feat-view-all svg { width: 13px; height: 13px; }
.hp-feat-view-all:hover { color: #fff; }

.hp-feat-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
}

/* Text side */
.hp-feat-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 0; /* margin now on .hp-feat-title-row */
}
.hp-feat-desc {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--light-mid);
  margin-bottom: 32px;
  max-width: 50ch;
  max-height: 220px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.hp-feat-desc p {
  margin: 0 0 0.8em;
  word-break: break-word;
}
.hp-feat-desc p:last-child { margin-bottom: 0; }
.hp-feat-explore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold-dark);
  padding-bottom: 4px;
  transition: all var(--transition);
}
.hp-feat-explore svg { width: 14px; height: 14px; }
.hp-feat-explore:hover { color: var(--gold-light); border-color: var(--gold); }

/* Mobile: stack vertically */
/* Narrow viewports: stack media above text instead of the 60/40 side-by-side.
   Threshold is slightly higher than the scene view's 1000px because this
   layout gives the text column only 40% of the panel width (vs ~38% in scene)
   and uses heavier horizontal padding, so it cramps sooner. */
@media (max-width: 1100px) {
  .hp-featured-panel,
  .hp-featured-panel.hp-featured-right { flex-direction: column; }
  .hp-feat-media { flex: 0 0 55vh; }
  .hp-feat-text  { flex: 1; padding: 28px 24px; }
  /* Drop the 50ch readability cap in single-column mode — the description
     should fill the column under the full-width video above it, not sit
     orphaned at 50 characters wide. The cap is a 2-column-only constraint
     (where the text column is naturally wide on big monitors). */
  .hp-feat-desc  { max-width: none; }
}

/* ── Keyword search-as-you-type picker ───────────────────────────────────── */
.keyword-picker {
  position: relative;
}
.kw-search {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  padding: 7px 12px;
  border-radius: 2px;
  outline: none;
  transition: border-color var(--transition);
}
.kw-search:focus { border-color: var(--gold); }
.kw-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  background: #1c1c1c;
  border: 1px solid rgba(255,255,255,0.12);
  max-height: 220px;
  overflow-y: auto;
  z-index: 100;
  border-radius: 0 0 2px 2px;
}
.kw-option {
  padding: 7px 12px;
  font-size: 0.8rem;
  color: var(--light-mid);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.kw-option:hover { background: rgba(255,255,255,0.07); color: var(--white); }
.kw-none { color: var(--mid); cursor: default; }
.kw-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  min-height: 8px;
}
.kw-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(201,169,110,0.15);
  border: 1px solid var(--gold-dark);
  color: var(--gold-light);
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 2px;
}
.kw-remove {
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0 0 2px;
  opacity: 0.7;
}
.kw-remove:hover { opacity: 1; }

/* ── Library folder picker (gallery anchor input) ───────────────────────── */
.folder-picker-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  background: #1c1c1c;
  border: 1px solid rgba(255,255,255,0.12);
  max-height: 220px;
  overflow-y: auto;
  z-index: 100;
  border-radius: 0 0 2px 2px;
}
.folder-picker-option {
  padding: 7px 12px;
  font-size: 0.8rem;
  color: var(--light-mid);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.folder-picker-option:hover { background: rgba(255,255,255,0.07); color: var(--white); }
.folder-picker-slug {
  font-size: 0.72rem;
  color: var(--mid);
  font-family: var(--font-mono, monospace);
}

/* ── Read-only field display (scene folder title/description) ────────────── */
.admin-readonly-field {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2px;
  padding: 8px 12px;
  color: var(--light-mid);
  font-size: 0.88rem;
  line-height: 1.5;
  min-height: 36px;
}
.admin-readonly-desc {
  min-height: 60px;
  line-height: 1.65;
}
.admin-readonly-desc p { margin: 0 0 0.5em; }
.admin-readonly-desc p:last-child { margin-bottom: 0; }

/* ── Gallery type tabs (Manage Gallery page) ─────────────────────────────── */
.gallery-type-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 24px;
  gap: 2px;
}
.gallery-type-tab {
  padding: 10px 22px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--mid);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.gallery-type-tab:hover { color: var(--light); }
.gallery-type-tab.active { color: var(--white); border-bottom-color: var(--gold); }

/* ── Inline info note (folder-anchored tab) ──────────────────────────────── */
.admin-info-note {
  background: var(--dark-mid);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--light-mid);
  line-height: 1.5;
  margin-bottom: 20px;
}
.admin-info-note a { color: var(--link-blue); text-decoration: none; }
.admin-info-note a:hover { color: var(--link-blue-hover); }

/* ── Cover photo note panel (folder-anchored tab) ────────────────────────── */
.folder-section-note {
  padding: 4px 0 8px;
  color: var(--mid);
  font-size: 0.9rem;
  line-height: 1.7;
}
.folder-section-note a { color: var(--link-blue); text-decoration: none; margin-left: 4px; }
.folder-section-note a:hover { color: var(--link-blue-hover); }

/* ── Featured gallery entry in admin ────────────────────────────────────── */
.featured-entry {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  margin-bottom: 10px;
}
.featured-entry-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.featured-entry-summary::-webkit-details-marker { display: none; }
.featured-entry-title {
  font-size: 0.85rem;
  color: var(--white);
  flex: 1;
  text-align: left;
  margin-right: 12px;
}
.featured-entry-body {
  padding: 0 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Featured badge ──────────────────────────────────────────────────────── */
.badge-featured {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-dark);
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
}

/* ── Admin gallery manage: video thumbnail placeholder ───────────────────── */
.admin-video-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--mid);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Slideshow video progress bar ───────────────────────────────────────── */
.fws-video-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.12);
  z-index: 20;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
/* Show when controls are visible (i.e. cursor is over the slideshow) */
.fws-controls-visible ~ .fws-video-progress,
.fullwin-slideshow:hover .fws-video-progress {
  opacity: 1;
}
.fws-video-progress-bar {
  height: 100%;
  width: 0%;
  background: rgba(255,255,255,0.75);
  transition: width 0.25s linear;
}

/* ── Print icon on photo grid cards ─────────────────────────────────────── */
/* print button moved to .photo-card-btns */

/* ── Print order page ────────────────────────────────────────────────────── */
.print-page {
  min-height: 80vh;
  padding: 80px clamp(20px, 5vw, 80px);
}
.print-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
.print-photo-wrap {
  position: sticky;
  top: 100px;
}
.print-photo {
  width: 100%;
  display: block;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.print-breadcrumb {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 24px;
}
.print-breadcrumb a { color: var(--mid); }
.print-breadcrumb a:hover { color: var(--white); }
.print-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 300;
  color: var(--white);
  margin-bottom: 12px;
}
.print-caption {
  font-size: 0.9rem;
  color: var(--light-mid);
  margin-bottom: 40px;
  font-style: italic;
}
.print-coming-soon {
  border: 1px solid rgba(255,255,255,0.1);
  padding: 40px;
  border-radius: 2px;
}
.print-coming-icon {
  color: var(--gold);
  margin-bottom: 20px;
}
.print-coming-soon h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--white);
  margin-bottom: 16px;
}
.print-coming-soon p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--light-mid);
  margin-bottom: 14px;
}
.print-coming-soon a { color: var(--gold); }
.print-meta {
  margin-top: 24px;
  font-size: 0.72rem;
  color: var(--mid);
  letter-spacing: 0.08em;
}
@media (max-width: 768px) {
  .print-hero { grid-template-columns: 1fr; gap: 32px; }
  .print-photo-wrap { position: static; }
}

/* ── Photo card button group (ⓘ + print) ────────────────────────────────── */
.photo-card-btns {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.photo-strip-item-wrap:hover .photo-card-btns {
  opacity: 1;
  pointer-events: auto;
}
.photo-print-btn {
  width: 30px;
  height: 30px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  backdrop-filter: blur(4px);
  transition: border-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
  flex-shrink: 0;
}
.photo-print-btn svg { width: 14px; height: 14px; }
.photo-print-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ── Scene card link (photo card when hasScene=true) ───────────────────────── */
/* The entire card is the link — no separate scene button needed. */
.scene-card-link { cursor: pointer; }

/* ── Lightbox caption bar: make room for icons on same line ─────────────── */
.gdesc-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
/* Caption text takes all available space */
.gslide-desc {
  flex: 1;
  min-width: 0;
}
/* Icon row sits right-aligned on caption line */
.glb-icon-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.glb-overlay-btn {
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.75);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  text-decoration: none;
  flex-shrink: 0;
  padding: 0;
}
.glb-overlay-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201,169,110,0.12);
}
/* Floating icon host for uncaptioned slides — sits absolutely over the
   slide so we don't disturb GLightbox's flex layout for .ginner-container.
   Right-justified so it doesn't visually compete with the close (top-right)
   or arrow (mid-edges) controls but stays well clear of them. */
.glb-icon-floating {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 10;
  pointer-events: auto;
}

/* ── Ghost login/logout tooltip ─────────────────────────────────────────── */
.signin-ghost[data-tooltip]::after,
.signout-ghost[data-tooltip]::after {
  content: attr(data-tooltip);
  position: fixed;
  bottom: 116px;
  right: 28px;
  background: rgba(0,0,0,0.75);
  color: rgba(255,255,255,0.9);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  transition-delay: 0s;
}
.signin-ghost[data-tooltip]:hover::after,
.signout-ghost[data-tooltip]:hover::after {
  opacity: 1;
  transition-delay: 1s;
}

/* ── Gallery description text formatting ────────────────────────────────── */
.gallery-description-text {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.gallery-description-text p {
  margin: 0 0 1em;
  line-height: 1.7;
  font-size: 0.9rem;
}
.gallery-description-text p:last-child { margin-bottom: 0; }

/* ── Two-section photo order UI ─────────────────────────────────────────── */
.order-sections {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.order-section {
  padding: 16px 0;
  width: 100%;
  box-sizing: border-box;
}
.order-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.order-section-label {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--light-mid);
}
.order-section-count {
  font-size: 0.72rem;
  color: var(--mid);
}
.order-section-pinned {
  background: rgba(201,169,110,0.04);
  border-radius: 4px;
  padding: 16px;
  min-height: 100px;
  border: 1px solid rgba(201,169,110,0.15);
  width: 100%;
  box-sizing: border-box;
}
.order-section-date {
  padding: 16px 0;
}
.order-drop-hint {
  font-size: 0.8rem;
  color: var(--mid);
  font-style: italic;
  padding: 20px;
  text-align: center;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 4px;
}
.order-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: var(--mid);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.order-divider::before,
.order-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}
.order-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
.order-item {
  cursor: grab;
}
.order-item.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* ── Sub-folder cover cards ─────────────────────────────────────────────── */
.order-section-subfolders {
  background: rgba(120, 160, 200, 0.04);
  border-radius: 4px;
  padding: 16px;
  border: 1px solid rgba(120, 160, 200, 0.18);
  width: 100%;
  box-sizing: border-box;
  margin-top: 16px;
}
.subfolder-cover-card {
  cursor: default;
  position: relative;
}
.subfolder-cover-label {
  font-size: 0.7rem;
  color: var(--light-mid);
  padding: 4px 6px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Photo order promote/demote buttons ─────────────────────────────────── */
/* admin-photo-controls: filename on top, then cover+arrow on same row below */
.admin-photo-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-photo-controls .admin-photo-name {
  font-size: 0.65rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-photo-controls-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}
.admin-photo-controls-row .cover-form {
  flex: 1;
}
.order-promote-btn,
.order-demote-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.4);
  color: rgba(255,255,255,0.7);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.order-promote-btn svg, .order-demote-btn svg { width: 16px; height: 16px; }
.order-promote-btn { border-color: rgba(201,169,110,0.5); color: var(--gold); }
.order-promote-btn:hover { background: rgba(201,169,110,0.2); border-color: var(--gold); }
.order-demote-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); color: var(--white); }

/* ── Auto-linked URLs in gallery/featured descriptions ──────────────────── */
.desc-link {
  color: var(--link-blue);
  text-decoration: underline;
  word-break: break-all;
  transition: color 0.15s;
}
.desc-link:hover { color: var(--link-blue-hover); }

/* ── Rich-text description content (Quill output: lists, links, etc.) ───── */
/* Applies to folder descriptions, curated gallery descriptions, and home
   featured-panel descriptions so bullets/numbers render and links are blue. */
.gallery-desc ul,
.gallery-description-text ul,
.hp-feat-desc ul {
  list-style: disc outside;
  padding-left: 1.5em;
  margin: 0 0 1em;
}
.gallery-desc ol,
.gallery-description-text ol,
.hp-feat-desc ol {
  list-style: decimal outside;
  padding-left: 1.5em;
  margin: 0 0 1em;
}
.gallery-desc li,
.gallery-description-text li,
.hp-feat-desc li {
  margin: 0 0 0.3em;
}
.gallery-desc a,
.gallery-description-text a,
.hp-feat-desc a {
  color: var(--link-blue);
  text-decoration: underline;
  word-break: break-word;
  transition: color 0.15s;
}
.gallery-desc a:hover,
.gallery-description-text a:hover,
.hp-feat-desc a:hover {
  color: var(--link-blue-hover);
}

/* ── Admin dashboard stats ───────────────────────────────────────────────── */
.admin-stats-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.admin-stat {
  background: var(--off-black);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.admin-stat-value {
  font-size: 2rem;
  font-weight: 300;
  color: var(--white);
  line-height: 1;
  font-family: var(--font-serif);
}
.admin-stat-label {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
}
.admin-stat-scan-time {
  font-size: 1.1rem;
  font-family: var(--font-sans);
}

/* Arrow button right-justified when no cover form (gallery-order page) */
.admin-photo-controls-row:not(:has(.cover-form)) {
  justify-content: flex-end;
}

/* ── Slideshow volume control ────────────────────────────────────────────── */
.fws-volume {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fws-vol-btn {
  flex-shrink: 0;
}
.fws-vol-btn svg {
  width: 18px;
  height: 18px;
}
.fws-vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.3);
  outline: none;
  cursor: pointer;
  transition: background 0.2s;
}
.fws-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}
.fws-vol-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  border: none;
}
.fws-vol-slider:hover {
  background: rgba(255,255,255,0.5);
}

/* ── Gallery manage board ─────────────────────────────────────────────────── */
#gallery-board {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.gm-section-col {
  width: 100%;
  background: var(--off-black);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px;
  min-height: 60px;
}
.gm-section-col-flat {
  width: 100%;
}
.gm-section-col-other {
  border-style: dashed;
  opacity: 0.85;
}
.gm-section-col-header {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 600;
}
.gm-section-col-title { color: var(--gold); }
.gm-gallery-list {
  padding: 8px;
  min-height: 60px;
}
.gm-gallery-list.drag-over {
  background: rgba(255,255,255,0.04);
  outline: 2px dashed var(--gold-dark);
  outline-offset: -2px;
  border-radius: 3px;
}
.drag-indicator {
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin: 3px 0;
  pointer-events: none;
}
.featured-drag-handle {
  cursor: grab;
  color: var(--mid);
  font-size: 1rem;
  margin-right: 6px;
  user-select: none;
  flex-shrink: 0;
}
.featured-drag-handle:active { cursor: grabbing; }
.featured-entry.dragging { opacity: 0.4; }

/* ── Sections editor rows ────────────────────────────────────────────────── */
#sections-list { display: flex; flex-direction: column; gap: 8px; }
.gm-sec-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 8px 12px;
}
.gm-sec-handle {
  cursor: grab;
  color: var(--mid);
  font-size: 1rem;
  user-select: none;
  flex-shrink: 0;
  padding: 0 4px;
}
.gm-sec-handle:active { cursor: grabbing; }
.gm-sec-row.dragging { opacity: 0.4; }
.gm-sec-fields { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; }
.gm-sec-title {
  flex: 0 0 200px;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  padding: 7px 10px;
  border-radius: 3px;
  font-size: 0.85rem;
}
.gm-sec-desc {
  flex: 1 1 260px;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  padding: 7px 10px;
  border-radius: 3px;
  font-size: 0.85rem;
}
.gm-sec-title:focus, .gm-sec-desc:focus {
  outline: none;
  border-color: rgba(255,255,255,0.35);
}

/* ── Gallery section on listing page ─────────────────────────────────────── */
.gallery-section { margin-bottom: 56px; }
.gallery-section-header { margin-bottom: 20px; }
.gallery-section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 300;
  color: var(--white);
  margin: 0 0 8px;
  letter-spacing: 0.06em;
}
.gallery-section-desc {
  font-size: 0.85rem;
  color: var(--mid);
  margin: 0;
  letter-spacing: 0.04em;
}

/* ── Manage galleries compact row ────────────────────────────────────────── */
.gm-gallery-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--off-black);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px;
  margin-bottom: 4px;
  cursor: default;
}
.gm-gallery-row-title {
  flex: 1;
  font-size: 0.85rem;
  color: var(--white);
  text-align: left;
}
.gm-section-select {
  font-size: 0.72rem;
  padding: 3px 6px;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--mid);
  border-radius: 3px;
  max-width: 130px;
}

/* ── Share button (photo card) ─────────────────────────────────────────────── */
.photo-share-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
  padding: 0;
}
.photo-share-btn svg { width: 16px; height: 16px; }
.photo-share-btn:hover { border-color: var(--gold); color: var(--gold); }
.photo-share-btn:hover svg { stroke: var(--gold); }

/* ── Folder share button (gallery header) ──────────────────────────────────── */
.btn-folder-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--white);
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
  margin-left: auto;
}
.btn-folder-share:hover { border-color: var(--gold); color: var(--gold); }
.btn-folder-share svg { stroke: currentColor; }

/* ── Share modal ───────────────────────────────────────────────────────────── */
.share-modal {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-modal[hidden] { display: none; }
.share-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}
.share-modal-box {
  position: relative;
  background: var(--bg, #181818);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 24px;
  width: min(480px, 90vw);
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.share-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: var(--mid);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.share-modal-close:hover { color: var(--white); }
.share-modal-title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--white);
}
.share-modal-note {
  margin: 0 0 18px;
  color: var(--mid);
  font-size: 0.88rem;
}
.share-modal-body { display: flex; flex-direction: column; gap: 14px; }
.share-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}
.share-modal-actions:empty { display: none; }
.share-loading { color: var(--mid); font-size: 0.9rem; padding: 8px 0; }
.share-error   { color: #ff9999; font-size: 0.9rem; }

.share-url-row { display: flex; flex-direction: column; gap: 4px; }
.share-url-label {
  color: var(--mid);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.share-url-input-wrap {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.share-url-input {
  flex: 1;
  padding: 10px 12px;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  min-width: 0;
}
.share-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.share-copy-btn:hover { border-color: var(--gold); color: var(--gold); }
.share-copy-btn.share-copied { border-color: #6dc66d; color: #6dc66d; }
body.share-modal-open { overflow: hidden; }

/* ── Share preview downloads (GIF / MP4) ─────────────────────────────────
   Rendered inside .share-modal-body underneath the URL rows. Same border-
   top separator as a copy-button row would have, so it visually reads as
   a sibling section to the link-sharing options. */
.share-preview-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.share-preview-warning {
    margin: 0 0 2px;
    padding: 8px 10px;
    color: #f0c060;
    background: rgba(240, 192, 96, 0.08);
    border: 1px solid rgba(240, 192, 96, 0.25);
    border-radius: 4px;
    font-size: 0.82rem;
    line-height: 1.4;
}
.share-preview-label {
    color: var(--mid);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.share-preview-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.share-preview-btn {
    flex: 1 1 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    font-size: 0.88rem;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.share-preview-btn:disabled {
    opacity: 0.55;
    cursor: progress;
}

/* ── Database merge-preview page ─────────────────────────────────────────── */
.merge-counts {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 8px 0 4px;
    flex-wrap: wrap;
}
.merge-count-block {
    flex: 1 1 140px;
    min-width: 140px;
    background: var(--off-black);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: 14px 18px;
    text-align: center;
}
.merge-count-label {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 6px;
}
.merge-count-value {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--white);
    line-height: 1;
}
.merge-count-sub {
    font-size: 0.7rem;
    color: var(--mid);
    margin-top: 4px;
}
.merge-count-arrow {
    font-size: 1.6rem;
    color: var(--gold);
    align-self: center;
    flex: 0 0 auto;
}
.merge-effects-list {
    list-style: none;
    padding: 0;
    margin: 0 0 4px;
    color: var(--light-mid);
    font-size: 0.9rem;
    line-height: 1.6;
}
.merge-effects-list li { padding: 2px 0; }
.merge-effects-list strong { color: var(--white); display: inline-block; min-width: 4ch; text-align: right; margin-right: 6px; }
.merge-scan-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 0.82rem;
}
.merge-scan-table th, .merge-scan-table td {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-align: left;
}
.merge-scan-table th {
    color: var(--mid);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.merge-scan-table td code { color: var(--light-mid); font-size: 0.78rem; }
.merge-confirm-actions { margin-top: 22px; }

/* ── Admin diagnostics page ──────────────────────────────────────────────── */
.diag-section {
  background: var(--off-black);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 20px;
}
.diag-section-warn {
  border-color: rgba(255, 180, 0, 0.35);
}
.diag-section-title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.diag-badge-warn {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  background: rgba(255, 180, 0, 0.15);
  color: #ffb400;
  border: 1px solid rgba(255, 180, 0, 0.35);
  border-radius: 3px;
  padding: 2px 7px;
  text-transform: none;
}
.diag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-bottom: 4px;
}
.diag-table tr + tr td { border-top: 1px solid rgba(255,255,255,0.05); }
.diag-table td {
  padding: 7px 0;
  vertical-align: top;
}
.diag-table td:first-child {
  color: var(--mid);
  width: 160px;
  padding-right: 16px;
  white-space: nowrap;
}
.diag-table td:last-child {
  text-align: right;
}
.diag-note {
  color: var(--mid);
  font-size: 0.78rem;
}
.diag-mono {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  word-break: break-all;
}
.diag-value-warn {
  color: #ffb400;
}
.diag-actions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.diag-log-wrap {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
}
.diag-log-label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.diag-log {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--light-mid);
  padding: 10px 12px;
  margin: 0;
  max-height: 340px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.admin-flash {
  padding: 10px 16px;
  border-radius: 5px;
  margin-bottom: 16px;
  font-size: 0.88rem;
}
.admin-flash-success {
  background: rgba(60, 180, 90, 0.15);
  border: 1px solid rgba(60, 180, 90, 0.3);
  color: #6ddb8a;
}
.admin-flash-error {
  background: rgba(220, 60, 60, 0.15);
  border: 1px solid rgba(220, 60, 60, 0.3);
  color: #f08080;
}

/* ── Admin social links grid ─────────────────────────────────────────────── */
.social-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}
@media (max-width: 700px) {
  .social-links-grid { grid-template-columns: 1fr; }
}
.social-link-row { margin-bottom: 14px; }
.social-link-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--mid);
  margin-bottom: 6px;
  font-weight: 400;
}
.social-link-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--mid);
}
.diag-restart-status {
  font-size: 0.85rem;
  padding: 8px 12px;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--light-mid);
}
.diag-restart-status.diag-restart-ok {
  background: rgba(60, 180, 90, 0.12);
  border-color: rgba(60, 180, 90, 0.3);
  color: #6ddb8a;
}
.diag-restart-status.diag-restart-error {
  background: rgba(220, 60, 60, 0.12);
  border-color: rgba(220, 60, 60, 0.3);
  color: #f08080;
}