/* ==========================================================================
   PRELOADER
   ========================================================================== */

.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--void);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--gutter);
  transition: opacity 600ms var(--ease-out);
}

.loader[data-done] {
  opacity: 0;
  pointer-events: none;
}

.loader__mark {
  place-self: center;
  text-align: center;
}

.loader__name {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1rem + 8vw, 8rem);
  line-height: 0.85;
  text-transform: uppercase;
  color: var(--bone);
  display: flex;
  gap: 0.02em;
  overflow: hidden;
}

.loader__name span {
  display: block;
  transform: translateY(105%);
  animation: loader-in 900ms var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 45ms);
}

@keyframes loader-in {
  to {
    transform: none;
  }
}

.loader__sub {
  color: var(--ash);
  margin-top: 1.25rem;
  opacity: 0;
  animation: fade-in 800ms var(--ease-out) 500ms forwards;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

.loader__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--ash);
}

.loader__count {
  font-family: var(--font-display);
  font-size: clamp(3rem, 1rem + 9vw, 9rem);
  line-height: 0.8;
  color: var(--flare);
  font-variant-numeric: tabular-nums;
}

.loader__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--flare);
  width: 0%;
  transition: width 200ms linear;
}

/* ==========================================================================
   NAV
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 0.6rem + 1vw, 1.75rem) var(--gutter);
  mix-blend-mode: difference;
  color: #fff;
  transition: translate 500ms var(--ease-out);
}

/* Hides on scroll-down, returns on scroll-up. */
.nav[data-hidden] {
  translate: 0 -110%;
}

.nav__logo {
  font-family: var(--font-display);
  font-size: var(--step-1);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
}

.nav__logo em {
  color: var(--flare);
  font-style: normal;
}

.nav__links {
  display: flex;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
}

.nav__links a {
  position: relative;
  padding-block: 0.25rem;
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--rule);
  background: currentColor;
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--dur) var(--ease-out);
}

.nav__links a[aria-current]::after {
  scale: 1 1;
}

@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover::after {
    scale: 1 1;
  }
}

.nav__cta {
  border: var(--rule) solid currentColor;
  padding: 0.5rem 1.1rem;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}

@media (max-width: 62rem) {
  .nav__links {
    display: none;
  }
}

/* Progress rail — right edge, marks the journey */
.rail {
  position: fixed;
  right: calc(var(--gutter) * 0.5);
  top: 50%;
  translate: 0 -50%;
  z-index: var(--z-rail);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: flex-end;
}

.rail button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ash);
  transition: color var(--dur) var(--ease-out);
}

.rail button i {
  display: block;
  width: 1.4rem;
  height: var(--rule);
  background: currentColor;
  transition:
    width var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out);
}

.rail button span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  translate: 0.4rem 0;
  transition:
    opacity var(--dur) var(--ease-out),
    translate var(--dur) var(--ease-out);
}

.rail button[aria-current] {
  color: var(--flare);
}

.rail button[aria-current] i {
  width: 2.6rem;
}

@media (hover: hover) and (pointer: fine) {
  .rail button:hover {
    color: var(--bone);
  }
  .rail button:hover span {
    opacity: 1;
    translate: 0 0;
  }
}

@media (max-width: 62rem) {
  .rail {
    display: none;
  }
}

/* ==========================================================================
   HERO — full-bleed photo + 3D extruded kinetic type
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: clip;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keeps the subject's face in the clear upper half, above the wordmark. */
  object-position: center 18%;
  filter: grayscale(1) contrast(1.15) brightness(0.66);
  /* Overscan only — hero.js owns this transform for the parallax, so the
     scale must live here and nowhere else or the two compound. */
  transform: scale(1.08);
  will-change: transform;
}

/* Vignette so the type always holds contrast. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 20%, transparent 20%, rgba(5, 5, 6, 0.72) 100%),
    linear-gradient(to top, var(--ink) 2%, transparent 45%);
}

.hero__inner {
  padding: var(--gutter);
  padding-bottom: clamp(2rem, 1rem + 4vw, 5rem);
  width: 100%;
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* --- The 3D type block --- */
.kinetic {
  perspective: 1200px;
  perspective-origin: 50% 40%;
}

.kinetic__line {
  display: flex;
  /* Every line is flush on both sides; hero.js picks one font size for the
     stack and the leftover space becomes tracking. */
  justify-content: space-between;
  flex-wrap: nowrap;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 600ms var(--ease-out);
  will-change: transform;
  /* The typographic properties live here, not on the characters, so that
     hero.js can read them off this element and measure the same font the
     browser will actually render. Font size is a starting point only — it is
     replaced by the measured fit-to-width value. */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--mega);
  line-height: 0.78;
  text-transform: uppercase;
  letter-spacing: -0.045em;
}

.kinetic__char {
  position: relative;
  display: inline-block;
  transform-style: preserve-3d;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: var(--bone);
  /* Idle float + lift on proximity, both composited. */
  transform: translate3d(0, var(--char-y, 0px), var(--char-z, 0px));
  transition: transform 450ms var(--ease-out);
  will-change: transform;
}

.kinetic__char[data-space] {
  width: 0.28em;
}

/* Extruded depth: stacked layers pushed back in Z, generated by hero.js */
.kinetic__depth {
  position: absolute;
  inset: 0;
  color: var(--flare-deep);
  z-index: -1;
  pointer-events: none;
}

.kinetic__char.is-lit {
  color: var(--flare);
}

/* Idle bob — staggered per character */
@media (prefers-reduced-motion: no-preference) {
  .kinetic__char[data-bob] {
    animation: bob 3.6s var(--ease-in-out) infinite alternate;
    animation-delay: calc(var(--i) * -220ms);
  }
}

@keyframes bob {
  from {
    transform: translate3d(0, 0.035em, 0);
  }
  to {
    transform: translate3d(0, -0.035em, 0);
  }
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 0.5rem + 2vw, 3rem);
  justify-content: space-between;
  align-items: end;
  color: var(--bone-dim);
  border-top: var(--rule) solid rgba(236, 231, 223, 0.18);
  padding-top: 1.1rem;
}

.hero__role {
  max-width: 26ch;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.25;
  color: var(--bone);
}

.hero__role em {
  color: var(--flare);
  font-style: italic;
}

.hero__scroll {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ash);
}

.hero__scroll i {
  display: block;
  width: 2.5rem;
  height: var(--rule);
  background: linear-gradient(to right, var(--flare) 50%, rgba(118, 113, 106, 0.4) 50%);
  background-size: 200% 100%;
  animation: sweep 2.2s var(--ease-in-out) infinite;
}

@keyframes sweep {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

/* ==========================================================================
   CREDITS TICKER — velocity-reactive marquee
   ========================================================================== */

.ticker {
  border-block: var(--rule) solid var(--ink-line);
  padding-block: clamp(0.9rem, 0.6rem + 1vw, 1.6rem);
  overflow: clip;
  background: var(--ink);
}

.ticker__track {
  display: flex;
  gap: 0;
  width: max-content;
  will-change: transform;
}

.ticker__item {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-inline: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2.4vw, 3.25rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--bone);
  white-space: nowrap;
}

.ticker__item::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  background: var(--flare);
  border-radius: 50%;
  flex: none;
}

.ticker__item:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1px var(--ash);
}

/* ==========================================================================
   DISCIPLINES — ruled index of what the studio shoots
   ========================================================================== */

.manifesto {
  padding-top: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  padding-bottom: clamp(3rem, 2.2rem + 3.5vw, 5.5rem);
}

.manifesto .eyebrow {
  margin-bottom: clamp(1rem, 0.7rem + 1vw, 1.75rem);
}

.manifesto__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* On wide screens the disciplines read as a ruled index rather than a
   grid of cards. */
@media (min-width: 62rem) {
  .manifesto__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .manifesto__cell {
    display: grid;
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
    align-items: baseline;
    border-top: var(--rule) solid var(--ink-line);
    padding-block: clamp(1rem, 0.6rem + 1vw, 1.6rem);
  }

  .manifesto__cell:last-child {
    border-bottom: var(--rule) solid var(--ink-line);
  }
}

.manifesto__cell h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.manifesto__cell p {
  color: var(--ash);
  font-size: var(--step-0);
  max-width: 48ch;
}

@media (min-width: 62rem) {
  .manifesto__cell h3 {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   SERVICES — plain-language scope for people and search engines
   ========================================================================== */

.services {
  background: var(--bone);
  color: var(--ink);
  padding-top: clamp(3.5rem, 2.4rem + 4vw, 6.5rem);
  padding-bottom: clamp(3.5rem, 2.4rem + 4vw, 6.5rem);
}

.services .eyebrow {
  color: #8a8377;
  margin-bottom: clamp(1.25rem, 0.8rem + 1.5vw, 2.25rem);
}

.services__head {
  display: grid;
  gap: 1.25rem;
  align-items: end;
  margin-bottom: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
}

@media (min-width: 52rem) {
  .services__head {
    grid-template-columns: minmax(0, 1.25fr) minmax(15rem, 0.5fr);
    gap: clamp(2rem, 1.2rem + 4vw, 6rem);
  }
}

.services__head h2 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 0.86;
  text-transform: uppercase;
}

.services__head h2 em {
  color: var(--flare);
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: none;
}

.services__head p {
  color: #5f5a52;
  font-size: var(--step-1);
  line-height: 1.45;
  max-width: 31ch;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  border-top: var(--rule) solid rgba(10, 10, 11, 0.25);
}

.services__item {
  padding: 1.1rem 1.25rem 1.25rem 0;
  border-bottom: var(--rule) solid rgba(10, 10, 11, 0.25);
}

@media (min-width: 52rem) {
  .services__item {
    border-right: var(--rule) solid rgba(10, 10, 11, 0.25);
    padding-right: clamp(1.25rem, 1rem + 2vw, 3rem);
  }

  .services__item + .services__item {
    padding-left: clamp(1.25rem, 1rem + 2vw, 3rem);
  }

  .services__item:last-child {
    border-right: 0;
  }
}

.services__item h3 {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 700;
  text-transform: uppercase;
}

.services__item p {
  color: #5f5a52;
  font-size: var(--step--1);
  line-height: 1.5;
  margin-top: 0.45rem;
  max-width: 31ch;
}

.services__link {
  display: inline-flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  color: var(--ink);
  border-bottom: var(--rule) solid currentColor;
  padding-bottom: 0.2rem;
}

.services__link span {
  color: var(--flare);
}

@media (hover: hover) and (pointer: fine) {
.services__link:hover {
    color: var(--flare);
  }
}

/* ==========================================================================
   404 — useful exit when a URL was never part of the previous archive
   ========================================================================== */

.not-found {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--bone);
}

.not-found__main {
  width: min(100%, 58rem);
  padding: var(--gutter);
}

.not-found__code {
  color: var(--flare);
  margin-bottom: 1rem;
}

.not-found h1 {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 18vw, 12rem);
  line-height: 0.78;
  text-transform: uppercase;
}

.not-found__copy {
  color: var(--ash);
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.4;
  margin-top: 1.5rem;
  max-width: 35ch;
}

.not-found__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 2rem;
}

.not-found__links a {
  border-bottom: var(--rule) solid currentColor;
  padding-bottom: 0.2rem;
}

.not-found__links a:first-child {
  color: var(--flare);
}

/* ==========================================================================
   SCROLL WORLD — scroll drives a camera flying through photographs in 3D
   ========================================================================== */

.world {
  position: relative;
  /* Tall track: scroll distance == flight length. Set inline by world.js. */
  height: var(--world-track, 600svh);
  background: var(--void);
}

.world__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  perspective: var(--world-perspective, 1500px);
  perspective-origin: 50% 50%;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(30, 30, 36, 0.7) 0%, rgba(5, 5, 6, 0) 62%),
    var(--void);
}

.world__space {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.world__plate {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.world__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Plates are sized to each photo's true aspect ratio, so `cover` never
     actually crops — it only guards against a rounding gap. */
}

.world__plate::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 6rem rgba(5, 5, 6, 0.45);
  pointer-events: none;
}

/* Caption that rides with the current plate */
.world__caption {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(2rem, 1rem + 4vw, 5rem);
  z-index: 5;
  max-width: min(28rem, 70vw);
  pointer-events: none;
}

.world__caption .idx {
  color: var(--flare);
  margin-bottom: 0.5rem;
  display: block;
}

.world__caption h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 3.6vw, 5rem);
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--bone);
}

.world__caption p {
  color: var(--bone-dim);
  margin-top: 0.6rem;
  max-width: 30ch;
}

/* Fixed HUD frame — reads like a viewfinder */
.world__hud {
  position: absolute;
  inset: clamp(0.9rem, 0.6rem + 1vw, 1.75rem);
  z-index: 6;
  pointer-events: none;
  border: var(--rule) solid rgba(236, 231, 223, 0.14);
}

.world__hud::before,
.world__hud::after {
  content: '';
  position: absolute;
  background: var(--flare);
}

.world__hud::before {
  top: -1px;
  left: -1px;
  width: 2.2rem;
  height: 2px;
}

.world__hud::after {
  bottom: -1px;
  right: -1px;
  width: 2.2rem;
  height: 2px;
}

.world__progress {
  position: absolute;
  right: clamp(0.9rem, 0.6rem + 1vw, 1.75rem);
  top: 50%;
  translate: 0 -50%;
  z-index: 6;
  width: 2px;
  height: 30vh;
  background: rgba(236, 231, 223, 0.14);
  pointer-events: none;
}

.world__progress i {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--p, 0%);
  background: var(--flare);
}

/* ==========================================================================
   CATALOG — scroll-reveal masonry + filters + lightbox
   ========================================================================== */

.catalog {
  background: var(--bone);
  color: var(--ink);
  padding-top: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  padding-bottom: clamp(3.5rem, 2.4rem + 4vw, 6.5rem);
  overflow-anchor: none;
}

.catalog .eyebrow {
  color: #8a8377;
  margin-bottom: clamp(1rem, 0.7rem + 1vw, 1.75rem);
}

.catalog__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.catalog__title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  text-transform: uppercase;
  line-height: 0.85;
  color: var(--ink);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filters button {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border: var(--rule) solid rgba(10, 10, 11, 0.22);
  border-radius: 100px;
  color: #5f5a52;
  transition:
    background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.filters button[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}

@media (hover: hover) and (pointer: fine) {
  .filters button:hover:not([aria-pressed='true']) {
    border-color: var(--ink);
    color: var(--ink);
  }
}

.filters .count {
  color: var(--flare);
  margin-left: 0.4rem;
}

/* Masonry via CSS columns — preserves each photo's true aspect ratio. */
.masonry {
  column-count: 4;
  column-gap: clamp(0.5rem, 0.3rem + 0.8vw, 1.1rem);
  /* Load-more inserts nodes above the button. Native overflow anchoring
     would jump scrollY; the JS scroller then yanks back and feels stuck. */
  overflow-anchor: none;
}

@media (max-width: 75rem) {
  .masonry {
    column-count: 3;
  }
}

/* Two columns is the floor. A single column is more generous per photograph
   but turns 48 frames into a 25,000px scroll on a phone; the grid stays
   scannable and any frame opens full-size in the lightbox on tap. */
@media (max-width: 48rem) {
  .masonry {
    column-count: 2;
  }
}

.shot {
  position: relative;
  break-inside: avoid;
  margin-bottom: clamp(0.5rem, 0.3rem + 0.8vw, 1.1rem);
  overflow: hidden;
  background: #ddd7cd;
  cursor: pointer;
  /* Reveal: rise + unmask. */
  opacity: 0;
  transform: translate3d(0, 3rem, 0);
  clip-path: inset(12% 0 0 0);
  transition:
    opacity 800ms var(--ease-out),
    transform 1000ms var(--ease-out),
    clip-path 1000ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.shot.is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

.shot[hidden] {
  display: none;
}

.shot img {
  width: 100%;
  height: auto;
  transition:
    scale 500ms var(--ease-out),
    filter 240ms ease;
}

/* Bottom veil — only there so the title stays readable. */
.shot::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(5, 5, 6, 0.72) 0%, rgba(5, 5, 6, 0) 46%);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}

/* Four viewfinder corners. */
.shot__finder {
  position: absolute;
  inset: 0.7rem;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(var(--flare), var(--flare)) top left / 1.15rem 1.5px no-repeat,
    linear-gradient(var(--flare), var(--flare)) top left / 1.5px 1.15rem no-repeat,
    linear-gradient(var(--flare), var(--flare)) top right / 1.15rem 1.5px no-repeat,
    linear-gradient(var(--flare), var(--flare)) top right / 1.5px 1.15rem no-repeat,
    linear-gradient(var(--flare), var(--flare)) bottom left / 1.15rem 1.5px no-repeat,
    linear-gradient(var(--flare), var(--flare)) bottom left / 1.5px 1.15rem no-repeat,
    linear-gradient(var(--flare), var(--flare)) bottom right / 1.15rem 1.5px no-repeat,
    linear-gradient(var(--flare), var(--flare)) bottom right / 1.5px 1.15rem no-repeat;
  transition: opacity 180ms var(--ease-out);
}

.shot__meta {
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 0.9rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  pointer-events: none;
}

.shot__meta::before {
  content: '';
  width: 1.6rem;
  height: 2px;
  background: var(--flare);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--ease-out);
}

.shot__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 1.1vw, 1.7rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0;
  transform: translateY(0.45rem);
  transition:
    opacity 200ms var(--ease-out),
    transform 200ms var(--ease-out);
}

.shot:focus-visible {
  outline: none;
}

.shot:focus-visible::after,
.shot:focus-visible .shot__finder {
  opacity: 1;
}

.shot:focus-visible .shot__meta::before {
  transform: scaleX(1);
}

.shot:focus-visible .shot__name {
  opacity: 1;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .shot {
    cursor: none;
  }
  .shot:hover img {
    scale: 1.045;
  }
  .shot:hover::after,
  .shot:hover .shot__finder {
    opacity: 1;
  }
  .shot:hover .shot__meta::before {
    transform: scaleX(1);
  }
  .shot:hover .shot__name {
    opacity: 1;
    transform: none;
  }
  .shot:active img {
    scale: 1.02;
    transition-duration: 120ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shot img,
  .shot__finder,
  .shot__name,
  .shot__meta::before,
  .shot::after {
    transition: opacity 180ms ease;
  }
  .shot__name,
  .shot__meta::before {
    transform: none;
  }
}

.catalog__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  background: rgba(5, 5, 6, 0.96);
  backdrop-filter: blur(14px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  padding: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease-out);
}

.lightbox[data-open] {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: var(--bone-dim);
}

/* The figure is the `1fr` row of the lightbox grid. A percentage max-height
   on a grid item does not reliably resolve against that track, so the image
   was laying out at its natural pixel height and overflowing the screen.
   Positioning it against the figure gives it a definite box to fit inside,
   and `contain` letterboxes it without cropping. */
.lightbox__figure {
  position: relative;
  min-height: 0;
}

.lightbox__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  scale: 0.97;
  transition:
    opacity 400ms var(--ease-out),
    scale 500ms var(--ease-out);
}

.lightbox__figure img.is-ready {
  opacity: 1;
  scale: 1;
}

.lightbox__nav {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.lightbox__nav button,
.lightbox__close {
  border: var(--rule) solid rgba(236, 231, 223, 0.3);
  border-radius: 100px;
  padding: 0.5rem 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  transition:
    background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .lightbox__nav button:hover,
  .lightbox__close:hover {
    background: var(--flare);
    border-color: var(--flare);
  }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */

.about {
  padding-top: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  padding-bottom: clamp(3rem, 2.2rem + 3.5vw, 5.5rem);
}

.about .eyebrow {
  margin-bottom: clamp(1rem, 0.7rem + 1vw, 1.75rem);
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 1.2rem + 2vw, 3.25rem);
  align-items: start;
}

/* The block sits high on the page now, so the portrait is held to a measure
   that keeps the whole introduction inside one screen. */
@media (min-width: 62rem) {
  .about__grid {
    grid-template-columns: minmax(0, 26rem) minmax(0, 40rem);
    justify-content: space-between;
    align-items: center;
    gap: clamp(2.25rem, 1.6rem + 3vw, 5rem);
  }
}

.about__portrait {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--ink-soft);
}


.about__portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(236, 231, 223, 0.1);
}

.about__portrait img {
  width: 100%;
  height: 106%;
  object-fit: cover;
  object-position: center 10%;
  filter: grayscale(1) contrast(1.06);
  will-change: transform;
}

.about__portrait figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: var(--flare);
  color: var(--bone);
  padding: 0.55rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about__copy h2 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  text-transform: uppercase;
  line-height: 0.85;
  margin-bottom: 1.5rem;
}

.about__copy p {
  color: var(--bone-dim);
  max-width: 42ch;
  margin-bottom: 1rem;
  font-size: var(--step-1);
  line-height: 1.5;
}

.about__copy p strong {
  color: var(--bone);
  font-weight: 600;
}

.about__list {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.35rem;
  border-top: var(--rule) solid var(--ink-line);
  padding-top: 1.1rem;
}

.about__list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ash);
  border-bottom: var(--rule) solid var(--ink-line);
  padding-bottom: 0.75rem;
}

.about__list b {
  color: var(--bone);
  font-weight: 500;
}

/* ==========================================================================
   BOOKING
   ========================================================================== */

.book {
  background: var(--flare);
  color: var(--void);
  padding-block: clamp(3.25rem, 2.4rem + 3.5vw, 5.5rem);
}

.book .eyebrow {
  color: rgba(5, 5, 6, 0.6);
  margin-bottom: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
}

.book .eyebrow .dot {
  background: var(--void);
}

.book__title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  text-transform: uppercase;
  line-height: 0.82;
  text-wrap: balance;
}

.book__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.75rem, 1.2rem + 2.5vw, 4rem);
  align-items: start;
}

@media (max-width: 52rem) {
  .book__grid {
    grid-template-columns: 1fr;
  }
}

.book__col {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

/* How it works — three numbered steps */
.steps {
  display: grid;
  counter-reset: step;
}

.steps li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.7rem;
  border-top: var(--rule) solid rgba(5, 5, 6, 0.22);
  padding-block: 0.75rem;
  counter-increment: step;
}

.steps li::before {
  content: '0' counter(step);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.15;
}

.steps h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--step-0);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.steps p {
  color: rgba(5, 5, 6, 0.7);
  max-width: 36ch;
  font-size: var(--step--1);
  line-height: 1.45;
  margin-top: 0.2rem;
}

/* Direct-contact — one compact row, not three stacked boxes. */
.book__direct {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.15rem;
  padding-top: 0.15rem;
}

.book__direct a {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: var(--rule) solid currentColor;
  padding-bottom: 0.08rem;
  transition: opacity var(--dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .book__direct a:hover {
    opacity: 0.55;
  }
}

/* ---- Form ---- */
.form {
  display: grid;
  gap: 0.85rem;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1.15rem;
}

@media (max-width: 28rem) {
  .form__row {
    grid-template-columns: 1fr;
  }
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
  margin-top: 0.25rem;
}

.field {
  display: grid;
  gap: 0.28rem;
}

.field label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(5, 5, 6, 0.62);
}

.field label em {
  font-style: normal;
  opacity: 0.55;
  letter-spacing: 0.08em;
}

.field input,
.field textarea,
.field select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background-color: rgba(5, 5, 6, 0.08);
  border: 0;
  border-bottom: 2px solid rgba(5, 5, 6, 0.4);
  box-shadow: none;
  padding: 0.65rem 0.75rem;
  font-size: var(--step-0);
  color: var(--void);
  border-radius: 0;
  transition:
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--void) 50%),
    linear-gradient(135deg, var(--void) 50%, transparent 50%);
  background-position:
    calc(100% - 1.05rem) 50%,
    calc(100% - 0.7rem) 50%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.field textarea {
  resize: vertical;
  min-height: 5.25rem;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  background-color: rgba(5, 5, 6, 0.1);
  border-color: var(--void);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(5, 5, 6, 0.38);
}

.field[data-invalid] input,
.field[data-invalid] textarea,
.field[data-invalid] select {
  border-color: #7a0b0b;
}

.field__error {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a0b0b;
}

.field__error:empty {
  display: none;
}

/* Honeypot — hidden from humans, tempting to bots. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.btn {
  justify-self: start;
  border: 2px solid var(--void);
  background: var(--void);
  color: var(--flare);
  padding: 0.85rem 1.8rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 100px;
  transition:
    background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    scale var(--dur-fast) var(--ease-out);
}

.btn:active {
  scale: 0.97;
}

.btn[disabled] {
  opacity: 0.55;
  cursor: progress;
}

@media (hover: hover) and (pointer: fine) {
  .btn:not([disabled]):hover {
    background: transparent;
    color: var(--void);
  }
}

.btn--ghost {
  border-color: currentColor;
  background: transparent;
  color: var(--bone);
}

@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover {
    background: var(--flare);
    border-color: var(--flare);
    color: var(--bone);
  }
}

.form__status {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 1.2rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  background: var(--void);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) 2rem;
}

.footer__mega {
  font-family: var(--font-display);
  font-size: var(--mega);
  line-height: 0.8;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  color: transparent;
  /* A hairline in the rule colour vanishes at this size — the stroke has to
     be brighter and heavier than a border to read as a ghost wordmark. */
  -webkit-text-stroke: 2px rgba(236, 231, 223, 0.26);
  user-select: none;
  /* Measured to the shell's content box by fitLine(). */
  white-space: nowrap;
  width: 100%;
  overflow: visible;
  line-height: 0.86;
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  border-top: var(--rule) solid var(--ink-line);
  margin-top: clamp(2rem, 1.5rem + 2vw, 4rem);
  padding-top: 1.5rem;
  color: var(--ash);
}

.footer__social {
  display: flex;
  gap: 1.25rem;
}

@media (hover: hover) and (pointer: fine) {
  .footer__social a:hover {
    color: var(--flare);
  }
}

/* ==========================================================================
   CURSOR — custom follower (pointer: fine only)
   ========================================================================== */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  width: 2.5rem;
  height: 2.5rem;
  border: var(--rule) solid var(--flare);
  border-radius: 50%;
  pointer-events: none;
  translate: -50% -50%;
  will-change: transform;
  transition: opacity 300ms var(--ease-out);
  opacity: 0;
}

.cursor[data-visible] {
  opacity: 1;
}

.cursor[data-park] {
  opacity: 0;
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}