* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
}

/*.page-content {
  margin-top: 140px;
}*/

:root {
  --site-width: 1500px;   /* your gallery-wrapper width */
}

/* ===== HEADER — HELVETICA IDENTITY ===== */

.site-header {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
  display: block;
  width: 100%;
  margin: 40px auto;
  z-index: 1000;
  color: white;
  background-color: black;
  padding: 12px 22px 12px 50px; /* left space moved here // was 12px 22px 12px 50px */
  border-radius: 8px;
}


/* JAN ČERNÝ */
.site-header h1 {
  font-weight: 700;       /* Helvetica doesn't need 900 */
  font-size: 2.35rem;
  letter-spacing: -0.01em; /* Helvetica likes tight spacing */
  margin: 0 0 6px 0;
}

/* Photography, New media art */
.site-header p {
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.02em;
  opacity: 0.85;
  margin: 0;
}


@media (max-height: 700px) {
  .site-header {
    position: absolute;
  }
}

/* PANEL WRAPPER (HOMEPAGE) */

 .panel-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  /*height: 100vh;*/
  gap: 15px;
}

.panel {
  width: 250px;               /* set consistent size */
  height: 50vh;               /* tall, like in mockup */
  background-size: cover;
  background-position: center;
  transform: skewY(-4deg);   /* undo the rotation */
  transition: transform 0.5s ease, filter 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1em;
  text-decoration: none;
  filter: brightness(1.2);
  position: relative;
  overflow: hidden;

  background-color: rgba(0, 0, 0, 0.6); /* fallback in case image fails */
}

.panel-text {
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 1.2rem;
  font-family: 'Helvetica', sans-serif;
  letter-spacing: 1px;
  pointer-events: none;
  transform: rotate(2deg); /* ← counteracts the parent rotation */
}

.panel::after {
  content: attr(data-label);
  background-color: rgba(0, 0, 0, 0.6);
  padding: 6px 12px;
  border-radius: 6px;
  position: absolute;
  color: white;
  font-size: 1.2rem;
  pointer-events: none;
  filter: brightness(1.0);
}

.panel:hover {
  transform: scale(1.05) skewY(-4deg);
  filter: brightness(1.21);
}

.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  transition: background 0.3s ease;
}

.panel:hover::after {
  filter: brightness(1.0);
}

/* ===== HOMEPAGE — PANEL PLACEMENT + CROPPING ===== */

.panel-installation {
  background-position: 65% 30%;
}

.panel-wrapper {
  overflow: hidden;
}

.main-panel-wrapper {
  display: flex;
  justify-content: center;   /* key change */
  gap: 40px;                 /* control spacing manually */
  overflow: hidden;
  overflow-x: clip;
}

/* ===== GLOBAL TOP SPACING FOR FIXED HEADER ===== */
body {
  margin: 0;
  background-color: black;
  color: white;
  font-family:'Inter', Helvetica, Arial, sans-serif;
}

/* ===== HOMEPAGE OVERRIDE ===== */
.home-page {
  padding-top: 0;      /* cancel global offset */
}

.home-page .panel-wrapper {
  min-height: calc(100vh - 220px);
}

.home-page {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.panel {
  max-height: 100%;
}

.gallery-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;   /* ⬅ THIS is the magic */
  margin-bottom: 60px;
  position: relative;
}

.gallery-title h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.back-button {
  position: absolute;
  right: 0px;
  top: 0.6em;
  transform: none;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 0.9rem;
  color: white;
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid white;
  border-radius: 4px;
  transition: background 0.3s, color 0.3s;
}

.back-button .back-icon {
  width: 0.9em;
  height: 0.9em;
  display: block;

  position: relative;
  top: 0.9px; /* fine alignment tweak */
}

.back-button .back-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;

  stroke: currentColor;
  fill: none;
  stroke-width: 2;

  display: block;
}

/* MASTER BACK BUTTON - DEFINED BY .pagedefinition-page */
.back-button:hover {
  background-color: white;
  color: black;
}

/* PHOTO BACK BUTTON */
.photo-page .back-button {
  right: 80px;
}

/* VIDEO BACK BUTTON - MAIN VIDEO */
.video-wall-page .back-button {
  right: 0px;
}

/* Prevent scrollbar appearance on hover for video thumbnails */
.video-wall-page {
  overflow-y: hidden; /* Ensure no vertical scrollbar appears */
}

.video-screen:hover {
  transform: scale(1.04);
  box-shadow:
    0 0 80px rgba(255, 255, 255, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  overflow: hidden; /* Prevent hover effects from causing overflow */
}

/* ================= ABOUT PAGE ================= */

.about-page .gallery-wrapper{
  max-width:1500px;
  margin:0 auto;
  padding:0 40px 120px 40px;
}

/* title spacing */

.about-page .gallery-title{
  margin-bottom:70px;
}

/* ================= ABOUT PAGE ================= */

/* Intro layout */
.about-intro {
  display: flex;
  align-items: flex-start;
  gap: 90px;               /* space between portrait & text */
  margin: 80px 0 140px 0;   /* breathing space */
}

/* Text column */
.about-text{
  max-width:720px;
  font-family: Helvetica, Arial, sans-serif;
  font-size:1.05rem;
  line-height:1.9;

  opacity:0; /* TEXTS STARTS HIDDEN */
  transform:translateY(16px);

  transition:
    opacity 0.9s ease-out,
    transform 0.9s ease-out;
}

.page-loaded .about-text{
  opacity:1;
  transform:translateY(0);
}


.page-loaded .about-text{ /* TEXT REVEALED */
  opacity:1;
  transform:translateY(0);
}

/* Responsive */
@media (max-width: 1100px) {
  .about-intro {
    flex-direction: column;
    gap: 60px;
  }

  .about-portrait {
    max-width: 420px;
  }
}

.about-text p {
  margin-bottom: 1.6em;
}

/* Commissions */
.about-commissions {
  margin-bottom: 200px;
  max-width: 1500px;
}

.about-commissions h3 {
  font-weight: 300;
  letter-spacing: 0.25em;
  margin-bottom: 40px;
}

.about-commissions h4 {
  margin-top: 40px;
  margin-bottom: 12px;
  font-weight: 400;
}

.about-commissions a:not(.grid-item) {
  display: inline-block;
  margin-top: 12px;
  text-decoration: none;
  border: 1px solid white;
  padding: 8px 16px;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  transition: 0.3s ease;
}

.about-commissions a:not(.grid-item):hover {
  background: white;
  color: black;
}

/* Contact */
.about-contact {
  max-width: 600px;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
}

.about-contact a {
  display: block;
  margin-bottom: 14px;
  text-decoration: none;
  color: white;
  opacity: 0.8;
}

.about-contact a:hover {
  opacity: 1;
}


/* ===== ABOUT PORTRAIT ===== */

.about-page .about-portrait {
  max-width: 360px;      /* adjust between 360–480 */
  width: 100%;
}

.about-page .about-portrait img {
  width: 100%;
  height: auto;
  display: block;
}

/* ================= COMMISSIONS GRID UPGRADE ================= */

.about-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
}

.about-commissions .section-header{
  margin-bottom: 60px;
}

/* responsive */

@media (max-width: 1100px){
  .about-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px){
  .about-grid{
    grid-template-columns: 1fr;
  }
}

.about-grid img{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:4px;

  transition:transform .25s ease, opacity .25s ease;
}

/* item wrapper */

.grid-item{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:6px;

  background:black; /* kills any edge bleed */
}

.grid-item img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;

  border:none;
}
.grid-item img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
  border:none;

  transition:
    transform .7s cubic-bezier(.22,.61,.36,1),
    filter .5s ease,
    box-shadow .5s ease,
    opacity .25s ease;
  will-change: transform, opacity;
}

img {
  border: none !important;
}

.grid-item img{
  pointer-events: none;
}

.grid-item:hover{
  box-shadow:
    0 12px 40px rgba(0,0,0,0.45),
    0 40px 100px rgba(0,0,0,0.65);
  cursor: pointer;
}

/* portrait-like hover applied to the image itself */
.about-commissions .grid-item:hover img{
  transform: scale(1.035) translateY(-2px);
  filter: brightness(1.04) contrast(1.02);
  box-shadow:
    0 0 40px rgba(255,255,255,0.06),
    0 30px 80px rgba(0,0,0,0.85);
}

/* featured (bigger tile) */

.about-commissions .featured{
  grid-column: span 2;
  grid-row: span 2;
}


/* caption */

.grid-caption{
  position:absolute;
  left:20px;
  bottom:18px;
  right:20px;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:0.75rem;
  letter-spacing:0.18em;
  line-height:1.4;
  text-transform: uppercase;

  opacity:0.9;

  pointer-events:none;   /* important → no UI feeling */
}

/* ================= PORTRAIT ================= */

.about-portrait img{
  width:420px;
  height:auto;
  border-radius:6px;

  opacity:0;
  transform: scale(0.96);
  transform-origin: center center;

  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.22,.61,.36,1),
    filter .5s ease,
    box-shadow .5s ease;
}

.page-loaded .about-portrait img{
  opacity:1;
  transform: scale(1);
}

.about-portrait img{
  will-change: transform, opacity;
}


/* ================= PORTRAIT HOVER ================= */

.about-page .about-portrait img:hover{
  transform: scale(1.035) translateY(-2px);

  filter: brightness(1.04) contrast(1.02);

  box-shadow:
    0 0 40px rgba(255,255,255,0.06),
    0 30px 80px rgba(0,0,0,0.85);
}

/* ================= EVENT PHOTOGRAPHY SECTION ================= */

.about-commissions{
  margin: 140px 0 180px 0;   /* space above + below section */
}

/* header (label style, not headline) */

.section-header{
  margin-bottom: 100px;      /* space before grid */
}

.section-title{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.9;
}

/* ================= EVENT SINGLE PAGE ================= */

.event-single-page .gallery-wrapper{
  max-width:1500px;
  margin:0 auto;
  padding:0 40px 140px 40px;
}

/* BACK */

.back-link{
  margin: 40px 0 60px 0;
}

.back-link a{
  text-decoration:none;
  font-size:0.8rem;
  letter-spacing:0.15em;
  opacity:0.6;
}

.back-link a:hover{
  opacity:1;
}

/* HEADER */

.event-header{
  margin-bottom:40px;
}

.event-header h2{
  font-size:2rem;
  font-weight:500;
  letter-spacing:0.06em;
}

.event-meta{
  font-size:0.85rem;
  opacity:0.6;
  margin-top:10px;
  letter-spacing:0.1em;
}

/* DESCRIPTION */

.event-description{
  max-width:650px;
  margin-bottom:80px;

  font-size:1rem;
  line-height:1.8;
  opacity:0.85;
}

/* GRID */

.event-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
}

.event-grid img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}

/* RESPONSIVE */


@media (max-width: 1100px){
  .event-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px){
  .event-grid{
    grid-template-columns: 1fr;
  }
}

.grid-caption{
  color: white; /* or your intended color */
}

/* =========== EVENT PAGE =========== */
.event-hero{
  max-width: 1500px;
  margin: 0 auto 80px auto;
}

.event-hero img{
  width: 100%;
  max-height: 70vh;
  object-fit: cover;
  display: block;

  border-radius: 6px;

  box-shadow:
    0 0 80px rgba(255,255,255,0.04),
    0 40px 120px rgba(0,0,0,0.9);
}

.event-header{
  margin-bottom: 40px;
}

.event-header h2{
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.event-meta{
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  opacity: 0.5;
  margin-top: 10px;
}

.event-description{
  max-width: 680px;
  margin-bottom: 100px;

  font-family: Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.9;
  opacity: 0.85;
}

.event-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.event-grid img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;

  border-radius: 4px;

  transition: transform .3s ease, opacity .3s ease;
}

.event-grid img:hover{
  transform: scale(1.02);
  opacity: 0.9;
}


/* =========== EVENT PAGE 2 - IN USE =========== */


.event-intro{ 
  max-width: 660px;
  margin: 40px 0 80px 40px;

  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.20rem;
  line-height: 1.9;
  opacity: 0.85;
}




/* ======================== */
/* ===== PHOTO REVEAL ===== */
/* ======================== */

.photo-page .img-frame {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.photo-page .img-frame.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================== */
/* ===== GALLERY WRAPPER (NEW) ===== */
/* ================================ */

.gallery-wrapper {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ===== LIGHTBOX TYPOGRAPHY ===== */

#lightbox-title {
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* ===== PHOTO ENTRANCE ANIMATION ===== */

.photo-door {
  opacity: 0;
  transform: scale(0.96);

  transition:
    transform 0.7s cubic-bezier(.22,.61,.36,1),
    opacity 0.6s ease;

  will-change: transform, opacity;
}

.photo-door.visible {
  opacity: 1;
  transform: scale(1);
}

/* ===== MICRO DELAY (SUBTLE) ===== */

.photo-door:nth-child(1) { transition-delay: 0.02s; }
.photo-door:nth-child(2) { transition-delay: 0.04s; }
.photo-door:nth-child(3) { transition-delay: 0.06s; }
.photo-door:nth-child(4) { transition-delay: 0.08s; }
.photo-door:nth-child(5) { transition-delay: 0.1s; }
.photo-door:nth-child(6) { transition-delay: 0.12s; }
.photo-door:nth-child(7) { transition-delay: 0.14s; }
.photo-door:nth-child(8) { transition-delay: 0.16s; }
.photo-door:nth-child(9) { transition-delay: 0.18s; }
.photo-door:nth-child(10) { transition-delay: 0.2s; }

/* ===== PHOTO PAGE UNIQUE WRAPPER ===== */

.photo-page .gallery-wrapper {
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 80px;
}

.photo-page .gallery-title {
  max-width: 1700px;   /* match your grid width */
  margin: 0 auto;      /* center it */
  padding: 0 80px;     /* same side padding as grid */
  display: flex;
  justify-content: space-between;
  align-items: center;  /* ensure title and back button align vertically */
}

/*.display: flex; 
  justify-content: space-between;
  align-items: center;
}*/

.photo-page .back-button {
  margin-right: 0;
}

/* ===== PHOTO GALLERY ENTRANCE (SUBTLE) ===== */

/* ===== GALLERY FADE-IN ===== */

.gallery img {
  opacity: 0;
  transform: scale(0.94);
  filter: brightness(0.75);

  transition:
    opacity 0.8s ease-out,
    transform 0.8s cubic-bezier(.22,.61,.36,1),
    filter 0.8s ease-out;
}

.gallery img.visible {
  opacity: 1;
  transform: scale(1);
  filter: brightness(1);
}

/* Make INSTALLATION title + back-button match PHOTO layout */
.installation-page .gallery-title {
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 80px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.installation-page .back-button {
  right: 80px; /* same horizontal offset as PHOTO */
  margin-right: 0;
}


/* ===== URBEX ONLY: UNIFORM GRID ===== */

.urbex-page .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.urbex-page .gallery img {
  width: 100%;
  height: 260px;       /* tweak if needed */
  object-fit: cover;
}

/* ===== PEOPLE GALLERY (PORTRAIT GRID) ===== */

.people-page {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 40px;
}

/* === PEOPLE TITLE GRID LOCK === */

.people-page .gallery-title {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  align-items: center;
  margin-bottom: 60px;
}

.people-page .gallery-title .back-button {
  grid-column: -2 / -1;
  justify-self: end;
  align-self: center;
  position: static;
}
.people-page .back-button {
  position: static;
  transform: none;
}

  /* ===== FIX BROKEN ARROWS (MOBILE ONLY) ===== */

.people-page .back-button .back-icon {
    width: 1em;
    height: 1em;

    display: block;
    flex-shrink: 0;

    stroke: currentColor;
    fill: none;
    stroke-width: 2;

    transform: translateY(-0px); /* VERTICAL PLACEMENT */
  }

.people-page .people-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.people-page .people-gallery img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center 35%;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.people-page .people-gallery img:hover {
  transform: scale(1.03);
  filter: brightness(0.85);
}

.people-page .gallery-title h2 {
  font-size: 2.5rem;
}

.people-gallery img {
  pointer-events: auto;
}

.people-page {
  position: relative;
  z-index: 5;
}

.people-gallery {
  position: relative;
  z-index: 6;
}

.people-gallery img {
  position: relative;
  z-index: 7;
  pointer-events: auto;
}

.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
}

.lightbox.show {
  display: flex;
}

#lightbox-title {
  color: white;
  text-align: center;
  margin-top: 20px;
  font-size: 1.2em;
  font-family: Helvetica, sans-serif;
  font-weight: 300;
}

.lightbox-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.lightbox-controls button {
  background: none;
  border: none;
  color: white;
  font-size: 3rem;
  cursor: pointer;
  padding: 0 30px;
  user-select: none;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  cursor: pointer;
  background: none;
  border: none;
  color: white;
}

.gallery .framed-gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* ===== PHOTO HALL (OVERVIEW GRID) ===== */

.photo-hall {
  max-width: 1700px;
  margin: 0 auto;
  padding: 60px 80px 120px 80px;

  display: grid;
  grid-template-columns: repeat(5, 1fr);

  column-gap: 50px; /* was 60 px */
  row-gap: 110px; /* ↓ tighter vertically */
}

.photo-door {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3; /* ← key change */
  text-decoration: none;
}

.photo-door:hover .photo-thumb {
  transform: scale(1.04) translateY(-2px);
  /*filter: brightness(1) contrast(1.05) saturate(1);*/
}

.photo-thumb {
  position: absolute;
  inset: 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.45s ease;
  will-change: transform;
}


/* ===== CATEGORY NAME PLATES ===== */
.photo-label {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;

  margin-top: 12px;
  text-align: center;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.4rem;
  letter-spacing: 6px;
  font-weight: 300;
  color: white;
  opacity: .75;

  pointer-events: none;
}

.photo-label.photomanipulation {
  font-size: 1.1rem;
  letter-spacing: 4px;
}

.photo-label.girls {
  font-size: 1.3rem;
  letter-spacing: 4px;
}


/* =========================================
   INTERIORS — 2 COLUMN GRID (CLEAN)
   ========================================= */


.interiors-page .gallery-wrapper {
  max-width: 1500px;
  position: relative; /* make wrapper the positioning context for the back button */
}

.interiors-page .gallery {
  display: grid;
  padding-bottom: 140px;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px; /* equal vertical + horizontal spacing */
}

/* Restore horizontal rhythm */
.interiors-page .gallery-title {
  display: flex;
  justify-content: space-between;
  align-items: center;   /* cleaner than flex-end */

  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  position: static; /* let the wrapper be the positioning context */
  padding: 0px;
  margin-bottom: 80px;
}

/* Image behavior */
.interiors-page .gallery img {
  width: 100%;
  height: 420px;      /* adjust visually */
  object-fit: cover;  /* this is the key */
  display: block;
  transform-origin: center center;
  cursor: pointer;
  transition: transform .35s ease, filter .35s ease;
}

.interiors-page .gallery img:hover {
  transform: scale(1.02);
  filter: brightness(0.94);
}

/* Responsive fallback */
@media (max-width: 1000px) {
  .interiors-page .gallery {
    grid-template-columns: 1fr;
  }
}

/* ===== PHOTOMANIPULATION TEXT BREAK ===== */
.photomanipulation-page .split-title span {
  display: inline; /* desktop = one line */
}


/* ===== ANIMALS ===== 

.animals-page .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.animals-page .gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;

  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* ===== MATCH PHOTO GALLERY WIDTH ===== 

.animals-page .gallery-wrapper {
  max-width: 2000px;      /* match CITY 
  margin: 0 auto;
  padding: 0 80px;        /* match CITY spacing 
}*/



/* ===== GIRLS – BOOK VIEWER ===== */

.girls-back:hover {
  opacity: 1;
}


/* Header row */
.girls-page .gallery-title {
  margin-bottom: 80px;
}
/* Intro text */
.girls-intro {
  max-width: 800px;
  margin: 0 0 60px 0;   /* was 140px */ /* left-aligned, not centered / THE 3RD OPTION MOVES THE SPACE DOWN, SO IT ALTERS VERTICAL PLACEMENT OF THE GALLERY */
  text-align: justify;

  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.15rem;
  line-height: 1.8;
  opacity: 0.9;
}

.girls-intro h2 {
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: 0.12em;
  font-size: 1.8rem;
  font-weight: 400;
}


/* Book container */
.girls-book {
  display: flex;
  flex-direction: column;
  align-items: center;         /* ← HARD CENTER */
  gap: 40px;
}

/* Image stage */
.girls-page-image {
  width: 100%;
  max-width: 1400px;
  height: 80vh;

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

  margin: 0 auto;              /* ← CRITICAL */
}

.girls-page-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: pointer;
}

/* Controls */
.girls-controls {
  display: flex;
  align-items: center;
  gap: 40px;

  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 0.15em;
  opacity: 0.8;
}

.girls-controls button {
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}

.girls-controls button:hover {
  opacity: 0.6;
}

/* Outro */
.girls-outro {
  max-width: 720px;
  margin: 140px auto 0 auto;   /* ← CENTERED */
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  opacity: 0.7;
  text-align: center;
}



/* ==========================================================================================================================================================================================
   PHOTO - SEPARATE PAGES CSS OVERHAUL
   ========================================================================================================================================================================================== */

/* === CITY PAGE === */
.city-page {
  margin: 0;
  background-color: black;
  color: white;
  font-family: Helvetica, sans-serif;
}

.city-page .back-button.interiors-style {
  right: 0px;
}

.city-page .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
  
  min-height: 80vh;
}

.city-page .gallery img {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
  object-fit: cover;
}

.city-page .gallery img:hover {
  transform: scale(1.03);
  filter: brightness(0.8);
}

.city-page .gallery-wrapper {
  padding: 0 40px;
  padding-bottom: 80px; /*fixes CITY bottom padding */
}

.city-page .lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.city-page .lightbox.show {
  display: flex;
}

.city-page .lightbox img {
  max-width: 90%;
  max-height: 90%;
}

.city-page #lightbox-title {
  margin-top: 20px;
  font-size: 1.2em;
  font-weight: 300;
}

.city-page .lightbox-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.city-page .lightbox-controls button {
  background: none;
  border: none;
  color: white;
  font-size: 3rem;
  cursor: pointer;
  padding: 0 30px;
}

.city-page .close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  cursor: pointer;
  background: none;
  border: none;
  color: white;
}

/* === URBEX PAGE === */
.urbex-page {
  margin: 0;
  background-color: black;
  color: white;
  font-family: Helvetica, sans-serif;
}

.urbex-page .back-button.interiors-style {
  right: 0px;
}

.urbex-page .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
  
  min-height: 80vh;
}

.urbex-page .gallery img {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
  object-fit: cover;
}

.urbex-page .gallery img:hover {
  transform: scale(1.03);
  filter: brightness(0.8);
}

.urbex-page .gallery-wrapper {
  padding: 0 40px;
  padding-bottom: 80px; /*fixes URBEX bottom padding */
}

.urbex-page .lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.urbex-page .lightbox.show {
  display: flex;
}

.urbex-page .lightbox img {
  max-width: 90%;
  max-height: 90%;
}

.urbex-page #lightbox-title {
  margin-top: 20px;
  font-size: 1.2em;
  font-weight: 300;
}

.urbex-page .lightbox-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.urbex-page .lightbox-controls button {
  background: none;
  border: none;
  color: white;
  font-size: 3rem;
  cursor: pointer;
  padding: 0 30px;
}

.urbex-page .close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  cursor: pointer;
  background: none;
  border: none;
  color: white;
}

/* === ANIMALS PAGE === */
.animals-page {
  margin: 0;
  background-color: black;
  color: white;
  font-family: Helvetica, sans-serif;
}

.animals-page .gallery-title {
  max-width: 1500px;
  margin: 0 auto 60px auto;
  padding: 0 40px;

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

  margin-bottom: 40px;
}

.animals-page .back-button interiors-style {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 0.85rem;
  color: white;
  text-decoration: none;

  padding: 6px 12px;
  border: 1px solid white;
  border-radius: 4px;

  transition: background 0.3s, color 0.3s;
}

.animals-page .back-button:hover {
  background-color: white;
  color: black;
}

.animals-page .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
  
  min-height: 80vh;
}

.animals-page .gallery img {
  width: 100%;
  height: 215px;
  object-fit: cover;
  display: block;

  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.animals-page .img-frame {
  height: 229px;        /* ← your saved value */
  overflow: hidden;
}

.animals-page .img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.animals-page .img-frame {
  height: 229px;   /* tweak this */
  overflow: hidden;
}

.animals-page .img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.animals-page .gallery img:hover {
  transform: scale(1.03);
  filter: brightness(0.8);
}

.animals-page .gallery-wrapper {
  
  margin: 0 auto;
  padding: 0 80px;        /* match CITY spacing
  padding-bottom: 80px; /* fixes ANIMALS bottom padding */
}

.animals-page .lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.animals-page .lightbox.show {
  display: flex;
}

.animals-page .lightbox img {
  max-width: 90%;
  max-height: 90%;
}

.animals-page #lightbox-title {
  margin-top: 20px;
  font-size: 1.2em;
  font-weight: 300;
}

.animals-page .lightbox-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.animals-page .lightbox-controls button {
  background: none;
  border: none;
  color: white;
  font-size: 3rem;
  cursor: pointer;
  padding: 0 30px;
}

.animals-page .close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  cursor: pointer;
  background: none;
  border: none;
  color: white;
}

body.event-page.barbora-sacher-page .gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 40px;
}

body.event-page.barbora-sacher-page .gallery img {
  width: 100%;
  height: 420px;           /* ← key fix */
  object-fit: cover;
  display: block;
}


/* ===== UNIFIED GALLERY SYSTEM ===== */

.gallery-page .gallery-wrapper {
  max-width: 1500px; /*was 1153px to match the CITY grid width */
  margin: 0 auto;        /* ← CENTERED (correct) */
  padding: 0 40px;       /* ← INTERNAL GUTTER (this is the trick) */
}

.gallery-page .gallery img {
  width: 100%;        /* ← CRITICAL */
  height: 215px;
  object-fit: cover;
  display: block;
}

/* TITLE ROW */

.gallery-page .gallery-title {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  margin: 0 0 20px 0; /* remove any weird offsets */
}

/* TITLE */

.gallery-page .gallery-title h2 {
  margin: 0;
  text-align: left;
}

/* BACK BUTTON */

.gallery-page .back-button {
  margin: 0;
  align-self: center;
}

/* GALLERY */

.gallery-page .gallery {
  width: 100%;
  margin: 0;
}



.minimal-page .gallery {
  display: grid !important;

  grid-template-columns: repeat(4, 1fr); /* ← force 4 columns like CITY */
  gap: 20px;

  padding: 40px 0 0 0; /* no side padding → aligns with wrapper */
}

.minimal-page .gallery img {
  width: 100%;
  height: 215px;  /* match CITY */
  object-fit: cover;
  object-position: center;

  display: block;
}



/* ===============================
   VIDEOART — PROJECTION WALL
   =============================== */

/* =========================================
   VIDEOART — CLEAN ISOLATED LAYOUT
   ========================================= */

/* contain width */
.video-wall-page .gallery-wrapper {
  max-width: 1500px;
  margin: 0 auto;
  padding: 2px 40px;
}

/*scrollbar killer*/
.video-wall {
  overflow: hidden;
}

.video-wall-page {
  overflow-x: hidden;
}

.video-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 80px 60px;
}

.video-screen {
  width: 100%;
}

.video-screen {
  will-change: transform;
  transform-origin: center center;
}

.video-screen {
  transform-style: preserve-3d;
}

/* title row */
.video-wall-page .gallery-title {
  margin-bottom: 100px;
}

.video-wall-page {
  overflow-x: hidden;
}

.video-wall {
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* grid */
.video-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 80px 60px;
}

/* screens */
.video-screen {
  position: relative;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;

  box-shadow:
    0 0 40px rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(255,255,255,.05);

  transition: transform .5s ease, box-shadow .5s ease;
}

.video-screen {
  will-change: transform;
}

.video-screen {
  transform-origin: center center;
}

.video-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.35),   /* was .65 → huge difference */
    rgba(0,0,0,.05)
  );
  transition: opacity .3s ease;
}

.video-screen:hover {
  transform: scale(1.04);
  box-shadow:
    0 0 80px rgba(255,255,255,.15),
    inset 0 0 0 1px rgba(255,255,255,.15);
}

.video-wall .video-screen.visible:hover {
  transform: translateZ(0) scale(1.04);
}

.video-screen:hover::after {
  opacity: .4;
}

.video-wall {
  overflow: visible; /* instead of hidden */
}

.video-title {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.05rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 300;
  z-index: 2;
}

.video-year {
  display: block;
  opacity: .6;
  font-size: .7rem;
  margin-top: 6px;
  letter-spacing: .25em;
}

/* responsive */
@media (max-width: 1200px) {
  .video-wall { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .video-wall { grid-template-columns: 1fr; }
}

/* kill link colors inside video screens */
.video-screen,
.video-screen:visited,
.video-screen:hover,
.video-screen:active {
  color: white;
  text-decoration: none;
}

/* make sure title inherits clean color */
.video-title {
  color: white;
}


/* ========================================================= */
/* ================= VIDEO PROJECT BASE ==================== */
/* ========================================================= */

/*.video-project { /* MOVES THE WHOLE PAGE DOWN - SHADOWS, CORRIDOR, PHENOMENA, STAIRS
  margin-top: 140px; */

/* ===== UNIFIED VIDEO TITLE SYSTEM (ALL VIDEO PAGES) ===== */

.video-project .gallery-title {
  margin-bottom: 60px !important;   /* same spacing everywhere */
}

.video-project .video-title-left,
.video-project .video-title-block {
  display: flex;
  flex-direction: column;
}

/* ================= VIDEO POPISEK ================= */
.video-project .video-meta {
  margin-top: 18px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.45;
}


  /* title row */
.video-project .gallery-title {
  margin-bottom: 60px;  /* was 100px */
}

/* ================= VIDEO ANIMACE ================= */
.video-wall .video-screen {
  opacity: 0;
  transform: translateY(30px) translateZ(-120px) scale(0.9);
  transition: 
    transform 0.6s cubic-bezier(.22,.61,.36,1), 
    opacity 0.5s ease;
}

.video-wall-page .video-screen.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}


/* ================= VIDEO STAGE ================= */

.video-stage { /*SHADOWS, CORRIDOR, PHENOMENA, STAIRS*/
  max-width: 1800px;
  margin: 0 auto 140px auto;

  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background: black;
}

/* ================= VIDEO STAGE PAGE DEFINITON ================= */
.stage-page {
  padding-top: 0 !important;
}

video {     /* trying to remove the small video */
  display: block;
}

.video-stage video {
  width: 100%;
  max-height: 85vh;
  object-fit: contain;

  border-radius: 6px;
  box-shadow:
    0 0 80px rgba(255,255,255,0.08),
    0 0 200px rgba(0,0,0,0.8);

  background: black;
}

/*.video-corridor .video-stage { // OLD CORRIDOR DEFINITION, MOVED THE VIDEO DOWN ON MOBILE / ENABLE IF ERRORS
  max-width: 1800px;
  min-height: 80vh;
}
.video-shadows .video-stage video {
  max-height: 88vh;
}


/* ===== SHADOWS HEADER ALIGNMENT ===== */

.video-shadows .gallery-title {
  margin-bottom: 60px;
}

/* ========================================== */
/* ALIGN VIDEO BACK-BUTTONS WITH PAGE CONTENT */
/* ========================================== */
.video-shadows .back-button,
.video-corridor .back-button,
.video-phenomena .back-button,
.video-stairs .back-button,
.video-morning-coffee .back-button,
.video-oddities .back-button,
.video-touch-the-tape .back-button,
.video-blinking-windows .back-button,
.video-glass-eyes-afterimage .back-button {
  right: 0px;
}

/* ===== VIDEO PROJECT YEAR (SUBTLE) ===== */

.video-project .gallery-title h2 span {
  font-size: 0.6em;
  letter-spacing: 0.1em;
  opacity: 0.35;
  font-weight: 300;
}

/* ===== VIDEO PLAYER PRESENTATION ===== */

.video-stage {
  position: relative;
}

.video-stage video {
  cursor: pointer;
  border-radius: 6px;
  box-shadow:
    0 0 80px rgba(255,255,255,0.08),
    0 0 200px rgba(0,0,0,0.8);
}

/* paused-state grading */
.video-stage video.is-paused {
  filter: brightness(0.95) contrast(1.02);
}

/* cinematic vignette */
.video-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,0.25) 100%
  );
}

/* ===== VIDEO TEXT — EXHIBITION TYPOGRAPHY ===== */

.video-shadows .video-text {
  display: flex;
  justify-content: flex-start;
}

.video-text-body {
  max-width: 720px; /*was 680px*/
  padding: 0 20px;
}

/* base paragraph */
.video-text-body p {
  margin-bottom: 1.6em;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  opacity: 0.85;
}

/* opening sentence */
.video-text-body .lead {
  font-size: 1.05rem;
  opacity: 0.95;
}

/* subtle emphasis */
.video-text-body em {
  font-style: italic;
}

/* credit */
.video-text-body .credit {
  margin-top: 3em;
  font-size: 0.85rem;
  opacity: 0.55;
  text-align: left;
  letter-spacing: 0.05em;
}

/* ========================================================= */
/* ================= VIDEO PROJECT BASE ==================== */
/* ========================================================= */

/* ===== VIDEO TITLE LEFT GROUP ===== */
.video-title-left {
  display: flex;
  flex-direction: column;
}

/* =========================================
   MORNING COFFEE — 2 CHANNEL INSTALLATION
   ========================================= */

.video-stage-dual-morning-coffee { /* VIDEOSTAGE MORNING COFFEE */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;              /* space between channels */
  max-width: 1800px;
  margin: 0 auto 140px auto;
  min-height: 80vh;
  margin-top: 40px;   /* pushes the video down */
}

/* each channel behaves like its own screen */
.video-channel {
  flex: 1;
  display: flex;
  justify-content: center;
}

.video-channel video {
  width: 100%;
  max-height: 82vh;
  object-fit: contain;

  border-radius: 6px;
  box-shadow:
    0 0 80px rgba(255,255,255,0.06),
    0 0 200px rgba(0,0,0,0.8);

  background: black;
}

/* =========================================
   MORNING COFFEE — MASTER CONTROL
   ========================================= */

.installation-control {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin: 40px 0 100px 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.18em;
}

/* main action */
.installation-button {
  cursor: pointer;
  padding: 14px 26px;
  font-size: 0.9rem;
  border: 1px solid rgba(255,255,255,0.6);
  text-transform: uppercase;
  transition: all .35s ease;
  user-select: none;
}

.installation-button:hover {
  background: white;
  color: black;
  letter-spacing: 0.25em;
}

/* secondary control */
.installation-button.subtle {
  opacity: 0.5;
  font-size: 0.75rem;
  padding: 10px 18px;
}

.installation-button.subtle:hover {
  opacity: 1;
}

/* glowing state when installation runs */
.installation-button.active {
  background: rgba(255,255,255,0.2);
  color: black;

  box-shadow:
    0 0 6px rgba(255,255,255,0.35),
    0 0 14px rgba(255,255,255,0.18),
    0 0 24px rgba(255,255,255,0.08);
}

/* ===== MORNING COFFEE TEXT ALIGNMENT FIX ===== */

.video-morning-coffee .video-text {
  justify-content: center;
}

/*.video-text-body {
  max-width: 700px;
  width: 100%;
}*/

/* ================= ABSTRACT ARCHITECTURE ================= */

/* TEXT BLOCK */
.installation-text {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 160px;
}

.installation-text-body {
  max-width: 780px;
  font-size: 1.05rem;
  line-height: 1.9;
  opacity: 0.9;
}

.installation-text-body .lead {
  font-size: 1.15rem;
  opacity: 1;
  margin-bottom: 1.6em;
}

/* ===== ABSTRACT ARCHITECTURE — VIDEO ADJUSTMENT ===== */
.video-abstract-architecture .video-stage {
  margin-top: -20px;   /* adjust value */
}

/* ===== ABSTRACT ARCHITECTURE — FULL WALL TEXT ===== */

.video-text-abstract-architecture {
  max-width: 1100px;
  margin-left: 0;        /* stick to left */
  padding-left: 40px;    /* aligns with video frame edge */
  padding-right: 40px;
}

.video-text-abstract-architecture .ellipsis {
  text-align: left;
  letter-spacing: 0.3em;
  opacity: 0.5;
}

.architecture-list {
  margin: 2em 0 2em 60px;
  line-height: 1.8;
}


/* Abstract Architecture text spacing */
.video-text-abstract-architecture p {
  margin-bottom: 1.8em;
}

.video-text-abstract-architecture .citation {
  opacity: 0.6;   /* same size, just lighter */
}

/* ALIGN ABSTRACT ARCHITECTURE TEXT WITH VIDEO EDGE */

.video-text-abstract-architecture {
  max-width: 1700px;          /* same as video container */
  margin: 0 auto 200px auto;  /* centered block */
  padding: 0;                 /* kill inner offset */
}

/* inner text column */
.video-text-abstract-architecture p,
.video-text-abstract-architecture ul {
  max-width: 1050px;          /* readable line length */
}

/* ===== ABSTRACT ARCHITECTURE INSTALLATION PHOTO ===== */

.abstract-architecture-documentation {
  max-width: 1400px;   /* same visual stage width as viewer */
  margin: 300px auto;  /* same vertical rhythm */
  padding: 0 40px;
  display: flex;
  justify-content: center;
}

.abstract-architecture-documentation img {
  width: 100%;
  max-height: 70vh;    /* ← matches viewer height */
  object-fit: contain;
  display: block;
  border-radius: 6px;

  box-shadow:
    0 0 80px rgba(255,255,255,0.05),
    0 20px 60px rgba(0,0,0,0.7);
}


/* ===== ABSTRACT ARCHITECTURE MODEL ROTARY STAGE ===== */

.model-rotation-gallery {
  max-width: 1400px;     /* same stage width */
  margin: 200px auto 200px auto;   /* same spacing rhythm */
  padding: 0 40px;
  display: flex;
  justify-content: center;
}

.turntable-viewer {
  width: 100%;
  height: 70vh;          /* SAME visual height as viewer */
  max-height: 900px;
  cursor: grab;
  position: relative;
  border-radius: 6px;
  overflow: hidden;

  box-shadow:
    0 0 80px rgba(255,255,255,0.05),
    0 0 120px rgba(0,0,0,0.7);
}

.turntable-viewer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* ===== 3D OBJECT VIEWER (ABSTRACT ARCHITECTURE) ===== */

.installation-object {
  display: flex;
  justify-content: center;
  margin: 200px auto;
  max-width: 1400px;
  padding: 0 40px;
}

#viewer {
  width: 100%;
  height: 70vh;
  max-height: 900px;
  cursor: grab;
  position: relative;
  border-radius: 8px;

  /* soft light spill */
  box-shadow:
    0 0 40px rgba(255,255,255,0.05),
    0 0 120px rgba(255,255,255,0.06),
    0 0 220px rgba(255,255,255,0.04);

  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,0.04) 0%,
    rgba(0,0,0,0) 70%
  );
}

#viewer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;

  box-shadow:
    inset 0 0 80px rgba(255,255,255,0.06),
    inset 0 0 200px rgba(255,255,255,0.04);
}

/* ===== ABSTRACT ARCHITECTURE — CREDIT PLAQUE ===== */

/* Attach credit plaque to the object, not the page rhythm */
.installation-object + .abstract-architecture-thanks {
  margin-top: 60px;   /* visual bonding distance */
}

.abstract-architecture-thanks {
  max-width: 720px;
  padding: 45px 60px;
  min-height: 180px;
  margin: 220px auto 80px auto;
    margin-top: -120px;   /* pulls plaque upward */

  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: rgba(255,255,255,0.75);

  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;

  background: rgba(255,255,255,0.02);

  box-shadow:
    0 0 40px rgba(255,255,255,0.03),
    0 20px 60px rgba(0,0,0,0.6);
}

/* title */
.thanks-title {
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 18px;
}

/* company link */
.abstract-architecture-thanks a {
  display: inline-block;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: white;
  margin-bottom: 18px;
}

.abstract-architecture-thanks a:hover {
  opacity: 0.6;
}

/* gratitude text */
.thanks-gratitude {
  font-size: 0.85rem;
  opacity: 0.6;
  margin: 10px 0 6px 0;
}

/* person */
.thanks-person {
  font-size: 1rem;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

/* =========================================
   ODDITIES — VERTICAL DUAL CHANNEL STAGE
   ========================================= */

.video-stage-dual-oddities {
  display: flex;
  flex-direction: column;        /* STACK */
  align-items: center;
  justify-content: center;
  gap: 50px;

  max-width: 1200px;
  margin: 0 auto 160px auto;

  min-height: 85vh;              /* stage presence */
}

/* video scale */
.video-stage-dual-oddities video {
  width: 100%;
  max-width: 900px;              /* video width */
  max-height: 40vh;              /* ← THIS is the magic */
  object-fit: contain;

  border-radius: 6px;
  box-shadow:
    0 0 60px rgba(255,255,255,0.06),
    0 0 180px rgba(0,0,0,0.8);
}

/* ===== ODDITIES — CINEMATIC VIDEO ENTRY ===== */

.video-oddities .video-stage-dual-oddities {
  margin-top: 240px;   /* pushes both videos one scroll lower */
}

/* ===== ODDITIES TEXT ALIGNMENT - CLOSER TO VIDEO ===== */

.video-text-oddities {
  max-width: 1500px;
  margin: 10px auto 0 auto;   /* pulls text upward, merged value */
  padding: 0 40px;  /* same side padding as title wrapper */
}

/* ===== ODDITIES INSTALLATION PHOTOS ===== */

.oddities-object-gallery {
  max-width: 1500px;
  margin: 160px auto;
  padding: 0 40px;

  display: flex;
  justify-content: center;  /* keep centered */
  gap: 99px;               /* ← THIS creates alignment illusion */
  flex-wrap: wrap;
}

.oddities-photo {
  max-width: 600px;      /* same visual weight as videos */
  width: 100%;
  height: auto;
  cursor: pointer;
  border-radius: 6px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.oddities-photo:hover {
  transform: scale(1.02);
  opacity: 0.9;
}

#odditiesLightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 6px;
}

/* ===== BLINKING WINDOWS ===== */

.video-blinking-windows .blinking-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;

  margin: 0 auto 200px auto;
}

.blink-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;

  box-shadow:
    0 0 40px rgba(255,255,255,0.04),
    0 0 120px rgba(0,0,0,0.8);
}

.blink-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1200px) {
  .video-blinking-windows .blinking-wall {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .video-blinking-windows .blinking-wall {
    grid-template-columns: 1fr;
  }
}

/* ================= BLINKING WINDOWS WARNING GATE ================= */

.warning-gate {
  position: fixed;
  inset: 0;
  background: black;
  z-index: 99999;

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

  animation: fadeInGate 1s ease forwards;
}

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

.warning-panel {
  max-width: 620px;
  padding: 50px 60px;
  text-align: center;

  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.02);

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: rgba(255,255,255,0.85);

  box-shadow:
    0 0 60px rgba(255,255,255,0.05),
    0 0 200px rgba(0,0,0,0.9);
}

.warning-panel h2 {
  font-weight: 300;
  letter-spacing: 0.25em;
  margin-bottom: 35px;
}

.warning-main {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 22px;
}

.warning-sub {
  font-size: 0.9rem;
  opacity: 0.6;
  margin-bottom: 45px;
}

.warning-panel button {
  padding: 14px 32px;
  border: 1px solid white;
  background: none;
  color: white;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: all 0.35s ease;
}

.warning-panel button:hover {
  background: white;
  color: black;
  letter-spacing: 0.28em;
}

.video-blinking-windows .gallery-title {
  margin-bottom: 60px;
}

/* ================= GLOBAL MENU ================= */

.site-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 4000;
}

/* 3-line icon */
.menu-trigger {
  width: 28px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-trigger span {
  height: 2px;
  background: white;
  display: block;
  transition: 0.3s ease;
}

/* ================= SIDE PANEL ================= */

.menu-panel {
  position: fixed;
  top: 0;
  right: -520px;                 /* hidden state */
  width: 520px;
  height: 100vh;

  background: rgba(32,32,32,0.98);
  backdrop-filter: blur(8px);

  padding: 140px 80px 80px 80px;

  display: flex;
  flex-direction: column;
  gap: 60px;

  transition: right 0.45s cubic-bezier(.7,0,.3,1);
  z-index: 3500;
}

.menu-panel.active {
  right: 0;
}


/* Optional subtle shadow edge */
.menu-panel::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(to left, rgba(0,0,0,.45), transparent);
}

/* Columns */
.menu-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Links */
.menu-column a {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: white;
  letter-spacing: 0.25em;
  font-size: 0.9rem;
  opacity: 0.75;
  transition: 0.25s ease;
}

.menu-column a:hover {
  opacity: 1;
}

/* ===== ACTIVE MENU STATE — ARCHITECTURAL ===== */

.menu-column a {
  position: relative;
}

/* ACTIVE PAGE */
.home-page .menu-column a[href="index.html"],
.about-page .menu-column a[href="about.html"],
.photo-page .menu-column a[href="photo.html"],
.video-wall-page .menu-column a[href="video.html"], 
.installation-page .menu-column a[href="installation.html"] {
  opacity: 1;
  font-weight: 500;
}

/* LEFT STRUCTURAL LINE */
.home-page .menu-column a[href="index.html"]::before,
.about-page .menu-column a[href="about.html"]::before,
.photo-page .menu-column a[href="photo.html"]::before,
.video-wall-page .menu-column a[href="video.html"]::before,
.installation-page .menu-column a[href="installation.html"]::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: rgba(255,255,255,0.9);
}




/* ===== Prevent background scroll when menu is open ===== */
body.menu-open {
  overflow: hidden;
}

/* ================= HAMBURGER INSIDE PANEL ================= */

.menu-trigger {
  position: absolute;
  top: 40px;
  right: 50px;
  z-index: 3600;   /* higher than .menu-panel */

  width: 28px;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-trigger span {
  height: 2px;
  background: white;
  display: block;
  transition: 0.3s ease;
}

/* Animate hamburger to X when active */
.menu-trigger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-trigger.active span:nth-child(2) {
  opacity: 0;
}

.menu-trigger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}


/* ==================================
      INSTALLATION TITLE BLOCK
   ================================== */

.installation-page .gallery-title h2 {
  font-size: 2.5rem;
  margin-bottom: 0px; /* FIX */
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* INSTALLATION TITLE LAYOUT */

.installation-page .gallery-title{
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 80px;

  display: flex;
  justify-content: space-between;
  align-items: center; /* critical */
}



/* Ensure arrow glyph and text render and align like PHOTO back-button */
.installation-page .back-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* Back icon sizing and alignment for all back-buttons */
.back-button .back-icon {
  width: 0.95em;
  height: 0.95em;
  display: inline-block;
  vertical-align: middle;
}

/* =========================================
   DELETE - RED OUTLINE FOR TITLE LAYOUT TESTING
   ========================================= */
/*.gallery-title{
outline:1px solid red;
}

/* =========================================
   INSTALLATION — VERTICAL POSTER STAGE
   ========================================= */

.installation-stage {
  max-width: 1500px;
  margin: 120px auto 200px auto;
  padding: 0 40px;

  display: flex;
  justify-content: center;
  gap: 60px;
}

/* ================= PANEL ================= */

.installation-panel {
  position: relative;
  width: 320px;
  height: 58vh;
  max-height: 620px;

  overflow: hidden;
  border-radius: 6px;

  display: block;
  text-decoration: none;

  /* base lighting */
  box-shadow:
    0 0 40px rgba(255,255,255,.05),
    0 40px 80px rgba(0,0,0,.8);

  /* === ANIMATION BASE === */
  opacity: 0;
  transform: scale(0.92);
  transform-origin: center center;

  transition:
    transform 0.7s cubic-bezier(.22,.61,.36,1),
    opacity 0.6s ease,
    box-shadow 0.5s ease;

  will-change: transform, opacity;
  backface-visibility: hidden;

  z-index: 0;
}

/* visible state */
.installation-panel.visible {
  opacity: 1;
  transform: scale(1);

  /* subtle activation glow */
  box-shadow:
    0 0 60px rgba(255,255,255,.08),
    0 40px 100px rgba(0,0,0,.9);
}

/* ================= HOVER ================= */

.installation-panel:hover {
  transform: translateY(-10px) scale(1.035);
  z-index: 10;

  box-shadow:
    0 0 80px rgba(255,255,255,.12),
    0 50px 120px rgba(0,0,0,.9);
}

/* ================= IMAGE ================= */

.installation-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition: transform 0.7s ease;
}

.installation-panel:hover img {
  transform: scale(1.05);
}

/* ================= LABEL ================= */

.installation-label {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 300;
  color: white;

  z-index: 2;
}

.installation-label em {
  display: block;
  font-style: normal;
  font-size: .7rem;
  opacity: .6;
  margin-top: 8px;
  letter-spacing: .3em;
}

/* ================= GRADIENT ================= */

.installation-panel::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to top,
    rgba(0,0,0,.7),
    rgba(0,0,0,.1) 60%,
    rgba(0,0,0,.4)
  );

  transition: opacity .4s ease;
}

.installation-panel:hover::after {
  opacity: .6;
}

/* ===========================================
   INSTALLATION — CROP CONTROL
   =========================================== */

.installation-panel.abstract img {
  object-position: 50% 50%;
}

.installation-panel.umbrella img {
  object-position: 8% 50%;
}

.installation-panel.birds img {
  object-position: 63% 30%;
}

/* ===========================================
   UMBRELLA PAGE
   =========================================== */

.umbrella-page .gallery-title {
  margin-bottom: 30px;
}

.umbrella-page .video-stage {
  margin: 0px auto 90px;
}

.umbrella-page .installation-text {
  max-width: 900px;
  margin: 80px 0;

  display: flex;
  flex-direction: column;

  line-height: 1.8;
}

.umbrella-page .installation-text .lead {
  width: auto;
  max-width: none;
}

/* INSTALLATION TITLES — match video pages */

.installation-project .video-title-left h2{
  font-size:2.4rem;
  letter-spacing:0.12em;
  font-weight:400;
}

.installation-project .video-title-left span{
  opacity:0.6;
}

.installation-project .video-meta{
  margin-top:10px;
  font-size:0.8rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  opacity:0.6;
}

/* ========================================== */
/* ALIGN INSTALLATION TITLES WITH VIDEO WIDTH */
/* ========================================== */

.umbrella-page .gallery-title{
    position:relative;
}

.umbrella-page .back-button{
    position:absolute;
    right:0;
    top:0;
}

.umbrella-page .back-button{
    position:absolute;
    right:0;
    top:0;
}

/* ============================= */
/* UMBRELLA – INSTALLATION DOCS  */
/* ============================= */

.umbrella-page .installation-docs{
    max-width:1400px;
    margin:220px auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:520px 520px;
    gap:24px;
}

/* swap order */

.umbrella-page .installation-docs img:nth-child(1){
    grid-column:1;
    grid-row:2;
}

.umbrella-page .installation-docs img:nth-child(2){
    grid-column:1;
    grid-row:1;
}

/* tall thumbnail */

.umbrella-page .installation-docs img:nth-child(3){
    grid-column: 2;
    grid-row: 1 / span 2;
}

.umbrella-page .installation-docs img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.umbrella-page .installation-docs img{
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.umbrella-page .installation-docs img:hover{
    transform: scale(1.02);
    opacity:0.9;
}

/* UMBRELLA PHOTOS CURSOR */
.umbrella-page .installation-docs img{
    cursor:pointer;
}

/* UMBRELLA LIGHTBOX */

.umbrella-lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.95);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:999;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.25s ease;
}

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

.umbrella-lightbox img{
    max-width:92vw;
    max-height:92vh;
    object-fit:contain;
}

/* UMBRELLA LIGHTBOX NAVIGATION */

.umbrella-prev,
.umbrella-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    background:none;
    border:none;

    color:white;
    font-size:48px;
    cursor:pointer;

    opacity:0.7;
    transition:opacity 0.2s ease;
}

.umbrella-prev:hover,
.umbrella-next:hover{
    opacity:1;
}

.umbrella-prev{
    left:40px;
}

.umbrella-next{
    right:40px;
}

.umbrella-lightbox-content{
    text-align:center;
}

.umbrella-caption{
    margin-top:20px;
    font-size:0.9rem;
    opacity:0.7;
    letter-spacing:0.05em;
}

.umbrella-lightbox-content{
    text-align:center;
}

.umbrella-caption{
    margin-top:20px;
    font-size:0.9rem;
    opacity:0.7;
}

/* ============================= */
/* BIRDS PAGE */
/* ============================= */

.birds-page .gallery-title{
  position:relative;
}

.birds-page .back-button{
  position:absolute;
  right:0;
  top:0;
}

/* ============================= */
/* BIRDS HERO IMAGE */
/* ============================= */

.birds-hero{
  max-width:1800px;     /* match video-stage width */
  margin:120px auto 100px auto;
  overflow:hidden;      /* prevents zoom overflow */
  border-radius:6px;
}

.birds-hero img{
  width:100%;
  height:45vh;
  object-fit:cover;
  object-position:center 55%;

  display:block;

  /* glow */

  box-shadow:
    0 0 60px rgba(255,255,255,0.05),
    0 0 120px rgba(255,255,255,0.03),
    0 40px 100px rgba(0,0,0,0.9);

  /* animation */

  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease,
    filter 0.45s ease;
}

/* hover effect */

.birds-hero img:hover{
  transform:scale(1.035);

  box-shadow:
    0 0 90px rgba(255,255,255,0.08),
    0 0 180px rgba(255,255,255,0.05),
    0 50px 120px rgba(0,0,0,0.95);

  filter:brightness(1.05);
}



/* ============================= */
/* BIRDS TEXT */
/* ============================= */

.birds-text{
  column-count: unset;
  columns: unset;

  max-width:720px;
  margin:80px 0;     /* remove auto centering */

  line-height:1.9;
}

.birds-text p{
  max-width:720px;
  font-family: Helvetica, Arial, sans-serif;
  font-size:1.05rem;
  line-height:1.9;
  opacity:0.9;
  margin-bottom:1.6em;
}

/* ============================= */
/* BIRDS VIDEO SPACING */
/* ============================= */

.birds-page .video-stage{
  margin-top:100px;
}

/* INSTALLATION PHOTO */

.birds-installation{
  max-width:1200px;
  margin:180px auto;
}

.birds-installation img{
  width:100%;
  height:auto;
  border-radius:6px;
}

/* DETAIL PHOTOS */

.birds-details{
  max-width:1200px;
  margin:140px auto;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.birds-details img{
  width:100%;
  height:420px;
  object-fit:cover;
  border-radius:6px;

  transition:transform .25s ease, opacity .25s ease;
}

.birds-details img:hover{
  transform:scale(1.02);
  opacity:.9;
}

/* ============================= */
/* BIRDS INSTALLATION GALLERY */
/* ============================= */

.birds-installation-gallery{
    max-width:1400px;
    margin:200px auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:520px 420px;
    gap:28px;
}

/* large top image */

.birds-installation-gallery img:nth-child(1){
    grid-column:1 / span 2;
    grid-row:1;
}

/* bottom images */

.birds-installation-gallery img:nth-child(2){
    grid-column:1;
    grid-row:2;
}

.birds-installation-gallery img:nth-child(3){
    grid-column:2;
    grid-row:2;
}

/* image behaviour */

.birds-installation-gallery img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    border-radius:6px;

    transition:transform .25s ease, opacity .25s ease;
}

.birds-installation-gallery img:hover{
    transform:scale(1.02);
    opacity:.9;
}

/* Animation for video screens
.video-wall .video-screen {
  transform: translateZ(-200px) scale(0.65);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.video-wall .video-screen.visible {
  transform: translateZ(0) scale(1);
  opacity: 1;
}*/


/* ========================================= */
/* ABTSRACT ARCHITECTURE - BACK BUTTON FIX  */
/* ======================================= */

.video-abstract-architecture .back-button .back-icon {
  position: relative;
  top: 1px;   /* micro-adjust */
}

.abstract-architecture-page .back-button{ /* FIX FROM THE .VIDEO, GUESS, DELETE? */
    letter-spacing: normal;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    position:absolute;
    right:0;
    top:10px;
}

.video-abstract-architecture .back-button{ /* FIXED */ /* USELESS? */
    letter-spacing: normal;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    position:absolute;
    right:0;
    top:10;
}

.video-abstract-architecture .gallery-title{ /* USELESS? */
    position:relative;
}



















/* =========================================================
🎯 EXPERIMENT - STANDARD PHOTO GALLERY SYSTEM (CITY-BASED)
========================================================= */

/* ===== WRAPPER (MASTER ALIGNMENT) ===== */

.standard-page .gallery-wrapper {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 40px 80px 40px;
}

/* ===== TITLE ROW ===== */

.standard-page .gallery-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.standard-page .gallery-title h2 {
  margin: 0;
  font-size: 2.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;

  display: block;
}

/* ===== BACK BUTTON ===== */

.standard-page .back-button {
  position: absolute;
  right: 0px;
  top: 4px;
  transform: none;

  display: inline-flex;
  align-items: center;
  
  
  gap: 6px;

  font-size: 0.9rem;
  color: white;
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid white;
  border-radius: 4px;
  transition: background 0.3s, color 0.3s;
}

.standard-page .back-button .back-icon { /* ARROW */
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  
  display: block;

  position: relative;
  top: 0.9px; /* moved the arrow to the center */
}

.standard-page .back-button .back-icon path {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.standard-page .back-button:hover {
  background-color: white;
  color: black;
}



/* ===== GRID GALLERY ===== */

.standard-page .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;

  min-height: 60vh;
}

/* ===== THUMBNAILS ===== */

.standard-page .gallery img {
  width: 100%;
  height: 215px;

  object-fit: cover;
  object-position: center;

  display: block;
  cursor: pointer;

  /* load state */
  opacity: 0;
  transform: scale(0.94);

  transition:
    transform 0.35s cubic-bezier(.22,.61,.36,1),
    filter 0.3s ease,
    opacity 0.5s ease;

  will-change: transform;
}

/* visible state */

.standard-page .gallery img.visible {
  opacity: 1;
  transform: scale(1);
}

/* ===== HOVER ===== */

.standard-page .gallery img:hover {
  transform: scale(1.03);
  filter: brightness(0.8);
}

/* ===== LIGHTBOX ===== */

.standard-page .lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  isolation: isolate;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.92);

  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.standard-page .lightbox.show {
  display: flex;
}

/* image */

.standard-page .lightbox img {
  max-width: 90%;
  max-height: 90%;

  border-radius: 0;

  box-shadow:
    0 0 80px rgba(255,255,255,0.08),
    0 0 200px rgba(0,0,0,0.9);
}

/* ===== LIGHTBOX TEXT ===== */

.standard-page #lightbox-title {
  margin-top: 20px;
  font-size: 1.1rem;
  font-weight: 300;
  opacity: 0.85;
}

/* ===== LIGHTBOX CONTROLS ===== */

.standard-page .lightbox-controls {
  position: absolute;
  top: 50%;
  width: 100%;

  display: flex;
  justify-content: space-between;

  transform: translateY(-50%);
}

.standard-page .lightbox-controls button {
  background: none;
  border: none;
  color: white;

  font-size: 3rem;
  cursor: pointer;

  padding: 0 30px;

  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.standard-page .lightbox-controls button:hover {
  opacity: 1;
}

/* ===== CLOSE BUTTON ===== */

.standard-page .close-btn {
  position: absolute;
  top: 20px;
  right: 30px;

  font-size: 2rem;
  cursor: pointer;

  background: none;
  border: none;
  color: white;

  opacity: 0.7;
}

.standard-page .close-btn:hover {
  opacity: 1;
}

/* ===== INTERACTION POLISH ===== */

.standard-page img {
  user-select: none;
  -webkit-user-drag: none;
}

/* ===== KILL SCROLL WHILE IN LIGHTBOX ===== */
body.no-scroll {
  overflow: hidden;
  height: 100vh;
}

/* ===== EVENT PAGE STANDARD ===== */
.event-page .gallery-title {
  margin-bottom: 30px;
}

.event-page .gallery-title h2 {
  font-size: 1.9rem;
}

.event-page .event-text {
  max-width: 700px;
  margin: 40px 0 60px 0;
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.9;
}

.event-page .event-text p {
  margin-bottom: 1.2em;
}

.event-page .back-button {
  position: absolute;
  right: 0;

  top: 50%;
  transform: translateY(-50%);
}




















/* ===========================================================================================================================================================================================
              SMARTPHONE VERSION
   =========================================================================================================================================================================================== */

@media (max-width: 700px) {

  /* ===== STANDARD PAGE - MOBILE RESET ===== */
    .standard-page .gallery {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
  }

  .standard-page .gallery img {
    height: 160px;
  }

  .standard-page .gallery-wrapper {
    padding: 0 20px 60px 20px;
  }

  /* ===== SITE HEADER - MOBILE RESET ===== */
  .standard-page .site-header {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    display: block;
    width: 100%;
    margin-top: 10px;
    margin-left: -30px;
  
    z-index: 1000;
    color: white;
    background-color: black;
    padding: 12px 22px 12px 50px; /* left space moved here // was 12px 22px 12px 50px */
    border-radius: 8px;
  }
  
  
  
  /* ===== GLOBAL ===== */

  .gallery-wrapper,
  .photo-page .gallery-wrapper,
  .animals-page .gallery-wrapper {
    padding: 0 16px;
  }

  /* ===== MOBILE HEADER RESET ===== */

  .site-header {
    margin: 12px auto 16px auto; /* unify with the content */
    padding: 10px 14px;
  }

  .site-header h1 {
    font-size: 1.5rem;
  }

  .site-header p {
    font-size: 0.8rem;
    opacity: 0.75;
  }

  .photo-page .gallery-title {
    display: flex;
    flex-direction: row;
    align-items: center;          /* ← THIS aligns vertically */
    justify-content: space-between;
  
    margin-top: 10px;
    margin-bottom: 30px;
    padding: 0 16px;
  }

  body.photo-page .gallery-title h2 {
  font-size: 2.6rem;
  letter-spacing: 1px;
  margin: 0;
  }

  /* ===== ABOUT TITLE SYSTEM RESET ===== */
  .about-page .gallery-title {
  padding: 0 0px;
  margin-bottom: 30px;
  }

  .about-page .gallery-title h2 {
  font-size: 2.6rem !important; 
  letter-spacing: 0.08em;
  }

  /* ===== BACK BUTTON RESET (MOBILE ONLY) ===== */

  .back-button {
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    font-size: 0.75rem;
    padding: 6px 10px;
    border-radius: 4px;

    line-height: 1;
    font-family: Arial, Helvetica, sans-serif;
  }

  .back-button { right: 16px; }

  /* ===== FIX BROKEN ARROWS (MOBILE ONLY) ===== */

  .back-button .back-icon {
    width: 1em;
    height: 1em;

    display: block;
    flex-shrink: 0;

    stroke: currentColor;
    fill: none;
    stroke-width: 2;

    transform: translateY(-1px); /* VERTICAL PLACEMENT */
  }

  /* ===== BACK BUTTON TEXT RESET (MOBILE ONLY) ===== 
  .city-page .back-button.interiors-style


  /* ===== MENU PANEL RESET (MOBILE ONLY) ===== */
    .menu-panel {
    width: 100vw;              /* full screen */
    right: -100vw;             /* hide properly */
    padding: 100px 40px 60px;  /* tighter spacing */
    
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .menu-panel.active {
    right: 0;
  }

  /* menu links spacing */
  .menu-column {
    gap: 28px;
  }

  .menu-column a {
    font-size: 1rem;           /* slightly bigger tap targets */
    letter-spacing: 0.2em;
  }

  /* FIX hamburger / close button */
  .menu-trigger {
    top: 20px;
    right: 20px;
  }

  /* === VERTICAL RHYTHM === */
  .gallery-wrapper,
  .video-stage,
  .installation-stage,
  .event-hero,
  .installation-text,
  .about-intro {
    margin-top: 40px !important;
    margin-bottom: 60px !important;
  }

  /* === GRID DENSITY === */
  .gallery,
  .video-wall,
  .event-grid,
  .about-grid {
    gap: 20px !important;
  }

  /* === PAGE SIDE PADDING === */
  .gallery-wrapper {
    padding: 0 16px;
  }

 /* === REMOVE FIXED HEIGHTS === */

  .gallery img,
  .about-grid img,
  .event-grid img{   
    height: 215px !important;
  }

  .video-stage,
  .video-stage video,
  .video-channel video {
    max-height: none !important;
    height: auto; /* was auto !important; */
  }

  .installation-panel {
    height: auto; /* was auto !important; */
  }

  /* ======= KILL THE LIGHTBOX ARROWS ON MOBILE ======= */
  .lightbox-controls {
    display: none !important;
  }

  /* ======= SWIPE SUPPORT ======= */
  .lightbox img {
  touch-action: pan-y; /* allow vertical scroll, capture horizontal swipe */
  }

  /* ====== PREVENT UNINTENTIONAL SELECTION ON MOBILE - POLISH ===== */
  .lightbox {
  user-select: none;
  -webkit-user-select: none;
  }

  /* ===== KILL HOVER EFFECTS ON MOBILE RESET ===== */
    .gallery img:hover {
    transform: none !important;
    filter: none !important;
  }


  /* ===== HOMEPAGE RESET ===== */

  .home-page .panel-wrapper {
    display: flex;
    flex-direction: column !important;   /* FORCE override */
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    padding: 20px 12px 40px;
    min-height: auto;   /* kill desktop vh logic */
    max-width: 500px;
  }

  .home-page .panel {
    width: 100% !important;
    aspect-ratio: 4 / 3;  /* maintain aspect ratio */
    height: auto;   /* was 120px, then 150px */
   
    transform: none !important;
    border-radius: 8px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 16px;
    
    background-size: cover;
    background-position: center;

    transition: transform 0.25s ease, background-size 0.4s ease;
  }

  .home-page .panel-about {
    background-position: center 10%;
  }

  .home-page .panel-photo {
    background-position: center 7%;
  }

  .home-page .panel-video {
    background-position: center 19%;
  }

  .home-page .panel-installation {
    background-position: center 47%;
  }

  .panel::after {
    display: none;
  }

  .panel:active {
    transform: scale(0.98);
    filter: brightness(0.9);
  }

  /* ===== TEXT ===== */

  .panel-text {
    transform: none;  /* remove counter-rotation */
    font-size: 0.95rem;
    letter-spacing: 2px;
    background: rgba(0,0,0,0.65);
    padding: 8px 14px;
    border-radius: 4px;
  }

  /* ===== ABOUT PAGE RESET ===== */
  .about-page .gallery-wrapper {
    padding: 0 20px;
  }

  .about-page .about-portrait {
    max-width: 420px;
    margin: 0 auto 30px auto;   /* center + spacing below */
  }

  .about-page .about-portrait img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }

  .about-intro {
    flex-direction: column;
    gap: 30px;
    margin: 40px 0 60px 0;
  }

  .about-text {
    font-size: 0.95rem;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
  }


  /* ===== GALLERY BACK BUTTON RESET FIX - ABSOLUTE POSITIONING ===== */

  .gallery-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .gallery-title h2 {
    margin: 0;
  }

  .back-button {
    position: static; /* important: remove absolute */
  }

  .back-button {
  position: static;
  }


  .gallery-title {
  transform: none !important;
  }


  .site-header,
  .gallery-title {
  transform: none !important;
  perspective: none !important;
  } 

  /* ===== GALLERY ===== */

  .gallery {
    grid-template-columns: 1fr !important;
    gap: 22px; /* slight refinement */
    padding: 0;
  }

  .gallery img {
    height: auto;
  }

  /* ===== PHOTO HALL ===== */

  .photo-hall {
    grid-template-columns: 1fr;
    padding: 40px 16px 80px;
    row-gap: 50px;
  }

  .photo-label {
    font-size: 1rem;
    letter-spacing: 3px;
  }

  .photo-page .gallery-title {
  padding: 0 16px;
  margin-top: 30px;
  margin-bottom: 10px;
  align-items: center;
  }

  .photo-page .gallery-title h2 {
  font-size: 1.8rem;
  letter-spacing: 0.08em;
  }

  /* =========================
     PHOTO PAGES OVERHAUL
  ========================= */


  /* ===== CITY MOBILE RESET =====*/

  .city-page .gallery img {
    width: 100%;
    height: 215px;
    object-fit: cover;
  }

  .page-stage .gallery img {
    width: 100%;
    height: 215px !important;
    object-fit: cover;
  }

  .gallery-wrapper.page-stage.gallery img {
    height: 215px !important;
    object-fit: cover !important;
  }
  
  /* ===== PEOPLE MOBILE RESET =====*/

  .people-page .gallery-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  .people-page .gallery-title h2 {
    font-size: 2.5rem;
    letter-spacing: 1px;
    margin: 0;
  }

  .people-page {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  }

  .people-page .back-button {
    position: absolute;
    right: 16px;
    top: 16px;
    bottom: 200px;
  }

  .people-page .people-gallery img {
  width: 100%;
  height: 315px !important;
  object-fit: cover;
  object-position: center 25%;       /* ← face bias */
  }

  .people-page .people-gallery {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px;
  }
  
  /* ===== VIDEO WALL ===== */

  .video-wall {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }

  /* ===== VIDEO WALL — MOBILE SPACING FIX ===== */

  .video-wall-page .gallery-title {
    margin-bottom: 40px !important; /* ↓ from ~100px */
  }

  /* ===== INSTALLATION ===== */

  .installation-stage {
    flex-direction: column;
    gap: 40px;
  }

  .installation-panel {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
  }

  /* ===== ABOUT ===== */

  .about-intro {
    flex-direction: column;
    gap: 40px;
    margin: 40px 0 80px 0;
  }

  .about-text {
    font-size: 0.95rem;
  }

  .about-page .about-portrait img { /* kill the portrait breathing on mobile */
    transform: none !important;
    transition: opacity .4s ease !important;
  }

  .about-page .about-commissions {
    margin: 60px 0 80px 0;
  }

  .about-page .section-header {
    margin-bottom: 30px; 
  }

  /* ===== COMMISSIONS GRID ===== */

  .about-grid {
    grid-template-columns: 1fr !important;
  }


  /* ===== INTERIORS MOBILE RESET ===== */
  .interiors-page .gallery-title {
    padding-left: 0;
    padding-bottom: 50px;
  }

  .interiors-page .back-button {
    margin-right: -15px;
  }

  /* ===== PHOTOMANIPULATION MOBILE RESET ===== */
  .photomanipulation-page .gallery-title {
    font-size: 1.8rem;
    padding-left: 0;
    padding-bottom: 10px;
    line-height: 1.1;
    letter-spacing: 2px;
  }

  .photomanipulation-page .gallery-title h2 {
    font-size: clamp(26px, 8vw, 42px);
    line-height: 1.05;
    text-align: left;
  }

  .photomanipulation-page .gallery-title h2 br {
    display: block;
  }

  .photomanipulation-page .split-title span {
    display: block;
    line-height: 1.05;
  }

  .photomanipulation-page .back-button {
    margin-right: 0px;
    margin-bottom: 30px;
  }


  /* =========================================================== EVENT PAGES MOBILE RESET =========================================================== */

  /* ===== BARBORA SACHER MOBILE RESET ===== */

  /* HEADER goes full bleed */
  .barbora-sacher-page .site-header {
  margin-left: -36px;
  }
  
  /* TEXT AREA stays padded */
  body.event-page.barbora-sacher-page .gallery-wrapper {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* GALLERY goes full bleed */
  body.event-page.barbora-sacher-page .gallery {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 20px;

    margin-left: 0px;
    margin-right: 0px;
    padding: 0; /* IMPORTANT: remove padding */
  }

  body.event-page.barbora-sacher-page .gallery img {
    width: 100%;
    height: 320px;
    object-fit: cover;
  }

  
  
  /* ===== TUNNEL VISIONS MOBILE TITLE RESET ===== */
  .tunnel-vision-page .gallery-title h2 {
    font-size: clamp(20px, 5.5vw, 30px);
    line-height: 1.1;
    letter-spacing: 1px;
  }

  .tunnel-vision-page .split-title span {
    display: block;
  }

  .tunnel-vision-page .split-title span:nth-child(3) {
    opacity: 0.6;
    font-size: 0.85em; /* year smaller */
  }


  /* ===== EXCUSE ME, ŽIŽKOV MOBILE TITLE RESET ===== */

  .excuse-me-zizkov-page .gallery-title h2 {
    font-size: clamp(20px, 5.5vw, 30px);
    line-height: 1.1;
    letter-spacing: 1px;
  }

  .excuse-me-zizkov-page .split-title span {
    display: block;
  }

  .excuse-me-zizkov-page .split-title span:nth-child(3) {
    opacity: 0.6;
    font-size: 0.85em; /* year smaller */
  }

  /* ===== LIQUID QUEER MEMORIA MOBILE TITLE RESET ===== */

  .liquid-queer-memoria-page .gallery-title h2 {
    font-size: clamp(20px, 5.5vw, 30px);
    line-height: 1.1;
    letter-spacing: 1px;
  }

  .liquid-queer-memoria-page .split-title span {
    display: block;
  }

  .liquid-queer-memoria-page .split-title span:nth-child(3) {
    opacity: 0.6;
    font-size: 0.85em; /* year smaller */
  }

  .liquid-queer-memoria-page .back-button.interiors-style {
    position: absolute;
    right: 0;
    
    /* THIS is the key */
    top: 50%;
    transform: translateY(-50%) !important; 
  }

  /* ===== OBJECT VLAK MOBILE TITLE RESET ===== */

  .object-vlak-page .gallery-title h2 {
    font-size: clamp(20px, 5.5vw, 30px);
    line-height: 1.1;
    letter-spacing: 1px;
  }

  .object-vlak-page .split-title span {
    display: block;
  }

  .object-vlak-page .split-title span:nth-child(3) {
    opacity: 0.6;
    font-size: 0.85em; /* year smaller */
  }

  /* ===== HANAMI 2023 MOBILE TITLE RESET ===== */

  .hanami-2023-page .gallery-title h2 {
    font-size: clamp(20px, 5.5vw, 30px);
    line-height: 1.1;
    letter-spacing: 1px;
  }

  .hanami-2023-page .split-title span {
    display: block;
  }

  .hanami-2023-page .split-title span:nth-child(3) {
    opacity: 0.6;
    font-size: 0.85em; /* year smaller */
  }

    /* ===== ECHOING 2023 MOBILE TITLE RESET ===== */

  .echoing-page .gallery-title h2 {
    font-size: clamp(20px, 5.5vw, 30px);
    line-height: 1.1;
    letter-spacing: 1px;
  }

  .echoing-page .split-title span {
    display: block;
  }

  .echoing-page .split-title span:nth-child(3) {
    opacity: 0.6;
    font-size: 0.85em; /* year smaller */
  }




  /* =========================================================== VIDEO PAGES MOBILE RESET =========================================================== */


  /* ===== VIDEO PROJECT — MOBILE FIX ===== */

  .video-stage {
    min-height: auto;
    display: block;
  }

  .video-stage video {
    max-height: none;
  }

  /* tighten spacing above */
  .video-project-page .gallery-title {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .video-project-page .video-meta {
    margin-bottom: -20px;
  }

  /* ===== SHADOWS — MOBILE FIX ===== */

  .video-shadows .back-button.interiors-style {
    position: absolute;
    right: 0;
    
    /* THIS is the key */
    top: 50%;
    transform: translateY(-60%) !important; 
  }

  /* ===== CORRIDOR — MOBILE FIX ===== */

    .video-corridor .back-button.interiors-style {
    position: absolute;
    right: 0;
    
    /* THIS is the key */
    top: 50%;
    transform: translateY(50%) !important; 
  }

  /* ===== PHENOMENA — MOBILE FIX ===== */
    .video-phenomena .back-button.interiors-style {
    position: absolute;
    right: 0;
    
    /* THIS is the key */
    top: 50%;
    transform: translateY(5%) !important; 
  }

  /* ===== STAIRS — MOBILE FIX ===== */
    .video-stairs .back-button.interiors-style {
    position: absolute;
    right: 0;
    
    /* THIS is the key */
    top: 50%;
    transform: translateY(-85%) !important; 
  }
  
  /* ===== MORNING COFFEE - MOBILE FIX ===== */
    .video-morning-coffee .back-button.interiors-style {
    position: absolute;
    right: 0;
    
    /* THIS is the key */
    top: 50%;
    transform: translateY(10%) !important; 
  }

  /* ===== ODDITIES - MOBILE FIX ===== */
    .video-oddities .back-button.interiors-style {
    position: absolute;
    right: 0;
    
    /* THIS is the key */
    top: 50%;
    transform: translateY(-170%) !important; 
  }

  /* ===== TOUCH THE TAPE - MOBILE FIX ===== */
    .video-touch-the-tape .back-button.interiors-style {
    position: absolute;
    right: 0;
    
    /* THIS is the key */
    top: 50%;
    transform: translateY(-155%) !important; 
  }

  /* ===== BLINKING WINDOWS - MOBILE FIX ===== */
    .video-blinking-windows .back-button.interiors-style {
    position: absolute;
    right: 0;
    
    /* THIS is the key */
    top: 50%;
    transform: translateY(-180%) !important; 
  }

  /* ===== GLASS EYES - MOBILE FIX ===== */
    .video-glass-eyes-afterimage .back-button.interiors-style {
    position: absolute;
    right: 0;
    
    /* THIS is the key */
    top: 50%;
    transform: translateY(-180%) !important; 
  }



  /* =========================================================== INSTALLATION PAGES MOBILE RESET =========================================================== */

  /* ===== INSTALLATIONS MAIN PAGE — MOBILE FIX ===== */
  
  .installation-page .gallery-title {
    display: flex;
    flex-direction: column;
    align-items: left;
    position: relative;
    gap: 12px;
  }
  
  /* ===== ABSTRACT ARCHITECTURE — MOBILE RESET ===== */

  .video-abstract-architecture .gallery-title h2 {
    font-size: 1.6rem;   /* adjust if needed */
    letter-spacing: 0.08em;
    line-height: 1.1;
  }

  .video-abstract-architecture .back-button {
    position: absolute !important;
    top: 15px !important;
    right: 0 !important;
  }











}
/* END OF SMARTPHONE MEDIA PART FROM @media (max-width: 700px) { line 3005} */


/* ===========================================================================================================================================================================================
              SMARTPHONE LANDCSAPE ORIENTATION 
   =========================================================================================================================================================================================== */

@media (max-width: 900px) and (orientation: landscape) {  

  /* ===== STANDARD PAGE - SITE HEADER - MOBILE RESET ===== */


  .standard-page .site-header {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    display: block;
    width: 100%;
    margin-top: 10px;
    margin-left: -30px;
  
    z-index: 1000;
    color: white;
    background-color: black;
    padding: 12px 22px 12px 70px; /* left space moved here // was 12px 22px 12px 50px */
    border-radius: 8px;
  }
  
  /* Reduce vertical spacing everywhere */
  .site-header {
    position: relative !important;
    top: 0 !important;
    z-index: 100;
  }

  .site-header h1 {
    font-size: 1.2rem;
  }

  .site-header p {
    font-size: 0.7rem;
  }

  /* Tighten title block */
  .gallery-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .gallery-title h2 {
    font-size: 1.6rem;
  }

  /* Prevent overlap */
  .gallery-wrapper {
    position: relative !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Keep gallery visible immediately */
  .gallery {
    margin-top: 10px;
  }

  /* Back button scaling */
  .back-button {
    font-size: 0.7rem;
    padding: 4px 8px;
  }

  /* ===== LIGHTBOX TEXT - LANDSCAPE ===== */

  .standard-page #lightbox-title {
    margin-top: 5px;
    font-size: 1.1rem;
    font-weight: 300;
    opacity: 0.85;
    }

  /* ===== PHOTO PAGE — LANDSCAPE MOBILE FIX ===== */

  .photo-page .site-header {
    padding: 10px 14px;
    margin: 12px auto 16px auto;
  }
  .photo-page .photo-wall {
    justify-content: center;
    gap: 25px;
  }

  .photo-page .photo-item {
    width: 140px;           /* increase size */
  }

  .photo-page .photo-item img {
    height: 90px;           /* keep aspect feel */
  }

  .photo-page h2 {
    font-size: 2rem;
  }


}