/*  Otua — v3 site styles
    Background: studio gray radial gradient (depth treatment, lighter centre)
    Text: #111111
    Type: Cormorant (nav/brand) + EB Garamond (serif body) + Helvetica Neue (labels)
    No accent colors. No banned tokens.
*/

:root {
  --gray:        #8E8E8E;
  --gray-light:  #9E9E9E;
  --gray-dark:   #7A7A7A;
  --ink:         #111111;
  --ink-mid:     rgba(17,17,17,0.6);
  --serif:       'EB Garamond', Georgia, 'Times New Roman', serif;
  --cormorant:   'Cormorant', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans:        'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --ease:        cubic-bezier(.16,1,.3,1);
  --ease-out:    cubic-bezier(.33,1,.68,1);
  --pad:         clamp(20px, 5vw, 64px);
  --nav-h:       clamp(52px, 7vh, 72px);
}

/* ── Reset ────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  background: radial-gradient(ellipse 120% 80% at 50% 40%, #9a9a9a 0%, #8E8E8E 40%, #7a7a7a 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* cursor: none REMOVED — plain browser cursor per client request */
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }

/* ── Utility ────────────────────────────────────── */
.label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

/* ── Nav ─────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(12px, 4vw, 64px);
  height: var(--nav-h);
  gap: 12px;
}
body:not(.page-landing) .nav {
  background: rgba(142,142,142,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav__brand {
  font-family: var(--cormorant);
  font-size: clamp(11px, 2.2vw, 28px);
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}
.nav__links {
  display: flex;
  gap: clamp(10px, 2vw, 28px);
  font-family: var(--cormorant);
  font-size: clamp(10px, 1.3vw, 16px);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  flex-shrink: 0;
}
.nav__links a { opacity: 0.65; transition: opacity 0.3s var(--ease-out); white-space: nowrap; }
.nav__links a:hover,
.nav__links a[aria-current="page"] { opacity: 1; }
.nav__ig {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.nav__link-disabled {
  opacity: 0.35;
  cursor: default;
  font-family: var(--cormorant);
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Landing page ────────────────────────────────── */
.page-landing {
  min-height: 100svh;
  height: 100svh;
}
@media (min-width: 761px) {
  html:has(.page-landing) {
    overflow: hidden;
    height: 100%;
  }
  html:has(.page-landing) body {
    overflow: hidden;
    height: 100%;
  }
}

/* ── Opening reveal (Sade-style) ─────────────────── */
/* While intro plays, hold the rest of the page back */
.page-landing.intro-active .landing-main,
.page-landing.intro-active .nav {
  opacity: 0;
}
.page-landing .landing-main,
.page-landing .nav {
  transition: opacity 1s var(--ease-out);
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 120% 80% at 50% 40%, #9a9a9a 0%, #8E8E8E 40%, #7a7a7a 100%);
  padding: var(--pad);
  /* The grey intro DISSOLVES to reveal the website photo behind it — that gentle
     fade IS how the picture appears (the photo is the website, never painted onto
     the intro). 1.1s dissolve matches the pre-break version (7cc3a61) Otua liked. */
  transition: opacity 1.1s var(--ease-out), visibility 1.1s var(--ease-out);
  will-change: opacity;
}
.intro.intro--done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.intro__name {
  font-family: var(--cormorant);
  font-size: clamp(14px, 2.6vw, 36px);
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
  padding-left: 0.16em;
  padding-right: 0.16em;
  max-width: 96vw;
  width: auto;
  margin: 0 auto;
  overflow: visible;
  transition: color 1.1s var(--ease-out);
}
.intro__word {
  display: inline-block;
  white-space: nowrap;
}
/* The last letter carries trailing letter-spacing; this keeps it from being clipped */
.intro__name .intro__char:last-child {
  margin-right: 0.16em;
}
@media (max-width: 480px) {
  .intro__name {
    font-size: clamp(10px, 3vw, 14px);
    letter-spacing: 0.06em;
    white-space: nowrap;
    max-width: 100vw;
    overflow: visible;
    line-height: 1.55;
    text-align: center;
    padding-left: 0.06em;
    padding-right: 0.06em;
  }
  .intro__name .intro__char:last-child {
    margin-right: 0.06em;
  }
  .intro__name .intro__space {
    display: inline-block;
    width: 0.28em;
  }
  .intro {
    padding-left: 6px;
    padding-right: 6px;
    overflow: visible;
  }
}
.intro--photo .intro__name {
  color: #fff;
}
.intro__name .intro__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
}
.intro__name .intro__char.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out);
}
/* Reduced-motion opening: keep the name-first → photo reveal, but as a gentle
   opacity fade with no letter movement (respects prefers-reduced-motion). */
.intro__name .intro__space {
  display: inline-block;
  width: 0.4em;
}

/* Full-bleed photo — floods entire page on hover (Viviane Sassen 0.8s breathe-in) */
.landing-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 20%;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 800ms cubic-bezier(0.25, 0, 0.08, 1),
              transform 800ms cubic-bezier(0.25, 0, 0.08, 1);
  pointer-events: none;
  will-change: opacity, transform;
}
.landing-bg.is-visible {
  opacity: 1;
  transform: scale(1);
}
/* Entry cover: three-panel hero, left bg | centre figure | right bg, all blending seamlessly */
.landing-bg--cover {
  opacity: 1;
  transform: scale(1);
  z-index: 0;
  transition: opacity 800ms cubic-bezier(0.25, 0, 0.08, 1);
  background: #8E8E8E;
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.cover-panel {
  height: 100%;
  background-repeat: no-repeat;
}
/* Left background panel, fills left side, overlaps under centre panel */
.cover-panel--left {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 55%;
  z-index: 1;
  background-size: cover;
  background-position: left center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 100%);
}
/* Centre figure, fixed width, sits on top and blends seamlessly into side panels */
.cover-panel--mid {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(clamp(340px, 42vw, 620px), 82vh);
  background-position: center bottom;
  background-size: auto 100%;
  z-index: 2;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 32%, black 68%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 32%, black 68%, transparent 100%);
}
/* Right background panel, fills right side, overlaps under centre panel */
.cover-panel--right {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 55%;
  z-index: 1;
  background-size: cover;
  background-position: right center;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, black 12%, black 100%);
  mask-image: linear-gradient(to left, transparent 0%, black 12%, black 100%);
}
@media (max-width: 760px) {
  /* On mobile: show only the centre figure, dissolve sides into grey */
  .landing-bg--cover {
    display: block;
    background-color: #8E8E8E;
  }
  .cover-panel--left,
  .cover-panel--right {
    display: none;
  }
  .cover-panel--mid {
    width: 100%;
    height: 100%;
    background-size: auto 100%;
    background-position: center center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  }
}
/* Hover photo layers above the cover so hovering still swaps in burgundy */
#bg-silhouette { z-index: 1; }

/* Landing page: body background matches the photo studio grey so no colour bleed shows */
html:has(.page-landing) body {
  background: #8E8E8E;
}
/* Top gradient keeps nav legible when photo is showing */
.landing-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, transparent 30%);
}

/* Work list */
.landing-main {
  position: relative;
  z-index: 10;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 20px) var(--pad) clamp(40px, 8vh, 80px);
}

/* Entrance animation for landing names */
@keyframes name-appear {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.work-list {
  list-style: none;
  text-align: center;
}

.work-item {
  display: block;
  font-family: var(--cormorant);
  font-size: clamp(30px, 4.6vw, 60px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  color: #1c1c1c;
  padding: clamp(16px, 3.5vh, 42px) 0;
  opacity: 0;
  animation: name-appear 0.7s var(--ease-out) forwards;
}
.work-item:nth-child(1) { animation-delay: 0.08s; }
.work-item:nth-child(2) { animation-delay: 0.22s; }

.work-item a {
  display: block;
  transition: opacity 0.3s;
}
.work-item a:hover { opacity: 0.55; }
/* Dim siblings when one is hovered */
.work-list:has(.work-item--active) .work-item:not(.work-item--active) a {
  opacity: 0.3;
}

/* ── Silhouette page: Tight grid ─────────────────── */
.page-silhouette { min-height: unset; }

.project-header {
  padding: calc(var(--nav-h) + clamp(40px, 7vh, 80px)) var(--pad) clamp(24px, 4vh, 48px);
  text-align: center;
}
.project-desc + .project-desc {
  margin-top: 1em;
}
.project-title {
  font-family: var(--cormorant);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: none;
  color: #1c1c1c;
  margin-bottom: 10px;
}
.project-desc {
  font-family: var(--serif);
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-mid);
  max-width: 620px;
  margin: 0 auto;
  padding: 0 var(--pad);
  text-align: center;
}

/* The tight grid, zero gap, photos touching */
.tight-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  font-size: 0;
  /* Fill the grid background so sub-pixel rounding gaps are invisible */
  background: var(--gray-dark);
}
.tight-grid__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--gray-dark);
  /* 0.5px inset shadow seals any fractional-pixel gap between cells */
  box-shadow: 0 0 0 0.5px var(--gray-dark);
}
.tight-grid__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Look names overlay the bottom of each photo */
.tight-grid__look-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 8px 7px;
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 100%);
  pointer-events: none;
}

/* Gallery divider */
.gallery-divider {
  padding: clamp(40px, 7vh, 80px) var(--pad) clamp(20px, 3vh, 40px);
  text-align: center;
}
/* Collapsed exhibit/divider: truly zero height */
.exhibit[style*="display:none"],
.gallery-divider[style*="display:none"] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Also collapse by class */
.exhibit--hidden,
.gallery-divider--hidden {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Silhouette page: no extra space after the grid */
.page-silhouette {
  padding-bottom: 0;
  min-height: 0;
  height: auto;
  overflow-x: hidden;
}
.page-silhouette main {
  padding-bottom: 0;
  margin-bottom: 0;
}
.page-silhouette .site-footer {
  padding-top: clamp(8px, 1.5vh, 16px);
  padding-bottom: clamp(8px, 1.5vh, 16px);
}
/* Kill any residual height from hidden exhibit/divider elements */
.exhibit--hidden,
.gallery-divider--hidden {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Ensure the page-silhouette body itself doesn't stretch beyond content */
body.page-silhouette {
  min-height: 0;
  height: auto;
  overflow-x: hidden;
}
.gallery-divider a {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mid);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.25s, border-color 0.25s;
}
.gallery-divider a:hover { color: var(--ink); }

/* Grid photos are clickable to open large */
.tight-grid__item { cursor: pointer; }

/* ── Lightbox (click a grid photo to view large) ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 44px);
  background: rgba(20,20,20,0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out), visibility 0.5s var(--ease-out);
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox__img {
  max-width: min(100%, calc(100vw - 2 * clamp(56px, 8vw, 110px)));
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: scale(0.97);
  transition: transform 0.5s var(--ease-out);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.lightbox.is-open .lightbox__img {
  transform: scale(1);
}
.lightbox__close {
  position: absolute;
  top: clamp(16px, 3vh, 32px);
  right: clamp(16px, 3vw, 36px);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cormorant);
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  color: rgba(255,255,255,0.7);
  transition: color 0.3s var(--ease-out);
}
.lightbox__close:hover { color: #fff; }

/* Prev / next arrows inside the enlarged view */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(48px, 5vw, 68px);
  height: clamp(48px, 5vw, 68px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cormorant);
  font-size: clamp(44px, 5vw, 66px);
  font-weight: 300;
  line-height: 1;
  color: rgba(255,255,255,0.65);
  transition: color 0.3s var(--ease-out), transform 0.35s var(--ease);
  z-index: 2;
}
.lightbox__nav:hover { color: #fff; }
.lightbox__nav--prev { left: clamp(6px, 2vw, 28px); }
.lightbox__nav--next { right: clamp(6px, 2vw, 28px); }
.lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox__nav--next:hover { transform: translateY(-50%) translateX(3px); }

@media (max-width: 480px) {
  .lightbox__nav { color: rgba(255,255,255,0.85); }
}

/* ── Horizontal gallery (GSAP pinned) ───────────── */
.exhibit {
  position: relative;
}
.exhibit__pin {
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.exhibit__pin.is-dragging {
  cursor: grabbing;
}
.track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 60px);
  padding: 0 var(--pad);
  will-change: transform;
}

/* Gallery intro panel */
.gallery-intro {
  flex: 0 0 auto;
  width: clamp(220px, 26vw, 380px);
  padding-right: clamp(10px, 2vw, 40px);
}
.gallery-intro h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 18px;
}
.gallery-intro .gallery-hint {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mid);
  display: flex;
  align-items: center;
  gap: 12px;
}
.gallery-hint .arr {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--ink-mid);
  position: relative;
}
.gallery-hint .arr::after {
  content: '';
  position: absolute;
  right: -1px; top: -3px;
  width: 6px; height: 6px;
  border-top: 1px solid var(--ink-mid);
  border-right: 1px solid var(--ink-mid);
  transform: rotate(45deg);
}

/* Gallery plates — cinematic scale/fade (Tyler Mitchell floating print) */
.plate {
  flex: 0 0 auto;
  position: relative;
  cursor: pointer;
  /* Default off-center state: smaller, dimmer */
  transform: scale(0.88);
  opacity: 0.6;
  filter: brightness(0.8) saturate(0.85);
  transition:
    transform 0.65s cubic-bezier(0.25, 1, 0.5, 1),
    opacity   0.8s ease-out,
    filter    0.65s ease-out;
  transform-origin: center center;
  z-index: 1;
}
/* Center plate: full size, full brightness (Viviane Sassen breathe-in) */
.plate--center {
  transform: scale(1.0);
  opacity: 1.0;
  filter: brightness(1.0) saturate(1.05);
  z-index: 2;
}
/* Edge-dissolve: plates blend into gray background at horizontal edges */
.plate__frame {
  position: relative;
  overflow: hidden;
  height: clamp(380px, 68vh, 700px);
  width: auto;
  aspect-ratio: 4 / 5;
  background: var(--gray-dark);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
/* Remove mask on center plate for full clarity */
.plate--center .plate__frame {
  -webkit-mask-image: none;
  mask-image: none;
}
.plate__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.plate__name {
  margin-top: 14px;
  font-family: var(--cormorant);
  font-size: clamp(17px, 1.7vw, 25px);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--ink-mid);
  transition: opacity 0.5s ease;
}
.plate:not(.plate--center) .plate__name { opacity: 0.5; }

/* ── Gallery arrow buttons ───────────────────────── */
/* Paired in the bottom-right so they never sit over the gallery title */
.gallery-arrows {
  position: absolute;
  bottom: clamp(28px, 6vh, 64px);
  right: max(18px, var(--pad));
  z-index: 80;
  display: flex;
  gap: clamp(10px, 1.4vw, 20px);
  pointer-events: none;
}
.gallery-arrow {
  position: relative;
  width: clamp(46px, 4vw, 58px);
  height: 46px;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--cormorant);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 300;
  line-height: 1;
  color: rgba(0,0,0,0.46);
  transition: color 0.3s var(--ease-out), transform 0.4s var(--ease);
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}
.gallery-arrow:hover {
  color: rgba(0,0,0,0.9);
}
.gallery-arrow--prev:hover { transform: translateX(-4px); }
.gallery-arrow--next:hover { transform: translateX(4px); }

/* Mobile vertical fallback */
.exhibit__mobile { display: none; }

/* ── Agency Portfolio page ───────────────────────── */
.page-agency { min-height: 100svh; }
.page-agency .project-header { padding-bottom: clamp(40px, 6vh, 64px); }

.placeholder-body {
  padding: 0 var(--pad) clamp(60px, 12vh, 120px);
  max-width: 600px;
}
.placeholder-body p {
  font-family: var(--serif);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-mid);
  margin-bottom: 1.5em;
}

/* ── 1:1 Offer page ──────────────────────────────── */
.page-one2one { min-height: 0; }
.page-one2one .project-header { text-align: center; }
.page-one2one main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.one2one-body {
  padding: 0 var(--pad) clamp(80px, 14vh, 140px);
  width: min(100%, 640px);
  margin: 0 auto;
  text-align: center;
}
.one2one-body p {
  font-family: var(--serif);
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-mid);
  margin-bottom: 2em;
}
.one2one-body .sign-off {
  font-style: italic;
  color: var(--ink-mid);
  margin-top: 2.5em;
}
.one2one-heart {
  display: inline-block;
  margin-top: 0.9em;
  font-size: clamp(15px, 1.4vw, 18px);
  color: #fff;
}
.one2one-enquire {
  display: inline-block;
  margin-top: clamp(24px, 4vh, 48px);
  font-family: var(--cormorant);
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--ink);
  border: 1px solid rgba(17,17,17,0.4);
  padding: 14px 28px;
  border-radius: 100px;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.one2one-enquire:hover {
  background: var(--ink);
  color: var(--gray);
  border-color: var(--ink);
}

.contact-form {
  margin-top: clamp(32px, 5vh, 56px);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.contact-form__row {
  margin-bottom: 18px;
}
.contact-form label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--cormorant);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(17,17,17,0.34);
  border-radius: 0;
  background: rgba(255,255,255,0.08);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  padding: 12px 10px;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-bottom-color: rgba(17,17,17,0.84);
  background: rgba(255,255,255,0.14);
}
.contact-form .one2one-enquire {
  margin-top: 12px;
}
.form-status {
  min-height: 1.4em;
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-mid);
}

/* ── Site footer ─────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vh, 32px) var(--pad);
}
.page-silhouette .site-footer {
  padding: clamp(8px, 1.5vh, 16px) var(--pad);
}
.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mid);
  transition: color 0.3s var(--ease-out);
}
.site-footer__social:hover { color: var(--ink); }
.site-footer__social svg {
  width: 24px;
  height: 24px;
  display: block;
}
/* On the landing page, keep the footer above the hover photo and legible */
.page-landing .site-footer { z-index: 10; }

/* ── Mobile ──────────────────────────────────────── */
@media (max-width: 760px) {
  /* Tight grid: keep 5 cols on mobile to match desktop */
  .tight-grid { grid-template-columns: repeat(5, 1fr); }

  /* Nav: name centred on its own line, links centred below */
  .nav {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    padding-top: clamp(16px, 3.5vh, 24px);
    padding-bottom: clamp(12px, 2.5vh, 18px);
    gap: 10px;
  }
  .nav__brand {
    /* Sized with headroom so the full name always fits on narrow phones and even
       before the web font loads (fallback serifs render wider) — was clipping. */
    font-size: clamp(12px, 3.8vw, 20px);
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: visible;
    max-width: 100%;
    flex-shrink: 0;
    line-height: 1;
    text-align: center;
  }
  .nav__links {
    font-size: clamp(9px, 2.4vw, 12px);
    gap: clamp(14px, 4vw, 22px);
    letter-spacing: 0.12em;
    flex-shrink: 0;
    flex-wrap: nowrap;
    justify-content: center;
  }
  /* Mobile: nav links always fully visible and underlined so they read as tappable */
  .nav__links a {
    opacity: 0.85;
    border-bottom: 1px solid rgba(17,17,17,0.28);
    padding-bottom: 2px;
  }
  .nav__links a:hover,
  .nav__links a[aria-current="page"] {
    opacity: 1;
    border-bottom-color: rgba(17,17,17,0.75);
  }

  /* Landing page: the photo gets the WHOLE screen and the menu floats on top of
     it. Otua asked for this (3 Aug) — the menu previously sat in its own solid
     bar that ate ~10% of the screen height and squeezed the picture. Floating it
     costs zero height, so the photo runs edge to edge. There is no backing bar:
     just a soft top-down fade so the links stay readable over the photo. */
  .page-landing {
    display: flex;
    flex-direction: column;
    height: 100svh;
    overflow: hidden;
  }
  .page-landing .nav {
    position: absolute;
    top: 0; left: 0; right: 0;
    flex: 0 0 auto;
    order: -1;
    z-index: 100;
    /* Tighter than the site-wide nav padding: the links have to finish sitting
       above her hairline, or they read over the photo and become hard to see. */
    padding-top: 12px;
    padding-bottom: 10px;
    background: linear-gradient(to bottom, rgba(142,142,142,0.72) 0%, rgba(142,142,142,0.38) 55%, rgba(142,142,142,0) 100%);
  }
  /* Photo fills all remaining height below the nav */
  .page-landing .landing-bg--cover {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 0;
    order: 0;
    width: 100%;
    min-height: 0;
    display: block;
    background-color: #8E8E8E;
  }
  .page-landing .cover-panel--left,
  .page-landing .cover-panel--right {
    display: none;
  }
  .page-landing .cover-panel--mid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Sit her slightly smaller and anchored to the bottom edge, rather than
       filling every pixel. The gap this leaves at the top is the SAME studio
       grey as her photo's own backdrop, so it reads as more room above her head
       rather than as a border — and it gives the menu clean space to sit in
       instead of landing on her hair. Portrait phones only; the desktop and
       sideways rules are in their own blocks and are untouched. */
    /* Phone-portrait uses a version of the hero with extra studio-grey canvas
       added ABOVE her head. The source photo has her hair starting 3% from the
       top, so there was never room for the menu without either covering her or
       fading her hair out. With real headroom in the file we can go back to a
       plain full-bleed cover: no shrink, no edge, no mask, and her hair stays
       completely crisp. Overrides the inline background-image on the element. */
    background-image: url(../assets/full/burgundy-2-headroom.webp) !important;
    background-size: cover;
    background-position: center top;
    -webkit-mask-image: none;
    mask-image: none;
    /* Force full-resolution compositing on mobile GPUs so the photo stays as
       crisp as the web version instead of a softened, lower-quality scale. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  /* Hide unused elements on mobile landing */
  .page-landing #bg-silhouette,
  .page-landing .landing-main,
  .page-landing .site-footer {
    display: none;
  }

  /* Gallery: unpin, flow vertically */
  .exhibit__pin {
    height: auto;
    display: block;
    padding: clamp(40px, 7vh, 80px) 0;
  }
  .track {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    transform: none !important;
    padding: 0 var(--pad);
  }
  .gallery-intro { width: 100%; padding: 0; margin-bottom: 36px; }
  .gallery-hint { display: none; }
  /* On mobile all plates full opacity/scale — no cinematic dimming */
  .plate {
    margin-bottom: 32px;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .plate__frame {
    height: auto; width: 100%; aspect-ratio: 4 / 5;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .gallery-arrows { display: none; }
  .exhibit__mobile { display: none; }
}

@media (max-width: 480px) {
  .work-item { padding: clamp(10px, 2vh, 20px) 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  /* In reduced-motion mode, all plates at full opacity — no dimming effect */
  .plate {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .plate__frame {
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Exception: the homepage opening keeps its gentle opacity cross-fades even in
     reduced-motion mode — opacity only, no movement, so it stays comfortable.
     Without this the global transition-kill above snaps the photo in instantly. */
  .intro,
  .intro__name {
    transition-duration: 1.1s !important;
  }
  .intro__name .intro__char.is-in {
    transition-duration: 0.42s !important;
  }
}

/* Landscape mobile / horizontal view on mobile: match web version with three-panel seamless blend */
@media (orientation: landscape) and (max-height: 550px), (orientation: landscape) and (max-width: 950px) {
  .page-landing {
    display: block !important;
    height: 100svh !important;
    overflow: hidden !important;
  }
  .page-landing .nav {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: clamp(36px, 8vh, 52px) !important;
    padding: 0 clamp(16px, 4vw, 48px) !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    z-index: 100 !important;
  }
  .page-landing .nav__brand {
    font-size: clamp(11px, 2vw, 18px) !important;
    letter-spacing: 0.12em !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
  .page-landing .nav__links {
    font-size: clamp(9px, 1.3vw, 13px) !important;
    gap: clamp(8px, 1.8vw, 20px) !important;
    letter-spacing: 0.10em !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
  }
  .page-landing .nav__links a {
    border-bottom: none !important;
  }
  .page-landing .landing-bg--cover {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    background: #8E8E8E !important;
    z-index: 0 !important;
    overflow: hidden !important;
  }
  .page-landing .cover-panel--left {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 55% !important;
    z-index: 1 !important;
    background-size: cover !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 100%) !important;
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 100%) !important;
  }
  .page-landing .cover-panel--right {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 55% !important;
    z-index: 1 !important;
    background-size: cover !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    -webkit-mask-image: linear-gradient(to left, transparent 0%, black 12%, black 100%) !important;
    mask-image: linear-gradient(to left, transparent 0%, black 12%, black 100%) !important;
  }
  .page-landing .cover-panel--mid {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) translateZ(0) !important;
    z-index: 2 !important;
    height: 100% !important;
    width: min(clamp(260px, 42vw, 550px), 82vh) !important;
    margin: 0 !important;
    background-image: url(../assets/full/burgundy-2.webp) !important;
    background-size: auto 100% !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 32%, black 68%, transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0%, black 32%, black 68%, transparent 100%) !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/* LOCKED: this is the fix for the seam Otua reported on her sideways phone across
   3 days and ~20 attempts (1-4 Aug). The side panels are switched off ON PURPOSE.
   If she asks again for the centre picture to "blend into the pictures on the
   side", she is describing the OLD broken layout in the only words she has for it,
   not asking for the panels back. Do not remove this block to bring them back:
   that is the fault, not the fix. Ask her what she is still seeing instead.

   Sideways phones: ONE wide seamless studio image, no panels, no joins.
   The three-panel blend always showed a faint edge on short wide screens because
   the side photos' grey never quite matches the centre photo's grey. The wide
   file is the centre photo on a studio sweep baked from the photo's own tones,
   so there is nothing to seam with. Height-fit only ever trims the grey wings.

   Width goes to 1000px, not 950px: the old three-panel rule above fires on ANY
   short landscape screen, so a 956px-wide phone (iPhone 15/16 Pro Max sideways)
   fell through this rule and still got the seam. 1000px covers every phone in
   landscape while staying clear of desktops, which are locked as-is. */
@media (orientation: landscape) and (max-height: 550px) and (max-width: 1000px) {
  .page-landing .cover-panel--left,
  .page-landing .cover-panel--right {
    display: none !important;
  }
  .page-landing .cover-panel--mid {
    inset: 0 !important;
    left: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    width: 100% !important;
    background-image: url(../assets/full/burgundy-2-wide.webp) !important;
    background-size: auto 100% !important;
    background-position: center center !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}