/* ===========================================================
   GALLERY — minimal vertical-scroll series + contact grid
   + a frosted floating nav. Original implementation; the feel
   (clean column, floating control bar, soft motion) is inspired
   by editorial photo sites, the code and styling are our own.
   Shared by /gallery/index.html and every series page.
   Relies on styles.css for --text, --accent, --accent-3, --muted
   and the --font-* families.
   =========================================================== */

:root{
  --gx-canvas:#f4f3ef;            /* clean, calm canvas                      */
  --gx-frame:#e9e6df;             /* image placeholder block (pre-load)      */
  --gx-cap:#8c887e;               /* whisper caption                         */
  --gx-cap-no:#bdb8ad;
  --gx-glass:rgba(24,21,18,.66);  /* frosted nav body                        */
  --gx-glass-line:rgba(255,255,255,.16);
}

/* calm canvas + a gentle page fade-in (the "arrival") */
@keyframes gx-pin{ from{opacity:0;} to{opacity:1;} }
body.series-page,
body.gallery-page{
  --accent:#ff5a00;                       /* match the site orange */
  --bg:var(--gx-canvas);                  /* header band == page canvas (no warm/cool seam) */
  background:var(--gx-canvas) !important;
  animation:gx-pin .5s ease both;
  /* sticky footer: on short pages (grid layout / tall windows) the footer used to
     end mid-screen with a void below it and the floating pill orbiting that void.
     A flex column pins the footer to the true bottom of the window instead. */
  min-height:100vh; display:flex; flex-direction:column;
}
body.series-page main.series,
body.gallery-page .gx-grid{ flex:1 0 auto; width:100%; }
body.series-page footer,
body.gallery-page footer{
  margin-top:auto;
  /* clearance so the frosted pill floats over the footer band, not over its text */
  padding-bottom:84px;
}
body.is-leaving{ animation:none; opacity:0; transition:opacity .24s ease; }

/* the old static nav (fallback markup) is replaced by the injected one */
.gfn{ display:none !important; }

/* ---- series header ---------------------------------------- */
.series-head{ max-width:760px; margin:0 auto; padding:clamp(40px,8vh,84px) var(--container-pad) 6px; }
.series-back{
  display:inline-block; font-family:var(--font-mono);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--text); color:var(--gx-canvas);
  padding:6px 12px; border:2px solid var(--text); margin-bottom:22px;
  text-decoration:none; transition:background .15s,color .15s;
}
.series-back:hover{ background:var(--accent); color:var(--text); }
.series-meta{
  display:inline-block; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  background:var(--accent-3); border:2px solid var(--text);
  padding:5px 12px; margin-bottom:18px;
}
.series-title{
  font-family:var(--font-display);
  font-size:clamp(60px,10vw,132px); line-height:.86; letter-spacing:-.03em;
  text-transform:uppercase; margin:0 0 18px;
}
.series-title .dot{ color:var(--accent); }
.series-intro{ font-size:17px; line-height:1.6; max-width:560px; margin:0 0 14px; color:#3a362f; }
.series-chapter{
  display:inline-block; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:4px;
}
.series-chapter b{ color:var(--text); }

/* ---- the gallery body ------------------------------------- */
.series{ margin:0 auto; padding:clamp(22px,4vh,40px) var(--container-pad) 152px; }
.series[data-layout="vertical"]{ max-width:760px; }
.series[data-layout="grid"]{ max-width:1320px; }

/* vertical — bare prints, a narrow column, quiet rhythm */
.series[data-layout="vertical"] .series-list{
  display:flex; flex-direction:column; gap:clamp(28px,4.5vh,44px);
}
.frame{ margin:0; }
.frame-media{ position:relative; background:var(--gx-frame); overflow:hidden; }
.frame-media img{ display:block; width:100%; height:auto; }
.frame-cap{ display:flex; align-items:baseline; gap:11px; margin-top:12px; }
.frame-no{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:var(--gx-cap-no); }
.frame-text{ font-family:var(--font-serif); font-style:italic; font-size:14px; color:var(--gx-cap); line-height:1.4; }
/* subscriber perk chip — quiet until hovered/tapped */
.frame-save{
  margin-left:auto; flex:none; font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gx-cap-no);
  background:none; border:1px solid var(--gx-frame); padding:3px 8px; cursor:pointer;
  transition:color .15s, border-color .15s;
}
.frame-save:hover{ color:var(--accent,#ff5a00); border-color:var(--accent,#ff5a00); }
/* strip layout overlays captions on the photo — keep it clean, no chip */
.series[data-layout="strip"] .frame-save{ display:none; }

/* soft reveal as each frame enters (enabled by JS) */
.series.reveal-on .frame{ opacity:0; transform:translateY(26px); }
.series.reveal-on .frame.in{
  opacity:1; transform:none;
  transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
}

/* grid — contact sheet */
.series[data-layout="grid"] .series-list{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px;
}
.series[data-layout="grid"] .frame-media{ aspect-ratio:1; cursor:pointer; transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; }
.series[data-layout="grid"] .frame-media img{ height:100%; object-fit:cover; }
.series[data-layout="grid"] .frame-media:hover{ box-shadow:6px 6px 0 var(--accent); transform:translate(-3px,-3px); }
.series[data-layout="grid"] .frame-cap{ margin-top:8px; gap:8px; }
.series[data-layout="grid"] .frame-text{ font-size:12px; }

/* ── STRIP — vertical pieced filmstrip (desktop default on opt-in pages) ──
   Photographs stacked into one continuous vertical ribbon. As you scroll,
   each image parallaxes within its frame (slower than the page) and the
   frames scale + soften as they leave centre — the "pull back" / surreal
   landing from the reference clip. Click a photo to zoom it to focus on a
   dark field; click again (or Esc) to drop it back into the strip. Mobile
   & reduced-motion fall back to the calm vertical column — the JS never
   upgrades there. */
.series[data-layout="strip"]{ max-width:none; padding:0; }
.series[data-layout="strip"] .series-list{
  display:flex; flex-direction:column; align-items:center; gap:0;
  padding:12vh 0 16vh;
}
.series[data-layout="strip"] .frame{
  position:relative; margin:0; width:min(760px,86vw); cursor:zoom-in;
  perspective:1300px;                       /* 3D field for the pull-back curve */
  will-change:transform, opacity; transition:none !important;
}
.series[data-layout="strip"] .frame-media{ transform-style:preserve-3d; }
.series[data-layout="strip"] .frame + .frame{ margin-top:1.5vh; }
.series[data-layout="strip"] .frame-media{
  position:relative; width:100%; height:52vh; overflow:hidden; background:#0c0b09;
  box-shadow:0 44px 80px -46px rgba(12,10,8,.75); will-change:transform, filter;
}
.series[data-layout="strip"] .frame-media img{
  position:absolute; left:0; top:-14%; width:100%; height:128%;
  object-fit:cover; display:block; will-change:transform;   /* taller than frame → parallax room */
}
.series[data-layout="strip"] .frame-cap{
  position:absolute; left:16px; bottom:14px; margin:0; z-index:2; color:#fff;
  mix-blend-mode:difference; opacity:.85;
}

/* focus / zoom overlay (built by JS) */
.strip-focus{ position:fixed; inset:0; z-index:400; background:rgba(8,7,5,0);
  pointer-events:none; transition:background .55s ease; cursor:zoom-out; }
.strip-focus.on{ background:rgba(8,7,5,.97); pointer-events:auto; }
.strip-focus__box{ position:fixed; overflow:hidden; will-change:transform;
  transition:transform .58s cubic-bezier(.16,1,.3,1);
  box-shadow:0 60px 130px -40px rgba(0,0,0,.85); }
.strip-focus__box img{ width:100%; height:100%; object-fit:cover; display:block; }
.strip-focus__cap{ position:fixed; left:0; right:0; bottom:26px; text-align:center;
  font-family:var(--font-serif); font-style:italic; font-size:15px; color:#e8e2d4;
  opacity:0; transition:opacity .4s ease .2s; pointer-events:none; }
.strip-focus.on .strip-focus__cap{ opacity:.85; }

/* progress rail + running index */
.strip-hud{ position:fixed; left:0; right:0; bottom:0; height:3px; background:rgba(20,18,14,.10); z-index:240; }
.strip-hud__bar{ height:100%; width:0; background:var(--accent); }
.strip-count{ position:fixed; left:clamp(18px,4vw,46px); bottom:24px; z-index:240;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; color:var(--text);
  display:flex; align-items:baseline; gap:7px; pointer-events:none; }
.strip-count b{ font-family:var(--font-display); font-size:22px; letter-spacing:-.01em; }
.series-end{
  text-align:center; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); padding:clamp(40px,8vh,80px) 0 6px;
}
.series-end b{ color:var(--text); }

/* ---- floating nav (frosted pill) -------------------------- */
.gnav{
  position:fixed; left:50%; bottom:clamp(16px,4vh,30px); transform:translateX(-50%);
  display:flex; align-items:center; gap:3px;
  padding:7px; color:#fff; z-index:300;
  background:var(--gx-glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--gx-glass-line); border-radius:999px;
  box-shadow:0 18px 50px -14px rgba(0,0,0,.55);
  font-family:var(--font-body, Inter, system-ui, sans-serif);
  animation:gnav-in .7s .15s cubic-bezier(.16,1,.3,1) both;
}
@keyframes gnav-in{ from{opacity:0; transform:translate(-50%,18px);} to{opacity:1; transform:translate(-50%,0);} }

.gnav__btn,.gnav__arrow,.gnav__cat{
  display:flex; align-items:center; gap:8px;
  background:transparent; border:0; color:#fff; cursor:pointer;
  height:44px; border-radius:999px; padding:0 14px;
  transition:background .25s cubic-bezier(.16,1,.3,1);
}
.gnav__btn:hover,.gnav__arrow:hover,.gnav__cat:hover{ background:rgba(255,255,255,.13); }
.gnav__btn:active,.gnav__arrow:active{ transform:scale(.95); }
.gnav__ico{ display:flex; }
.gnav__ico svg{ width:18px; height:18px; display:block; }
.gnav__arrow{ padding:0; width:38px; justify-content:center; }

/* labels that expand on hover */
.gnav__lbl{
  max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
  font-size:12px; font-weight:500; letter-spacing:.01em;
  transition:max-width .4s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.gnav__btn:hover .gnav__lbl,
.gnav__btn:focus-visible .gnav__lbl{ max-width:96px; opacity:1; }

.gnav__sep{ width:1px; height:24px; background:var(--gx-glass-line); margin:0 3px; flex:none; }

/* centre: circular series thumbnail + name */
.gnav__cat{ padding-left:6px; }
.gnav__thumb{
  width:34px; height:34px; border-radius:50%; flex:none;
  background:#2a2722 center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.gnav__cat-text{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.05; }
.gnav__kicker{ font-size:8px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.gnav__name{ font-size:15px; font-weight:500; letter-spacing:.01em; }
.gnav__chev{ margin-left:5px; opacity:.55; font-size:9px; }

/* layout-toggle icon crossfade */
.gnav__ico--layout{ position:relative; width:19px; height:19px; }
.gnav__ico--layout svg{ position:absolute; inset:0; width:19px; height:19px; transition:opacity .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1); }
.gnav .i-scroll{ opacity:0; transform:scale(.6) rotate(-25deg); }
.gnav .i-grid{ opacity:1; }
body[data-gallery-layout="grid"] .gnav .i-grid{ opacity:0; transform:scale(.6) rotate(25deg); }
body[data-gallery-layout="grid"] .gnav .i-scroll{ opacity:1; transform:none; }

/* menu (fades / slides up) */
.gnav__menu{
  position:absolute; left:50%; bottom:calc(100% + 12px);
  transform:translateX(-50%) translateY(10px);
  min-width:236px; padding:8px; color:#fff;
  background:rgba(24,21,18,.84);
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  border:1px solid var(--gx-glass-line); border-radius:18px;
  box-shadow:0 22px 60px -18px rgba(0,0,0,.6);
  opacity:0; pointer-events:none;
  transition:opacity .32s cubic-bezier(.16,1,.3,1), transform .32s cubic-bezier(.16,1,.3,1);
}
.gnav__menu.open{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.gnav__menu a{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:11px 14px; border-radius:12px; text-decoration:none; color:#fff;
  font-size:15px; font-weight:500; transition:background .2s;
}
.gnav__menu a:hover{ background:rgba(255,255,255,.1); }
.gnav__menu a em{ font-style:normal; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:rgba(255,255,255,.5); }
.gnav__menu a.is-current{ color:var(--accent); }
.gnav__menu a.is-current em{ color:var(--accent); }

@media (max-width:520px){
  .gnav__prev,.gnav__next{ display:none; }
  .gnav__name{ font-size:14px; }
}

/* ---- INDEX (gallery landing) ------------------------------ */
.gx-head{ max-width:1100px; margin:0 auto; padding:clamp(44px,9vh,92px) var(--container-pad) 8px; }
.gx-eyebrow{ display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--text); background:var(--accent-3); border:2px solid var(--text); padding:5px 12px; margin-bottom:24px; }
.gx-title{ font-family:var(--font-display); font-size:clamp(50px,7.5vw,120px); line-height:.94; letter-spacing:-.02em; text-transform:uppercase; margin:0 0 22px; }
.gx-title em{ font-family:var(--font-serif); font-style:italic; font-weight:700; color:var(--accent); text-transform:none; }
.gx-lead{ font-size:18px; line-height:1.55; max-width:620px; color:#3a362f; }
.gx-grid{ max-width:1100px; margin:0 auto; padding:clamp(30px,6vh,60px) var(--container-pad) 160px; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(30px,5vw,54px) clamp(26px,4vw,40px); }
.gx-card{ display:block; text-decoration:none; color:var(--text); }
.gx-card-img{ position:relative; aspect-ratio:4/5; background:var(--gx-frame); overflow:hidden; transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.gx-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.gx-card:hover .gx-card-img{ box-shadow:0 26px 50px -22px rgba(20,18,14,.65); transform:translateY(-4px); }
.gx-card:hover .gx-card-img img{ transform:scale(1.03); }
.gx-card-no{ position:absolute; top:11px; left:11px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:#fff; mix-blend-mode:difference; }
.gx-card-meta{ margin-top:15px; display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.gx-card-meta h3{ font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:28px; letter-spacing:-.01em; margin:0; }
.gx-card-meta p{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0; white-space:nowrap; }
.gx-card--soon .gx-card-img{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; background:#ece8df; font-family:var(--font-display); font-size:24px; text-transform:uppercase; gap:12px; color:var(--muted); }
.gx-card--soon small{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:none; opacity:.8; max-width:220px; line-height:1.5; }

@media (max-width:720px){
  .gx-grid{ grid-template-columns:1fr; gap:36px; }
  .series[data-layout="grid"] .series-list{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}

@media (prefers-reduced-motion:reduce){
  body.series-page, body.gallery-page{ animation:none; }
  .gnav{ animation:none; }
  .series.reveal-on .frame{ opacity:1 !important; transform:none !important; }
}

/* ── decluttered: let the photographs lead. Intro paragraph, the end-of-roll
   line and the descriptive half of each caption are hidden site-wide; the
   frame number stays as a quiet index. Delete this block to bring text back. ── */
.series-intro{ display:none; }
.series-meta{ display:none; }
.series-chapter{ display:none; }
.series-end{ display:none; }
.frame-text{ display:none; }
.frame-cap{ margin-top:9px; }
.frame-no{ font-size:10.5px; }