:root{
  /* Layout controls */
  --fs-gutter: 64px;   /* fixed blank gutter on each side */
  --look-gap:  32px;   /* fixed gap between slides */
  --fs-peek:   24px;   /* set dynamically on desktop to match centered slide */

  /* Desktop fixed height and max width cap (image width varies by aspect) */
  --desk-slide-h: 560px;
  --desk-slide-w-max: 1240px; /* cap so ultra-wide images don’t blow out */

  --tan: #f0e8dc;
  --navy: #0b1224;

  --chev-tweak-left:  9px;  /* try 4–8px */
  --chev-tweak-right: -9px;  /* set smaller if right is too far in */
}

/* no other CSS changes required */

*{ box-sizing:border-box }
html,body{
  height:100%; margin:0; overflow-x:hidden; background:var(--navy); color:#fff;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
}
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }

/* TAN TAB BAR ABOVE THE NAVY SLIDER */
.tabs-bar{
  background:var(--tan);
  padding: 18px 0 14px;
}
.tabs{
  max-width: 1400px; margin: 0 auto;
  display:flex; gap:32px; justify-content:center; align-items:flex-end;
  padding: 0 16px; user-select:none;
}
.tab{
  background:none; border:0; color:var(--navy);
  text-transform:uppercase; letter-spacing:.02em;
  font-weight:200; /* Inter ExtraLight OFF state */
  font-size:18px; line-height:1; padding: 0 2px 6px; cursor:pointer;
  border-bottom:2px solid transparent;
}
.tab:hover{ color:#000; }
.tab.is-active{
  color:#000; font-weight:700; /* Inter Bold ON state */
  border-bottom-color:#000;
}

.hud{
  position:fixed; left:12px; top:10px; background:rgba(0,0,0,.55);
  padding:6px 10px; border-radius:8px; font:12px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; z-index:60;
  pointer-events:none;
}

.stage{
  width:100%; /* IMPORTANT: 100% not 100vw */
  margin:0 auto; padding: 0 0 56px; position:relative;
  user-select:none; -webkit-user-select:none;
  background:var(--navy); /* navy container */
}
/* Navy band above the image area on desktop — 50% of gutter height */
@media (min-width:1024px){
  .stage{ padding-top: calc(var(--fs-gutter) / 2); }
}

.title{ display:none; }

.viewport{
  width:100%;
  overflow:hidden; touch-action: pan-y; position: relative;
  max-width: 1600px; margin: 0 auto;
}

.track{
  display:flex; align-items:center; gap: var(--look-gap);
  will-change: transform; transition: transform 600ms cubic-bezier(.22,.61,.36,1);
  transform: translate3d(0,0,0);
}
.track.no-animate{ transition:none!important; }

.slide{
  flex: 0 0 auto; width: auto; /* JS sets exact px width per slide (image width) */
  border-radius: 0; overflow: visible; display:flex; align-items:center; justify-content:center;
  background:transparent; position: relative;
  height: var(--desk-slide-h);
}
.media{
  width:100%; height: 100%; display:flex; align-items:center; justify-content:center;
  background:var(--navy);
}
.slide img{
  display:block; width:100%; height:100%;
  object-fit: contain;
  background:var(--navy); user-select:none; -webkit-user-drag:none;
}

/* BELOW-IMAGE CAPTION AREA */
.caption-bar{
  position: relative; z-index: 10; background: var(--navy);
  display: flex; justify-content: center; padding: 6px 0 0;
}
.caption-inner{
  max-width: 100%; color:#fff; text-align:center; padding: 6px 10px 0;
}
.cap-title{
  display:inline; text-transform:uppercase; font-weight:400; letter-spacing:.02em;
}
.cap-sep{ opacity:.85; padding: 0 6px; }
.cap-desc{ display:inline; font-weight:400; }

/* Chevrons (desktop) */
.ar{
  position:absolute; top:50%; transform:translateY(-50%); background:transparent;
  border:0; color:#fff; width:44px; height:64px; cursor:pointer; z-index:50; font-size:0; line-height:0;
  pointer-events:auto; opacity:.95;
}
.ar svg{ width:24px; height:64px; stroke:#fff; stroke-width:1.25; fill:none; }
.prev{ left: 0; }
.next{ left: 0; }

/* Top-right controls anchored to ACTIVE image (JS repositions on desktop) */
.ctrls{
  position:absolute; z-index:55; display:flex; gap:8px;
  transition: opacity .12s ease;
}
.ctrl-btn{
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.45); border-radius:6px; border:0; color:#fff; cursor:pointer;
}
.ctrl-btn svg{ width:18px; height:18px; stroke:#fff; stroke-width:2; fill:none; }

/* Hide overlay controls while a slide is animating */
.moving .ctrls{ opacity:0; pointer-events:none; }

/* Dots */
.dots{ display:flex; gap:8px; justify-content:center; margin-top: 12px; }
.dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.45); cursor:pointer; transition: transform .18s ease, background .18s ease; }
.dot.is-active{ background:#fff; transform: scale(1.1); }

/* Thumbnail overlay */
.thumb-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.88);
  display:none; z-index: 80;
}
.thumb-overlay.is-open{ display:block; }
.thumb-inner{
  max-width: 1100px; margin: 64px auto; padding: 8px 16px 24px;
}
.thumb-bar{
  display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; color:#fff;
}
.thumb-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:10px; align-items:stretch;
}
.thumb{
  border:0; padding:0; background:#111827; cursor:pointer; border-radius:8px; overflow:hidden; position:relative;
  outline: 0;
}
.thumb img{
  width:100%; height:100%; object-fit:cover; aspect-ratio: 4 / 3; display:block;
  transition: transform .18s ease;
}
.thumb:hover img{ transform: scale(1.03); }
.thumb.is-active::after{
  content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 3px #ffffff; border-radius:8px;
}

/* ===== Mobile (<= 1024px) — single consolidated block ===== */
@media (max-width: 1023.98px){

  /* Layout on phones */
  :root{
    --fs-gutter: 12px;
    --look-gap:  10px;
    --fs-peek:    8px;

    /* Visual center nudge: negative moves content LEFT, positive moves RIGHT */
    --center-nudge: -13px; /* tweak to -3px or -5px as needed */
  }

  /* Small navy bands above/below */
  .stage{
    padding-top: 12px !important;      /* blue above the image (double the earlier 6px) */
    padding-bottom: 10px !important;   /* blue below the caption area */
  }

  .viewport{
    position: relative;                 /* lets .ctrls overlay the image */
    max-width: none;
    margin: 0;
    padding: 0 var(--fs-gutter) !important;  /* symmetric inset */
  }

  /* Robust centering nudge that stacks with JS transform (supported on iOS) */
  .track{ translate: var(--center-nudge) 0 !important; }

  /* Near‑square crop for images */
  .slide{
    height: auto !important;
    aspect-ratio: 1 / 1;               /* Instagram square */
  }
  .slide img{
    object-fit: cover !important;       /* mild vertical crop */
    object-position: center center !important;
  }

  /* Caption spacing */
  .caption-bar{   padding-top: 6px !important; }
  .caption-inner{ padding: 4px 12px 0 !important; }
  .dots{          margin-top: 6px !important; }

  /* Overlay the grid/fullscreen buttons on the image (top-right) */
  .ctrls{
    position: absolute;
    top: 10px; right: 12px;
    left: auto !important; transform: none !important;
    z-index: 70;
  }
  .ctrl-btn{ width: 28px; height: 28px; background: rgba(0,0,0,.38); }

  /* Allow page scroll even when finger is over the gallery */
  .viewport, .track, .media, .slide, .slide img { touch-action: pan-y !important; }

  /* Hide arrows on phones */
  .ar{ display:none !important; }
}

/* Fullscreen states */
.is-fs .tabs-bar{ display:none; }
.is-fs .stage{ padding-top: 0; }
.is-fs .viewport{ max-width: none; }
.is-fs .dots{ opacity:.85; }

/* Fullscreen caption overlay */
.is-fs .caption-bar{
  position: fixed; left: 0; right: 0; bottom:  0;
  background: none; padding: 0; z-index: 70; pointer-events:none;
}
.is-fs .caption-inner{
  width: 100%; max-width: none;
  padding: 16px 20px 22px;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.38) 60%, rgba(0,0,0,0));
  text-align: center; color:#fff;
}
/* Force full image in fullscreen even on mobile */
.is-fs .slide{
  width: 100vw !important;
  height: 100vh !important;
}
.is-fs .slide .media{
  width: 100% !important;
  height: 100% !important;
  background: #000 !important;
}
.is-fs .slide img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
}

/* Hide HUD in production */
.hud, .lf-hud{display:none!important}

/* Restore horizontal swiping while keeping vertical page scroll over the gallery */
@media (max-width: 1023.98px){
  /* Allow vertical page scroll when dragging over the gallery */
  .viewport{ touch-action: pan-y pinch-zoom !important; }

  /* Let the slider track/media handle horizontal swipes */
  .track, .media, .slide, .slide img{ touch-action: auto !important; }
}


/* === YouTube slide support (append at end) === */
/* Use .slide.video for any slide that contains a YouTube iframe */
.slide.video { height: auto; aspect-ratio: 16 / 9; }
.slide.video .media,
.slide.video iframe {
  width: 100%; height: 100%;
  display: block; border: 0; background: #000;
}

/* Ensure mobile square rule does NOT apply to video slides */
@media (max-width: 1023.98px){
  .slide.video { aspect-ratio: 16 / 9; }
}