@font-face{font-family:"Geist";src:url(vendor/fonts/Geist-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Geist";src:url(vendor/fonts/Geist-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url(vendor/fonts/Geist-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(vendor/fonts/GeistMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#110b08;
  --bg-2:#1a120d;
  --fg:#ebe6df;
  --mute:#8e857b;
  --line:rgba(235,230,223,.14);
  --sans:"Geist",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(16px,2vw,28px);
  --ease:cubic-bezier(.7,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.is-loading{overflow:hidden}
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}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:1px solid var(--fg);outline-offset:3px}

/* micro type */
.nav,.loader__row,.archive__filters,.archive__count,.about__facts dt,.contact__lead,.foot,.lightbox__bar,.lightbox__close,.ch__meta,.ch__index{
  font:400 11px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase
}
i{font-style:normal;color:var(--mute)}

/* loader */
.loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center}
.loader__stack{position:relative;width:min(22vw,220px);aspect-ratio:4/5;overflow:hidden}
.loader__stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.loader__row{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);display:flex;justify-content:space-between}
.loader__count{font-variant-numeric:tabular-nums}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:56px;padding:0 var(--pad);color:var(--fg);background:linear-gradient(180deg,rgba(17,11,8,.72),rgba(17,11,8,0))}
.nav__links{display:flex;gap:clamp(16px,3vw,48px)}
.nav__cta{justify-self:end}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav i{color:inherit;opacity:.55}

/* hero */
.hero{position:relative;height:100dvh;overflow:hidden}
.hero__media{position:absolute;inset:0;clip-path:inset(18% 37% 18% 37%);will-change:clip-path}
.hero__frames,.hero__frames img{position:absolute;inset:0;width:100%;height:100%}
.hero__frames img{object-fit:cover;opacity:0}
.hero__frames img.is-on{opacity:1}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,11,8,0) 55%,rgba(17,11,8,.55))}
.hero__copy{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;pointer-events:none}
.hero__title{margin:0;font-weight:500;font-size:clamp(56px,12.5vw,230px);line-height:.86;letter-spacing:-.055em;display:flex;flex-direction:column}
.hero__title span{display:block;overflow:hidden;padding-bottom:.04em}
.hero__title span:last-child{padding-left:.9em}
.hero__sub{margin:0 0 .6em;max-width:24ch;color:var(--mute);font-size:15px}

/* chapters (horizontal pan) */
.chapters{position:relative;overflow:hidden}
.chapters__track{display:flex;align-items:center;gap:clamp(24px,4vw,72px);height:100dvh;padding:0 var(--pad) 0 calc(var(--pad) + 4vw);width:max-content}
.ch{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);height:100%}
.ch__intro{width:clamp(240px,26vw,440px);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;height:62vh;border-left:1px solid var(--line);padding-left:20px}
.ch__index{color:var(--mute)}
.ch__name{margin:0;font-weight:500;font-size:clamp(28px,3.4vw,58px);line-height:1;letter-spacing:-.04em;hyphens:none;overflow-wrap:normal;text-wrap:balance}
.ch__meta{color:var(--mute)}
.ch__img{position:relative;overflow:hidden;flex:none;background:var(--bg-2);cursor:zoom-in}
.ch__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.ch__img:nth-child(3n+2){height:70vh;align-self:flex-start;margin-top:12vh}
.ch__img:nth-child(3n){height:46vh;align-self:flex-end;margin-bottom:14vh}
.ch__img:nth-child(3n+1){height:58vh}

/* archive */
.archive{padding:18vh var(--pad) 12vh;border-top:1px solid var(--line)}
.archive__head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px 32px;margin-bottom:8vh}
.archive__title{margin:0;font-weight:500;font-size:clamp(56px,11vw,200px);line-height:.85;letter-spacing:-.055em}
.archive__count{margin:0;color:var(--mute);justify-self:end}
.archive__filters{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.archive__filters button{padding:9px 12px;border:1px solid var(--line);border-radius:999px;color:var(--mute);transition:color .3s,border-color .3s,background .3s}
.archive__filters button:hover{color:var(--fg);border-color:var(--fg)}
.archive__filters button[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.archive__filters sup{font-size:9px;margin-left:3px;opacity:.7}
.archive__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);align-items:start}
.col{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,24px)}
.tile,.ch__img{display:block}
.tile{position:relative;width:100%;overflow:hidden;cursor:zoom-in;background:var(--tint,var(--bg-2))}
.tile img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease),transform 1.2s var(--ease)}
.tile img.is-loaded{opacity:1}
.tile:hover img{transform:scale(1.035)}
.tile__num{position:absolute;left:10px;top:9px;font:400 10px/1 var(--mono);color:#f2eee8;text-shadow:0 0 6px rgba(0,0,0,.6);opacity:0;transition:opacity .3s}
.tile:hover .tile__num,.tile:focus-visible .tile__num{opacity:1}

/* about */
.about{padding:20vh var(--pad);display:grid;grid-template-columns:repeat(12,1fr);gap:32px;border-top:1px solid var(--line)}
.about__statement{grid-column:1/10;margin:0;font-weight:300;font-size:clamp(28px,4.2vw,68px);line-height:1.04;letter-spacing:-.035em}
.about__statement .line{overflow:hidden}
.about__facts{grid-column:10/13;align-self:end;margin:0;display:grid;gap:22px}
.about__facts dt{color:var(--mute);margin-bottom:6px}
.about__facts dd{margin:0;font-size:17px}

/* contact */
.contact{min-height:90dvh;padding:14vh var(--pad) 6vh;display:flex;flex-direction:column;justify-content:flex-end;border-top:1px solid var(--line)}
.contact__lead{color:var(--mute);margin:0 0 2vh}
.contact__big{display:inline-block;align-self:flex-start;font-weight:500;font-size:clamp(72px,17vw,320px);line-height:.82;letter-spacing:-.06em;padding-bottom:.04em;position:relative}
.contact__big::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.035em;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .8s var(--ease)}
.contact__big:hover::after{transform:scaleX(1);transform-origin:left}

.foot{display:flex;gap:28px;padding:22px var(--pad);border-top:1px solid var(--line);color:var(--mute)}
.foot span{margin-right:auto}
.foot a:hover{color:var(--fg)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(17,11,8,.97);display:grid;grid-template-rows:56px 1fr 56px}
.lightbox[hidden]{display:none}
.lightbox__close{justify-self:end;padding:0 var(--pad)}
.lightbox__fig{margin:0;display:grid;place-items:center;min-height:0;padding:0 var(--pad)}
.lightbox__fig img{max-width:100%;max-height:calc(100dvh - 140px);object-fit:contain}
.lightbox__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad)}
.lightbox__meta{color:var(--mute);font-variant-numeric:tabular-nums}
.lightbox__next{justify-self:end}
.lightbox button:hover{color:var(--mute)}

/* grain on fixed layer only */
body::after{content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.nav__menu{display:none}
.mmenu{position:fixed;inset:0;z-index:45;background:var(--bg);display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:var(--pad) var(--pad) 12vh}
.mmenu[hidden]{display:none}
.mmenu a{font-weight:500;font-size:clamp(44px,14vw,72px);line-height:1;letter-spacing:-.05em}

/* mobile */
@media (max-width:767px){
  .nav{grid-template-columns:1fr auto}
  .nav__links,.nav__cta{display:none}
  .nav__menu{display:block;justify-self:end}
  .hero__media{clip-path:inset(14% 14% 30% 14%)}
  .hero__copy{grid-template-columns:1fr}
  .hero__title span:last-child{padding-left:0}
  .chapters__track{flex-direction:column;width:auto;height:auto;padding:12vh var(--pad);align-items:stretch}
  .ch{flex-direction:column;align-items:stretch;height:auto}
  .ch__intro{width:auto;height:auto;gap:16px;padding:0 0 0 14px}
  .ch__img,.ch__img:nth-child(n){height:auto;margin:0;align-self:stretch}
  .archive__cols{grid-template-columns:repeat(2,1fr)}
  .archive__head{grid-template-columns:1fr}
  .archive__count{justify-self:start}
  .about{grid-template-columns:1fr}
  .about__statement,.about__facts{grid-column:1/-1}
  .foot{flex-wrap:wrap;gap:14px 22px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .hero__media{clip-path:none}
  .ch__img img{transform:none}
}