/* gabrielcheurfa.com. A black room where the work is the only light. */
@font-face{font-family:"Archivo";src:url("fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
:root{
  --bg:#070707;
  --fg:#f2f0ec;
  --dim:#7f7c79;
  --rest:#64615f;
  --mute:#a19e99;
  --line:#2a2928;
  --face:"Archivo","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  --io:cubic-bezier(.77,0,.175,1);
  --pad:28px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--face);font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--fg);color:var(--bg)}
a{color:inherit}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--fg);outline-offset:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:12px;z-index:100;padding:10px 14px;background:var(--fg);color:var(--bg);font-size:13px;text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:calc(18px + env(safe-area-inset-top,0px)) var(--pad) 0;pointer-events:none;color:#f2f0ec;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.top a{pointer-events:auto}
.brand{margin:0;font-size:13px;line-height:1.25;font-weight:600;letter-spacing:.06em}
.brand a{text-decoration:none;display:inline-block;padding:4px 0}
.brand span{display:block;font-weight:400;letter-spacing:.08em;opacity:.55}
.top nav{display:flex;gap:26px;font-size:13px;letter-spacing:.04em}
.top nav a{text-decoration:none;opacity:.62;padding:10px 8px;margin:-6px -8px;transition:opacity 200ms ease}
.top nav a:hover,.top nav a[aria-current]{opacity:1}
.top nav a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

/* grain over everything */
.grain{position:fixed;inset:-50%;z-index:30;pointer-events:none;opacity:.055;mix-blend-mode:overlay;animation:grain 1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* leaving a page: the next image opens from where you clicked */
.wipe{position:fixed;inset:0;z-index:40;background:#000;clip-path:circle(0 at var(--fx,50%) var(--fy,50%));transition:clip-path 720ms var(--io)}
.wipe.go{clip-path:circle(150% at var(--fx,50%) var(--fy,50%))}
.wipe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1400ms var(--ease)}
.wipe.go img{transform:scale(1.03)}

/* ---------- index (films and records) ---------- */
.media{position:fixed;inset:-3%;z-index:0;will-change:transform}
.m{position:absolute;inset:0;opacity:0;clip-path:inset(0 0 0 0);will-change:clip-path,transform;background:#000}
.m>img,.m>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m>img.cv{inset:auto;top:50%;right:9vw;width:min(60vh,40vw);height:auto;aspect-ratio:1;transform:translateY(-50%);box-shadow:0 40px 120px rgba(0,0,0,.6)}
.shade{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(7,7,7,.72) 0%,rgba(7,7,7,.28) 46%,rgba(7,7,7,0) 72%),linear-gradient(0deg,rgba(7,7,7,.4),rgba(7,7,7,0) 30%);opacity:0;transition:opacity 700ms ease}
.lit .shade{opacity:1}
.idx{position:relative;z-index:2;padding:max(24vh,150px) 6vw 0}
.index{list-style:none;margin:0;padding:0}
.index li{display:block}
.index a{display:inline-flex;align-items:baseline;gap:16px;max-width:100%;padding:.02em 0;text-decoration:none;color:var(--rest);font-weight:750;font-stretch:62%;font-size:clamp(30px,6.9vh,88px);line-height:.94;letter-spacing:-.005em;text-transform:uppercase;white-space:nowrap;transition:color 250ms ease}
.index .n{flex:none;align-self:flex-start;width:2.2em;margin-top:.55em;font-size:11px;font-weight:500;font-stretch:100%;letter-spacing:.08em;line-height:1;color:var(--dim)}
.index .t{overflow:hidden;text-overflow:ellipsis}
.index .who{flex:none;font-size:11px;font-weight:500;font-stretch:100%;letter-spacing:.24em;line-height:1;color:var(--fg);opacity:0;transform:translateX(-8px);transition:opacity 300ms ease,transform 500ms var(--ease)}
.lit .index a{color:rgba(242,240,236,.38)}   /* 3.2:1 on the black, the minimum for large text is 3 */
.lit .index a.on{color:var(--fg)}
.index a.on .who{opacity:1;transform:none}
.index a.on .n{color:var(--fg)}
.js .index li{opacity:0;transform:translateY(.5em)}
.js .ready .index li{opacity:1;transform:none;transition:opacity 900ms var(--ease) calc(var(--i,0) * 45ms),transform 900ms var(--ease) calc(var(--i,0) * 45ms)}

.foot{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;justify-content:space-between;margin-top:0;padding:28px 6vw calc(30px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-size:13px;letter-spacing:.04em;color:var(--dim)}
.idx+.foot{margin-top:34vh}
.topfade{position:fixed;inset:0 0 auto 0;height:130px;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(7,7,7,.92) 0%,rgba(7,7,7,.6) 45%,rgba(7,7,7,0) 100%)}
.foot ul{display:flex;flex-wrap:wrap;gap:18px 26px;margin:0;padding:0;list-style:none}
.foot a{padding:9px 12px;margin:0 -12px;text-decoration:none;color:var(--mute);transition:color 200ms ease}   /* inline: a bigger target for thumbs, same layout */
.foot a:hover{color:var(--fg)}

/* ---------- film and record pages ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:#000}
.hero .still,.hero .still img,.hero .loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .still img{transform:scale(1.06);transition:transform 2400ms var(--ease)}
.ready .hero .still img{transform:none}
.hero .loop{opacity:0;transition:opacity 900ms ease}
.hero .loop.on{opacity:1}
.veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,0) 52%),linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 22%);pointer-events:none}
.meta{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:calc(34px + env(safe-area-inset-bottom,0px));max-width:1200px}
.kicker{margin:0 0 12px;font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:rgba(242,240,236,.78)}
.title{margin:0;font-weight:750;font-stretch:62%;font-size:clamp(52px,10.4vw,156px);line-height:.88;letter-spacing:-.008em;text-transform:uppercase;overflow-wrap:anywhere}
.sub{margin:16px 0 0;font-size:13px;letter-spacing:.04em;color:rgba(242,240,236,.75);max-width:70ch}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 18px;border:1px solid rgba(242,240,236,.42);border-radius:999px;background:rgba(0,0,0,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:12px;letter-spacing:.14em;text-transform:lowercase;text-decoration:none;cursor:pointer;transition:background 250ms ease,border-color 250ms ease,transform 160ms ease-out}
.btn:hover{background:rgba(242,240,236,.12);border-color:var(--fg)}
.btn:active{transform:scale(.97)}
.btn svg{width:11px;height:11px}
.play{position:absolute;z-index:3;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:1px solid rgba(242,240,236,.7);background:rgba(0,0,0,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;transition:transform 300ms var(--ease),background 300ms ease}
.play::after{content:"";position:absolute;left:41px;top:35px;border-left:18px solid var(--fg);border-top:13px solid transparent;border-bottom:13px solid transparent}
.play:hover{transform:scale(1.07);background:rgba(242,240,236,.12)}
.play:active{transform:scale(.97)}

/* record hero: the cover floats in its own haze */
.rhero .haze{position:absolute;inset:-4%;width:108%;max-width:none;height:108%;object-fit:cover;filter:saturate(1.15)}
.rhero .cover{position:absolute;z-index:1;margin:0;right:9vw;top:50%;width:min(62vh,40vw);aspect-ratio:1;transform:translateY(-50%);box-shadow:0 50px 140px rgba(0,0,0,.6);transition:transform 900ms var(--ease)}
.rhero .cover img{width:100%;height:100%;object-fit:cover}
.rhero .meta{right:auto;max-width:min(48vw,760px)}
.rhero .title{font-size:clamp(48px,7.6vw,128px)}

/* credits */
.credits{display:grid;grid-template-columns:minmax(150px,1fr) 3fr;gap:40px;max-width:1320px;padding:clamp(80px,12vh,140px) var(--pad) clamp(90px,14vh,160px)}
.credits h2{margin:4px 0 0;font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.credits dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:28px 40px;margin:0}
.credits dt{margin-bottom:6px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.credits dd{margin:0;font-size:17px;line-height:1.35}
.credits .lines{margin:0;padding:0;list-style:none;display:grid;gap:12px;max-width:70ch;font-size:17px;line-height:1.45}
.credits .notes{margin:30px 0 0;max-width:68ch;font-size:15px;line-height:1.55;color:var(--mute)}
.credits .notes p{margin:0 0 6px}
.credits .ext{display:flex;flex-wrap:wrap;gap:18px 26px;margin:38px 0 0;padding:0;list-style:none;font-size:13px;letter-spacing:.06em}
.credits .ext a{padding:9px 12px;margin:0 -12px;color:var(--mute);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--line);transition:color 200ms ease,text-decoration-color 200ms ease}
.credits .ext a:hover{color:var(--fg);text-decoration-color:var(--fg)}

/* the next one floods in from the bottom */
.next{position:relative;display:block;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:var(--bg);text-decoration:none}
.next .nm{position:absolute;inset:0;clip-path:inset(var(--c,0%) 0 0 0);will-change:clip-path}
.next .nm>img,.next .nm>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--s,1))}
.next .nm .cv{position:absolute;right:9vw;top:50%;width:min(56vh,38vw);aspect-ratio:1;transform:translateY(-50%);box-shadow:0 40px 120px rgba(0,0,0,.55)}
.next .nm .cv img{width:100%;height:100%;object-fit:cover}
.next .veil{z-index:1}
.next .meta{z-index:2}
.next .lbl{display:inline-block;margin:0 0 14px;font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:rgba(242,240,236,.7)}
.next .title{display:block;transition:letter-spacing 900ms var(--ease)}
.next:hover .title{letter-spacing:.01em}
.next .kicker{margin:14px 0 0}

/* player */
.player{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(0,0,0,.94);opacity:0;transition:opacity 400ms ease}
.player.open{opacity:1}
.player[hidden]{display:none}
.player .frame{width:min(92vw,calc(82vh * 16 / 9));aspect-ratio:16/9;background:#000}
.player iframe{width:100%;height:100%;border:0;display:block}
.player .close{position:absolute;right:16px;top:calc(12px + env(safe-area-inset-top,0px));appearance:none;background:transparent;border:0;padding:12px;min-height:44px;font-size:13px;letter-spacing:.06em;cursor:pointer;opacity:.8}
.player .close:hover{opacity:1}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;gap:clamp(32px,6vw,96px);align-items:center;min-height:100vh;min-height:100svh;padding:max(18vh,120px) 6vw 12vh}
.portrait{position:relative;margin:0;aspect-ratio:1;overflow:hidden;background:#111}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transform:scale(1.04);transition:filter 1200ms ease,transform 1600ms var(--ease)}
.portrait:hover img{filter:none;transform:scale(1)}
.about .title{font-size:clamp(52px,8.4vw,132px)}
.about .roles{margin:16px 0 0;font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.about .bio{margin:30px 0 0;max-width:46ch;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:#d8d5d0}
.about .with{margin:18px 0 0;max-width:60ch;font-size:13px;line-height:1.6;letter-spacing:.03em;color:var(--dim)}
.mail{display:inline-block;margin-top:42px;font-weight:700;font-stretch:62%;font-size:clamp(30px,4.2vw,58px);line-height:1;text-transform:uppercase;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:6px;transition:background-size 600ms var(--ease)}
.mail:hover{background-size:100% 1px}
.socials{display:flex;flex-wrap:wrap;gap:18px 28px;margin:28px 0 0;padding:0;list-style:none;font-size:13px;letter-spacing:.06em}
.socials a{padding:9px 13px;margin:0 -13px;text-decoration:none;color:var(--mute);transition:color 200ms ease}
.socials a:hover{color:var(--fg)}

/* ---------- 404 ---------- */
.lost{display:grid;place-items:center;align-content:center;gap:24px;min-height:100vh;min-height:100svh;padding:0 6vw;text-align:center}
.lost .title{font-size:clamp(90px,22vw,320px)}
.lost a{font-size:13px;letter-spacing:.08em;color:var(--mute)}

@media (max-width:760px){
  :root{--pad:20px}
  .top{padding-left:20px;padding-right:20px}
  .top nav{gap:16px}
  .brand span{display:none}
  .idx{padding:150px 20px 0}
  .index a{font-size:min(5vh,7.2vw);white-space:normal;gap:10px}
  .index .n{width:1.9em;margin-top:.35em;font-size:10px}
  .index .who{display:none}
  .shade{background:linear-gradient(0deg,rgba(7,7,7,.5),rgba(7,7,7,.5)),linear-gradient(0deg,rgba(7,7,7,.4),rgba(7,7,7,0) 30%)}
  .m>img.cv{right:auto;left:50%;top:13vh;width:66vw;transform:translateX(-50%)}
  .foot{flex-direction:column;align-items:flex-start;padding-left:20px;padding-right:20px}
  .play{width:80px;height:80px;margin:-40px 0 0 -40px;top:42%}
  .play::after{left:34px;top:28px;border-left-width:16px;border-top-width:12px;border-bottom-width:12px}
  .rhero .cover{right:auto;left:50%;top:max(96px,12vh);width:min(74vw,46vh);transform:translateX(-50%)}
  .rhero .meta{max-width:none;right:var(--pad)}
  .next .nm .cv{right:auto;left:50%;top:14vh;width:64vw;transform:translateX(-50%)}
  .credits{grid-template-columns:1fr;gap:26px}
  .about{grid-template-columns:1fr;padding-top:110px}
  .portrait{max-width:420px}
}
@media (hover:none){
  .portrait img{filter:none}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .m,.wipe,.wipe img,.hero .still img,.shade,.next .title{transition:none!important}
  .js .index li{opacity:1;transform:none}
}