/* ============================================================
   CAITLYN ANGEL — snow4ngel.com
   Shared design system: tokens, chrome, nav, overlays, footer.
   Page-specific blocks live at the bottom, clearly sectioned.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --void:  #050506;
  --ink:   #0b0c0e;
  --coal:  #131417;
  --smoke: #26282d;
  --ash:   #7f7d78;
  --bone:  #efece7;
  --frost: #b9cbd6;

  --serif: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --slow:  cubic-bezier(0.16, 1, 0.3, 1);

  --gut:   clamp(20px, 5vw, 68px);   /* page gutter */
  --navh:  clamp(64px, 9vh, 88px);

  --z-grain: 6;
  --z-ash:   5;
  --z-menu:  50;
  /* above the menu: .nav is a stacking context, so the burger inside it
     cannot rise over the overlay on its own — the whole bar has to */
  --z-nav:   60;
  --z-veil:  90;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--void);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--frost); color: var(--void); }

/* utility ------------------------------------------------- */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0;
}
.rule {
  height: 1px;
  background: linear-gradient(90deg, rgba(239,236,231,.24), rgba(239,236,231,0));
  border: 0;
  margin: 0;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gut); top: 10px; z-index: 100;
  transform: translateY(-200%);
  background: var(--bone); color: var(--void);
  padding: 10px 18px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
}
.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 1px solid var(--frost);
  outline-offset: 4px;
}

/* ============================================================
   ATMOSPHERE — grain, vignette, ash canvas, page veil
   ============================================================ */
.grain,
.vignette {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: var(--z-grain);
}
.grain {
  inset: -100%;
  width: 300%; height: 300%;
  opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation: grainshift 850ms steps(1) infinite;
}
@keyframes grainshift {
  0%   { transform: translate3d(0,0,0); }
  20%  { transform: translate3d(-6%,3%,0); }
  40%  { transform: translate3d(4%,-5%,0); }
  60%  { transform: translate3d(-3%,-2%,0); }
  80%  { transform: translate3d(5%,4%,0); }
  100% { transform: translate3d(0,0,0); }
}
.vignette {
  inset: 0;
  background:
    radial-gradient(120% 85% at 50% 42%, transparent 38%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 22%, transparent 74%, rgba(0,0,0,.6) 100%);
}

#ash-canvas {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: var(--z-ash);
}

/* page-transition veil */
.veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-veil);
  background: var(--void);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.veil.is-out {                  /* covering the screen */
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity .42s var(--ease), visibility 0s;
}

/* first-load intro */
.loader {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  background: var(--void);
  transition: opacity .8s var(--ease), visibility 0s linear .8s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__mark {
  font-family: var(--serif);
  font-size: clamp(20px, 4vw, 34px);
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--bone);
  opacity: .9;
}
.loader__bar {
  position: absolute;
  left: 50%; bottom: 26%;
  transform: translateX(-50%);
  width: min(200px, 42vw);
  height: 1px;
  background: rgba(239,236,231,.16);
  overflow: hidden;
}
.loader__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--frost);
  transform-origin: left;
  transform: scaleX(0);
  animation: load 1.1s var(--ease) forwards;
}
@keyframes load { to { transform: scaleX(1); } }

/* ============================================================
   CUSTOM CURSOR (pointer-fine only)
   ============================================================ */
.cursor,
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 80;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s;
  will-change: transform;
}
.cursor {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(239,236,231,.5);
  transition: opacity .3s, width .3s var(--ease), height .3s var(--ease),
              margin .3s var(--ease), background-color .3s, border-color .3s;
}
.cursor-dot {
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--bone);
}
body.cursor-ready .cursor,
body.cursor-ready .cursor-dot { opacity: 1; }
.cursor.is-hover {
  width: 62px; height: 62px;
  margin: -31px 0 0 -31px;
  background: rgba(185,203,214,.12);
  border-color: rgba(185,203,214,.7);
}
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-dot { display: none; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--navh);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gut);
  transition: transform .45s var(--ease);
}
.nav.is-hidden { transform: translateY(-100%); }

/* Frosted glass bar (vassqo.com's treatment), but held back until you
   scroll. At the top of the home page the panel's blur and darkening land
   squarely on Caitlyn's face, so up there the nav is type only — nothing
   sits over the photo but the words themselves. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5, 5, 6, 0.72), rgba(5, 5, 6, 0.26));
  border-bottom: 1px solid rgba(239, 236, 231, 0.08);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.nav.is-solid::before {
  opacity: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* keep the bar legible while it is bare type over a photograph */
.nav__mark,
.nav__links,
.burger { position: relative; z-index: 1; }
.nav__mark,
.nav__link { text-shadow: 0 1px 16px rgba(0, 0, 0, .55); }
.nav.is-solid .nav__mark,
.nav.is-solid .nav__link { text-shadow: none; }

.nav__mark {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 46px);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__link {
  position: relative;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 6px 0;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link--ig span { display: inline-block; transition: transform .4s var(--ease); }
.nav__link--ig:hover span { transform: translate(3px, -3px); }

/* burger */
.burger {
  display: none;
  width: 40px; height: 40px;
  margin-right: -8px;
  position: relative;
  z-index: calc(var(--z-menu) + 1);
}
.burger i {
  position: absolute;
  left: 8px;
  width: 24px; height: 1px;
  background: var(--bone);
  transition: transform .45s var(--ease), opacity .25s;
}
.burger i:nth-child(1) { top: 16px; }
.burger i:nth-child(2) { top: 23px; }
.burger.is-open i:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger.is-open i:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: rgba(5,5,6,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gut);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .5s var(--ease), visibility 0s; }
.menu ol { list-style: none; margin: 0; padding: 0; }
.menu li { overflow: hidden; }
.menu a {
  display: block;
  font-family: var(--serif);
  font-size: clamp(38px, 12vw, 72px);
  line-height: 1.14;
  letter-spacing: .01em;
  padding: 4px 0;
  transform: translateY(110%);
  transition: transform .7s var(--ease);
}
.menu.is-open a { transform: translateY(0); }
.menu.is-open li:nth-child(1) a { transition-delay: .06s; }
.menu.is-open li:nth-child(2) a { transition-delay: .12s; }
.menu.is-open li:nth-child(3) a { transition-delay: .18s; }
.menu.is-open li:nth-child(4) a { transition-delay: .24s; }
.menu__foot {
  margin-top: clamp(36px, 7vh, 64px);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ash);
}

@media (max-width: 820px) {
  .nav__links { display: none; }
  .burger { display: block; }
}

/* ============================================================
   SCROLL-REVEAL primitive
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .1s; }
.reveal[data-d="2"] { transition-delay: .2s; }
.reveal[data-d="3"] { transition-delay: .3s; }
.reveal[data-d="4"] { transition-delay: .4s; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  position: relative;
  z-index: 10;
  padding: clamp(56px, 10vh, 96px) var(--gut) clamp(28px, 5vh, 42px);
  border-top: 1px solid rgba(239,236,231,.09);
}
.foot__top {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  justify-content: space-between;
  align-items: flex-end;
}
.foot__name {
  font-family: var(--serif);
  font-size: clamp(34px, 8vw, 78px);
  line-height: .95;
  margin: 0;
  letter-spacing: .01em;
}
.foot__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.foot__links a { color: var(--ash); transition: color .3s; }
.foot__links a:hover { color: var(--bone); }
.foot__bar {
  margin-top: clamp(36px, 7vh, 60px);
  padding-top: 20px;
  border-top: 1px solid rgba(239,236,231,.08);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--smoke);
}
.foot__bar span { color: var(--ash); }

/* ============================================================
   HOME — hero with split name
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  filter: grayscale(.5) contrast(1.08) brightness(.94);
  transform: scale(1.08);
  will-change: transform;
}
/* Falling petals — two depth layers straddling the type, clipped to the
   hero by its own overflow:hidden. Nothing here escapes the first screen. */
.hero__petals {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero__petals--back  { z-index: 1; }   /* behind the name */
.hero__petals--front { z-index: 3; }   /* drifting over it */

/* the near layer sits off the focal plane — a touch of blur sells the
   depth. Skipped on touch devices, where it is not worth the fill rate. */
@media (hover: hover) and (pointer: fine) {
  .hero__petals--front { filter: blur(1.6px); }
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 50% 45%, transparent 30%, rgba(5,5,6,.5) 100%),
    linear-gradient(180deg, rgba(5,5,6,.55) 0%, transparent 30%, rgba(5,5,6,.85) 100%);
}

/* The middle column is the empty lane over her figure; the 1fr columns
   must fit "CAITLYN" — the longer word — so the type size is tuned to
   (100vw − gutters − lane) / 2 ÷ ~4.8em of Bodoni caps. */
.hero__name {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr minmax(140px, 20vw) 1fr;
  align-items: center;
  width: 100%;
  padding: 0 clamp(14px, 3vw, 40px);
  pointer-events: none;
}
.hero__word {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 7.9vw, 164px);
  line-height: .84;
  margin: 0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 8px 60px rgba(0,0,0,.6);
}
.hero__word--l { grid-column: 1; justify-self: end;   text-align: right; }
.hero__word--r { grid-column: 3; justify-self: start; text-align: left;  }

/* Per-letter intro. The outer .ch runs the entrance (CSS transition); the
   inner <i> is left free for the scroll exit, which JS writes inline with
   no transition so it tracks the wheel exactly. */
.hero__word .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(.42em) rotate(6deg);
  filter: blur(9px);
  transition: opacity .95s var(--slow), transform 1.15s var(--slow), filter .95s var(--slow);
}
.hero__word .ch > i {
  display: inline-block;
  font-style: normal;
  will-change: transform, opacity;
}
.hero__word--l .ch { transform: translate(-.3em, .3em) rotate(-5deg); }
.hero__word--r .ch { transform: translate(.3em, .3em) rotate(5deg); }
.is-lit .hero__word .ch { opacity: 1; transform: none; filter: blur(0); }

.hero__sub {
  position: absolute;
  left: 50%;
  bottom: clamp(96px, 16vh, 150px);
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  font-size: 10px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--frost);
  opacity: 0;
  transition: opacity 1s var(--ease) .9s;
  white-space: nowrap;
}
.is-lit .hero__sub { opacity: .85; }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(26px, 5vh, 46px);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 9px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ash);
  opacity: 0;
  transition: opacity 1s var(--ease) 1.2s;
}
.is-lit .hero__scroll { opacity: 1; }

/* both cues retire as soon as you engage the scroll */
.is-lit.hero-scrolled .hero__sub {
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.is-lit.hero-scrolled .hero__scroll {
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}

.hero__scroll i {
  display: block;
  width: 1px; height: 44px;
  background: linear-gradient(180deg, rgba(239,236,231,.7), transparent);
  animation: drip 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes drip {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(44px); opacity: 0; }
}

/* mobile: stack the name above/below the figure */
@media (max-width: 780px) {
  .hero__name {
    grid-template-columns: 1fr;
    /* the middle row is the empty lane her face sits in — it needs a real
       height, an `auto` row collapses and the two words meet */
    grid-template-rows: 1fr minmax(30svh, 36svh) 1fr;
    justify-items: center;
    min-height: 100svh;
    padding-top: var(--navh);
    padding-bottom: 20svh;
  }
  .hero__word { font-size: clamp(44px, 17vw, 92px); }
  .hero__word--l { grid-column: 1; grid-row: 1; justify-self: center; align-self: end; text-align: center; }
  .hero__word--r { grid-column: 1; grid-row: 3; justify-self: center; align-self: start; text-align: center; }
  .hero__media img { object-position: 50% 26%; }
  .hero__sub { bottom: clamp(78px, 13vh, 110px); font-size: 9px; letter-spacing: .3em; }
}

/* --- home: statement --- */
.statement {
  position: relative;
  z-index: 10;
  padding: clamp(80px, 16vh, 170px) var(--gut);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(28px, 6vw, 90px);
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
}
.statement__lead {
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 46px);
  line-height: 1.24;
  margin: 0 0 1em;
  letter-spacing: -0.005em;
}
.statement__body {
  color: var(--ash);
  max-width: 58ch;
  font-size: clamp(14px, 1.15vw, 16px);
  margin: 0 0 1.2em;
}
.statement__body:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .statement { grid-template-columns: 1fr; }
}

/* --- home: stats --- */
.stats {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(239,236,231,.09);
  border-block: 1px solid rgba(239,236,231,.09);
  margin: 0 var(--gut);
}
.stats > div {
  background: var(--void);
  padding: clamp(24px, 4vw, 44px) clamp(16px, 2vw, 28px);
}
.stats dt {
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 12px;
}
.stats dd {
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 30px);
  line-height: 1.15;
  margin: 0;
}
@media (max-width: 720px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* --- home: featured strip --- */
.featured {
  position: relative;
  z-index: 10;
  padding: clamp(70px, 14vh, 150px) 0 clamp(60px, 12vh, 130px);
}
.featured__head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--gut) clamp(28px, 5vh, 48px);
}
.featured__title {
  font-family: var(--serif);
  font-size: clamp(30px, 5.6vw, 74px);
  line-height: 1;
  margin: 0;
}
.featured__track {
  display: flex;
  gap: clamp(12px, 2vw, 26px);
  padding: 0 var(--gut);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* without this, mandatory snapping eats the left gutter on load */
  scroll-padding-inline: var(--gut);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.featured__track::-webkit-scrollbar { display: none; }
.featured__track a {
  position: relative;
  flex: 0 0 auto;
  width: clamp(190px, 24vw, 330px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--coal);
}
.featured__track img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transform: scale(1.02);
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
}
.featured__track a:hover img { transform: scale(1.09); filter: grayscale(.15) contrast(1.05); }
.featured__track a::after {
  content: attr(data-n);
  position: absolute;
  left: 14px; bottom: 12px;
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--bone);
  mix-blend-mode: difference;
}

/* the big link-out */
.bigcta {
  position: relative;
  z-index: 10;
  display: block;
  padding: clamp(60px, 12vh, 130px) var(--gut);
  border-top: 1px solid rgba(239,236,231,.09);
  text-align: center;
}
.bigcta__word {
  font-family: var(--serif);
  font-size: clamp(42px, 12vw, 168px);
  line-height: .92;
  margin: 0;
  text-transform: uppercase;
  transition: letter-spacing .8s var(--ease), color .5s;
  display: block;
}
.bigcta:hover .bigcta__word { letter-spacing: .05em; color: var(--frost); }
.bigcta .eyebrow { margin-bottom: 18px; }

/* ============================================================
   PORTFOLIO — 3D scroll corridor
   ============================================================ */
.pf {
  position: relative;
  z-index: 10;
}
.pf__intro {
  min-height: 62svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--navh) + 8vh) var(--gut) clamp(40px, 8vh, 80px);
}
.pf__title {
  font-family: var(--serif);
  font-size: clamp(48px, 15vw, 210px);
  line-height: .86;
  margin: 14px 0 0;
  text-transform: uppercase;
}
.pf__hint {
  margin-top: clamp(24px, 5vh, 46px);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ash);
}

/* the scroll driver: tall spacer, sticky stage */
.pf__scroll { position: relative; }
.pf__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  perspective: 1250px;
  perspective-origin: 50% 48%;
}
.pf__space {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
/* Height-budgeted, width-auto: mixed portrait/landscape/square images all
   land at the same visual weight when they reach the camera plane. */
.pf__card {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  backface-visibility: hidden;
  cursor: pointer;
  opacity: 0;
}
.pf__card figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--coal);
  box-shadow: 0 40px 120px rgba(0,0,0,.75);
}
.pf__card img {
  display: block;
  height: 76svh;
  width: auto;
  max-width: 82vw;
  object-fit: cover;
  filter: grayscale(.85) contrast(1.08) brightness(.92);
  transition: filter .8s var(--ease);
}
.pf__card.is-near img { filter: grayscale(0) contrast(1.05) brightness(1); }
.pf__card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 18px 14px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  background: linear-gradient(0deg, rgba(5,5,6,.85), transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.pf__card.is-near figcaption { opacity: 1; transform: none; }
.pf__card figcaption b { font-weight: 400; }
.pf__card figcaption span { color: var(--frost); }

@media (max-width: 780px) {
  .pf__card img { height: 54svh; max-width: 84vw; }
  .pf__stage { perspective: 900px; }
}

/* reduced-motion / no-JS fallback: collapse the corridor, keep the index */
.pf--flat .pf__scroll,
.pf--flat .pf__hud { display: none; }

/* progress + counter rail */
.pf__hud {
  position: fixed;
  right: var(--gut);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.pf__hud.is-on { opacity: 1; }
.pf__count {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .16em;
  writing-mode: vertical-rl;
}
.pf__count em { font-style: normal; color: var(--bone); }
.pf__count i { font-style: normal; color: var(--ash); }
.pf__prog {
  width: 1px;
  height: min(230px, 30vh);
  background: rgba(239,236,231,.2);
  position: relative;
}
.pf__prog i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: var(--bone);
  transform-origin: top;
  transform: scaleY(0);
}
@media (max-width: 780px) { .pf__hud { display: none; } }

/* index list under the corridor */
.pf__index {
  padding: clamp(60px, 12vh, 130px) var(--gut) clamp(40px, 8vh, 90px);
  border-top: 1px solid rgba(239,236,231,.09);
}
.pf__grid {
  margin-top: clamp(28px, 5vh, 50px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(10px, 1.6vw, 20px);
}
.pf__grid button {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--coal);
  padding: 0;
}
.pf__grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.8);
  transition: transform 1s var(--ease), filter .6s var(--ease);
}
.pf__grid button:hover img { transform: scale(1.07); filter: grayscale(0) brightness(1); }
.pf__grid button::after {
  content: attr(data-n);
  position: absolute;
  left: 12px; top: 10px;
  font-size: 10px;
  letter-spacing: .2em;
  mix-blend-mode: difference;
}

/* lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  /* explicit minmax(0,1fr) track — an auto row would grow to the image's
     intrinsic height and make its own max-height:100% meaningless */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: clamp(20px, 5vh, 56px) var(--gut) clamp(54px, 9vh, 92px);
  background: rgba(5,5,6,.93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.lb.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }
.lb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  transform: scale(.96);
  transition: transform .6s var(--ease);
  box-shadow: 0 40px 140px rgba(0,0,0,.8);
}
.lb.is-open img { transform: scale(1); }
.lb__close,
.lb__nav {
  position: absolute;
  z-index: 2;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 12px 16px;
  transition: color .3s;
}
.lb__close { top: 14px; right: 12px; }
.lb__nav { top: 50%; transform: translateY(-50%); font-size: 22px; letter-spacing: 0; }
.lb__nav--p { left: 4px; }
.lb__nav--n { right: 4px; }
.lb__close:hover, .lb__nav:hover { color: var(--frost); }
.lb__cap {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ash);
}

/* ============================================================
   CONTACT
   ============================================================ */
.ct {
  position: relative;
  z-index: 10;
  padding: calc(var(--navh) + 10vh) var(--gut) clamp(60px, 12vh, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
}
.ct__title {
  font-family: var(--serif);
  font-size: clamp(44px, 8vw, 118px);
  line-height: .9;
  margin: 14px 0 clamp(28px, 5vh, 46px);
  text-transform: uppercase;
}
.ct__blurb { color: var(--ash); max-width: 42ch; margin: 0 0 clamp(32px, 6vh, 56px); }
.ct__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.ct__list dt,
.ct__list .k {
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 6px;
}
.ct__list dd { margin: 0; }         /* kill the UA indent */
.ct__list .v {
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 24px);
}
.ct__list a { position: relative; }
.ct__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.ct__list a:hover::after { transform: scaleX(1); transform-origin: left; }

/* form */
.form { display: grid; gap: clamp(20px, 3.4vh, 34px); }
.field { position: relative; }
.field input,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(239,236,231,.22);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  padding: 26px 0 12px;
  border-radius: 0;
  transition: border-color .4s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field input:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--frost); }
.field label {
  position: absolute;
  left: 0; top: 26px;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--ash);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .4s var(--ease), color .4s var(--ease);
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-24px) scale(.74);
  color: var(--frost);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.field__err {
  display: block;
  min-height: 15px;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #d98a8a;
  opacity: 0;
  transition: opacity .3s;
}
.field.is-bad input,
.field.is-bad textarea { border-bottom-color: #d98a8a; }
.field.is-bad .field__err { opacity: 1; }

/* honeypot */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.btn {
  position: relative;
  justify-self: start;
  overflow: hidden;
  border: 1px solid rgba(239,236,231,.3);
  padding: 17px 40px;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bone);
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.btn span { position: relative; z-index: 1; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bone);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.btn:hover { color: var(--void); border-color: var(--bone); }
.btn:hover::before { transform: translateY(0); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.form__note {
  font-size: 11px;
  letter-spacing: .1em;
  min-height: 20px;
  color: var(--frost);
}
.form__note.is-bad { color: #d98a8a; }

@media (max-width: 900px) {
  .ct { grid-template-columns: 1fr; }
}

/* ============================================================
   reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .hero__scroll i { animation: none; }
  .hero__media img { transform: none; }
  .hero__word .ch,
  .hero__word .ch > i,
  .reveal,
  .menu a {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition-duration: .01ms !important;
  }
  .loader__bar i { animation-duration: .01ms; }
}