/* ======================================================================
   STYLE.CSS  -  how the site looks
   Colors, fonts and sizes live here. The first block (:root) holds the
   main colors and sizes. Change a value, save, refresh the browser.
   The "@media (max-width:760px)" blocks are the phone versions.
   ====================================================================== */

:root{
  --ink:#050405;
  --dusk:#1f1c22;
  --bone:#e7ddcc;
  --dim:rgba(231,221,204,.68);
  --faint:rgba(231,221,204,.28);
  --ember:#e0903a;
  --sans:"Jost","Futura","Century Gothic","Avenir Next",system-ui,sans-serif;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --pad:clamp(20px,5vw,72px);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth;background:var(--ink);height:100%}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;min-height:100%;background:var(--ink);color:var(--bone);font-family:var(--serif);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--ember);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Arrival ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--ink);touch-action:pan-y;
  --r:clamp(170px,27vmax,430px)} /* <- size of the lit circle */
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero__veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--x,50%) var(--y,46%),rgba(5,4,5,0) 0,rgba(5,4,5,0) calc(var(--r)*.42),rgba(5,4,5,.9) var(--r))}
.hero.is-still .hero__veil{background:radial-gradient(ellipse at 50% 46%,rgba(5,4,5,.05) 0,rgba(5,4,5,.78) 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;background:linear-gradient(to bottom,rgba(31,28,34,0),var(--dusk))}
.hero__nav{position:absolute;top:calc(var(--pad)*.6);right:var(--pad);z-index:3;display:flex;gap:clamp(14px,2.4vw,34px);font-family:var(--sans);font-weight:400;font-size:.82rem;letter-spacing:.06em}
.hero__nav a{text-decoration:none;color:var(--dim);padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.hero__nav a:hover{color:var(--bone);border-color:var(--ember)}
.name{position:absolute;z-index:2;left:var(--pad);bottom:clamp(110px,21vh,230px);margin:0;display:inline-block;text-shadow:0 2px 30px rgba(0,0,0,.65)}
.name__az{display:block;font-family:var(--sans);font-weight:200;font-size:clamp(3.4rem,17.5vw,15.5rem);line-height:.9;letter-spacing:.12em;margin-right:-.12em;color:var(--bone)}
.name__row{display:flex;justify-content:space-between;align-items:baseline;margin-top:clamp(8px,1.4vw,20px);padding-right:.12em}
.name__ad{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,4vw,3.4rem);line-height:1;letter-spacing:.02em}
.name__role{font-family:var(--sans);font-weight:300;font-size:clamp(.72rem,1.1vw,1rem);letter-spacing:.2em;color:var(--dim);text-align:right}
.hero__sub{position:absolute;z-index:2;left:0;right:0;bottom:clamp(36px,7vh,80px);text-align:center;padding:0 var(--pad)}

/* subtitles */
.subtitle{font-family:var(--sans);font-weight:400;font-size:clamp(1.05rem,2.3vw,1.9rem);line-height:1.35;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 22px rgba(0,0,0,.7);margin:0}
.hero__sub .subtitle{animation:subIn 1.6s ease 2.4s both}
@keyframes subIn{from{opacity:0}to{opacity:1}}
.js .frame .subtitle{opacity:0;transition:opacity 1.4s ease .5s}
.js .frame.is-on .subtitle{opacity:1}

/* ---------- Shared ---------- */
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.chapter{background:var(--dusk)}
.chapter--dark{background:linear-gradient(to bottom,var(--dusk) 0,var(--ink) 72vh),var(--ink)}
.head{padding-top:clamp(70px,14vh,160px);padding-bottom:clamp(36px,7vh,80px);max-width:900px}
.head h2,.work h3,.drawer__item h4{font-family:var(--sans);font-weight:300;margin:0}
.head h2{font-size:clamp(2.1rem,5.6vw,4.6rem);line-height:1.05;letter-spacing:.01em}
.status{font-style:italic;color:var(--dim);margin:.9em 0 0;font-size:1.06rem;max-width:56ch}
.logline{font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.6;margin:1.2em 0 0;max-width:54ch}
.frame{position:relative;margin:0}
.frame img{width:100%;height:auto}
.frame figcaption{font-style:italic;color:var(--dim);font-size:.95rem;padding:.7em 0 0;line-height:1.35}
.full img{max-height:92svh;object-fit:cover}
.full figcaption{padding-left:var(--pad)}
.frame .subtitle{position:absolute;left:0;right:0;bottom:clamp(14px,5%,56px);text-align:center;padding:0 var(--pad)}
.frame .subtitle--mid{bottom:auto;top:34%}
.gap{height:clamp(56px,11vh,140px)}

/* film strip */
.strip{display:flex;gap:clamp(12px,1.8vw,26px);overflow-x:auto;padding:0 var(--pad) 18px;scroll-snap-type:x proximity;cursor:grab;scrollbar-width:thin;scrollbar-color:var(--faint) transparent;-webkit-overflow-scrolling:touch}
.strip.is-drag{cursor:grabbing;scroll-snap-type:none}
.strip::-webkit-scrollbar{height:6px}
.strip::-webkit-scrollbar-thumb{background:var(--faint);border-radius:3px}
.strip .frame{flex:0 0 auto;scroll-snap-align:start}
.strip .frame img{height:clamp(210px,54vh,520px);width:auto;max-width:none;-webkit-user-drag:none;user-select:none}
.strip .frame figcaption{max-width:32ch}

/* pair */
.pair{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,2vw,28px);align-items:end}
.pair .a{grid-column:1 / span 7}
.pair .b{grid-column:8 / span 5}
.pair--flip .a{grid-column:1 / span 5}
.pair--flip .b{grid-column:6 / span 7}

/* ---------- Other work ---------- */
.others{background:var(--ink);padding-top:clamp(70px,13vh,150px);padding-bottom:clamp(40px,8vh,100px)}
.others>h2{font-family:var(--sans);font-weight:300;font-size:clamp(1.6rem,3.6vw,2.8rem);margin:0 0 clamp(30px,6vh,70px)}
.work{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(28px,6vh,64px) 0;border-top:1px solid var(--faint)}
.work h3{font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.1}
.work h3 small{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.45em;color:var(--dim);margin-left:.5em;letter-spacing:0}
.work p{margin:.8em 0 0;max-width:46ch}
.work .status{margin-top:.6em}
.swap{all:unset;display:block;position:relative;cursor:pointer;aspect-ratio:3/2;overflow:hidden}
.swap:focus-visible{outline:2px solid var(--ember);outline-offset:4px}
.swap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .9s ease}
.swap .alt{opacity:0}
.swap:hover .alt,.swap.is-alt .alt,.swap:focus-visible .alt{opacity:1}
.swap img.first{filter:grayscale(1) contrast(1.05)}
.dots{width:100%;max-width:340px;height:auto;display:block;justify-self:start}
.dots circle{fill:var(--bone);opacity:.14;animation:tw 7s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.1}50%{opacity:.7}}

.drawer{border-top:1px solid var(--faint);padding:clamp(24px,5vh,50px) 0}
.drawer summary{list-style:none;cursor:pointer;font-family:var(--sans);font-weight:300;font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.1;display:flex;align-items:baseline;gap:.6em}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{content:"+";font-weight:200;color:var(--dim);transition:transform .3s}
.drawer[open] summary::after{transform:rotate(45deg)}
.drawer__body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px);margin-top:clamp(24px,5vh,50px)}
.drawer__item h4{font-size:1.35rem}
.drawer__item p{margin:.4em 0 0;font-style:italic;color:var(--dim);font-size:.98rem}
.drawer__item img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:.9em}
.drawer__blank{width:100%;aspect-ratio:16/9;margin-bottom:.9em;border:1px dashed var(--faint)}

/* ---------- Contact ---------- */
.contact{background:var(--ink);padding-top:clamp(80px,16vh,180px);padding-bottom:clamp(50px,9vh,110px)}
.contact p.line{font-family:var(--serif);font-style:italic;font-size:clamp(1.8rem,5.2vw,4.2rem);line-height:1.12;margin:0 0 .6em;max-width:16ch}
.contact a.mail{font-family:var(--sans);font-weight:300;font-size:clamp(1.15rem,2.6vw,2rem);letter-spacing:.04em;text-decoration:none;border-bottom:1px solid var(--ember);padding-bottom:4px;word-break:break-all}
.contact a.mail:hover{color:#fff}
.foot{margin-top:clamp(70px,14vh,150px);font-family:var(--sans);font-weight:300;font-size:.82rem;letter-spacing:.08em;color:var(--dim)}

@media (max-width:760px){
  .name__row{flex-direction:column;align-items:flex-start;gap:.6em}
  .name__role{text-align:left;letter-spacing:.14em;font-size:.72rem}
  .hero__nav{font-size:.74rem;gap:12px}
  .name{bottom:clamp(120px,22vh,200px)}
  .pair{display:block}
  .pair .b{margin-top:clamp(16px,3vh,28px)}
  .pair--flip .b{margin-top:clamp(16px,3vh,28px)}
  .work{grid-template-columns:1fr}
  .drawer__body{grid-template-columns:1fr}
  .frame .subtitle--mid{top:30%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__sub .subtitle{animation:none}
  .js .frame .subtitle{transition:none}
  .dots circle{animation:none;opacity:.35}
}

/* The films are the centre of gravity. Photography and research change the pace. */
.eyebrow{font:400 .76rem/1.4 var(--sans);letter-spacing:.19em;text-transform:uppercase;color:var(--dim);margin:0 0 36px}
.film-index{background:var(--dusk);padding-top:70px;padding-bottom:16px}
.film-index nav{display:flex;gap:18px 36px;flex-wrap:wrap;font:300 .96rem/1.6 var(--sans)}
.film-index a{text-decoration:none}.film-index a:hover{color:#fff}.film-index span{color:var(--dim);font-size:.75rem;margin-left:8px}
.short-films{padding-top:100px;padding-bottom:130px;background:var(--ink)}
.short-film{width:73%;margin-bottom:110px}.short-film:last-child{width:56%;margin-left:auto;margin-bottom:0}
.short-film header{margin-bottom:28px}.short-film h2{font:300 clamp(2rem,4vw,3.4rem)/1.1 var(--sans);margin:0}
.short-film .frame img{width:100%;height:auto}
.photography{padding-top:100px;padding-bottom:60px;background:var(--ink)}
.exhibitions{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px}
.exhibition{padding:30px 0 45px;border-top:1px solid var(--faint);min-height:260px}
.exhibition--walls{grid-column:1 / span 5}.exhibition--saraab{grid-column:8 / span 5;margin-top:160px}.exhibition--sarjilla{grid-column:4 / span 6;margin-top:60px}
.exhibition h2{font:300 clamp(2.6rem,6.4vw,6rem)/1.05 var(--sans);margin:32px 0 24px;letter-spacing:-.025em}
.exhibition__place{font:300 .82rem/1.4 var(--sans);color:var(--dim);letter-spacing:.06em;margin:0}
.exhibition__venue{font:italic 1.08rem/1.4 var(--serif);color:var(--dim);max-width:25ch;margin:0}
.interval{min-height:85svh;display:flex;align-items:center;justify-content:center;padding-top:100px;padding-bottom:100px}
.interval p{font:italic clamp(2.1rem,5.2vw,5rem)/1.2 var(--serif);margin:0;text-align:center}
.others>h2.eyebrow{font:400 .76rem/1.4 var(--sans);letter-spacing:.19em;margin-bottom:70px}
.others .work{border-top:0;padding-bottom:100px}.others .work+.work{padding-top:80px}
.research-note{margin:100px 0 40px auto;max-width:650px;border-left:1px solid var(--faint);padding:10px 0 10px 32px}
.research-note h3{font:300 clamp(1.8rem,3vw,2.7rem)/1.15 var(--sans);margin:0}
.research-note__fragment{font-style:italic;font-size:clamp(1.5rem,3vw,2.2rem);max-width:24ch;margin:60px 0}
.research-note a{font:300 .85rem var(--sans);color:var(--dim);text-decoration:none;border-bottom:1px solid var(--faint);padding-bottom:4px}
.contact .line{max-width:none;font-size:clamp(1.8rem,4.8vw,4rem)}
@media(max-width:760px){
 .film-index{padding-top:45px}.film-index nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:.85rem}
 .film-index span{display:block;margin-left:0}.eyebrow{margin-bottom:28px}
 .short-films{padding-top:70px;padding-bottom:70px}.short-film,.short-film:last-child{width:100%;margin-left:0}.short-film{margin-bottom:80px}
 .exhibitions{display:block}.exhibition{min-height:0;padding:28px 0 50px}.exhibition--saraab{margin-top:35px;width:85%;margin-left:auto}.exhibition--sarjilla{margin-top:55px;width:90%}
 .exhibition h2{font-size:clamp(2.7rem,12vw,4.5rem)}
 .interval{min-height:65svh}.research-note{padding-left:22px;margin-top:70px}
 .others .work{padding-bottom:65px}.others .work+.work{padding-top:40px}.dots{max-width:280px;justify-self:center}
 .strip{display:block;overflow:visible;padding-bottom:0}.strip .frame{margin-bottom:42px}.strip .frame:nth-child(even){width:86%;margin-left:auto}.strip .frame img{width:100%;height:auto;max-width:100%}
 .hero__nav a{min-height:44px;display:flex;align-items:center}.hero__nav{top:68px;left:var(--pad);right:var(--pad);justify-content:space-between} /* top:68px keeps the four links clear of the phone browser's top bar */
}


/* "Read more" under each film's short line, and the premiere credit */
.more{margin-top:1.3em;max-width:54ch}
.more summary{cursor:pointer;list-style:none;font:400 .86rem/1.4 var(--sans);letter-spacing:.06em;color:var(--dim);display:inline-flex;align-items:center;gap:.6em;padding:6px 0}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";font-weight:200;font-size:1.2em;transition:transform .3s}
.more[open] summary::after{transform:rotate(45deg)}
.more summary:hover{color:var(--bone)}
.more p{margin:.7em 0 0;font-size:1.05rem}
.credit{font-style:italic;color:var(--dim);font-size:.98rem;margin:1.1em 0 0;max-width:54ch}
.short-film .frame figcaption{padding-top:.6em}