/* ── Tokens ───────────────────────────────────────────── */
:root {
  --bg: #050505;
  --fg: #fff8ef;
  --mute: #6e6b66;
  --line: #1f1e1c;
  --accent: #ff3b1f;

  --gutter: clamp(14px, 1.6vw, 26px);
  --small: clamp(11px, 0.4vw + 6px, 14px);
  --track: 0.02em;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.9s;

  --font: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--fg); color: var(--bg); padding: 6px 10px; z-index: 100;
}
.skip:focus { left: 8px; }

/* Small uppercase caption style shared by many elements */
.cap, .role, .nav a, .label, .filterbar button, .badge, .back, .p-count {
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: var(--track);
  text-transform: uppercase;
  font-stretch: 100%;
}

/* ── Landing (full-screen image + arrow) ─────────────── */
/* The image stays fixed behind the page: the project grid slides over it as you scroll. */
.landing {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 420px;
}
.landing-bg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease;
  will-change: opacity;
  transform: translateZ(0);
}
.landing-bg.is-active { opacity: 1; }
/* wide screens show a horizontal slice: keep the faces (top of the picture) in it */
@media (min-aspect-ratio: 1/1) { .landing-bg { object-position: 50% 20%; } }
.landing::after {
  content: '';
  position: fixed; inset: 0;
  background: linear-gradient(to bottom, rgba(5,5,5,0.66), rgba(5,5,5,0) 42%, rgba(5,5,5,0) 52%, rgba(5,5,5,0.6) 78%, var(--bg) 100%);
  pointer-events: none;
}
.landing-top {
  position: absolute; z-index: 1;
  top: var(--gutter); left: var(--gutter); right: var(--gutter);
}
/* name set in her own display typography, centred on the first screen */
.landing-name {
  position: absolute; z-index: 1;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(62vw, 1000px);
  display: block;
}
.landing-name img {
  display: block; width: 100%; height: auto;
  opacity: 0;
  animation: nameIn 1.6s var(--ease) 0.15s forwards;
}
@keyframes nameIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .landing-name { width: 88vw; } }
.landing-top .nav a { color: var(--fg); opacity: 0.7; transition: opacity 0.3s, color 0.3s; }
.landing-top .nav a:hover, .landing-top .nav a.is-active { opacity: 1; }


/* city badge only once the landing is scrolled past */
body.on-landing .badge { opacity: 0; pointer-events: none; }
/* the filter menu is part of the landing too (even when the Info view is active underneath) */
body.on-landing:not(.is-locked) .filterbar { transform: none; opacity: 1; pointer-events: auto; }
.badge { transition: opacity 0.4s; }

/* ── Header ───────────────────────────────────────────── */
.wordmark {
  display: block;
  overflow: hidden;
  line-height: 0.8;
}


.wordmark-text {
  display: inline-block;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.035em;
  white-space: nowrap;
  font-size: 11vw; /* refined by fitWordmark() in JS */
  transform: translateY(105%);
  animation: rise 1.2s var(--ease) 0.1s forwards;
}

@keyframes rise { to { transform: translateY(0); } }

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0 0;
}

.role { color: var(--fg); }

.nav { display: flex; gap: clamp(18px, 6vw, 110px); }
.nav a { color: var(--mute); transition: color 0.3s; }
.nav a:hover, .nav a.is-active { color: var(--fg); }
.nav a.is-active::before { content: '● '; color: var(--accent); }

/* ── Views ────────────────────────────────────────────── */
main { position: relative; z-index: 2; background: var(--bg); min-height: 100vh; min-height: 100svh; }
.view-info { padding: var(--gutter) var(--gutter) 140px; }
.info-head { margin-bottom: clamp(60px, 12vh, 140px); }
.info-head .header-row { padding-top: 10px; }
.info-head .nav a { color: var(--fg); opacity: 0.7; transition: opacity 0.3s, color 0.3s; }
.info-head .nav a:hover, .info-head .nav a.is-active { opacity: 1; }
.view[hidden] { display: none; }

/* ── INDEX ─────────────────────────────────────────────── */
.view-index.is-grid .reel-track { display: none; }
/* the mosaic of all projects closes the scroll of the All page */
.view-index.is-reel .idx-grid { position: relative; z-index: 3; background: var(--bg); padding-top: clamp(40px, 8vh, 100px); }

/* scroll-driven reel: full-screen covers stacked as layers */
.reel-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: var(--bg);
}
.reel-item {
  position: absolute; inset: 0;
  display: block;
  overflow: hidden;
  background: #111;
  will-change: clip-path;
}
.reel-item img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* wide screens crop top and bottom: favour the upper part, where faces usually are */
@media (min-aspect-ratio: 1/1) { .reel-item img { object-position: 50% 30%; } }
.reel-item::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: #000; opacity: var(--dim, 0);
  pointer-events: none;
}
.reel-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,5,5,0.55), rgba(5,5,5,0) 38%);
  pointer-events: none;
}
.reel-cap {
  position: absolute; z-index: 1;
  left: var(--gutter);
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: 3.2em 1fr;
  font-size: clamp(10px, 0.9vw, 13px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.25;
}
.reel-cap .num { color: var(--fg); opacity: 0.7; }
.reel-cap .sub { opacity: 0.7; }

/* filterable grid */
.idx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) var(--gutter);
  padding: clamp(60px, 12vh, 140px) var(--gutter) 140px;
}
@media (hover: hover) {
  .idx-grid:has(.idx-item:hover) .idx-item:not(:hover) img { filter: brightness(0.35) grayscale(0.6); }
}
.idx-item .frame { overflow: hidden; background: #111; }
.idx-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: filter 0.5s, transform 1.2s var(--ease); }
.idx-item:hover img { transform: scale(1.03); }
.idx-cap {
  display: grid;
  grid-template-columns: 3.2em 1fr;
  padding-top: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.25;
}
.idx-cap .num { color: var(--mute); }
.idx-cap .sub { color: var(--mute); }

/* filtered-out state for both views */
.is-out { display: none; }
.is-in { animation: fadein 0.7s var(--ease) both; }
@keyframes fadein { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── INFO ─────────────────────────────────────────────── */
.info-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 48px var(--gutter);
}
.info-lead {
  grid-column: 1 / 10;
  font-weight: 500;
  font-stretch: 85%;
  letter-spacing: -0.01em;
  text-indent: 3em;
  font-size: clamp(24px, 3.4vw, 54px);
  line-height: 1.1;
}
/* highlighted words in a calligraphic script, set among the sans-serif */
.info-lead .mail { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; overflow-wrap: anywhere; }
.info-lead .mail:hover { opacity: 0.6; }
.info-lead .script {
  font-family: 'Pinyon Script', 'Snell Roundhand', 'Brush Script MT', cursive;
  font-style: normal; font-weight: 400; font-stretch: 100%;
  font-size: 1.4em; line-height: 0.7;
  -webkit-text-stroke: 0.015em currentColor;
  letter-spacing: 0;
}
.info-col { grid-column: span 3; }
.info-col:first-of-type { grid-column: 1 / 4; }
.label { color: var(--mute); margin-bottom: 12px; }
.info-col li { font-size: 15px; font-weight: 500; line-height: 1.5; }

/* ── Filter bar (fixed bottom) ────────────────────────── */
.filterbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60; /* above the project overlay */
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 34px);
  padding: 22px var(--gutter) 20px;
  background: linear-gradient(to top, rgba(5,5,5,0.96) 40%, rgba(5,5,5,0));
  overflow-x: auto;
  scrollbar-width: none;
  transition: transform 0.6s var(--ease), opacity 0.4s;
}
.filterbar::-webkit-scrollbar { display: none; }
/* project pages: filter menu only at the very bottom */
body.is-locked:not(.at-project-end) .filterbar { transform: translateY(100%); opacity: 0; pointer-events: none; }
.filterbar.is-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }
.filterbar button { color: var(--mute); white-space: nowrap; transition: color 0.3s; }
.filterbar button:hover { color: var(--fg); }
.filterbar button[aria-pressed='true'] { color: var(--fg); }
.filterbar .sep { color: var(--mute); font-size: var(--small); }

.badge {
  position: fixed;
  right: var(--gutter);
  bottom: 18px;
  z-index: 61; /* above the filter menu's dark fade, which was dimming it */
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 248, 239, 0.5);
  border-radius: 4px;
  background: rgba(5,5,5,0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--fg);
  font-weight: 800;
  font-stretch: 125%;
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: blink 1.6s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

/* ── Project overlay ──────────────────────────────────── */
.project {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.9s var(--ease);
}
.project.is-open { clip-path: inset(0 0 0 0); }

.project-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between;
  padding: var(--gutter);
  mix-blend-mode: difference;
}
.p-count { color: var(--mute); }

.project-inner { padding: 0 var(--gutter) 120px; }

/* Title, description and credits share one small text style */
.p-meta {
  --meta-size: 12px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 28px var(--gutter);
  margin-top: clamp(40px, 8vh, 90px);
  padding-bottom: clamp(40px, 7vw, 100px);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--gutter);
  font-size: var(--meta-size);
  font-weight: 500;
  line-height: 1.45;
}
.p-meta .mute { color: var(--mute); }
.p-title { font: inherit; }
.p-meta .tagcol { grid-column: 1 / 4; }
.p-meta .desc { grid-column: 5 / 9; white-space: pre-line; }
.p-meta .credits { grid-column: 10 / 13; margin: 0; }
.credits dt { color: var(--mute); }
.credits dd { margin: 0 0 6px; }

.p-rows { display: flex; flex-direction: column; gap: var(--gutter); }
.p-row { display: flex; gap: var(--gutter); align-items: flex-start; }
.p-row.is-solo { justify-content: center; }
.p-row figure { margin: 0; flex: var(--ar, 0.8) 1 0; min-width: 0; overflow: hidden; }
.p-row.is-solo figure { flex: 1 1 100%; background: #111; }
.p-row img { width: 100%; height: auto; opacity: 0; transform: scale(1.04); transition: opacity 1s var(--ease), transform 1.6s var(--ease); background: #111; }
.p-row img.is-seen { opacity: 1; transform: none; }
.p-row figcaption { padding-top: 10px; font-size: var(--small); font-weight: 500; line-height: 1.35; text-transform: uppercase; }
.p-row figcaption .credits { display: block; margin-top: 10px; max-width: 62ch; font-size: var(--small); font-weight: 400; line-height: 1.5; text-transform: none; color: var(--mute); }
.p-row figcaption .mute { color: var(--mute); text-transform: none; }
.shoot-link { display: block; overflow: hidden; }
.shoot-link img { transition: opacity 1s var(--ease), transform 1.2s var(--ease), filter 0.4s; }
.shoot-link:hover img.is-seen { transform: scale(1.03); filter: brightness(0.8); }
.view-shoot { color: var(--mute); text-transform: none; transition: color 0.3s; }
.view-shoot:hover, .p-row figure:has(.shoot-link:hover) .view-shoot { color: var(--fg); }

/* ── Responsive ───────────────────────────────────────── */
/* shoot galleries: fixed number of columns, a short last row keeps the same image size */
@media (min-width: 601px) {
  .p-rows.has-cols .p-row figure { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gutter)) / var(--cols)); }
}

@media (max-width: 900px) {
  .idx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-meta .tagcol { grid-column: 1 / 4; }
  .p-meta .desc { grid-column: 4 / 10; }
  .p-meta .credits { grid-column: 10 / 13; }
  .info-lead { grid-column: 1 / 13; }
  .info-col, .info-col:first-of-type { grid-column: span 6; }
}

/* tablets: caption rows of 3–4 pictures wrap to two per line */
@media (min-width: 601px) and (max-width: 900px) {
  .p-row.has-caps { flex-wrap: wrap; gap: 20px var(--gutter); }
  .p-row.has-caps figure { flex: 1 1 calc(50% - var(--gutter)); }
}

/* phones in landscape: the fixed Paris badge would cover the content */
@media (max-height: 500px) { .badge { display: none; } }

@media (max-width: 600px) {
  .idx-grid { grid-template-columns: 1fr; }
  .header-row { flex-direction: column; gap: 6px; }
  .p-meta .tagcol, .p-meta .desc, .p-meta .credits { grid-column: 1 / 13; }
  .p-row { flex-wrap: wrap; }
  .p-row figure { flex: 1 1 100%; }
  .p-row.has-caps { gap: 20px var(--gutter); }
  .p-row.has-caps figure { flex: 1 1 calc(50% - var(--gutter)); }
  .p-row.is-pair { flex-wrap: nowrap; }
  .p-row.is-pair figure { flex: 1 1 0; min-width: 0; }
  .p-rows.has-cols .p-row figure { flex: 0 0 calc((100% - var(--gutter)) / 2); }
  .filterbar { justify-content: flex-start; }
  .badge { display: none; }
  .info-col, .info-col:first-of-type { grid-column: 1 / 13; }
}

@media (prefers-reduced-motion: reduce) {
  .view-index { height: auto !important; }
  .reel-stage { position: static; height: auto; overflow: visible; }
  .reel-item { position: relative; display: block; height: 100vh; height: 100svh; transform: none !important; clip-path: none !important; visibility: visible !important; pointer-events: auto !important; }
  .reel-item img { transform: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .wordmark-text { transform: none; }
  .p-row img { opacity: 1; transform: none; }
}

/* ── Lightbox (full-page picture, click to zoom) ── */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 8, 8, 0.96);
  display: flex;
}
.lightbox[hidden] { display: none; }
body.lb-open { overflow: hidden; }
.lb-scroll {
  flex: 1; overflow: auto; display: flex; align-items: flex-start;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.lb-img {
  display: block; margin: auto;
  max-width: 100vw; max-height: 100vh; max-height: 100svh;
  width: auto; height: auto; object-fit: contain; flex: none;
  cursor: zoom-in; user-select: none; -webkit-user-select: none;
}
.lightbox.is-zoomed .lb-img { max-width: none; max-height: none; width: 170vw; height: auto; margin: 0; cursor: zoom-out; }
.lb-close, .lb-nav {
  position: absolute; z-index: 1;
  background: none; border: 0; color: var(--fg); font: inherit; cursor: pointer;
  width: 52px; height: 52px; font-size: 28px; line-height: 1;
  display: grid; place-items: center;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}
.lb-close { top: 8px; right: 8px; font-size: 36px; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
.lb-count {
  position: absolute; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom));
  text-align: center; font-size: 11px; letter-spacing: 0.08em; color: var(--fg); opacity: 0.7;
  pointer-events: none;
}
.lightbox.is-single .lb-nav, .lightbox.is-single .lb-count { display: none; }
.lightbox.is-zoomed .lb-nav, .lightbox.is-zoomed .lb-count { opacity: 0; pointer-events: none; }
.p-rows figure img, .p-row figure > img { cursor: zoom-in; }
.p-rows figure .shoot-link img { cursor: pointer; }
@media (max-width: 600px) { .lightbox.is-zoomed .lb-img { width: 260vw; } }

/* ── Film player + picture linked to a film ── */
.video-link { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.video-link .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  box-sizing: border-box; width: 64px; height: 64px; border-radius: 50%;
  display: block; padding: 0; font-size: 0; line-height: 0;
  background: rgba(8, 8, 8, 0.55); color: var(--fg);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 248, 239, 0.5);
  transition: transform 0.4s var(--ease), background 0.3s;
}
.video-link .play::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent currentColor;
  transform: translate(-38%, -50%);
}
.video-link:hover .play { transform: translate(-50%, -50%) scale(1.1); background: rgba(8, 8, 8, 0.75); }
.view-shoot[data-film] { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.filmbox { position: fixed; inset: 0; z-index: 210; background: #000; display: grid; place-items: center; }
.filmbox[hidden] { display: none; }
.filmbox .film { width: 100vw; height: 100vh; height: 100svh; background: #000; object-fit: contain; }