/* 🎨 Shared CSS (use for all the above icons) */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-svg {
  width: 22px;          /* icon size — adjust as needed */
  height: 22px;
  transition:
    transform 0.2s ease,
    filter 0.2s ease;   /* smooth hover animation */
}

/* Always-on subtle glow (helps black icons read on dark bg) */
.icon .icon-svg,
.icon .icon-img {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.65));
}

/* PNG icon variant (used with srcset for sharpness) */
.icon-img {
  width: 22px;
  height: 22px;
  display: block;
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.icon:hover .icon-svg,
.icon:hover .icon-img {
  /* --- WHITE GLOW EFFECT --- */
  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.55));
  /* Adjust glow:
     - Last number (0.8) = brightness (0.0–1.0)
     - Middle number (6px) = glow size/spread
     - First two numbers (0 0) = glow offset (keep at 0 0 for centered glow)
  */

  /* --- LIFT / RAISE EFFECT --- */
  transform: translateY(-2px);
  /* Adjust lift:
     - Negative value moves icon upward
     - Increase magnitude for more lift (e.g., -4px)
     - Use 0px to disable lift
  */
}

/* Keyboard focus: match hover affordance */
.icon:focus-visible .icon-svg,
.icon:focus-visible .icon-img {
  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.55));
  transform: translateY(-2px);
}

/* Photo data line: add a bit more breathing room around the icons */
.photo-data-window .photo-coords {
  margin-left: 0.45rem;
}

.photo-data-window .story-ellipsis {
  margin-left: 0.45rem;
}
/* Fixed background layer: never moves during scroll */
.page-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translateZ(0);
}






/* NOTE: Removed global scroll-lock rules. They prevented scrolling on Gallery/Theme pages.
   Privacy/About already handle scrolling via internal containers (.page-content). */


/* Viewport-lock ONLY for text pages (page-main/about-main),
   but NEVER lock Gallery/Theme/Photo pages (they must scroll). */
body:has(.page-main):not(:has(.gallery-main)):not(:has(.theme-main)):not(:has(.photo-main)),
body:has(.about-main):not(:has(.gallery-main)):not(:has(.theme-main)):not(:has(.photo-main)) {
  overflow: hidden !important;
}

.site:has(.page-main):not(:has(.gallery-main)):not(:has(.theme-main)):not(:has(.photo-main)),
.site:has(.about-main):not(:has(.gallery-main)):not(:has(.theme-main)):not(:has(.photo-main)) {
  height: 100vh !important;
  overflow: hidden !important;
}

/* FORCE SCROLL: Gallery + Theme index pages must always scroll */
html:has(.gallery-main),
body:has(.gallery-main),
html:has(.theme-main),
body:has(.theme-main) {
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.site:has(.gallery-main),
.site:has(.theme-main) {
  height: auto !important;
  overflow: visible !important;
}




:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}





body {
  margin: 0;
  background: #000 url("/static/assets/theme_bg.png") center center / cover no-repeat;
  color: #f5f5f5;
}

/* Solid black background on single-photo pages */
html:has(.photo-main),
body:has(.photo-main),
.site:has(.photo-main) {
  background: #000 !important;
  background-image: none !important;
}

/* On pages that provide their own fixed background, remove the body image
   so there is only one background layer (prevents parallax/jitter). */
html:has(.theme-main) body,
body:has(.theme-main),
html:has(.gallery-main) body,
body:has(.gallery-main),
html:has(.about-main) body,
body:has(.about-main),
html:has(.page-main) body,
body:has(.page-main) {
  background-color: #000 !important;
  background-image: none !important;
}

/* Extra safety: solid black background on single-photo pages (don’t rely solely on :has) */
body.photo-page,
html:has(body.photo-page) body,
.site:has(.photo-wrapper) {
  background-color: #000 !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: auto !important;
}






/* (removed global fixed background flayer) */

a {
  color: #f5f5f5;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: none; /* Remove underline globally */
}

/* Stealth link: looks like normal text, no hover/focus change */
.stealth-link,
.stealth-link:visited,
.stealth-link:hover,
.stealth-link:focus {
  color: inherit;
  text-decoration: none !important;
  border: none;
}

/* Global page fade-in */
.fade-in-page {
  opacity: 0;
  animation: pageFadeIn 0.6s ease-out forwards;
}

@keyframes pageFadeIn {
  to {
    opacity: 1;
  }
}

/* Slower fade-in just for the splash page */
@keyframes splashFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Per-theme full-screen background (applies to all screen sizes) */

.theme-main {
  flex: 1;
  /* header + footer height so the main area fills the screen */
  /* min-height: calc(100vh - 95px); */
  
  /* Center the theme panel in the available space */
  display: flex;
  justify-content: center;   /* horizontal centering */
  align-items: center;       /* vertical centering */

  padding: 3rem 1.5rem 3rem;

  position: relative;
  overflow: visible;
}

/* Soft gradient at the bottom of theme pages */
.theme-main::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.0),
    rgba(0, 0, 0, 0.35)
  );
  pointer-events: none;
}

/* Theme heading */
.theme-main .page-heading {
  text-align: center;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 2rem 0;      /* space under heading */
}

.theme-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
}

.theme-table td {
  border: none;
  padding: 0.4rem 0.75rem 0.4rem 0;
  vertical-align: top;
}

.theme-name {
  font-weight: 600;
  white-space: nowrap;
  padding-right: 1.5rem;
}

.theme-name a {
  color: #b0b0b0;          /* medium gray */
  text-decoration: none;
  transition: color 0.2s ease;
}

.theme-name a:hover,
.theme-name a:focus {
  color: #e0e0e0;          /* lighter gray on hover */
}

.theme-description {
  max-width: 48rem; /* optional: prevents super-long lines */
}






/* Full-page centering for intro slide (quote/poem card) */
.intro-page-main {
  flex: 1;
  min-height: calc(100vh - 95px);  /* header + footer allowance */
  display: flex;
  align-items: center;             /* vertical center */
  justify-content: center;         /* horizontal center */
  padding: 0;                      /* no side padding pushing it off-center */
}

/* --- Layout shell ------------------------------------------------------- */

html,
body {
  height: 100%;
}

.site-main {
  padding: 1.5rem 1.25rem 2.5rem;
  max-width: 96vw;
  margin: 0 auto;
}

/* Theme pages: background should span the full viewport width */
.theme-main {
  max-width: 100vw;   /* override .site-main */
  width: 100vw;
  margin: 0;          /* no centering on the main; the inner content will be centered */
  /* Confine to viewport between header/footer, but allow page scroll */
  min-height: calc(100vh - 140px);
  overflow: visible;
}

.theme-main-inner {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;

  /* Center the heading + thumb grid inside the background */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Page scroll handles overflow; keep a modest top gap */
  max-height: none;
  padding-top: 1.25rem;
  overflow: visible;
  /* Re-enable events for the scrollable content panel */
  pointer-events: auto;
}

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 2.5rem; /* Add padding to prevent content overlap with the fixed footer */
  padding-top: 95px; /* offset for fixed header so content starts below */
}

/* Header + footer chrome */
.site-header,
.site-footer {
  padding: 0.9rem 1.5rem;      /* slightly taller bar */
  border-bottom: none;         /* we’ll give each its own rim line */

  /* fade-in animation for header & footer */
  opacity: 0;
  animation: pageFadeIn 0.8s ease-out forwards;
}

/* Top black bar with title, nav, and camera icon */
.site-header {
  background: #000;
  color: #f5f5f5;
  font-size: 0.9rem;
  position: fixed;             /* lock header to viewport top */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;               /* above main content */

  /* bright rim + soft shadow */
  border-bottom: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.40), 0 0 34px rgba(240, 240, 240, 0.72), 0 18px 52px rgba(0, 0, 0, 0.34);
}









/* Site title on the first line */
.site-title {
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0;
  color: #aaaaaa; /* Medium-light gray */
}

.site-title a {
  color: inherit;
  text-decoration: none;
}

.site-title a:hover,
.site-title a:focus {
  color: #ffffff; /* Bright white on hover */
  text-decoration: none;
}

/* Title line spans: default desktop = single line */
.site-title-line1,
.site-title-line2 {
  display: inline;
}











/* Desktop/tablet: hamburger hidden */
@media (min-width: 721px) {
  .nav-toggle { display: none; }
}


/* Desktop/tablet: keep hamburger hidden */
@media (min-width: 601px) {
  .nav-toggle { display: none; }
}






/* Top navigation bar under the site title */
.site-nav {
  display: flex;               /* horizontal row */
  align-items: center;         /* vertically center items */
  justify-content: flex-start; /* keep links left-aligned */
  margin-top: 0.4rem;
  font-size: 0.9rem;
}

/* Base nav links: medium gray by default */
.site-nav a {
  margin-right: 0.75rem;
  color: #aaaaaa;              /* medium gray */
  text-decoration: none;
  opacity: 0.8;                /* a bit softer than pure gray */
  transition:
    color 0.2s ease,
    opacity 0.2s ease,
    transform 0.15s ease;      /* tiny lift on hover */
}

/* Hover / focus on normal links */
.site-nav a:hover,
.site-nav a:focus {
  color: #f5f5f5;              /* brighten on hover */
  opacity: 1;
  transform: translateY(-1px); /* very subtle lift */
}

/* The active page (About / Themes / Gallery / Contact) */
.site-nav a.active {
  color: #ffffff;              /* brightest white for current page */
  opacity: 1;
  cursor: default;
  pointer-events: none;        /* don’t “re-click” the page you’re on */
}

/* Optional: don’t lift the active item on hover */
.site-nav a.active:hover,
.site-nav a.active:focus {
  transform: none;
}

/* Make the ? help button match the top-nav links */
.site-nav .header-help-toggle {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 0 0.75rem;   /* adjust spacing to match links */

  color: #aaaaaa;          /* same as nav links */
  opacity: 0.8;

  font: inherit;
  cursor: pointer;

  transition:
    color 0.2s ease,
    opacity 0.2s ease,
    transform 0.15s ease;
}

.site-nav .header-help-toggle:hover,
.site-nav .header-help-toggle:focus {
  color: #f5f5f5;          /* same hover color as links */
  opacity: 1;
  outline: none;
}





/* 404 page styling --------------------------------------- */
.error-page {
  max-width: 640px;
  margin: 4rem auto 6rem auto;
  text-align: center;
  color: #dddddd;
}

.error-text {
  margin: 0.5rem 0;
  color: #cccccc;   /* light gray */
}

/* Camera link + image */
.error-camera-link {
  display: inline-block;
  margin-top: 2rem;
}

.error-camera-link img {
  max-width: 260px;      /* adjust to taste */
  height: auto;
  display: block;
  margin: 0 auto;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.35);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.error-camera-link:hover img,
.error-camera-link:focus img {
  transform: translateY(-2px);
  box-shadow: 0 0 35px rgba(255, 255, 255, 0.6);
  opacity: 0.95;
}

/* Language toggle (EN/ES) — currently used on About page */
.header-lang-toggle {
  position: absolute;
  top: 1.85rem;
  right: 1.5rem;

  display: flex;
  align-items: center;
  gap: 0.35rem;

  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  z-index: 2140;
}

/* When the header includes the camera icon, keep the EN/ES toggle left of it. */
.site-header:has(.header-camera-link) .header-lang-toggle {
  right: calc(1.5rem + 88px);
}

.header-lang-toggle .lang-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;

  font: inherit;
  color: #8a8a8a; /* match header 'i' icon */
  opacity: 0.85;
  cursor: pointer;

  transition:
    color 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease,
    text-shadow 0.2s ease;
}

.header-lang-toggle .lang-btn:hover,
.header-lang-toggle .lang-btn:focus {
  color: #f5f5f5;
  opacity: 1;
  transform: translateY(-2px);
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.95),
    0 0 8px rgba(255, 255, 255, 0.55);
  outline: none;
}

.header-lang-toggle .lang-btn:focus-visible {
  color: #f5f5f5;
  opacity: 1;
  transform: translateY(-2px);
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.95),
    0 0 8px rgba(255, 255, 255, 0.55);
}

.header-lang-toggle .lang-btn.active {
  color: #ffffff;
  opacity: 1;
  cursor: default;
  text-shadow: none;
  transform: none;
}

.header-lang-toggle .lang-btn[disabled],
.header-lang-toggle .lang-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

.header-lang-toggle .lang-sep {
  color: #aaaaaa;
  opacity: 0.6;
}

/* One-time Gallery onboarding hint */
.lang-onboard-hint{
  position: absolute;
  /* Desktop: offset a bit down/left from the EN/ES toggle */
  top: calc(100% + 1.15rem + 24px);
  left: -48px;

  padding: 0.55rem 0.85rem;
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(0, 0, 0, 0.18);

  color: #111111;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;

  z-index: 2200;

  transition:
    opacity 3.0s ease,
    transform 3.0s ease;
}

.lang-onboard-hint.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Phones: mobile onboarding hint positioning is defined in the phone nav section. */

/* Line under the camera */
.error-note {
  margin-top: 1.5rem;
  color: #aaaaaa;   /* medium gray */
  font-size: 0.95rem;
}










/* Theme name link shown on single-photo pages */
.photo-theme-link {
  position: absolute;          /* Position the theme name independently */
  left: 50%;                   /* Move it to the center horizontally */
  transform: translateX(-50%); /* Center it exactly */
  text-align: center;          /* Center the text within its container */
}

.photo-theme-link a {
  color: #aaaaaa;              /* Match the nav link color */
  text-decoration: none;
}







.photo-theme-link a:hover,
.photo-theme-link a:focus {
  color: #dddddd;               /* lighter gray on hover */
}




.site-footer {
  position: fixed; /* Keep footer fixed at the bottom */
  bottom: 0;
  left: 0;
  width: 100%;
  background: #000; /* Ensure footer has a black background */
  z-index: 1000; /* Ensure it stays above other content */

  border-top: 2px solid rgba(255, 255, 255, 0.22);  /* brighter rim */
  border-bottom: none;
  margin-top: auto;
  font-size: 0.8rem;
  opacity: 0.7;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.7);       /* soft shadow above footer */
  color: #888888
}

/* Main content area stays centered and below the header */
.site-main {
  padding: 1.5rem 1.25rem 2.5rem;
  max-width: 96vw;
  margin: 0 auto;
}

/* Small Agfa camera icon in the top-right of the header */
.header-camera-link {
  position: absolute;
  right: 1.5rem;               /* nudge closer to right edge */
  top: 0.85rem;                /* nudge slightly down to stay centered */
  display: block;
  text-align: center; /* Center the camera photo */
}

.header-camera-link img {
  width: 60px;                /* larger – roughly 3/4 of the header height */
  height: auto;
  display: block;
  margin: auto; /* Center the photo horizontally */
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55)); /* slightly reduced glow */
  transition: transform 0.2s ease, filter 0.2s ease;
}

.header-camera-link:hover img,
.header-camera-link:focus img {
  transform: none; /* Prevent image movement */
  text-decoration: none !important; /* Force removal of underline */
}






/* NEW: global Data toggle icon (single-photo header) */
.header-data-toggle {
  position: absolute;
  right: calc(1.5rem + 160px); /* move further left of the EN/ES toggle */
  top: 1.70rem; /* slightly higher to better align with EN/ES */
  z-index: 2150; /* ensure above title/theme/camera layers */

  width: 30px;
  height: 26px;

  border: none;
  background: transparent;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;

  cursor: pointer;
  opacity: 0.85;

  transition: opacity 0.2s ease;
}

/* rectangular glow layer (NOT circular) */
.header-data-toggle::before {
  display: none !important; /* remove glow/background box entirely */
}

.header-data-toggle .data-icon {
  position: relative; /* keep above glow */
  width: 22px;        /* longer lines */
  height: 22px;

  fill: none;
  stroke: #8a8a8a;
  stroke-width: 1.75;
  stroke-linecap: round;

  transition:
    stroke 0.2s ease,
    filter 0.2s ease;
}

/* increase vertical spacing by nudging the paths slightly via stroke rendering */
.header-data-toggle .data-icon path:nth-child(1) { transform: translateY(-1px); }
.header-data-toggle .data-icon path:nth-child(3) { transform: translateY( 1px); }

.header-data-toggle:hover,
.header-data-toggle:focus {
  outline: none;
  opacity: 1.0;
}

.header-data-toggle:hover .data-icon,
.header-data-toggle:focus .data-icon {
  stroke: inherit; /* keep default; ON state controls color */
}

/* Hover/focus glow (helps discoverability) */
.header-data-toggle:hover .data-icon,
.header-data-toggle:focus-visible .data-icon {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.35));
}

/* active (pressed) state: slightly brighter persistent glow */
.header-data-toggle[aria-pressed="true"] {
  opacity: 1.0;
}

.header-data-toggle[aria-pressed="true"] .data-icon {
  stroke: #eaeaea; /* brighter gray when active */
}

/* Ensure lines start medium-dark gray and change on ON state */
.header-data-toggle .data-icon path {
  stroke: #7a7a7a !important; /* brighter gray for OFF state */
  fill: none !important;
}
.header-data-toggle:hover:not([aria-pressed="true"]) .data-icon path {
  stroke: #bdbdbd !important;
}
.header-data-toggle[aria-pressed="true"] .data-icon path {
  stroke: #e0e0e0 !important;
}

/* Support non-path shapes used by the info icon */
.header-data-toggle .data-icon circle,
.header-data-toggle .data-icon line {
  stroke: #7a7a7a !important;
  fill: none !important;
}
.header-data-toggle:hover:not([aria-pressed="true"]) .data-icon circle,
.header-data-toggle:hover:not([aria-pressed="true"]) .data-icon line {
  stroke: #bdbdbd !important;
}
.header-data-toggle[aria-pressed="true"] .data-icon circle,
.header-data-toggle[aria-pressed="true"] .data-icon line {
  stroke: #e0e0e0 !important;
}











/* --- Splash page -------------------------------------------------------- */

.splash-body {
  background: #000;
  color: #f5f5f5;
  margin: 0;

  /* fade in slowly */
  opacity: 0;
  animation: splashFadeIn 4s ease-out forwards;
}



/* Full-page clickable link */
.splash-link{
  display: flex;              /* was block */
  min-height: 100vh;
  width: 100%;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

/* Center stage with breathing room */
.splash{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  /* breathing room so background always shows */
  padding: 4vh 4vw;
  box-sizing: border-box;

  /* IMPORTANT: allow the child to actually shrink */
  min-height: 0;
}



.splash-image-wrap{
  /* keep the whole framed box within the viewport */
  max-width: 90vw;
  max-height: 90vh;

  padding: 10px;                 /* SAME gap on all sides */
  border: 1px solid #505050;
  background: #000;
  border-radius: 4px;
  box-sizing: border-box;

  /* make the box hug the image (instead of stretching wide) */
  width: fit-content;
  height: fit-content;

  /* center the image inside the padded frame */
  display: flex;
  align-items: center;
  justify-content: center;

  transition: border-color 0.3s ease;
}

.splash-image-wrap img{
  display: block;

  /* fit INSIDE the frame after padding (10px each side) */
  max-width: calc(90vw - 20px);
  max-height: calc(90vh - 20px);

  width: auto;
  height: auto;
  object-fit: contain;
}


.splash-image-wrap:hover{
  border-color: #CCCCCC;
}



.splash-text h1 {
  margin: 0 0 0.5rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.splash-text p {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  opacity: 0.8;
}

.splash-enter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #f5f5f5;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-size: 0.9rem;
}

.splash-enter-arrow {
  font-size: 1.1rem;
}











/*-----------------------------------------------------------------------------------*/
/*--------------------------- OPTIONAL: Fade-in animation ---------------------------*/
/* You can delete this entire block if you ever decide you don't want the fade-in.   */
/*-----------------------------------------------------------------------------------*/
@keyframes fadeInSoft {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}











/* Subtle fade-up for panels (About / Contact) */
.fade-up {
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUp 0.7s ease-out forwards;
}

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




/* Global page fade-in helper */
.fade-in-page {
  opacity: 0;
  animation: pageFadeIn 0.8s ease-out forwards;
}

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


/* Fade in theme cards on gallery page */
.theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 200px;    /* matches thumb width */
  padding: 0.4rem; /* slightly larger hit area, feels more “premium” */
  opacity: 0;
  /* fade-in for gallery cards: removed animation for JS/CSS fade-in */
  /* animation removed to allow opacity transition to work */
  /* smooth hover transitions and fade-in */
  transition: opacity 2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.theme-card.visible {
  opacity: 1;
}

/*-----------------------------------------------------------------------------------*/
/*--------------------------- END OPTIONAL: Fade-in animation -----------------------*/
/*-----------------------------------------------------------------------------------*/










/* --- Gallery: theme cards + About/Contact row -------------------------- */

.gallery-main {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 4rem 1.5rem 2.5rem;

  /* Confine to viewport between header/footer, but allow page scroll */
  min-height: calc(100vh - 140px);
  overflow: visible;
  
}

.gallery-inner {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  /* Page scroll handles overflow; keep a modest top gap */
  max-height: none;
  padding-top: 1.25rem;
  overflow: visible;
  /* Re-enable events for the scrollable content panel */
  pointer-events: auto;
}




/* Container for all theme rows on the Gallery page */
.theme-grid {
  display: flex;
  flex-direction: column;   /* stack rows vertically */
  align-items: center;      /* center each row */
  gap: 2.5rem;              /* vertical space between rows */
}

.theme-row {
  display: flex;
  justify-content: center;
  gap: 2rem;                /* horizontal spacing between cards */
}

/* Each theme card: fixed width; child elements use full width */
.theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 200px;    /* matches thumb width */
  padding: 0.4rem; /* slightly larger hit area, feels more “premium” */

  /* ...existing code... */
}



/* Thumbnail with drop shadow */
.theme-thumb {
  width: 100%;
  height: 200px;
  overflow: hidden;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.6);  /* shadow behind thumb */
}

.theme-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover: lift the card's image slightly and deepen the shadow */
.theme-card:hover .theme-thumb img {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.7);
}

/* White 60% transparent strip for theme title */
.theme-title-box {
  width: 100%;
  margin-top: 0.5rem;        /* gap under thumbnail */
  background: rgba(200,200,200, 0.4);  /* 40% gray */
  color: #000;
  text-align: center;
  padding: 0.35rem 0.5rem;
}

.theme-title {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}






.page-link-row {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.page-card {
  border: 1px solid #444;
  border-radius: 999px;
  padding: 0.4rem 1.2rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}




/* --- Theme thumbnails (inside a theme) --------------------------------- */

.page-heading {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
}


/* Gallery main heading: center it above the theme grid */
.gallery-main .page-heading {
  text-align: center;
  margin: 0 0 2rem 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* Grid of thumbnails for photos in a theme */
.thumb-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;               /* your chosen spacing */
  margin-top: 1rem;

  /* NEW: cap at 5 thumbnails per row on wide screens */
  max-width: calc(5 * 120px + 4 * 2rem); /* use the width below! */
  margin-left: auto;
  margin-right: auto;
}

/* Thumbnails inside theme pages */
.thumb {
  display: inline-block;
  width: 120px;              /* or whatever size you want */
  height: 120px;
  overflow: hidden;
  opacity: 0;                /* start hidden */
  transform: translateY(10px);
  animation: thumbFadeIn 0.5s ease-out forwards;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover lift + shadow on theme-page thumbnails */
.thumb:hover img {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
}

/* Staggered delays so thumbs don't all pop in at once */
.thumb:nth-child(1)  { animation-delay: 0.05s; }
.thumb:nth-child(2)  { animation-delay: 0.10s; }
.thumb:nth-child(3)  { animation-delay: 0.15s; }
.thumb:nth-child(4)  { animation-delay: 0.20s; }
.thumb:nth-child(5)  { animation-delay: 0.25s; }
.thumb:nth-child(6)  { animation-delay: 0.30s; }
.thumb:nth-child(7)  { animation-delay: 0.35s; }
.thumb:nth-child(8)  { animation-delay: 0.40s; }
.thumb:nth-child(9)  { animation-delay: 0.45s; }
.thumb:nth-child(10) { animation-delay: 0.50s; }
.thumb:nth-child(11) { animation-delay: 0.55s; }
.thumb:nth-child(12) { animation-delay: 0.60s; }

@keyframes thumbFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}









/* ------------------------------------------------------------------------ */
/* --- Single photo page -------------------------------------------------- */

.photo-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;    
  align-items: center;  
  gap: 0;
  padding: 0 6rem;
  min-height: auto; 
  overflow: hidden;
}












  /* VIEWPORT-LOCKED: Disable page-level scroll when wrappers are present
     This ensures wheel scroll over background does not move the page. */
  .site:has(.about-main) {
    height: 100vh;
    overflow: hidden;
  }





.photo-nav.photo-nav-left {
  position: absolute;         /* Positions arrow on left edge */
  left: 1rem;                 /* Positions inside left padding, outside bordered box (adjust to 0.5rem for tighter) */
  top: 50%;
  transform: translateY(-50%); /* Exact centering */
  /* Your existing arrow styles, e.g., font-size, color */
}

.photo-nav.photo-nav-right {
  position: absolute;         /* Positions arrow on right edge */
  right: 1rem;                /* Positions inside right padding, outside bordered box (adjust to 0.5rem for tighter) */
  top: 50%;                   /* Vertical center */
  transform: translateY(-50%); /* Exact centering */
  /* Your existing arrow styles */
}

.photo-image > a > img {
  display: block;             /* Block for natural fit, no inline gaps */
  max-width: calc(56vw + 20px); /* Matches image 70vw cap + 10px left/right padding, preventing extension */
  /* NOTE: this WAS calc(70 + 20px) We made the normal photos ~20% smaller now */
  height: fit-content;        /* Keeps vertical tight to image + padding */
  padding: 10px;              /* Equal space on all sides */
  border: 1px solid #444444;  /* Thin med gray border */
  background: #000;           /* Black fill for padded area */
  border-radius: 4px;         /* Optional rounding */
  margin: 0 auto;             /* Centers the frame */
  box-sizing: border-box;     /* Includes padding/border in max-width calc */
  transition: border-color 0.3s ease; /* Smooth color change on hover */
}

.photo-image:hover {
  border-color: #999999;      /* Light gray on hover (adjust hex, e.g., #A9A9A9 for subtler shift) */
  cursor: pointer;            /* Changes cursor to hand, reinforcing clickability */
}


.photo-image > a > img {
  display: block;             /* Tight fit */
  width: 100%;                /* Fills the wrapper's calculated max-width */
  max-width: 100%;            /* Ensures no overflow */
  max-height: 56vh;           /* Your height cap */
  /* NOTE: this WAS 70vh  We changed it to make the normal photos 20% smaller */
  height: auto;               /* Preserves aspect ratio */
  border: none;               /* No border on image */
  object-fit: contain;        /* Fits without cropping */
  
  /* Fade-in effect */ 
  opacity: 0;
  transition: opacity 0.5s ease;
}

.photo-nav {
  width: 6rem;               /* was 3.5rem – wider side columns pushes arrows out */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loaded state for fade-in completion */
.photo-image > a > img.loaded {
  opacity: 1;
}

/* Ensure footer remains stationary and photo size is constrained */
/*
.photo-main {
  height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;    
  margin: 0;
  padding: 0;
}

.photo-main {
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;  
}
*/

.photo-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2.5rem;   /* breathing room under header */
}

/* ------------------------------------------------------------ */




/* Circular prev/next arrows used on photo pages and intro slide */
.triangle-button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid rgba(70, 70, 70, 0.9);  /* softer gray */
  background: rgba(0, 0, 0, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #666;                               /* muted gray icon */
  text-decoration: none;
  font-size: 1.2rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

.triangle-button:hover,
.triangle-button:focus {
  background: #f5f5f5;
  color: #111;                                  /* dark triangle on white */
  border-color: #f5f5f5;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.95);
}




/* Metadata block */
.photo-caption {
  margin-top: 1.5rem;    /* closer to the image */
  text-align: center;
  color: #a0a0a0;
  font-size: 1rem;
  display: block;
}

.photo-title {
  font-size: 1.15rem;
  margin-bottom: 1.0rem;
  color: #d0d0d0;  /* light gray */
}

.photo-meta-line {
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
  color: #a0a0a0;  /* medium gray */
}

.photo-meta-line.small {
  font-size: 0.9rem;
  color: #a0a0a0;
}

/* Extra information line: same style, but with extra top margin */
.photo-meta-line.info-extra {
  font-size: 0.9rem;
  color: #a0a0a0;
  margin-top: 1.0rem;   /* "blank line" before */
}

/* Photographer line: last line under the photo */
.photo-meta-line.photographer-line {
  margin-top: 0.75rem;   /* a bit of space above the name */
  color: #777777;        /* darker gray than the other meta lines */
  font-style: normal;    /* Remove italics */
}

/* --- Photo metadata color corrections (scoped to photo pages only) --- */
/* Ensure only the text under photos is affected */
.photo-wrapper .photo-title {
  color: #bbbbbb !important;   /* dark gray title */
}

.photo-wrapper .photo-meta-line {
  color: #adadad !important;   /* slightly brighter medium gray */
  font-size: 0.9rem;           /* smaller body */
}

.photo-wrapper .photo-meta-line.photographer-line {
  color: #8a8a8a !important;   /* medium gray for photographer */
  font-size: 0.9rem !important;
}

/* Swap emphasis: photographer becomes primary; EXIF becomes secondary */
.photo-meta-line.photographer-line {
  font-size: 0.95rem;   /* matches your current EXIF size */
  color: #bfbfbf;       /* matches your current EXIF brightness */
}

.photo-data-window .photo-meta-line {
  font-size: 0.85rem;   /* matches your current photographer size */
  color: #8a8a8a;       /* matches your current photographer gray */
}




/* Data toggle (JSON method):
   - Default OFF: show only title + photographer
   - ON: show ONLY the JSON-rendered window (not the embedded meta lines)

   IMPORTANT: only hide the embedded meta lines that are direct children of .photo-caption.
   The JSON-rendered lines live inside .photo-data-window, so they should NOT be affected.
*/
html:not(.show-photo-data) .photo-caption > .photo-meta-line:not(.photographer-line) {
  display: none;
}

html:not(.show-photo-data) .photo-data-window {
  display: none;
}

html.show-photo-data .photo-caption > .photo-meta-line:not(.photographer-line) {
  display: none; /* keep embedded lines hidden even when ON */
}

html.show-photo-data .photo-data-window {
  display: block;
}










/* --- About page: full-screen photo + translucent white box ------------- */

.about-main {
  position: relative;
  /* VIEWPORT-LOCKED (About) — easy revert marker */
  height: calc(100vh - 140px); /* header + footer allowance (align with others) */
  overflow: hidden;            /* prevent background/container growth */
  background-attachment: fixed;/* keep texture fixed to viewport */
  scrollbar-gutter: stable both-edges; /* avoid layout jump */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 2rem 1.5rem;
  /* Prevent background from capturing wheel/touch events */
  pointer-events: none;
}

.about-panel {
  max-width: 700px;
  width: 100%;
  background: rgba(255, 255, 255, 0.6); /* 80% opaque white */
  color: #000;                           /* black text */
  padding: 1.75rem 2.0rem;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  /* VIEWPORT-LOCKED (About) — panel scroll only */
  max-height: calc(100vh - 140px - 2rem - 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Re-enable events for the scrollable content panel */
  pointer-events: auto;
}

.about-panel h1 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 1.0rem;
}



.about-panel p {
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
  line-height: 1.6;
  font-size: 0.95rem;
}


/* About panel links: normal + visited should look the same */
.about-panel a,
.about-panel a:visited {
  color: #111111;             /* same as body text */
  text-decoration: none;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.25);
  padding-bottom: 1px;
}

/* Hover / focus state */
.about-panel a:hover,
.about-panel a:focus,
.about-panel a:visited:hover,
.about-panel a:visited:focus {
  color: #222222;
  border-bottom-style: solid;
  border-bottom-color: rgba(0, 0, 0, 0.4);
}

/* Stealth link inside About panel: no underline/border in any state */
.about-panel .stealth-link,
.about-panel .stealth-link:visited,
.about-panel .stealth-link:hover,
.about-panel .stealth-link:focus {
  text-decoration: none !important;
  border: none !important;
  color: inherit;
}





/* --- Text pages (About / Contact) -------------------------------------- */

.page-body {
  max-width: 700px;
  line-height: 1.6;
  font-size: 0.95rem;
}


/* Hide honeypot field */
.hidden {
  display: none;
}


/* Contact form */

.contact-form {
  margin-top: 1.25rem;
  max-width: 500px;
}

.contact-form label {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.4rem 0.5rem;
  margin-top: 0.3rem;
  border-radius: 4px;
  border: 1px solid #444;
  background: #050505;
  color: #f5f5f5;
}

.contact-form button {
  margin-top: 0.75rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid #000000; /* black outline */
  background: transparent;
  color: #000000;             /* black text */
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.contact-form button:hover,
.contact-form button:focus {
  background: #000000;
  color: #ffffff;
  transform: translateY(-1px);                  /* subtle lift */
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);   /* soft shadow */
}

.contact-message {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #111;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contact-message.visible {
  opacity: 1;
}






















/* ===== THEME INTRO SLIDE (poem panel) =============================== */

.photo-intro {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  min-height: min(70vh, 800px);
  overflow: visible;   /* don't clip the glow */
}

/* Light intro card with soft gray / white glow */
.photo-intro-panel {
  width: min(60vw, 720px);
  max-width: 720px;

  background: #e3e3e3;  /* light card */
  border-radius: 18px;
  padding: 2.5rem 3rem;

  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),        /* thin dark edge */
    0 0 30px rgba(255, 255, 255, 0.85);   /* visible white/gray glow */
}

/* Smooth glow change on hover */
.photo-intro-panel {
  transition: box-shadow 0.35s ease;
}

.photo-intro-panel:hover {
    box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),        /* thin dark edge */
    0 0 35px rgba(255, 255, 255, 1.0);   /* visible white/gray glow */
}



/* Center intro slide vertically and horizontally between header/footer */
.photo-intro-page .site-main {
  /* min-height: calc(100vh - 130px); */   /* header + footer estimate */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Intro text styling */
.photo-intro-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #111111;      /* was #f0f0f0 */
  text-align: center;
}

.intro-tap-target {
  display: block;
  text-decoration: none;
  color: inherit;   /* keep existing text color */
}

/* Optional fade-up animation */
.fade-up {
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUpSoft 0.6s ease-out forwards;
}

@keyframes fadeUpSoft {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}












/* Generic single-page layout (Privacy & Copyright, etc.) */
.page-main {
  /* Fix height to viewport minus header+footer so the
     background texture stays crisp and doesn’t scale with content */
  height: calc(100vh - 140px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 3rem 1.5rem 4rem;

  /* FULL-BLEED: escape the centered .site-main container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* Patterned background like About/Themes */
  background: #000 url("../assets/theme_bg.png") center center / cover no-repeat;
  background-attachment: fixed; /* keep texture fixed to viewport */
  overflow: hidden;              /* prevent page-main from growing */
  /* Prevent layout shift on scrollbars appearing/disappearing */
  scrollbar-gutter: stable both-edges;
}



/* Light panel window, similar to About / Contact */
.page-content {
  max-width: 900px;
  width: 100%;
  background: rgba(255, 255, 255, 0.60); /* translucent like the others */
  color: #111;
  padding: 2.5rem 3rem 3rem;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  /* Scroll inside the panel, not the full page */
  max-height: calc(100vh - 140px - 3rem - 4rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  /* Avoid scroll chaining and bounce-induced jumps */
  overscroll-behavior: contain;
}

/* Keep headings inside the panel solid black */
.page-content h1,
.page-content h2,
.page-content h3 {
  color: #000;
}

/* Body text inside the panel */
.page-content p,
.page-content li {
  color: #222;
}

/* Links inside the light panel */
.page-content a {
  color: #000;
  text-decoration: underline;
}

.page-content a:hover,
.page-content a:focus {
  color: #555;
}







/* Fine-print styling for Privacy & Copyright text */
.page-content .legal-fine-print,
.page-content .legal-fine-print ~ * {
  font-size: 0.85rem;   /* smaller than normal body text */
  color: #666;          /* medium gray */
}

/* Restore normal styling for the closing line */
.page-content .legal-outro {
  font-size: 1rem;   /* or whatever your normal body size is */
  color: #000;
}

/* Large, bold titles for Privacy and Copyright */
#privacy-title,
#copyright-title {
  font-size: 1.4rem;     /* adjust to taste */
  font-weight: 700;      /* bold */
  color: #444;           /* dark gray */
  margin-top: 1.6rem;    /* optional spacing */
}






/* -------------------- STORY MODAL (JS, minimal) -------------------- */

/* Title line becomes a quiet trigger ONLY when a story exists */
.photo-title.story-available {
  cursor: pointer;
  user-select: text; /* still allow selecting the title */
}

/* The animated ellipsis itself (very subtle) */
.story-ellipsis {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  margin-left: 0.30em;
  padding: 0 2px;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
}

/* Default dot look: medium gray */
.story-dot {
  color: #777;
  font-weight: 600;
  line-height: 1;
  font-size: 1.05em;
  animation: storyDotWave 6.0s ease-in-out infinite;
}

/* Phase offsets create the gentle "movement" across the three dots */
.story-dot.dot1 { animation-delay: 0.0s; }
.story-dot.dot2 { animation-delay: 0.35s; }
.story-dot.dot3 { animation-delay: 0.70s; }

@keyframes storyDotWave {
  0%, 100% { color: #666; }
  30%      { color: #b3b3b3; }
  60%      { color: #555; }
}

/* Hover/focus: confirm clickability, but stop motion to keep it calm */
.photo-title.story-available:hover .story-dot,
.photo-title.story-available:focus-within .story-dot,
.story-ellipsis:hover .story-dot,
.story-ellipsis:focus .story-dot {
  color: #cfcfcf;
  animation: none;
}

/* Story modal overlay with gentle fade */
.story-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  z-index: 9500;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.story-modal-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Auto-size to content, but never exceed viewport */
.story-modal-inner {
  width: fit-content;
  max-width: min(860px, 92vw);
  max-height: 82vh;
  overflow: auto;

  background: rgba(255, 255, 255, 0.92);
  color: #111;
  border-radius: 16px;
  padding: 22px 26px;

  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.58), 0 0 22px rgba(240, 240, 240, 0.95), 0 18px 52px rgba(0, 0, 0, 0.34);

  transform: translateY(6px);
  transition: transform 0.35s ease;
}

.story-modal-overlay.is-visible .story-modal-inner {
  transform: translateY(0);
}

.story-modal-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: -6px 0 10px;
}

/* Reuse .header-lang-toggle styling, but do NOT position it like a header control. */
.story-modal-overlay .story-lang-toggle {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
}

/* Make the toggle readable on the light story modal background */
.story-modal-overlay .story-lang-toggle .lang-btn{
  color: #666;
  opacity: 1;
  text-shadow: none;
}

.story-modal-overlay .story-lang-toggle .lang-btn:hover,
.story-modal-overlay .story-lang-toggle .lang-btn:focus,
.story-modal-overlay .story-lang-toggle .lang-btn:focus-visible{
  color: #111;
  opacity: 1;
  transform: translateY(-1px);
  text-shadow: none;
}

.story-modal-overlay .story-lang-toggle .lang-btn.active{
  color: #111;
  opacity: 1;
  cursor: default;
}

.story-modal-overlay .story-lang-toggle .lang-sep{
  color: #666;
  opacity: 0.6;
}

.story-modal-content {
  font-size: 0.98rem;
  line-height: 1.45;
}

.story-modal-content h1,
.story-modal-content h2,
.story-modal-content h3 {
  margin: 0 0 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.story-modal-content p {
  margin: 0 0 0.95rem;
}

.story-modal-content p:last-child {
  margin-bottom: 0;
}

/* Links (optional): keep subtle, open in new tab via build-time attributes */
.story-modal-content a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0, 0, 0, 0.30);
}
.story-modal-content a:hover,
.story-modal-content a:focus {
  text-decoration-color: rgba(0, 0, 0, 0.55);
}

/* Lock background scroll while story is open */
html.story-open,
body.story-open {
  overflow: hidden;
}

/* -------------------- LIGHTBOX (CSS-only, no JS) -------------------- */

.lightbox-overlay {
  position: fixed;
  inset: 0;                               /* cover entire viewport */
  background: rgba(0, 0, 0, 0.9);
  display: none;                          /* shown only when :target */
  align-items: center;                    /* vertical centering */
  justify-content: center;                /* horizontal centering */
  z-index: 9999;

  /* allow scrolling if image+glow is taller than viewport */
  overflow-y: auto;

  /* subtle blur behind overlay */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lightbox-overlay:target {
  display: flex;
}

/* Base lightbox container: centers the image stack */
.lightbox-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;                    /* center image + optional caption */
  justify-content: center;
  margin: 0 auto;
  max-width: 100vw;
  max-height: 100vh;
}

/* Wrap image + any caption as a vertical stack */
.lightbox-image-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* The actual full-screen image element */
.lightbox-image {
  display: block;

  /* Let the browser choose the largest size that fits
     within BOTH constraints, leaving room for the glow. */
  max-width: calc(95vw - 40px);
  max-height: calc(95vh - 40px);
  width: auto;
  height: auto;
  object-fit: contain;

  box-shadow: 0 0 25px rgba(255, 255, 255, 0.6);
  margin: 0 auto;
}



/* Agfa icon lightbox: smaller, more contained layout */
#lightbox-agfa .lightbox-inner {
  max-width: 640px;   /* or 600–700px to taste */
  max-height: none;   /* let content define height */
}

#lightbox-agfa .lightbox-image {
  max-width: 100%;    /* fit within the 640px container */
  max-height: 60vh;   /* don’t get too tall on small screens */
}

/* Agfa lightbox caption header: centered title + inline EN/ES toggle */
#lightbox-agfa .agfa-caption-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

#lightbox-agfa .agfa-caption-title-wrap {
  flex: 1;
  text-align: center;
}

#lightbox-agfa .agfa-caption-title {
  font-weight: 700;
}

/* Reuse .header-lang-toggle styling, but do NOT position it like a header control. */
#lightbox-agfa .agfa-lang-toggle {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
}

@media (max-width: 520px) {
  #lightbox-agfa .agfa-caption-header {
    flex-wrap: wrap;
    justify-content: center;
  }

  #lightbox-agfa .agfa-lang-toggle {
    width: 100%;
    justify-content: center;
  }
}






















/* ------------------------------------------------------------------ */
/* Intro slide (optional text-as-first-photo)                         */
/* ------------------------------------------------------------------ */

.intro-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  overflow: visible;
}

.intro-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 3.5rem;       /* space between left arrow, card, right arrow */
  overflow: visible;
}




.intro-card {
  max-width: 640px;
  background: #e3e3e3;   /* light panel */
  border-radius: 24px;
  padding: 3rem 3.25rem;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.25),        /* subtle dark outline */
    0 0 70px rgba(255, 255, 255, 0.70);   /* strong white/gray halo */
}



/* Multiple intro variants: only the "active" one is shown */
.intro-variant {
  display: none;
}

.intro-variant.is-active {
  display: block;
}



.intro-card .intro-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #111111;      /* was #f0f0f0 */
  text-align: center;
}

/* Headings inside intro markdown */
.intro-card h1,
.intro-card h2,
.intro-card h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Paragraph + lists */
.intro-card p {
  margin: 0.4rem 0;
}

.intro-card ul {
  margin: 0.7rem 0 0;
  padding-left: 1.2rem;
  text-align: left;
}

/* --- Layout safety: keep footer visible on all pages --- */

/* Make the whole page a flex column: header, main, footer */
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 95px; /* offset for fixed header so content starts below */
}

/* Ensure footer remains visible and fix layout issues */
.site-main {
  flex: 1;
  min-height: 0; /* Ensure consistent overrides */
  overflow: auto; /* Prevent content clipping */
}

/* Theme pages should not create their own scroll containers */
.theme-main {
  overflow: visible;
}

/* Allow full-bleed backgrounds on pages using .page-main */
/* VIEWPORT-LOCKED: Allow full-bleed backgrounds on .page-main pages */
.site-main:has(.page-main) {
  overflow: visible;
}

/* VIEWPORT-LOCKED: Allow full-bleed backgrounds on About/Themes/Gallery wrappers */
.site-main:has(.about-main),
.site-main:has(.theme-main),
.site-main:has(.gallery-main) {
  overflow: visible;
}

.theme-main-inner {
  min-height: unset; /* Remove conflicting height constraints */
}






.lightbox-caption {
  margin-top: 2rem; /* Move the caption further down below the image */
  text-align: center; /* Center the text */
  color: #a0a0a0; /* Medium gray */
  font-size: 1rem; /* Adjust font size */
  display: block; /* Ensure it behaves as a block element */
  border: none; /* Remove debug border */
  background: none; /* Remove debug background */
  margin-top: unset; /* Reset unnecessary margin adjustments */
  position: static; /* Revert positioning to default */
}

.lightbox-caption-container {
    margin-top: 40px; /* Add spacing below the camera image */
    text-align: center; /* Center the container */
    position: relative; /* Ensure independent positioning */
    padding-left: 20px; /* Add padding to the left */
    padding-right: 20px; /* Add padding to the right */
}





/* --- Lightbox close (FINAL, matches working pages) --- */
.lightbox-inner { position: relative; }

.lightbox-close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  z-index: 10001;
  display: block;
  text-decoration: none;
}

.lightbox-close-circle{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid #666;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #666;
  cursor: pointer;
}

.lightbox-close-circle:hover{
  color: #dddddd;
  border-color: #dddddd;
}

/* Hide the small white "X" close control in the lightbox */
.lightbox-close,
.lightbox-close-circle {
  display: none !important;
}














/* -------------------- VERY SHORT VIEWPORTS: LIGHTBOX SCROLL SAFETY -------------------- */
@media (max-height: 700px) {
  .lightbox-overlay {
    align-items: flex-start;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .lightbox-inner {
    margin: 0 auto;
  }





  /* -------------------- AGFA LIGHTBOX (phones): keep glow + smaller caption text -------------------- */

  /* Give the lightbox inner container real side padding so the glow isn’t clipped */
  #lightbox-agfa .lightbox-inner {
    max-width: calc(100vw - 48px);   /* leaves ~32px on each side for glow */
    width: calc(100vw - 48px);
    padding: 0 6px;                /* a little extra safety */
    box-sizing: border-box;
  }

  /* Ensure the camera image itself can’t force the container to full width */
  #lightbox-agfa .lightbox-image {
    max-width: calc(100% - 8px);
    max-height: 55vh;
  }


}




/* --- FINAL OVERRIDES: Photo metadata specificity hardening ------------------- */
/* Place at end of stylesheet to win the cascade on Netlify deploys. */
/* Title: solid black */
.photo-main .photo-wrapper .photo-title { color: #000000 !important; }

/* Photographer: medium-dark gray, medium size */
.photo-main .photo-wrapper .photo-meta-line.photographer-line { color: #9a9a9a !important; font-size: 0.86rem !important; }

/* Other info (darker than photographer, smaller) */
.photo-main .photo-wrapper .photo-meta-line:not(.photographer-line) { color: #7f7f7f !important; font-size: 0.78rem !important; }

/* Fallback override: apply even if .photo-main wrapper is missing (older HTML) */
.photo-wrapper .photo-title { color: #000000 !important; }
.photo-wrapper .photo-meta-line.photographer-line { color: #9a9a9a !important; font-size: 0.86rem !important; }
.photo-wrapper .photo-meta-line:not(.photographer-line) { color: #7f7f7f !important; font-size: 0.78rem !important; }

/* DEBUG SAFETY (kept for future troubleshooting):
.photographer-line { color: #05dc30 !important; }
*/

/* --- DEBUG OVERRIDE: temporary pink title to verify fresh CSS is served ---
.photo-title, .photo-title em { color: #c403c1 !important; }
*/






/* OpenStreetMap "map" link: normal = same as text + underline; hover = bright green */
.photo-coords {
  /* TEXT COLOR (normal) — keep same as surrounding metadata text */
  color: inherit;

  font: inherit;

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;

  /* UNDERLINE COLOR (normal) — subtle underline without changing text color */
  text-decoration-color: rgba(180, 180, 180, 0.35);  /* CHANGE: underline subtlety */

  border-radius: 4px;
  padding: 0 2px;
  display: inline-block;

  transition:
    color 0.15s ease,
    text-decoration-color 0.15s ease;
}

.photo-coords:hover,
.photo-coords:focus {
  /* TEXT COLOR (hover/focus) — bright green */
  color: #34e27a !important;  /* CHANGE: hover green */

  /* keep underline even if a global a:hover removes it */
  text-decoration: underline !important;

  /* UNDERLINE COLOR (hover/focus) — match/echo the green */
  text-decoration-color: rgba(52, 226, 122, 0.85);  /* CHANGE: hover underline strength */

  outline: none;
}





/* -------------------- MAP MODAL (Leaflet overlay for map) -------------------- */
/* Tuning variables for modal glow + backdrop */
:root {
  /* Backdrop darkness (0 = none, 1 = full black) */
  --map-overlay-alpha: 0.80;

  /* Rounded corner radius for the modal */
  --map-radius: 5px;

  /* Primary glow layer (bigger) */
  --map-glow-color: 255, 255, 255; /* white as R,G,B */
  --map-glow-blur1: 36px;
  --map-glow-spread1: 6px;
  --map-glow-alpha1: 0.78;

  /* Secondary glow layer (smaller) */
  --map-glow-blur2: 18px;
  --map-glow-spread2: 3px;
  --map-glow-alpha2: 0.38;

  /* Subtle drop shadow opacity */
  --map-drop-alpha: 0.30;
}
.map-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,   0, 0, var(--map-overlay-alpha));
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  /* Sit below fixed header/footer so they are never dimmed */
  z-index: 900;
}

.map-modal-overlay.is-visible { display: flex; }

.map-modal-inner {
  position: relative;
  width: 100%;
  /* Constrain to viewport with a bit of breathing room */
  max-width: min(1900px, 100vw - 64px);
  /* Let the map element drive the height; no fixed max-height here */
  height: auto;
  background: transparent; /* no white frame; let the map edge define the card */
  border-radius: var(--map-radius);
  /* Soft outer glow around the modal card */
  box-shadow:
    0 0 var(--map-glow-blur1) var(--map-glow-spread1) rgba(var(--map-glow-color), var(--map-glow-alpha1)),
    0 0 var(--map-glow-blur2) var(--map-glow-spread2) rgba(var(--map-glow-color), var(--map-glow-alpha2)),
    0 16px 44px rgba(0, 0, 0, var(--map-drop-alpha));
  padding: 0;
  overflow: hidden; /* clip map corners to the rounded card */
  display: flex;
}

.map-modal-map {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: inherit;
  overflow: hidden;
}

/* Ensure Leaflet map fills the modal and is explicitly tied to viewport height.
   Keep it a bit smaller than the screen so the glow never
   touches the header/footer and there is always click-space
   around the card to close the map. */
#map-modal-map {
  width: 100%;
  /* Desktop/tablet: let the map grow larger on big screens,
     while still leaving some breathing room above/below. */
  height: min(90vh, 1100px);
}

/* Desktop/tablet ONLY (>720px):
   Make the modal size track the *usable* viewport between the fixed header/footer,
   so the map+glow never slide underneath them and resizing feels continuous.

   Note: keep <=720px behavior unchanged (see the existing @media max-width: 720px block).
*/
@media (min-width: 721px) {
  :root {
    /* These match the desktop layout shell offsets already used elsewhere (.site padding-top). */
    --map-modal-header-clearance: 95px;
    --map-modal-footer-clearance: 56px;
  }

  .map-modal-overlay {
    inset: auto;
    top: var(--map-modal-header-clearance);
    bottom: var(--map-modal-footer-clearance);
    left: 0;
    right: 0;

    /* Leave clickable space around the card + room for the glow */
    padding: clamp(24px, 3vh, 48px) 32px;

    /* Let the card stretch to the available height (minus padding) */
    align-items: stretch;
    justify-content: center;
  }

  .map-modal-inner {
    width: 100%;
    max-width: 100%;
    height: 100%;
  }

  #map-modal-map {
    height: 100%;
    max-height: none;
  }

  /* Prefer dynamic viewport units when supported (better with browser UI/toolbars) */
  @supports (height: 100dvh) {
    .map-modal-overlay {
      top: var(--map-modal-header-clearance);
      bottom: var(--map-modal-footer-clearance);
    }
  }
}

.map-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  text-decoration: none;
}

.map-modal-close-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  font-size: 24px;
  line-height: 24px;
}

.map-modal-close-circle:hover,
.map-modal-close-circle:focus {
  background: #ffffff;
  transform: translateY(-1px);
}

/* Fallback safety: keep map constrained if other rules are overridden */
#map-modal-map { max-width: 100%; }

/* Error message shown when Leaflet cannot load */
.map-modal-error {
  display: none;
  margin: auto; /* center within modal inner */
  max-width: 720px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  box-shadow: 0 0 32px rgba(200, 200, 200, 0.55);
  color: #111;
  padding: 20px 24px;
  text-align: center;
}

.map-modal-error h2 {
  margin: 0 0 12px 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.map-modal-error p { margin: 8px 0; }















/* --- DEBUG: Force all info below photographer line to green for verification --- */
.photo-caption .photographer-line ~ .photo-meta-line,
.photo-wrapper .photographer-line ~ .photo-meta-line {
  color: #7f7f7f !important;
  font-size: 0.78rem !important;
}

/* --- PAGE BACKGROUND: Ensure single-photo pages use solid black background --- */
body:has(.photo-main),
.site:has(.photo-main) {
  background: #000 !important;
}

/* --- SCROLL SAFETY: photo pages must always be scrollable when data is long --- */
html:has(body.photo-page),
body.photo-page {
  height: auto !important;
  min-height: 100vh;
  overflow-y: auto !important;
}

body.photo-page .site {
  height: auto !important;
  min-height: 100vh;
  overflow-y: visible !important;
}

body.photo-page .site-main {
  height: auto;
  min-height: 0;
  overflow-y: auto;
}














/* --- Anchor offset so #top doesn't land under the header --- */
#top {
  display: block;
  height: 120px;        /* spacer roughly = header height */
  margin-top: -120px;   /* pulls the anchor up so content starts below header */
}

/* Anchor offset: when linking to #top, keep content below the header */
#top {
  scroll-margin-top: 120px; /* adjust if needed */
}

/* Phones: header is usually a bit shorter */
@media (max-width: 700px) {
  #top {
    height: 96px;
    margin-top: -96px;
  }
}




/* --- One-time “click to enlarge” hint (photo pages) --- */
.enlarge-hint{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  z-index: 50;

  background: rgba(255, 255, 255, 0.85);  /* more opaque for better readability */
  color: #111;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  padding: 18px 28px;
  font-size: 16px;
  line-height: 1.5;
  width: 90vw;
  max-width: 480px;
  text-align: left;

  box-shadow: 0 0 16px rgba(255, 255, 255, 0.18);

  pointer-events: none;

  opacity: 0;
  transition: opacity 280ms ease;
}

.enlarge-hint.visible{
  opacity: 1;
}

/* gentle pulse: slightly brighter + slightly stronger glow, not flashing */
@keyframes enlargeHintPulse{
  0%, 100%{
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.10);
  }
  50%{
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.3);
  }
}




/* --- Agfa lightbox caption sizing (FINAL, stable) ------------------------ */
#lightbox-agfa .lightbox-caption,
#lightbox-agfa .lightbox-caption-container {
  font-size: 0.84rem;
  line-height: 1.32;
}





/* Anything bigger than a phone */
@media (min-width: 601px) {
  #lightbox-agfa .lightbox-caption,
  #lightbox-agfa .lightbox-caption-container {
    font-size: 0.96rem;
  }
}

/* Big desktops */
@media (min-width: 1100px) {
  #lightbox-agfa .lightbox-caption,
  #lightbox-agfa .lightbox-caption-container {
    font-size: 1.04rem;
  }
}














/* =========================
   TRIPTYCH (single source of truth)
   Scope: body.triptych-page only

   Goals:
   - No page scroll (header/footer always visible)
   - Main band fills between header/footer (no gaps; background fills band)
   - Triptych image fits the remaining space
   - Caption is the ONLY scrollable area when needed
   ========================= */

/* Hard lock the document (prevents html scrolling) */
html,
body.triptych-page {
  height: 100svh;
  margin: 0;
  overflow: hidden; /* lock page scroll */
}

/* Remove global .site padding used to compensate for fixed header/footer */
body.triptych-page .site {
  height: 100svh;
  min-height: 100svh;
  margin: 0 !important;
  padding: 0 !important;

  display: grid;
  grid-template-rows: auto 1fr auto; /* header / main / footer */
  overflow: hidden;
}

/* Your global CSS likely makes header/footer fixed; Triptych needs normal flow */
body.triptych-page .site-header,
body.triptych-page .site-footer {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  margin: 0 !important;
}

/* Middle band MUST truly fill the 1fr row so the background reaches footer */
body.triptych-page main.about-main {
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  /* background-image is set inline on <main> */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  overflow: hidden;     /* main never scrolls */
  display: flex;
  align-items: stretch; /* IMPORTANT: do NOT vertically center a full-height child */
  justify-content: center;

  pointer-events: auto !important; /* undo any global About lock */
}

/* Stage: column dividing space between frame + caption */
body.triptych-page .triptych-stage {
  width: min(1000px, 92vw);
  height: 100%;
  min-height: 0;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 0.75rem 0;
  gap: 0.75rem;
}

/* Frame takes remaining space above caption */
body.triptych-page #triptychFrame {
  flex: 1 1 auto;
  min-height: 0;
}

/* Caption: the ONLY scroll container (scroll appears when needed) */
body.triptych-page #triptychCaption {
  width: 100%;
  box-sizing: border-box;

  /* let it grow, but never push under the footer */
  max-height: clamp(72px, 16dvh, 150px);

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;

  padding: 0 0.75rem;

  /* critical for flex overflow to work */
  min-height: 0 !important;
}