@font-face { font-family: "Cossette Texte"; src: url("fonts/CossetteTexte-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cossette Texte"; src: url("fonts/CossetteTexte-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cossette Titre"; src: url("fonts/CossetteTitre-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cossette Titre"; src: url("fonts/CossetteTitre-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root {
  --paper: #000000;
  --ink: #ffffff;
  --mute: #8c8c8c;
  --line: #262626;
  --well: #141414;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-s: .75rem;    /* 12px: mono details */
  --fs-m: .875rem;   /* 14px: body text */
  --fs-l: 1rem;      /* 16px: titles */
  --sans: "Cossette Texte", "Helvetica Neue", Arial, sans-serif;
  --serif: "Cossette Texte", "Helvetica Neue", Arial, sans-serif;
  --display: "Cossette Titre", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(1.1rem, 3.2vw, 2.75rem);
  --edge: .75rem;
  --gap: clamp(.75rem, 1.4vw, 1.25rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; background: #000; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--fs-m); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.caps { text-transform: uppercase; letter-spacing: .08em; }

/* header: a thin bar, name left, pages right */
.site-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  height: 3rem; padding: 0 var(--edge); border-bottom: 1px solid var(--line);
}
.mark { font-family: var(--display); font-size: var(--fs-l); letter-spacing: .08em; line-height: 1; }
.site-head nav { display: flex; gap: clamp(1rem, 2.4vw, 2rem); font-size: var(--fs-s); text-transform: uppercase; letter-spacing: .1em; }
.site-head nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
main { padding: 0 var(--edge); }

/* home: one screen, two halves */
.home .site-head {
  position: absolute; top: 0; left: 0; width: 50%; height: auto; z-index: 2;
  flex-direction: column; align-items: flex-start; gap: 2.2rem; padding: 1.4rem var(--edge); border: 0;
}
.home .site-head nav { flex-direction: column; gap: .55rem; }
.home main.h-split { padding: 0; display: grid; grid-template-columns: 1fr 1fr; height: 100vh; height: 100svh; min-height: 34rem; }
.h-left { position: relative; display: grid; place-items: center; padding: 1.4rem var(--edge); }
.h-small { width: clamp(7.5rem, 11vw, 11rem); }
.h-rot { position: relative; display: grid; }
.h-rot > a { grid-area: 1 / 1; display: block; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.h-rot > a.is-on { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }
.h-small img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--well); }
.h-rot > a:hover { text-decoration: none; }
.h-small figcaption, .h-big figcaption { font-family: var(--mono); font-size: var(--fs-s); color: var(--mute); margin-top: .6rem; }
.h-small a:hover .h-cap { color: var(--ink); }
.h-cap { display: block; font-family: var(--mono); font-size: var(--fs-s); color: var(--mute); margin-top: .6rem; min-height: 2.9em; }
.h-foot {
  position: absolute; left: var(--edge); right: var(--edge); bottom: 1.4rem;
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; align-items: end;
}
.h-foot p { margin: 0; }
.h-role { font-size: var(--fs-m); line-height: 1.35; }
.h-line { font-family: var(--mono); font-size: var(--fs-s); line-height: 1.45; color: var(--mute); }
.h-links { display: flex; gap: 1.1rem; font-size: var(--fs-s); text-transform: uppercase; letter-spacing: .1em; }
.h-big { position: relative; margin: 0; height: 100%; overflow: hidden; }
.h-big a { display: block; height: 100%; }
.h-big img { width: 100%; height: 100%; object-fit: cover; }
.h-big figcaption { position: absolute; right: 1.4rem; bottom: 1.2rem; margin: 0; color: #fff; }
.home .site-foot { display: none; }

/* work: one quiet row */
.w-wrap { min-height: calc(100vh - 3rem - 4.5rem); display: flex; align-items: center; padding: clamp(3rem, 8vh, 6rem) 0; }
.grid { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 2.5rem clamp(.75rem, 1.4vw, 1.5rem); align-items: start; }
.grid a { display: block; }
.grid a:hover { text-decoration: none; }
.w-media { position: relative; display: block; }
.grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--well); }
.grid .w-alt { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity .45s ease; }
.grid a:hover .w-alt, .grid a:focus-visible .w-alt { opacity: 1; }
.w-title { display: block; margin-top: .75rem; font-family: var(--display); font-size: var(--fs-s); letter-spacing: .08em; line-height: 1.35; }
.w-role { display: block; margin-top: .25rem; font-family: var(--mono); font-size: var(--fs-s); line-height: 1.4; color: var(--mute); }
.grid a:hover .w-title { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }

/* project: split opening, then images edge to edge */
.proj main { padding: 0 var(--gap); }
.proj .chapter-block + .chapter-block { margin-top: var(--gap); }
.p-open { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-top: var(--gap); height: calc(100vh - 3rem); height: calc(100svh - 3rem); min-height: 32rem; }
.p-lead, .p-second { overflow: hidden; background: var(--well); }
.p-lead img, .p-second img { width: 100%; height: 100%; object-fit: cover; }
.p-side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--gap); min-height: 0; }
.p-second { min-height: 0; }
.p-info { display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; padding: 1.4rem clamp(1rem, 3vw, 2.5rem); min-height: 0; overflow: auto; }
.p-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--fs-l); letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.p-kicker { margin: 0; font-family: var(--mono); font-size: var(--fs-s); color: var(--mute); }
.p-role { margin: 0; font-size: var(--fs-m); line-height: 1.5; max-width: 44ch; }
.credits { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.5rem; font-family: var(--mono); font-size: var(--fs-s); max-width: 34rem; }
.credits dt { color: var(--mute); }
.credits dd { margin: 0; }
.chapter-text { margin: 0; font-size: var(--fs-m); line-height: 1.65; max-width: 48ch; }
.p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: var(--gap); }
.pg-tall img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.pg-wide { grid-column: 1 / -1; }
.pg-wide img { width: 100%; }
.pg-solo { grid-column: 1 / -1; justify-self: center; width: 50%; padding: clamp(3rem, 8vw, 7rem) 0; }
.pg-solo img { width: 100%; }
.p-grid img, .pg-solo img { background: var(--well); }
.next-proj { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; padding: clamp(3rem, 8vw, 6rem) calc(var(--edge) - var(--gap)) 2rem; }
.np-label { display: block; font-family: var(--mono); font-size: var(--fs-s); color: var(--mute); }
.np-title { display: block; margin-top: .3rem; font-family: var(--display); font-size: var(--fs-l); letter-spacing: .08em; line-height: 1.3; }
.np-all { font-size: var(--fs-s); text-transform: uppercase; letter-spacing: .1em; }

/* about: centred and quiet */
.about-page main { padding: 0; }
.a-open { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; padding: clamp(3.5rem, 10vh, 7rem) var(--edge) clamp(4rem, 12vh, 8rem); text-align: center; }
.a-word { margin: 0; font-family: var(--display); font-size: var(--fs-l); letter-spacing: .14em; text-transform: uppercase; }
.a-portrait { width: clamp(10rem, 16vw, 15rem); }
.a-wide img { width: 100%; height: min(78vh, 56vw); object-fit: cover; }
.a-spread { display: flex; justify-content: space-between; margin: 0; padding: .9rem var(--edge); font-family: var(--mono); font-size: var(--fs-s); text-transform: uppercase; letter-spacing: .12em; }
.a-body { max-width: 50rem; margin: 0 auto; padding: clamp(4rem, 12vh, 8rem) var(--edge); text-align: center; }
.a-head { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--fs-l); letter-spacing: .14em; text-transform: uppercase; }
.a-sub { margin: .5rem 0 0; font-family: var(--mono); font-size: var(--fs-s); color: var(--mute); }
.a-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; margin-top: 2.8rem; text-align: left; }
.a-cols p { margin: 0 0 1.1em; line-height: 1.7; }
.a-cols p:first-child { margin-top: 0; }
.acclaim { max-width: 50rem; margin: 0 auto; padding: 0 var(--edge) clamp(4rem, 12vh, 8rem); }
.acclaim .a-head { text-align: center; }
.names { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; border-bottom: 1px solid var(--line); }
.names li { display: flex; gap: 1rem; align-items: baseline; padding: .75rem 0; border-top: 1px solid var(--line); }
.n-no { font-family: var(--mono); font-size: var(--fs-s); color: var(--mute); }
.n-name { font-family: var(--display); font-size: var(--fs-m); letter-spacing: .1em; text-transform: uppercase; }
.nocase { text-transform: none; }
.a-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: 0 var(--gap) var(--gap); }
.a-pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* contact: text over an image */
.contact-page main { padding: 0; }
.contact-page .site-head { position: absolute; top: 0; left: 0; right: 0; z-index: 3; border-bottom-color: rgba(255,255,255,.18); }
.contact { position: relative; height: 100vh; height: 100svh; min-height: 30rem; overflow: hidden; }
.c-bg { position: absolute; inset: 0; }
.c-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.c-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 45% 35% at 50% 50%, rgba(0,0,0,.45), rgba(0,0,0,0) 70%), linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.2) 25%, rgba(0,0,0,.2) 70%, rgba(0,0,0,.6)); }
.c-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--edge); }
.c-lead { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--fs-l); line-height: 1.45; letter-spacing: .12em; text-transform: uppercase; }
.c-mail { margin: 1.2rem 0 0; font-family: var(--mono); font-size: var(--fs-m); }
.c-mail a { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.c-row { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.2rem var(--edge); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.c-row div:nth-child(2) { justify-self: center; } .c-row div:nth-child(3) { justify-self: center; } .c-row div:last-child { justify-self: end; text-align: right; }
.c-row dt { font-family: var(--display); font-size: var(--fs-m); letter-spacing: .1em; text-transform: uppercase; }
.c-row dd { margin: .15rem 0 0; font-family: var(--mono); font-size: var(--fs-s); color: rgba(255,255,255,.72); }
.contact-page .site-foot { display: none; }

/* footer */
.site-foot { display: flex; flex-wrap: wrap; gap: .4rem 2.5rem; justify-content: space-between; margin: 0 var(--edge); padding: 1.2rem 0 1.6rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: var(--fs-s); }
.site-foot p { margin: 0; }
.site-foot .copy { color: var(--mute); }

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .site-head nav { gap: .9rem; }
  .home .site-head { position: static; width: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--edge); }
  .home .site-head nav { flex-direction: row; gap: .9rem; }
  .home main.h-split { display: flex; flex-direction: column-reverse; height: auto; min-height: 0; }
  .h-big { height: 78svh; }
  .h-left { display: block; padding: 1.4rem var(--edge) 2rem; }
  .h-small { display: none; }
  .h-foot { position: static; width: 100%; margin: 0; grid-template-columns: 1fr; gap: 1rem; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-wrap { min-height: 0; }
  .p-open { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .proj main { padding: 0 var(--edge); }
  .p-lead img { height: 80svh; }
  .p-side { grid-template-rows: auto auto; }
  .p-info { padding: 2rem var(--edge); }
  .p-second img { height: auto; aspect-ratio: auto; }
  .p-grid { grid-template-columns: 1fr; }
  .pg-tall img { aspect-ratio: auto; }
  .pg-solo { width: 100%; padding: 0; }
  .a-spread { font-size: .6875rem; letter-spacing: .06em; }
  .a-pair { grid-template-columns: 1fr; padding: 0 var(--edge) var(--edge); }
  .a-cols { grid-template-columns: 1fr; gap: 0; }
  .names { grid-template-columns: 1fr 1fr; }
  .c-row { grid-template-columns: 1fr 1fr; row-gap: 1.2rem; }
  .c-bg img { object-position: 30% 50%; }
  .c-row div:nth-child(n) { justify-self: start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .grid .w-alt, .h-rot > a { transition: none; } }