/* Gallery refactor: index.php */
:root{
  --bg:#0d0e10;
  --text:#ececea;
  --muted:#8f9296;
  --side:20mm;
  --image-gap:20mm;
  --chapter-gap:70mm;
  --text-side:50mm;
  --title-text-gap:10mm;
  --title-size:76px;
  --chapter-text-size:17px;
  --featured-caption-size:13px;
  --featured-caption-color:#ececea;
  --featured-caption-opacity:0.82;
  --featured-caption-inset:5mm;
  --featured-caption-spacing:0.08em;
}

*{box-sizing:border-box}

html,body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  overscroll-behavior:none;
}

body{touch-action:auto}

.viewport{
  position:fixed;
  inset:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  background:var(--bg);
}

.site-logo{
  position:absolute;
  z-index:200;
  top:16px;
  left:var(--side);
  width:clamp(150px,12vw,190px);
  height:auto;
  aspect-ratio:809 / 340;
  object-fit:contain;
  pointer-events:none;
  mix-blend-mode:difference;
  transform:none;
  transition:none;
  image-rendering:auto;
}

/* Titles travel with the image's own moving figure, never the viewport. */
.featured-image-caption{
  position:absolute;
  z-index:5;
  top:50%;
  right:var(--featured-caption-inset);
  writing-mode:vertical-rl;
  transform:translateY(-50%) rotate(180deg); /* right: 90 degrees CCW */
  color:var(--featured-caption-color);
  font-family:var(--featured-caption-font,Arial,Helvetica,sans-serif);
  font-size:var(--featured-caption-size);
  font-weight:var(--featured-caption-weight,500);
  line-height:1.3;
  letter-spacing:var(--featured-caption-spacing);
  text-transform:var(--featured-caption-case,uppercase);
  white-space:nowrap;
  max-height:calc(100vh - 35mm);
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
  opacity:var(--featured-caption-opacity);
}
/* Both photographs in a pair are vertically centered in the same row. Their
   labels have the exact same centerline, even when the photos differ in height. */
.portrait-pair .featured-image-caption--first{
  left:var(--featured-caption-inset);
  right:auto;
  transform:translateY(-50%); /* left: 90 degrees clockwise */
}
.portrait-pair .featured-image-caption--second{
  right:var(--featured-caption-inset);
  left:auto;
  transform:translateY(-50%) rotate(180deg); /* right: 90 degrees CCW */
}
/* An unpaired portrait remains centered; its one label goes on the right. */
.portrait-pair.is-single .featured-image-caption--first{
  left:auto;
  right:var(--featured-caption-inset);
  transform:translateY(-50%) rotate(180deg);
}
body.view-grid .featured-image-caption{display:none}
@media (max-width:780px){
  .featured-image-caption{font-size:min(var(--featured-caption-size),12px);max-height:calc(100vh - 90px)}
}


.admin-link{
  position:fixed;
  z-index:220;
  top:0;
  right:0;
  width:2cm;
  height:2cm;
  display:block;
  text-decoration:none;
  color:transparent;
  background:transparent;
  overflow:hidden;
  cursor:pointer;
}

.track{
  position:relative;
  width:100%;
  padding-top:var(--featured-start-top-padding,clamp(3cm,14vh,5cm));
  padding-bottom:4cm;
  /* In normal document flow: real scroll extent, no transformed-page wall. */
  transform:none;
}

.chapter{
  width:100%;
  margin:0 0 var(--chapter-gap);
}

.chapter-title{
  margin:0 var(--side) var(--title-text-gap);
  text-align:center;
  font-family:var(--title-font,Arial,Helvetica,sans-serif);
  font-size:clamp(34px,5vw,var(--title-size));
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:700;
  text-transform:uppercase;
  overflow-wrap:anywhere;
  opacity:1;
}

.chapter-text{
  margin:0 var(--text-side) 1.8cm;
  font-family:var(--text-font,monospace);
  font-size:clamp(12px,1.15vw,var(--chapter-text-size));
  line-height:1.55;
  text-align:justify;
  text-align-last:center;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  opacity:1;
}

.images{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--image-gap);
}

.image-wrap{
  position:relative;
  width:100%;
  margin:0;
  padding:0 var(--side);
  display:flex;
  justify-content:center;
  align-items:center;
  contain:layout paint;
}

.image-wrap .gallery-photo{
  display:block;
  /* Size the preview using the FULL display image's dimensions, never the
     thumbnail's intrinsic pixel size. Swapping sources must not move photos
     or alter the available scroll distance. */
  width:min(100%, var(--photo-full-width, 2000px), calc((100vh - 10mm) * var(--photo-ratio, 1.5)));
  height:auto;
  max-width:calc(100vw - (2 * var(--side)));
  max-height:calc(100vh - 10mm);
  object-fit:contain;
  opacity:1;
  backface-visibility:hidden;
  transform:translateZ(0);
}

/*
  Consecutive portrait photographs are shown two-up.
  The pair itself is one centering/slideshow stop.
*/
.portrait-pair{
  position:relative;
  width:100%;
  margin:0;
  padding:0 var(--side);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:5mm;
  align-items:center;
  contain:layout paint;
}

.portrait-pair.is-single{display:flex;justify-content:center}
.portrait-pair.is-single .portrait-slot{flex:0 1 calc((100% - 5mm)/2)}
.portrait-slot{
  min-width:0;
  min-height:0;
  display:flex;
  justify-content:center;
  align-items:center;
}

.portrait-slot .gallery-photo,
.portrait-placeholder{
  display:block;
  width:min(100%, var(--photo-full-width, 2000px), calc((100vh - 10mm) * var(--photo-ratio, 1.5)));
  height:auto;
  max-width:100%;
  max-height:calc(100vh - 10mm);
  object-fit:contain;
  opacity:1;
  backface-visibility:hidden;
  transform:translateZ(0);
}

.portrait-placeholder{
  color:transparent;
  background:transparent;
  pointer-events:none;
}

.focus-dimmable{
  will-change:opacity;
}

/*
  Featured images enter as the existing gallery thumbnail and are upgraded
  top-to-bottom to the full display derivative. The layout never changes.
*/
.gallery-photo.is-preview{
  filter:blur(5px);
  opacity:.82;
}
.gallery-photo.is-full-quality{
  filter:none;
  opacity:1;
  transition:filter 420ms ease,opacity 420ms ease;
}

.featured-loader{
  position:fixed;
  inset:0;
  z-index:5000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:var(--bg);
  color:var(--text);
  opacity:1;
  visibility:visible;
  transition:opacity 520ms ease,visibility 520ms step-end;
}
.featured-loader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.featured-loader-logo{
  width:clamp(150px,15vw,230px);
  height:auto;
  max-height:110px;
  object-fit:contain;
  mix-blend-mode:difference;
}
.featured-loader-fallback{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.featured-loader-progress{
  width:min(240px,48vw);
  height:1px;
  background:rgba(236,236,234,.18);
  overflow:hidden;
}
.featured-loader-progress > i{
  display:block;
  width:0%;
  height:100%;
  background:currentColor;
  transition:width 180ms linear;
}
.featured-loader-percent{
  min-height:1em;
  font:10px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.08em;
  opacity:.55;
  font-variant-numeric:tabular-nums;
}

.empty{
  min-height:80vh;
  display:grid;
  place-items:center;
  padding:var(--side);
  color:var(--muted);
  text-align:center;
  font-size:clamp(26px,4vw,58px);
  font-weight:700;
}


/*
  Alternate compact gallery view.
  The default view remains the existing cinematic scrolling presentation.
*/
body.view-grid{
  height:auto;
  min-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:auto;
  touch-action:auto;
}

html:has(body.view-grid){
  height:auto;
  min-height:100%;
  overflow-y:auto;
  overscroll-behavior:auto;
}

body.view-grid .viewport{
  position:relative;
  inset:auto;
  width:100%;
  min-height:100vh;
  height:auto;
  overflow:visible;
}

body.view-grid .track{
  position:relative;
  top:auto;
  left:auto;
  width:100%;
  padding-top:clamp(2.2cm,10vh,3.5cm) !important;
  padding-bottom:2cm;
  transform:none !important;
  will-change:auto;
}

body.view-grid .chapter{
  margin-bottom:2cm;
}

body.view-grid .chapter-title{
  margin-bottom:8mm;
}

body.view-grid .chapter-text{
  display:none;
}

body.view-grid .images{
  display:grid;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(150px,1fr)
    );
  align-items:stretch;
  gap:5mm;
  padding:0 var(--side);
}

body.view-grid .image-wrap,
body.view-grid .portrait-pair,
body.view-grid .portrait-slot{
  display:contents;
  margin:0;
  padding:0;
}

body.view-grid .portrait-placeholder{
  display:none;
}

body.view-grid .images .gallery-photo{
  display:block;
  width:100% !important;
  height:clamp(135px,18vw,240px) !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain;
  opacity:1 !important;
  transform:none !important;
  cursor:zoom-in;
  background:transparent;
}

body.view-grid .focus-dimmable{
  opacity:1 !important;
  transition:none !important;
}

@media(max-width:780px){
  :root{
    --side:18px;
    --image-gap:1.2cm;
    --chapter-gap:3cm;
  }

  .site-logo{
    top:12px;
    left:18px;
    width:clamp(130px,38vw,175px);
  }

  .admin-link{
    width:56px;
    height:56px;
  }

  .track{padding-top:var(--featured-start-top-padding,2.5cm)}

  .chapter-title{
    margin-bottom:.9cm;
    font-size:clamp(34px,11vw,58px);
  }

  .chapter-text{
    margin:0 18px 1.2cm;
    font-size:12px;
    line-height:1.5;
  }

  body.view-grid .images{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
    gap:12px;
    padding:0 18px;
  }

  body.view-grid .images .gallery-photo{
    height:150px !important;
  }
}

.guestbook-link-section{text-align:center;margin:clamp(70px,12vh,170px) var(--side) 2cm;padding:30px 0 80px;border-top:1px solid #4e5053;position:relative;z-index:5}.guestbook-entry-link{font-family:Arial,Helvetica,sans-serif;color:var(--text);font-size:clamp(36px,7vw,85px);font-weight:700;letter-spacing:-.07em;text-decoration:none;text-transform:uppercase}.guestbook-entry-link:hover{text-decoration:underline}.guestbook-link-section p{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.15em}body.view-grid .guestbook-link-section{margin-top:70px}