/* ============================================================
   MITTE BÜRO — VENUE GALLERY

   Loaded AFTER:
   /style.css
   /venue/venue.css

   NAVIGATION
   ------------------------------------------------------------
   [00] SETTINGS
   [01] OVERLAY
   [02] TOP BAR
   [03] SPACE SELECTOR
   [04] GALLERY SECTIONS
   [05] GALLERY IMAGES
   [06] GALLERY FOOTER
   [07] CLOSE-UP VIEW
   [08] DESKTOP
   [09] HOVER
   [10] REDUCED MOTION
   ============================================================ */


/* ============================================================
   [00] SETTINGS
   ============================================================ */

.venue-gallery-overlay {

  --gallery-topbar-height:
    72px;

  --gallery-transition:
    0.32s;

  --gallery-fast-transition:
    0.16s;

  --gallery-image-reveal-transition:
    0.28s;

  --gallery-selector-card-mobile:
    94px;

  --gallery-title-copy-gap:
    10px;

  --gallery-mobile-copy-image-gap:
    24px;

  --gallery-desktop-meta-width:
    var(--desktop-intro-width);

  --gallery-desktop-grid-max:
    820px;
}


/* ============================================================
   [01] OVERLAY

   No transform on the scrolling overlay.

   Keeping this element untransformed makes sticky positioning
   inside it much more reliable.
   ============================================================ */

.venue-gallery-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    1000;

  width:
    100%;

  height:
    100dvh;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  background:
    var(--paper);

  color:
    var(--ink);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity
    var(--gallery-transition)
    ease,

    visibility
    0s
    linear
    var(--gallery-transition);

  -webkit-overflow-scrolling:
    touch;
}


.venue-gallery-overlay.is-open {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transition:
    opacity
    var(--gallery-transition)
    ease,

    visibility
    0s
    linear
    0s;
}


body.venue-gallery-is-open {
  overflow:
    hidden;
}


/* ============================================================
   [02] TOP BAR

   MOBILE:
   normal document content.
   BACK simply scrolls away with the gallery.

   DESKTOP:
   BACK becomes independently persistent.
   ALL RIGHTS RESERVED remains opening-page content.
   ============================================================ */

.venue-gallery__topbar {
  position:
    relative;

  top:
    auto;

  z-index:
    100;

  width:
    100%;

  height:
    var(--gallery-topbar-height);

  background:
    transparent;

  pointer-events:
    none;
}


/* ------------------------------------------------------------
   Shared top typography
   ------------------------------------------------------------ */

.venue-gallery__back,
.venue-gallery__rights {
  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--micro-font-size);

  font-weight:
    800;

  line-height:
    var(--micro-line-height);

  letter-spacing:
    0.04em;

  -webkit-text-stroke:
    0;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  opacity:
    1;

  transition:
    opacity
    0.16s
    linear,

    color
    var(--gallery-fast-transition)
    ease;
}


/* ------------------------------------------------------------
   BACK
   ------------------------------------------------------------ */

.venue-gallery__back {
  position:
    absolute;

  top:
    28px;

  left:
    var(--side);

  z-index:
    2;

  padding:
    0;

  margin:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--ink);

  pointer-events:
    auto;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

  -webkit-tap-highlight-color:
    transparent;
}


/*
  Desktop JS adds this whenever content approaches BACK.

  On mobile JS removes this class, so BACK simply scrolls
  away naturally.
*/

.venue-gallery__back.is-colliding {
  opacity:
    0;

  pointer-events:
    none;
}


/* ------------------------------------------------------------
   ALL RIGHTS RESERVED
   Desktop only.
   ------------------------------------------------------------ */

.venue-gallery__rights {
  display:
    none;

  pointer-events:
    none;
}



/* ============================================================
   [03] SPACE SELECTOR

   Normal document content.
   NOT sticky.

   Mobile:
   horizontally swipeable.

   Desktop:
   one horizontal row.
   ============================================================ */

.venue-gallery__selector-shell {
  position:
    relative;

  z-index:
    1;

  width:
    100%;

  background:
    transparent;
}


/* ------------------------------------------------------------
   Mobile selector
   ------------------------------------------------------------ */

.venue-gallery__selector {
  box-sizing:
    border-box;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  width:
    100%;

  overflow-x:
    auto;

  overflow-y:
    hidden;

  padding:
    0
    var(--side)
    18px;

  scroll-padding-left:
    var(--side);

  scroll-padding-right:
    var(--side);

  scroll-snap-type:
    x proximity;

  scrollbar-width:
    none;

  -webkit-overflow-scrolling:
    touch;
}


.venue-gallery__selector::-webkit-scrollbar {
  display:
    none;
}


.venue-gallery__selector-card {
  flex:
    0 0
    var(--gallery-selector-card-mobile);

  scroll-snap-align:
    start;

  display:
    block;

  padding:
    0;

  margin:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--ink);

  text-align:
    left;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

  -webkit-tap-highlight-color:
    transparent;
}


/* ------------------------------------------------------------
   Selector photograph

   Starts invisible.
   JS adds .is-loaded after the photograph has loaded/decoded.
   ------------------------------------------------------------ */

.venue-gallery__selector-image {
  display:
    block;

  width:
    100%;

  aspect-ratio:
    1 / 1;

  object-fit:
    cover;

  margin:
    0 0 10px;

  opacity:
    0;

  transition:
    opacity
    var(--gallery-image-reveal-transition)
    ease;
}


.venue-gallery__selector-image.is-loaded {
  opacity:
    1;
}


/* ------------------------------------------------------------
   Selector room name
   ------------------------------------------------------------ */

.venue-gallery__selector-name {
  display:
    block;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.02em;

  text-transform:
    none;

  white-space:
    nowrap;
}


/* ============================================================
   [04] GALLERY SECTIONS
   Mobile / base
   ============================================================ */

.venue-gallery__content {
  box-sizing:
    border-box;

  width:
    100%;

  min-width:
    0;

  /*
    Selector → first room.
  */

  padding:
    56px
    var(--side)
    90px;
}


/* ------------------------------------------------------------
   Individual room / space
   ------------------------------------------------------------ */

.venue-gallery__section {
  box-sizing:
    border-box;

  width:
    100%;

  min-width:
    0;

  margin:
    0 0 84px;

  scroll-margin-top:
    76px;
}


.venue-gallery__section:last-child {
  margin-bottom:
    0;
}


/* ------------------------------------------------------------
   ROOM NAME + DESCRIPTOR

   Name → descriptor = 10px
   Descriptor → first image = 24px
   ------------------------------------------------------------ */

.venue-gallery__section-meta {
  box-sizing:
    border-box;

  width:
    100%;

  min-width:
    0;

  margin:
    0 0
    var(--gallery-mobile-copy-image-gap);
}


/* ------------------------------------------------------------
   Room name
   ------------------------------------------------------------ */

.venue-gallery__section-title {
  margin: 0;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size:
    22px;

  font-weight:
    800;

  line-height:
    0.96;

  letter-spacing:
    0.04em;

  -webkit-text-stroke:
    0.4px
    var(--ink);

  text-transform:
    none;

  text-wrap:
    balance;
}


/* ------------------------------------------------------------
   Descriptor
   ------------------------------------------------------------ */

.venue-gallery__section-description {
  width:
    min(
      330px,
      100%
    );

  margin:
    var(--gallery-title-copy-gap)
    0
    0;

  font-family:
    "Uchen",
    serif;

  font-size:
    var(--body-font-size);

  font-weight:
    400;

  line-height:
    var(--body-line-height);

  letter-spacing:
    var(--body-letter-spacing);

  -webkit-text-stroke:
    var(--body-stroke)
    var(--ink);

  text-align:
    justify;

  text-align-last:
    left;

  text-justify:
    inter-word;

  text-wrap:
    pretty;
}


/* ============================================================
   [05] GALLERY IMAGES

   MOBILE:
   image 1 = large / natural ratio
   remaining = square / two across

   Images softly reveal only after loading / decoding.
   ============================================================ */

.venue-gallery__grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    8px;

  width:
    100%;
}


.venue-gallery__thumb {
  display:
    block;

  width:
    100%;

  padding:
    0;

  margin:
    0;

  border:
    0;

  background:
    transparent;

  cursor:
    zoom-in;

  appearance:
    none;

  -webkit-appearance:
    none;

  -webkit-tap-highlight-color:
    transparent;

  overflow:
    hidden;
}


/* ------------------------------------------------------------
   Mobile featured image
   ------------------------------------------------------------ */

.venue-gallery__thumb.is-mobile-featured {
  grid-column:
    1 / -1;
}


.venue-gallery__thumb.is-mobile-featured
.venue-gallery__thumb-image {
  width:
    100%;

  height:
    auto;

  aspect-ratio:
    auto;

  object-fit:
    contain;
}


/* ------------------------------------------------------------
   Mobile square images
   ------------------------------------------------------------ */

.venue-gallery__thumb.is-mobile-square {
  aspect-ratio:
    1 / 1;
}


.venue-gallery__thumb.is-mobile-square
.venue-gallery__thumb-image {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


/* ------------------------------------------------------------
   Shared photograph

   Starts invisible.
   JS adds .is-loaded once ready.
   ------------------------------------------------------------ */

.venue-gallery__thumb-image {
  display:
    block;

  margin:
    0;

  opacity:
    0;

  transform:
    scale(1);

  transition:
    opacity
    var(--gallery-image-reveal-transition)
    ease,

    transform
    var(--gallery-fast-transition)
    ease;
}


.venue-gallery__thumb-image.is-loaded {
  opacity:
    1;
}


/* ============================================================
   [06] GALLERY FOOTER

   Uses the same micrographic vertical rhythm as
   homepage / Venue:

   line-height = 1
   line gap    = 5px
   ============================================================ */

.venue-gallery__footer {
  box-sizing:
    border-box;

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    auto
    1fr;

  align-items:
    end;

  gap:
    20px;

  padding:
    0
    var(--side)
    max(
      28px,
      env(safe-area-inset-bottom)
    );
}


.venue-gallery__footer-left,
.venue-gallery__footer-right {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--micro-font-size);

  font-weight:
    800;

  line-height:
    var(--micro-line-height);

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


.venue-gallery__footer-left {
  align-items:
    flex-start;
}


.venue-gallery__footer-right {
  align-items:
    flex-end;

  justify-self:
    end;

  text-align:
    right;
}


.venue-gallery__footer a {
  color:
    var(--ink);

  text-decoration:
    none;
}


.venue-gallery__footer-desktop {
  display:
    none;
}


/* ============================================================
   [07] CLOSE-UP VIEW
   ============================================================ */

.venue-lightbox {
  position:
    fixed;

  inset:
    0;

  z-index:
    1100;

  width:
    100%;

  height:
    100dvh;

  overflow:
    hidden;

  background:
    var(--paper);

  color:
    var(--ink);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity
    0.18s
    ease,

    visibility
    0s
    linear
    0.18s;
}


.venue-lightbox.is-open {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transition:
    opacity
    0.18s
    ease,

    transform
    0.18s
    ease,

    visibility
    0s
    linear
    0s;
}


/* ------------------------------------------------------------
   Lightbox header
   ------------------------------------------------------------ */

.venue-lightbox__header {
  position:
    absolute;

  top:
    0;

  right:
    0;

  left:
    0;

  z-index:
    30;

  height:
    72px;

  background:
    var(--paper);
}


.venue-lightbox__label {
  position:
    absolute;

  top:
    28px;

  left:
    var(--side);

  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--micro-font-size);

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


/* ------------------------------------------------------------
   Close cross
   ------------------------------------------------------------ */

.venue-lightbox__close {
  position:
    absolute;

  top:
    21px;

  right:
    var(--side);

  width:
    24px;

  height:
    24px;

  padding:
    0;

  margin:
    0;

  border:
    0;

  background:
    transparent;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;
}


.venue-lightbox__close::before,
.venue-lightbox__close::after {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    16px;

  height:
    2px;

  background:
    var(--ink);
}


.venue-lightbox__close::before {
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}


.venue-lightbox__close::after {
  transform:
    translate(-50%, -50%)
    rotate(-45deg);
}


/* ------------------------------------------------------------
   Stage

   Current and incoming photograph occupy
   exactly the same grid cell.

   This allows real image-to-image crossfade.
   ------------------------------------------------------------ */

.venue-lightbox__stage {
  position:
    relative;

  width:
    100%;

  height:
    100%;

  display:
    grid;

  place-items:
    center;

  padding:
    96px
    var(--side)
    150px;
}


/* ------------------------------------------------------------
   Current + incoming image
   ------------------------------------------------------------ */

.venue-lightbox__image,
.venue-lightbox__incoming-image {
  grid-area:
    1 / 1;

  display:
    block;

  width:
    auto;

  max-width:
    100%;

  height:
    auto;

  max-height:
    calc(
      100dvh -
      250px
    );

  object-fit:
    contain;

  pointer-events:
    none;
}


.venue-lightbox__image {
  z-index:
    1;

  opacity:
    1;
}


/*
  Incoming photograph fades directly over current photograph.
*/

.venue-lightbox__incoming-image {
  z-index:
    2;

  opacity:
    0;

  transition:
    opacity
    0.18s
    ease;
}


.venue-lightbox__incoming-image.is-visible {
  opacity:
    1;
}


/* ------------------------------------------------------------
   Previous / next

   Same double-chevron construction
   as the venue carousel.

   JS positions them against the actual
   rendered image corners.
   ------------------------------------------------------------ */

.venue-lightbox__prev,
.venue-lightbox__next {
  position:
    absolute;

  top:
    84px;

  z-index:
    20;

  display:
    block;

  width:
    28px;

  height:
    20px;

  padding:
    0;

  margin:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--ink);

  font-size:
    0;

  opacity:
    1;

  visibility:
    visible;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

  -webkit-tap-highlight-color:
    transparent;
}


.venue-lightbox__prev {
  left:
    var(--side);
}


.venue-lightbox__next {
  right:
    var(--side);
}


.venue-lightbox__prev::before,
.venue-lightbox__prev::after,
.venue-lightbox__next::before,
.venue-lightbox__next::after {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  width:
    7px;

  height:
    7px;

  border-right:
    2px solid
    var(--ink);

  border-bottom:
    2px solid
    var(--ink);
}


/* Right-facing pair */

.venue-lightbox__next::before,
.venue-lightbox__next::after {
  transform:
    translateY(-50%)
    rotate(-45deg);
}


.venue-lightbox__next::before {
  left:
    7px;
}


.venue-lightbox__next::after {
  left:
    13px;
}


/* Left-facing pair */

.venue-lightbox__prev::before,
.venue-lightbox__prev::after {
  transform:
    translateY(-50%)
    rotate(135deg);
}


.venue-lightbox__prev::before {
  left:
    13px;
}


.venue-lightbox__prev::after {
  left:
    7px;
}


/* ------------------------------------------------------------
   Lightbox footer

   Same micrographic rhythm as the Gallery footer:
   line-height 1 + explicit 5px gap.
   ------------------------------------------------------------ */

.venue-lightbox__footer {
  position:
    absolute;

  right:
    var(--side);

  bottom:
    max(
      28px,
      env(safe-area-inset-bottom)
    );

  left:
    var(--side);

  z-index:
    30;

  display:
    grid;

  grid-template-columns:
    auto
    1fr;

  align-items:
    end;

  gap:
    20px;

  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--micro-font-size);

  font-weight:
    800;

  line-height:
    var(--micro-line-height);

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


.venue-lightbox__footer-left,
.venue-lightbox__footer-right {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.venue-lightbox__footer-left {
  align-items:
    flex-start;
}


.venue-lightbox__footer-right {
  align-items:
    flex-end;

  justify-self:
    end;

  text-align:
    right;
}


.venue-lightbox__footer a {
  color:
    var(--ink);

  text-decoration:
    none;

  transition:
    color
    var(--gallery-fast-transition)
    ease;
}


.venue-lightbox__footer-desktop {
  display:
    none;
}


/* ============================================================
   [08] DESKTOP

   Shared wide-screen scale:
   - unchanged through 1440px
   - gradual growth to 125% at 1800px
   - centered composition beyond 1800px

   Gallery and close-up use the same scale and frame.
   Mobile remains unchanged.
   ============================================================ */

@media (min-width: 800px) {


  /* ----------------------------------------------------------
     GALLERY SCALE
     ---------------------------------------------------------- */

  .venue-gallery-overlay {
    --desktop-layout-unit:
      var(--wide-unit, 1px);

    --desktop-edge:
      calc(28 * var(--desktop-layout-unit));

    --desktop-intro-width:
      calc(285 * var(--desktop-layout-unit));

    --desktop-secondary-meta-left:
      calc(440 * var(--desktop-layout-unit));

    --body-font-size:
      calc(15 * var(--desktop-layout-unit));

    --body-stroke:
      var(--desktop-layout-unit);

    --micro-font-size:
      calc(10 * var(--desktop-layout-unit));

    --gallery-topbar-height:
      calc(72 * var(--desktop-layout-unit));

    --gallery-selector-card-desktop:
      calc(94 * var(--desktop-layout-unit));

    --gallery-title-copy-gap:
      calc(10 * var(--desktop-layout-unit));

    --gallery-desktop-meta-width:
      var(--desktop-intro-width);

    --gallery-desktop-grid-max:
      calc(820 * var(--desktop-layout-unit));
  }


  /* ----------------------------------------------------------
     CENTERED GALLERY FRAME

     Background and scrolling overlay remain full-width.
     ---------------------------------------------------------- */

  .venue-gallery__topbar,
  .venue-gallery__selector-shell,
  .venue-gallery__content,
  .venue-gallery__footer {
    width: 100%;
    max-width: var(--wide-max-width, 1800px);
    margin-left: auto;
    margin-right: auto;
  }


  /* ----------------------------------------------------------
     GALLERY TOP GRAPHICS
     ---------------------------------------------------------- */

  .venue-gallery__topbar {
    position: relative;
    top: auto;
  }


  .venue-gallery__back {
    position: fixed;

    top:
      var(--desktop-edge);

    left:
      calc(
        var(--wide-frame-inset, 0px) +
        var(--desktop-edge)
      );

    z-index: 102;
  }


  .venue-gallery__rights {
    position: absolute;
    top: var(--desktop-edge);
    right: var(--desktop-edge);
    z-index: 2;
    display: block;
  }


  /* ----------------------------------------------------------
     SPACE SELECTOR

     Normal horizontal row, not sticky.
     ---------------------------------------------------------- */

  .venue-gallery__selector-shell {
    position: relative;
    width: 100%;
    max-width: var(--wide-max-width, 1800px);
    background: transparent;
  }


  .venue-gallery__selector {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;

    gap:
      calc(10 * var(--desktop-layout-unit));

    width: 100%;
    overflow: visible;

    padding:
      0
      var(--desktop-edge)
      calc(18 * var(--desktop-layout-unit));

    scroll-snap-type: none;
  }


  .venue-gallery__selector-card {
    flex:
      0 0 var(--gallery-selector-card-desktop);

    width:
      var(--gallery-selector-card-desktop);

    min-width:
      var(--gallery-selector-card-desktop);

    max-width:
      var(--gallery-selector-card-desktop);
  }


  .venue-gallery__selector-image {
    margin-bottom:
      calc(10 * var(--desktop-layout-unit));
  }


  .venue-gallery__selector-name {
    font-size:
      calc(13 * var(--desktop-layout-unit));
  }


  /* ----------------------------------------------------------
     GALLERY CONTENT
     ---------------------------------------------------------- */

  .venue-gallery__content {
    padding:
      calc(64 * var(--desktop-layout-unit))
      var(--desktop-edge)
      calc(120 * var(--desktop-layout-unit));
  }


  /* ----------------------------------------------------------
     ROOM SECTIONS
     ---------------------------------------------------------- */

  .venue-gallery__section {
    display: grid;

    grid-template-columns:
      var(--gallery-desktop-meta-width)

      calc(
        var(--desktop-secondary-meta-left) -
        var(--desktop-edge) -
        var(--gallery-desktop-meta-width)
      )

      minmax(0, 1fr);

    align-items: start;
    width: 100%;

    margin-bottom:
      calc(120 * var(--desktop-layout-unit));

    scroll-margin-top:
      calc(76 * var(--desktop-layout-unit));
  }


  /* Sticky only within its own room section. */

  .venue-gallery__section-meta {
    position: sticky;

    top:
      calc(76 * var(--desktop-layout-unit));

    grid-column: 1;
    align-self: start;

    width:
      var(--gallery-desktop-meta-width);

    margin: 0;
  }


  .venue-gallery__section-title {
    font-size:
      calc(22 * var(--desktop-layout-unit));
  }


  .venue-gallery__section-description {
    width: 100%;
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
  }


  /* ----------------------------------------------------------
     IMAGE FIELD

     Existing six-column structure is preserved.
     ---------------------------------------------------------- */

  .venue-gallery__grid {
    grid-column: 3;
    justify-self: start;

    width:
      min(
        100%,
        var(--gallery-desktop-grid-max)
      );

    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    gap:
      calc(12 * var(--desktop-layout-unit));
  }


  /* Cancel mobile placement roles. */

  .venue-gallery__thumb.is-mobile-featured,
  .venue-gallery__thumb.is-mobile-square {
    grid-column: auto;
  }


  /* Featured images: two across, natural proportions. */

  .venue-gallery__thumb.is-desktop-featured {
    grid-column: span 3;
    aspect-ratio: auto;
  }


  .venue-gallery__thumb.is-desktop-featured
  .venue-gallery__thumb-image {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }


  /* Square images: three across. */

  .venue-gallery__thumb.is-desktop-square {
    grid-column: span 2;
    aspect-ratio: 1 / 1;
  }


  .venue-gallery__thumb.is-desktop-square
  .venue-gallery__thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


  /* ----------------------------------------------------------
     GALLERY FOOTER
     ---------------------------------------------------------- */

  .venue-gallery__footer {
    display: block;

    padding:
      0
      var(--desktop-edge)
      var(--desktop-edge);
  }


  .venue-gallery__footer-mobile {
    display: none;
  }


  .venue-gallery__footer-desktop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    width: 100%;
  }


  .venue-gallery__footer-desktop-left,
  .venue-gallery__footer-desktop-right {
    display: flex;
    flex-direction: column;
    align-self: start;

    gap:
      calc(5 * var(--desktop-layout-unit));

    margin: 0;
    padding: 0;

    font-family:
      "Barlow Semi Condensed",
      sans-serif;

    font-size: var(--micro-font-size);
    font-weight: 800;
    line-height: var(--micro-line-height);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }


  .venue-gallery__footer-desktop-left {
    align-items: flex-start;
    text-align: left;
  }


  .venue-gallery__footer-desktop-right {
    align-items: flex-end;
    justify-self: end;
    text-align: right;
  }


  .venue-gallery__address-link--desktop {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: start;

    gap:
      calc(5 * var(--desktop-layout-unit));

    width: max-content;
    margin: 0;
    padding: 0;

    color: var(--ink);
    line-height: var(--micro-line-height);
    text-align: right;
    text-decoration: none;
  }


  .venue-gallery__address-link--desktop span {
    display: block;
    margin: 0;
    padding: 0;
    line-height: inherit;
  }


  /* ----------------------------------------------------------
     CLOSE-UP SCALE

     Full-screen background, centered composition.

     The stage stays viewport-wide because JS positions
     the arrows using the rendered image's viewport coordinates.
     ---------------------------------------------------------- */

  .venue-lightbox {
    --desktop-layout-unit:
      var(--wide-unit, 1px);

    --desktop-edge:
      calc(28 * var(--desktop-layout-unit));

    --micro-font-size:
      calc(10 * var(--desktop-layout-unit));
  }


  /* ----------------------------------------------------------
     CLOSE-UP HEADER
     ---------------------------------------------------------- */

  .venue-lightbox__header {
    width: 100%;
    max-width: var(--wide-max-width, 1800px);

    height:
      calc(72 * var(--desktop-layout-unit));

    margin-left: auto;
    margin-right: auto;
  }


  .venue-lightbox__label {
    top: var(--desktop-edge);
    left: var(--desktop-edge);

    max-width:
      calc(
        100% -
        var(--desktop-edge) -
        (58 * var(--desktop-layout-unit))
      );

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  .venue-lightbox__close {
    top:
      calc(
        var(--desktop-edge) -
        (7 * var(--desktop-layout-unit))
      );

    right:
      var(--desktop-edge);

    width:
      calc(24 * var(--desktop-layout-unit));

    height:
      calc(24 * var(--desktop-layout-unit));
  }


  .venue-lightbox__close::before,
  .venue-lightbox__close::after {
    width:
      calc(16 * var(--desktop-layout-unit));

    height:
      calc(2 * var(--desktop-layout-unit));
  }


  /* ----------------------------------------------------------
     CLOSE-UP IMAGE FIELD

     Side padding includes the outer frame margins.

     Both photographs receive identical limits, preserving
     the existing image-to-image crossfade.

     Natural image proportions and contain behavior remain.
     ---------------------------------------------------------- */

  .venue-lightbox__stage {
    box-sizing: border-box;

    padding:
      calc(120 * var(--desktop-layout-unit))

      calc(
        var(--wide-frame-inset, 0px) +
        (100 * var(--desktop-layout-unit))
      )

      calc(110 * var(--desktop-layout-unit));
  }


  .venue-lightbox__image,
  .venue-lightbox__incoming-image {
    max-width:
      min(
        100%,
        calc(0.6 * var(--wide-frame-width, 100vw)),
        calc(760 * var(--desktop-layout-unit))
      );

    max-height:
      max(
        1px,
        calc(
          100dvh -
          (230 * var(--desktop-layout-unit))
        )
      );
  }


  /* ----------------------------------------------------------
     CLOSE-UP ARROWS

     JS places the controls at the rendered image corners.
     Their size and internal spacing follow the shared scale.
     ---------------------------------------------------------- */

  .venue-lightbox__prev,
  .venue-lightbox__next {
    width:
      calc(28 * var(--desktop-layout-unit));

    height:
      calc(20 * var(--desktop-layout-unit));
  }


  .venue-lightbox__prev::before,
  .venue-lightbox__prev::after,
  .venue-lightbox__next::before,
  .venue-lightbox__next::after {
    width:
      calc(7 * var(--desktop-layout-unit));

    height:
      calc(7 * var(--desktop-layout-unit));

    border-right-width:
      calc(2 * var(--desktop-layout-unit));

    border-bottom-width:
      calc(2 * var(--desktop-layout-unit));
  }


  .venue-lightbox__next::before,
  .venue-lightbox__prev::after {
    left:
      calc(7 * var(--desktop-layout-unit));
  }


  .venue-lightbox__next::after,
  .venue-lightbox__prev::before {
    left:
      calc(13 * var(--desktop-layout-unit));
  }


  /* ----------------------------------------------------------
     CLOSE-UP FOOTER

     Uses the same centered frame as the header.
     ---------------------------------------------------------- */

  .venue-lightbox__footer {
    right:
      calc(
        var(--wide-frame-inset, 0px) +
        var(--desktop-edge)
      );

    bottom:
      var(--desktop-edge);

    left:
      calc(
        var(--wide-frame-inset, 0px) +
        var(--desktop-edge)
      );

    display: block;
  }


  .venue-lightbox__footer-mobile {
    display: none;
  }


  .venue-lightbox__footer-desktop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    width: 100%;
  }


  .venue-lightbox__footer-desktop-left,
  .venue-lightbox__footer-desktop-right {
    display: flex;
    flex-direction: column;
    align-self: start;

    gap:
      calc(5 * var(--desktop-layout-unit));

    margin: 0;
    padding: 0;
    line-height: var(--micro-line-height);
  }


  .venue-lightbox__footer-desktop-left {
    align-items: flex-start;
    text-align: left;
  }


  .venue-lightbox__footer-desktop-right {
    align-items: flex-end;
    justify-self: end;
    text-align: right;
  }


  .venue-lightbox__address-link--desktop {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: start;

    gap:
      calc(5 * var(--desktop-layout-unit));

    width: max-content;
    margin: 0;
    padding: 0;

    color: var(--ink);
    line-height: var(--micro-line-height);
    text-align: right;
    text-decoration: none;
  }


  .venue-lightbox__address-link--desktop span {
    display: block;
    margin: 0;
    padding: 0;
    line-height: inherit;
  }

}


/* ============================================================
   [09] HOVER
   True mouse / trackpad only
   ============================================================ */

@media
  (hover: hover)
  and (pointer: fine) {


  /* ----------------------------------------------------------
     Text links / controls
     ---------------------------------------------------------- */

  .venue-gallery__back:hover,
  .venue-gallery__footer a:hover,
  .venue-lightbox__footer a:hover {
    color:
      var(--muted-hover);
  }


  /* ----------------------------------------------------------
     Gallery selector photographs
     ---------------------------------------------------------- */

  .venue-gallery__selector-card:hover
  .venue-gallery__selector-image.is-loaded {
    opacity:
      0.88;
  }


  /* ----------------------------------------------------------
     Gallery photographs
     ---------------------------------------------------------- */

  .venue-gallery__thumb:hover
  .venue-gallery__thumb-image.is-loaded {
    opacity:
      0.88;

    transform:
      scale(1.005);
  }


  /* ----------------------------------------------------------
     Lightbox previous / next
     ---------------------------------------------------------- */

  .venue-lightbox__prev:hover,
  .venue-lightbox__next:hover {
    opacity:
      0.7;
  }

}


/* ============================================================
   [10] REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {


  .venue-gallery-overlay,
  .venue-gallery__back,
  .venue-gallery__rights,
  .venue-gallery__selector-image,
  .venue-gallery__thumb-image,
  .venue-lightbox,
  .venue-lightbox__image,
  .venue-lightbox__incoming-image {
    animation:
      none !important;

    transition:
      none !important;
  }

}

/* ============================================================
   GALLERY MEDIA LOADING STATES
   ============================================================ */

@keyframes venue-gallery-media-pulse {

  0%,
  100% {
    opacity: 0.56;
  }

  50% {
    opacity: 0.84;
  }

}


/*
  A solid grey field occupies the exact image dimensions while
  the file is loading.
*/

.venue-gallery__selector-image,
.venue-gallery__thumb-image {
  background:
    var(--button-grey, #dedbd9);
}


/* Loading */

.venue-gallery__selector-image.is-gallery-media-loading,
.venue-gallery__thumb-image.is-gallery-media-loading {
  opacity:
    0.56;

  animation:
    venue-gallery-media-pulse
    0.9s
    ease-in-out
    infinite;

  will-change:
    opacity;
}


/* Ready */

.venue-gallery__selector-image.is-gallery-media-ready,
.venue-gallery__thumb-image.is-gallery-media-ready {
  opacity:
    1;

  animation:
    none;

  will-change:
    auto;
}


/* Failed image: retain a static grey placeholder. */

.venue-gallery__selector-image.is-gallery-media-error,
.venue-gallery__thumb-image.is-gallery-media-error {
  opacity:
    0.7;

  animation:
    none;

  color:
    transparent;

  will-change:
    auto;
}


/* Respect reduced-motion preferences. */

@media (prefers-reduced-motion: reduce) {

  .venue-gallery__selector-image.is-gallery-media-loading,
  .venue-gallery__thumb-image.is-gallery-media-loading {
    opacity:
      0.7;

    animation:
      none;
  }

}