/* Romain Abeille — version 4 (version 3 "Sprint" with featured photographs of any orientation)
   Photographs edge to edge, type like a race number, nothing else.
   Titles get wider with scroll speed; photographs change with a motion-blur wipe. */

:root {
  --ink: #000;
  --paper: #fff;
  --ash: #9a9a9a;
  --hair: rgba(255, 255, 255, .18);
  --g: clamp(16px, 2.2vw, 36px);
  --title: clamp(30px, min(5.4vw, 8svh), 104px); /* menu titles and the name in the header */
  --hd: calc(var(--title) * .86 + 32px);
  --v: 0;
  --font: "Anybody", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --io: cubic-bezier(.76, 0, .24, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.series { scroll-snap-type: y mandatory; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 14px/1.55 var(--font); font-variation-settings: "wdth" 100; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, p, figure, dl, dd, ol { margin: 0; }
ol { padding: 0; list-style: none; }
::selection { background: var(--paper); color: var(--ink); }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr:focus { position: fixed !important; z-index: 200; top: 12px; left: 12px; width: auto; height: auto; clip: auto; padding: 8px 12px; background: var(--paper); color: var(--ink); }
.tnum { font-variant-numeric: tabular-nums; }
.ash { color: var(--ash); }

/* The race-number type */
.mega {
  display: block;
  font-weight: 800;
  font-size: clamp(64px, 14.5vw, 280px);
  line-height: .8;
  letter-spacing: -.012em;
  text-transform: uppercase;
  font-variation-settings: "wdth" calc(54 + var(--v) * 46);
  transform: skewX(calc(var(--v) * -7deg));
  transform-origin: left bottom;
  text-wrap: balance;
}
.stage-meta { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; font-variation-settings: "wdth" 100; }
.stage-meta a { border-bottom: 1px solid currentColor; }

/* Header */
.hd { position: fixed; z-index: 70; inset: 0 0 auto; height: var(--hd); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--g); font-size: 12px; text-transform: uppercase; letter-spacing: .02em; font-variation-settings: "wdth" 100; pointer-events: none; }
.hd > * { pointer-events: auto; }
.brand { font-weight: 800; font-size: var(--title); line-height: .86; letter-spacing: -.012em; white-space: nowrap; font-variation-settings: "wdth" 54; }
.hd-mid { justify-self: center; text-align: center; }
.menu-btn { justify-self: end; display: grid; text-transform: uppercase; height: 30px; overflow: hidden; }
.menu-btn span { grid-area: 1 / 1; line-height: 30px; transition: transform .6s var(--io); }
.menu-btn span:last-child { transform: translateY(100%); }
.menu-open .menu-btn span:first-child { transform: translateY(-100%); }
.menu-open .menu-btn span:last-child { transform: none; }

/* Menu */
.menu { position: fixed; z-index: 60; inset: 0; background: var(--ink); display: grid; grid-template-rows: 1fr auto; padding: calc(var(--hd) + 4svh) var(--g) var(--g); clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--io); }
.menu[hidden] { display: grid; visibility: hidden; }
.menu-open .menu { clip-path: inset(0); visibility: visible; }
/* Covers: shown whole at the right; v4.js slides them in the direction the pointer moves */
.m-bg { position: absolute; top: calc(var(--hd) + 4svh); bottom: calc(var(--g) + 44px); right: var(--g); width: 36vw; cursor: pointer; }
.m-bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 100% 50%;
  clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--io), transform 1.1s var(--io); }
.menu nav, .index nav { position: relative; align-self: center; }
.m-list { position: relative; align-self: center; display: grid; width: calc(100% - 36vw - var(--g) * 2); }
.m-item { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: .06em 0; transition: opacity .4s; }
.m-list:hover .m-item:not(:hover) { opacity: .28; }
.m-n, .m-c { font-size: 12px; font-variation-settings: "wdth" 100; }
.m-t { font-weight: 800; font-size: var(--title); line-height: .86; text-transform: uppercase; font-variation-settings: "wdth" 54; transition: font-variation-settings .6s var(--ease); }
.m-item:hover .m-t, .m-item:focus-visible .m-t { font-variation-settings: "wdth" 96; }
.m-foot { position: relative; display: flex; flex-wrap: wrap; gap: 8px 30px; font-size: 12px; text-transform: uppercase; font-variation-settings: "wdth" 100; }
.m-foot a { color: var(--ash); transition: color .3s; }
.m-foot a:hover { color: var(--paper); }

/* Contact: no motion at all, the page simply appears */
.contact .mega { font-variation-settings: "wdth" 54; transform: none; }
.contact .wipe { display: none; }

/* Page wipe */
.wipe { position: fixed; z-index: 90; inset: -10vh 0; background: var(--ink); transform: translateY(110%) skewY(-4deg); pointer-events: none; }
.wipe.go { transform: translateY(0) skewY(0); transition: transform .65s var(--io); }
.from-nav .wipe { transform: none; }
.wipe.out { transform: translateY(-110%) skewY(-4deg); transition: transform .8s var(--io); }

/* Home: stages ------------------------------------------------------------ */
.gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.loader { position: fixed; z-index: 80; inset: 0; background: var(--ink); display: flex; align-items: flex-end; padding: var(--g); transition: clip-path 1s var(--io); clip-path: inset(0); }
.loader.done { clip-path: inset(0 0 100% 0); }
.ld-n { font-weight: 800; font-size: clamp(90px, 22vw, 420px); line-height: .78; font-variation-settings: "wdth" 54; }
html:not(.js) .loader, html:not(.gl-on) .loader { display: none; }
.stages { position: relative; z-index: 1; }
/* Touch screens: the home photographs snap like the galleries, always at rest on a title (CSS only, no script needed) */
@media (pointer: coarse) {
  html:has(.stages) { scroll-snap-type: y mandatory; }
  .stage, .index { scroll-snap-align: start; }
}
/* Every photograph is shown whole in a frame below the header, a gutter from the other edges, never under the name or a title.
   Wide screens: the photograph against one side, the title on the other. Tall screens: the photograph on top, the title below. */
.stage { --ph: calc((100svh - var(--hd) - var(--g)) * var(--r)); }
.stage::after { display: none; }
.stage-ph { top: var(--hd); right: var(--g); bottom: var(--g); left: var(--g); }
.stage-ph img { object-fit: contain; object-position: 50% 0; }
@media (min-aspect-ratio: 1/1) {
  .stage { --free: calc(100vw - var(--g) * 2 - var(--ph)); }
  .stage-ph img { object-position: 100% 50%; }
  .stage.left .stage-ph img { object-position: 0 50%; }
  .stage-txt { width: var(--free); }
  .stage.left .stage-txt { margin-left: calc(var(--ph) + var(--g)); }
  .stage .mega { font-size: clamp(48px, 8.2vw, 170px); }
}
.stage { position: relative; cursor: pointer; height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.stage-ph { position: absolute; }
.stage-ph img { width: 100%; height: 100%; }
.gl-on .stage-ph { visibility: hidden; }
.stage-txt { position: relative; z-index: 1; display: grid; gap: 18px; width: 100%; padding: 0 var(--g) var(--g); }
.rail { position: fixed; z-index: 5; right: calc(var(--g) / 2); top: 50%; height: 26svh; width: 1px; transform: translateY(-50%); background: var(--hair); transition: opacity .5s; }
.rail i { position: absolute; inset: 0; background: var(--paper); transform: scaleY(var(--r, 0)); transform-origin: top; }
.rail.off { opacity: 0; }

.index { position: relative; z-index: 2; background: var(--ink); height: 100svh; overflow: hidden; display: grid; grid-template-rows: 1fr auto; padding: calc(var(--hd) + 4svh) var(--g) var(--g); }

.ft { position: relative; z-index: 2; background: var(--ink); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 14svh var(--g) var(--g); font-size: 12px; text-transform: uppercase; color: var(--ash); font-variation-settings: "wdth" 100; scroll-snap-align: end; }
.ft a:hover { color: var(--paper); }

/* Series ---------------------------------------------------------------- */
.sh { position: relative; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) auto; scroll-snap-align: start; }
.sh-txt { align-self: end; display: grid; gap: 22px; padding: 0 var(--g) var(--g); position: relative; z-index: 2; }
.sh .mega { font-size: clamp(56px, 10.5vw, 210px); }
.sh-line { font-size: 16px; max-width: 30ch; color: #dcdcdc; }
.sh-ph { height: 100svh; }
.sh-ph img { height: 100%; width: auto; max-width: 62vw; object-fit: cover; }
.js .sh-ph img { clip-path: inset(0 0 0 100%); transition: clip-path 1.3s var(--io) .1s; }
.js .sh.in .sh-ph img { clip-path: inset(0); }
.sh-scroll { position: absolute; top: calc(var(--hd) + 6px); left: var(--g); font-size: 12px; text-transform: uppercase; color: var(--ash); font-variation-settings: "wdth" 100; }
.frame { height: 100svh; display: grid; place-items: center; padding: calc(var(--hd) + 8px) var(--g) calc(var(--hd) + 8px); scroll-snap-align: start; }
.frame img { width: auto; height: auto; max-width: 100%; max-height: calc(100svh - var(--hd) * 2 - 16px); object-fit: contain; }
.js .frame img { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--io); }
.js .frame.in img { clip-path: inset(0); }
.hud { position: fixed; z-index: 20; left: var(--g); right: var(--g); bottom: var(--g); display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; opacity: 0; transition: opacity .5s; }
.hud.show { opacity: 1; }
.hud-n { font-weight: 800; font-size: clamp(36px, 4.6vw, 80px); line-height: .8; color: var(--ash); font-variation-settings: "wdth" 54; }
.hud-n b { color: var(--paper); font-weight: 800; }
.hud-t { font-size: 12px; text-transform: uppercase; font-variation-settings: "wdth" 100; }
.nx { position: relative; height: 100svh; display: grid; align-content: end; gap: 18px; padding: var(--g); overflow: hidden; scroll-snap-align: start; }
.nx-bg { position: absolute; inset: 0; }
.nx-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; transition: opacity 1s var(--ease); }
.nx:hover .nx-bg img { opacity: .55; }
.nx > :not(.nx-bg) { position: relative; }

/* Contact --------------------------------------------------------------- */
.ct { min-height: 100svh; display: grid; align-content: start; gap: 5svh; padding: calc(var(--hd) + 12svh) var(--g) 0; }
.ct .mega { font-size: clamp(72px, 19vw, 360px); }
.ct-mail { font-weight: 800; font-size: clamp(26px, 5.4vw, 96px); line-height: 1; font-variation-settings: "wdth" 54; overflow-wrap: anywhere; }
.ct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px var(--g); padding-top: 6svh; border-top: 1px solid var(--hair); }
.ct-bio { display: grid; gap: 1em; align-content: start; color: #d6d6d6; max-width: 40ch; }
.ct-lead { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; color: var(--paper); }
.ct-bio a { color: var(--paper); }
.ct-list { display: grid; align-content: start; }
.ct-list div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.ct-list div:first-child { padding-top: 0; }
.ct-list dt { font-size: 11px; text-transform: uppercase; color: var(--ash); font-variation-settings: "wdth" 100; }
.ct-list dd { overflow-wrap: anywhere; }
.ct-list a { border-bottom: 1px solid currentColor; }
.ct-list a[href^="mailto:"] { border-bottom: 0; }
.copy { margin-left: 10px; font-size: 11px; text-transform: uppercase; color: var(--ash); }
.copy:hover { color: var(--paper); }

/* Small screens --------------------------------------------------------- */
@media (max-width: 860px) {
  .hd-mid { display: none; }
  :root { --title: clamp(30px, min(10.5vw, 7svh), 72px); --hd: calc(var(--title) * .86 + 28px); }
  .hd { grid-template-columns: 1fr auto; }
  .sh { grid-template-columns: minmax(0, 1fr); }
  .sh-ph { position: absolute; inset: 0; height: auto; }
  .sh-ph img { width: 100%; height: 100%; max-width: none; }
  .sh::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6)); z-index: 1; }
  .ct-grid { grid-template-columns: minmax(0, 1fr); }
  .m-item { grid-template-columns: 2.4em minmax(0, 1fr) auto; }
  .m-bg { display: none; }
  .m-list { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .mega { font-variation-settings: "wdth" 54; transform: none; }
}