/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── VARIABLES ─── */
:root {
  --bg: #eeebe5;
  --black: #0f0f0f;
  --mid: #666;
  --light: #aaa;
  --lighter: #bbb;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --sans: 'Helvetica Neue', Arial, sans-serif;
  /* layout */
  --left: 110px;
  --right: 200px;
  --nav-h: 38px;
  --foot-h: 28px;
}

/* ─── BASE ─── */
html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--black);
  font-family: var(--mono);
  overflow: hidden;
  cursor: none;
}

/* ─── CUSTOM CURSOR ─── */
#cur {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  transition: width .22s cubic-bezier(.25,.46,.45,.94),
              height .22s cubic-bezier(.25,.46,.45,.94),
              opacity .2s;
}
/* Crosshair arms via pseudo-elements */
#cur::before,
#cur::after {
  content: '';
  position: absolute;
  background: var(--black);
  transition: all .22s cubic-bezier(.25,.46,.45,.94);
}
/* Horizontal arm */
#cur::before {
  width: 100%; height: 1px;
  top: 50%; left: 0;
  transform: translateY(-50%);
}
/* Vertical arm */
#cur::after {
  width: 1px; height: 100%;
  left: 50%; top: 0;
  transform: translateX(-50%);
}
/* Center dot */
#cur .cur-dot {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--black);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: all .22s cubic-bezier(.25,.46,.45,.94);
}

/* Hover state — zoom up, arms get thinner */
#cur.ring {
  width: 40px;
  height: 40px;
}
#cur.ring::before { height: 0.5px; opacity: 0.5; }
#cur.ring::after  { width: 0.5px;  opacity: 0.5; }
#cur.ring .cur-dot {
  width: 5px; height: 5px;
  background: var(--black);
}

/* Hide native cursor everywhere */
*, a, button, input, select, textarea, .thumb { cursor: none !important; }

/* ─── SHELL ─── */
/* Fixed full-screen grid — 3 cols × 3 rows */
.shell {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: var(--left) 1fr var(--right);
  grid-template-rows: var(--nav-h) 1fr var(--foot-h);
  grid-template-areas:
    "nl nc nr"
    "th ce ri"
    "fl fc fr";
}

/* ─── NAV ─── */
.nl {
  grid-area: nl;
  display: flex; align-items: center;
  padding: 0 14px;
}
.nc {
  grid-area: nc;
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
}
.nr {
  grid-area: nr;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 14px; gap: 14px;
}

.logo {
  font-family: var(--sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--black); text-decoration: none;
}

.nav-dot { width: 6px; height: 6px; border-radius: 50%; background: #3ecf6a; flex-shrink: 0; }
.nav-t, .nav-loc { font-size: 9px; letter-spacing: .04em; }
.nav-t  { color: var(--black); }
.nav-loc { color: var(--mid); }
.nav-sep { font-size: 9px; color: var(--lighter); }
.nav-studio { font-size: 9px; letter-spacing: .08em; color: var(--black); text-transform: uppercase; }

.btn-nav {
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--black); text-decoration: none; cursor: pointer;
  border-bottom: 1px solid var(--black); padding-bottom: 1px;
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: var(--mono);
}
.btn-nav:hover { color: var(--mid); border-color: var(--mid); }

.nav-counter {
  font-size: 9px; color: var(--light);
  letter-spacing: .04em;
}

/* ─── LEFT THUMBS ─── */
.th {
  grid-area: th;
  overflow: hidden;
  position: relative;
}
.tw {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding set dynamically by JS based on .th height */
  gap: 6px;
  transition: transform .6s cubic-bezier(.76,0,.24,1);
  will-change: transform;
}
.thumb {
  width: 68px; height: 50px;
  flex-shrink: 0; cursor: pointer;
  position: relative;
}
.thumb-box {
  width: 68px; height: 50px;
  overflow: hidden;
  position: relative;
}
.thumb-box img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Static outline — fixed in center of .th, active thumb scrolls under it */
.th-frame {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 50px;
  border: 1.5px solid var(--black);
  pointer-events: none;
  z-index: 10;
}
/* + marker fixed beside the frame */
.th-plus {
  position: absolute;
  left: calc(50% + 40px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px; color: var(--black);
  font-family: var(--sans); font-weight: 300;
  pointer-events: none; line-height: 1;
  z-index: 10;
}
.thumb-n {
  font-size: 7px; color: var(--light);
  text-align: center; margin-top: 3px;
  letter-spacing: .07em;
}

/* ─── CENTER ─── */
.ce {
  grid-area: ce;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cross {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36px;
  color: rgba(0,0,0,.45);
  pointer-events: none; user-select: none;
  font-family: var(--sans); font-weight: 300; line-height: 1;
  z-index: 2;
}
.cross.t { top: 6px; }
.cross.b { bottom: 6px; }

.slide {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1.05);
  opacity: 0; pointer-events: none;
  transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1),
              transform 1.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.slide.on  { opacity: 1; pointer-events: all;
             transform: translate(-50%, -50%) scale(1); }
.slide.out { opacity: 0;
             transform: translate(-50%, -50%) scale(0.96);
             transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                         transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.sph {
  display: block;
  position: relative;
}
/* Image slides — respect natural ratio, constrained to stage */
.sph-img-wrap {
  display: block;
  position: relative;
  max-width: 58vw;
  max-height: 82vh;
  overflow: hidden;
}
.sph-img-wrap img {
  display: block;
  width: auto;
  height: auto;
  max-width: 58vw;
  max-height: 82vh;
  object-fit: contain;
}
.sph-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.32) 0%, transparent 40%);
  pointer-events: none;
}
.sph-img-wrap .sph-tag { z-index: 2; }
.sph img {
  display: block;
  max-width: 42vw;
  max-height: 80vh;
  width: auto;
  height: auto;
}
/* gradient placeholders get a natural portrait size */
.sph.g1, .sph.g2, .sph.g3, .sph.g4, .sph.g5, .sph.g6 {
  width: 34vw;
  height: 78vh;
}
.sph-tag {
  position: absolute; bottom: 11px; left: 12px;
  font-size: 7px; color: rgba(255,255,255,.4);
  letter-spacing: .16em; text-transform: uppercase;
}

/* ─── CSS GRADIENT PLACEHOLDERS ─── */
.g1 { background: linear-gradient(148deg,#d0c5b3 0%,#a8977e 35%,#7a6850 65%,#524030 100%); }
.g2 { background: linear-gradient(162deg,#c0bab2 0%,#94897a 40%,#685c4e 70%,#3e3020 100%); }
.g3 { background: linear-gradient(138deg,#ddd8d0 0%,#b0a898 50%,#807060 80%,#504040 100%); }
.g4 { background: linear-gradient(152deg,#b8c2cc 0%,#8e98a8 40%,#5e6878 70%,#2e3848 100%); }
.g5 { background: linear-gradient(143deg,#cec8c0 0%,#a49488 50%,#747060 80%,#444038 100%); }
.g6 { background: linear-gradient(156deg,#c2bdb5 0%,#989085 42%,#6a6255 72%,#3a3228 100%); }
.g1::after{content:'';position:absolute;width:55%;height:75%;top:12%;left:22%;border:1px solid rgba(255,255,255,.13);}
.g2::after{content:'';position:absolute;width:38%;height:55%;top:22%;left:31%;background:rgba(0,0,0,.08);border-radius:50%;}
.g3::after{content:'';position:absolute;width:68%;height:2px;top:48%;left:16%;background:rgba(255,255,255,.2);box-shadow:0 22px 0 rgba(255,255,255,.09),0 -22px 0 rgba(255,255,255,.09);}
.g4::after{content:'';position:absolute;width:48%;height:68%;top:16%;left:26%;border-left:1px solid rgba(255,255,255,.18);border-right:1px solid rgba(255,255,255,.18);}
.g5::after{content:'';position:absolute;width:62%;height:62%;top:19%;left:19%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);}
.g6::after{content:'';position:absolute;width:78%;height:1px;top:44%;left:11%;background:linear-gradient(to right,transparent,rgba(255,255,255,.28),transparent);box-shadow:0 28px 0 rgba(255,255,255,.12),0 56px 0 rgba(255,255,255,.06);}

/* ─── RIGHT PANEL ─── */
.ri {
  grid-area: ri;
  position: relative;
  overflow: hidden;
}

.r-num {
  position: absolute;
  top: 12px; right: 0;
  left: 0;
  text-align: right;
  padding-right: 16px;
  font-family: var(--sans);
  font-size: clamp(48px, 5.5vw, 90px);
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--black);
  line-height: 1;
  user-select: none;
  transition: opacity .3s;
  overflow: hidden;
}

.r-expand {
  position: absolute;
  top: 50%; right: 20px;
  transform: translateY(-50%);
  font-size: 13px;
  color: rgba(0,0,0,.22);
  letter-spacing: -2px;
  user-select: none; pointer-events: none;
  font-family: var(--mono);
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
}
.r-expand-box {
  width: 20px; height: 16px;
  border: 1px solid rgba(0,0,0,.22);
  position: relative;
}
.r-expand-icon {
  font-size: 14px; letter-spacing: -1px; line-height: 1;
  color: rgba(0,0,0,.22);
  font-family: var(--mono);
}

.r-meta {
  position: absolute;
  bottom: 90px; right: 16px;
  display: flex; flex-direction: column;
  gap: 18px;
  text-align: right;
  transition: opacity .35s ease, transform .35s ease;
}
.r-meta.fade { opacity: 0; transform: translateY(8px); }

.r-group {
  display: flex; flex-direction: column;
  gap: 1px;
}
.r-label {
  font-size: 9px;
  font-weight: 300;
  color: var(--lighter);
  letter-spacing: .06em;
  line-height: 1.3;
}
.r-value {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--black);
  letter-spacing: .02em;
  line-height: 1.4;
}

.r-loc {
  position: absolute;
  bottom: 16px; right: 16px;
  text-align: right;
  transition: opacity .35s ease;
}
.r-loc.fade { opacity: 0; }
.r-coords {
  font-size: 8px;
  color: var(--light);
  letter-spacing: .04em;
  line-height: 1.6;
}
.r-loc-label {
  font-size: 9px;
  color: var(--mid);
  letter-spacing: .04em;
  margin-top: 2px;
}
.r-loc-city {
  font-size: 12px;
  font-weight: 500;
  color: var(--black);
  letter-spacing: .02em;
  line-height: 1.3;
}

/* ─── FOOTER ─── */
.fl {
  grid-area: fl;
  display: flex; align-items: center; padding: 0 14px; gap: 8px;
}
.fc {
  grid-area: fc;
  display: flex; align-items: center; justify-content: center;
}
.fr {
  grid-area: fr;
  display: flex; align-items: center; justify-content: flex-end; padding: 0 14px;
}
.ft { font-size: 8px; color: var(--light); letter-spacing: .1em; }
.ft-sep { font-size: 8px; color: var(--lighter); }
.ft-link {
  font-size: 8.5px; color: var(--mid); text-decoration: none;
  letter-spacing: .14em; text-transform: uppercase;
  transition: color .2s;
}
.ft-link:hover { color: var(--black); }

/* ─── SCROLL HINT ─── */
#hint {
  position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
  font-size: 7.5px; color: var(--lighter);
  letter-spacing: .24em; text-transform: uppercase;
  pointer-events: none; transition: opacity .6s; z-index: 10;
}
#hint.gone { opacity: 0; }

/* ─── BOOKING OVERLAY ─── */
.ov {
  position: fixed; inset: 0; background: var(--bg);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .38s ease;
}
.ov.open { opacity: 1; pointer-events: all; }
.ov-x {
  position: absolute; top: 16px; right: 18px;
  font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mid); background: none; border: none; cursor: pointer;
  font-family: var(--mono);
}
.ov-x:hover { color: var(--black); }
.ov-in { width: 100%; max-width: 460px; padding: 0 20px; }
.ov-tag { font-size: 8px; letter-spacing: .28em; text-transform: uppercase; color: var(--light); margin-bottom: 18px; }
.ov-h {
  font-family: var(--sans);
  font-size: 36px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.08;
  margin-bottom: 34px;
}
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 1px; }
.frow.full { grid-template-columns: 1fr; }
.ff input, .ff textarea, .ff select {
  width: 100%; background: transparent;
  border: none; border-bottom: 1px solid rgba(0,0,0,.15);
  padding: 11px 0; font-family: var(--mono);
  font-size: 9px; letter-spacing: .06em; color: var(--black);
  outline: none; -webkit-appearance: none; transition: border-color .2s;
}
.ff input:focus, .ff textarea:focus, .ff select:focus { border-color: var(--black); }
.ff input::placeholder, .ff textarea::placeholder { color: var(--lighter); letter-spacing: .14em; text-transform: uppercase; font-size: 8px; }
.ff select { color: var(--lighter); }
.ff select option { color: var(--black); background: var(--bg); }
.ff textarea { height: 66px; resize: none; }
.ffoot { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }
.fnote { font-size: 7.5px; color: var(--lighter); letter-spacing: .06em; }
.fsend {
  background: var(--black); color: var(--bg);
  border: none; padding: 10px 24px;
  font-family: var(--mono); font-size: 8px;
  letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer; transition: background .3s;
}
.fsend:hover { background: #333; }

/* ─── RESPONSIVE ─── */
@media (max-width: 720px) {
  :root { --left: 72px; --right: 140px; }
  .r-num { font-size: 52px; }
}

@media (max-width: 520px) {
  /* ── Full-screen fixed layout, nothing scrolls ── */
  html, body {
    overflow: hidden;
    height: 100%; width: 100%;
  }

  .shell {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--nav-h) 1fr var(--foot-h);
    grid-template-areas:
      "nav"
      "main"
      "foot";
  }

  /* ── NAV: single row across top ── */
  .nl { grid-area: nav; grid-column: 1; grid-row: 1; display: flex; align-items: center; padding: 0 14px; }
  .nc { display: none; }
  .nr {
    position: fixed;
    top: 0; right: 0;
    height: var(--nav-h);
    display: flex; align-items: center;
    padding: 0 14px; gap: 10px;
    z-index: 20;
  }

  /* ── Hide left thumb strip ── */
  .th { display: none; }

  /* ── Center stage fills main area ── */
  .ce {
    grid-area: main;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Image: centered, respect ratio, leave space for overlays ── */
  .sph-img-wrap {
    max-width: 88vw;
    max-height: 55vh;
  }
  .sph-img-wrap img {
    max-width: 88vw;
    max-height: 55vh;
  }

  /* ── Right info panel: absolutely positioned over bottom-right of stage ── */
  .ri {
    position: fixed;
    right: 0;
    bottom: var(--foot-h);
    width: 160px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 12px 12px 0;
    z-index: 10;
    overflow: visible;
  }

  .r-num {
    font-size: 52px;
    position: static;
    text-align: right;
    padding-right: 0;
    margin-bottom: 8px;
  }

  .r-expand { display: none; }

  .r-meta {
    position: static;
    text-align: right;
    gap: 10px;
    margin-bottom: 6px;
  }

  .r-loc {
    position: static;
    text-align: right;
  }

  /* ── Footer: stuck to very bottom ── */
  .fl {
    grid-area: foot;
    grid-column: 1;
    position: fixed;
    bottom: 0; left: 0;
    height: var(--foot-h);
    display: flex; align-items: center;
    padding: 0 14px; gap: 8px;
    z-index: 20;
  }
  .fc {
    position: fixed;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    height: var(--foot-h);
    display: flex; align-items: center;
    z-index: 20;
  }
  .fr {
    position: fixed;
    bottom: 0; right: 0;
    height: var(--foot-h);
    display: flex; align-items: center;
    padding: 0 14px;
    z-index: 20;
  }

  /* ── Crosses: keep but smaller on mobile ── */
  .cross { font-size: 24px; }
}

/* ─── PHOTO PROJECT RIGHT PANEL ─── */

/* Area of Shoot label — no border, just uppercase text */
.r-area {
  display: inline-block;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.6;
  margin-top: 2px;
}

/* Tighten the meta group gap for 3 fixed items */
.r-meta {
  gap: 22px;
}

/* SEO hidden H1 */
.seo-h1 {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


.slide .sph.g1,.slide .sph.g2,.slide .sph.g3,
.slide .sph.g4,.slide .sph.g5,.slide .sph.g6 {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34vw; height: 78vh;
}