/* aariv.me. A homage to thibaud.film, rebuilt from scratch. Fonts are OFL stand-ins. */
@font-face{font-family:"Inter Tight";src:url(/assets/fonts/inter-tight.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader-italic.woff2) format("woff2");font-weight:300 500;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono.woff2) format("woff2");font-weight:400 500;font-display:swap}

:root{
  --bg:#0b0b0c; --bg2:#121214; --fg:#ecebe7; --fg2:#b9b8b3; --mute:#7c7c80; --rule:rgba(236,235,231,.24);
  --amber:#ffb46a;
  --sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(16px,2vw,28px);
  --ease:cubic-bezier(.22,.8,.2,1);
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{margin:0;font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg)}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em,.it{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.015em}
::selection{background:var(--amber);color:#111}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.skip{position:absolute;left:var(--pad);top:-60px;z-index:100;background:var(--fg);color:var(--bg);padding:8px 12px;font:500 12px var(--mono)}
.skip:focus{top:12px}
.mono{font:400 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.04em}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* nav: five columns, a hairline under each */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--pad);padding:14px var(--pad) 0;pointer-events:none}
.nav a,.nav button{pointer-events:auto;position:relative;display:block;padding-bottom:10px;font:400 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--fg)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);transition:background .4s}
.nav a::before{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--fg);transition:width .6s var(--ease);z-index:1}
.nav a:hover::before,.nav a[aria-current]::before{width:100%}
.nav .count{color:var(--mute)}
.nav .nav-menu{display:none;background:none;border:0;color:var(--fg);cursor:pointer;text-align:right;padding:0 0 10px}
.nav::before{content:"";position:absolute;inset:0 0 -56px;background:linear-gradient(var(--bg) 0%,var(--bg) 45%,rgba(11,11,12,0) 100%);opacity:.92;z-index:-1;pointer-events:none}

/* films */
.film{position:absolute;inset:0;overflow:hidden;background:#050506}
.film video,.film img{width:100%;height:100%;object-fit:cover}
.film-toggle{position:absolute;z-index:5;right:var(--pad);bottom:var(--pad);width:34px;height:34px;padding:0;border-radius:50%;border:1px solid rgba(236,235,231,.2);background:rgba(11,11,12,.6);color:var(--fg2);display:grid;place-items:center;cursor:pointer;transition:color .3s,border-color .3s}
.film-toggle:hover{color:var(--fg);border-color:rgba(236,235,231,.45)}
.film-toggle svg{width:9px;height:9px}
.film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.15) 38%,rgba(11,11,12,0) 60%,rgba(11,11,12,.55) 100%);pointer-events:none}

/* home hero */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero h1{position:absolute;z-index:4;left:var(--pad);right:var(--pad);top:clamp(58px,7vh,84px);margin:0;font:400 clamp(46px,8.2vw,156px)/.9 var(--sans);letter-spacing:-.05em;text-wrap:balance}
.hero h1 em{font-size:1.02em;letter-spacing:-.03em}
.hero .meta{position:absolute;z-index:4;right:var(--pad);top:clamp(70px,8.4vh,100px);text-align:right;color:var(--fg2)} /* top right: the hero film never reaches this corner */
.hero .meta span{display:block}

/* sections */
.sec{position:relative;padding:clamp(80px,12vw,180px) var(--pad);border-top:1px solid var(--rule)}
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pad);margin-bottom:clamp(36px,5vw,72px)}
.sec-head > .mono{grid-column:span 3;color:var(--mute)}
.lede{grid-column:4/span 8;margin:0;font:300 clamp(24px,2.6vw,42px)/1.14 var(--sans);letter-spacing:-.025em;text-wrap:pretty}

/* the interest index: list left, big title centre, film behind (thibaud's works viewer) */
.index{position:relative;min-height:100svh;padding:clamp(90px,10vw,130px) var(--pad) var(--pad);overflow:hidden;border-top:1px solid var(--rule)}
.index .bg{position:absolute;inset:0;opacity:.34;transition:opacity .8s}
.index .bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease);filter:blur(14px);transform:scale(1.08)} /* atmosphere, not a second diagram: the sharp film lives in the card */
.index .bg video.on{opacity:1}
.index .bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(11,11,12,.25),rgba(11,11,12,.9) 75%)}
.index-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pad);min-height:calc(100svh - 170px)}
.index-list{grid-column:1/span 3;align-self:start;margin:0;padding:0;list-style:none}
.index-list .head{color:var(--mute);margin-bottom:18px}
.index-list a{display:flex;gap:12px;padding:5px 0;color:var(--mute);transition:color .3s}
.index-list a .n{width:36px;flex:none;white-space:nowrap;color:var(--mute)}
.index-list a.on,.index-list a:hover,.index-list a:focus-visible{color:var(--fg)}
.index-list a.on .n::before{content:"";display:inline-block;width:6px;height:6px;background:var(--fg);margin-right:6px;vertical-align:1px}
.index-stage{grid-column:4/span 9;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;pointer-events:none}
.index-stage .t{margin:0;font:400 clamp(52px,9vw,170px)/.88 var(--sans);letter-spacing:-.05em}
.index-stage .t em{letter-spacing:-.03em}
.index-stage .l{margin:22px 0 0;max-width:34ch;color:var(--fg2);font-size:clamp(16px,1.3vw,19px)}
.index-card{position:absolute;z-index:3;right:var(--pad);bottom:var(--pad);width:min(300px,34vw);border-radius:6px;overflow:hidden;background:#000;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.index-card video{width:100%;aspect-ratio:16/9;object-fit:cover}
.index-card .cap{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;background:rgba(11,11,12,.9);color:var(--fg2);border-top:1px solid var(--rule)}
.index-foot{position:relative;z-index:2;display:flex;justify-content:space-between;color:var(--mute);margin-top:18px}

/* about teaser and detail layouts */
.split{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pad);align-items:start}
.portrait{grid-column:1/span 4;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:#111}
/* head and shoulders only (Aariv's ask): a CSS crop of the photo, x 27 to 76%, y 12 to 46% */
.portrait img{position:absolute;max-width:none;width:207%;height:auto;left:-56.5%;top:-35.3%;filter:saturate(.9) contrast(1.02)}
.split .copy{grid-column:6/span 7}
/* the a. mark stands where a photo would: no pictures of him on this site (safety) */
.mark{grid-column:1/span 3;margin:0;aspect-ratio:1}
.mark img{display:block;width:100%;height:100%}
.big{margin:0 0 1em;font:300 clamp(22px,2.3vw,36px)/1.2 var(--sans);letter-spacing:-.02em;text-wrap:pretty}
.facts{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.facts li{display:grid;grid-template-columns:minmax(110px,32%) 1fr;gap:var(--pad);padding:12px 0;border-bottom:1px solid var(--rule)}
.facts .k{font:400 11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}
.facts .v{font-size:16px}
.textlink{display:inline-flex;gap:10px;align-items:center;margin-top:28px;padding-bottom:6px;border-bottom:1px solid var(--fg);font:400 12px var(--mono);text-transform:uppercase;letter-spacing:.04em}
.textlink:hover{color:var(--amber);border-color:var(--amber)}

.now-list{grid-column:4/span 9;margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.now-list li{display:grid;grid-template-columns:minmax(90px,22%) 1fr;gap:var(--pad);padding:18px 0;border-bottom:1px solid var(--rule);font-size:clamp(17px,1.5vw,21px);line-height:1.35}
.now-list .k{padding-top:5px}

/* interest page */
.p-hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.p-hero .film.is-photo{left:30%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 38%);mask-image:linear-gradient(90deg,transparent,#000 38%)} /* the photo sits right, the headline stays on dark */
.film img.photo{object-position:60% 50%}
.detail .copy p.credit{margin:28px 0 0;font:400 11px/1.6 var(--mono);letter-spacing:.03em;color:var(--mute);max-width:60ch}.credit a{color:var(--fg2);text-decoration:underline;text-underline-offset:3px}
.p-hero .film::after{background:radial-gradient(ellipse 75% 60% at 0% 88%,rgba(11,11,12,.72),rgba(11,11,12,0) 70%),linear-gradient(180deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.15) 30%,rgba(11,11,12,0) 50%,rgba(11,11,12,.6) 100%)} /* a scrim behind the headline corner: the films are lit scenes now, not lines on black */
.p-hero .inner{position:absolute;z-index:4;left:var(--pad);right:var(--pad);bottom:clamp(90px,14vh,150px)}
.p-hero h1{margin:0;font:400 clamp(56px,10vw,190px)/.86 var(--sans);letter-spacing:-.055em}
.p-hero .line{margin:22px 0 0;color:var(--fg2);font-size:clamp(17px,1.4vw,21px)}
.p-hero .crumb{position:absolute;z-index:4;left:var(--pad);top:clamp(58px,7vh,84px);color:var(--fg2)}
.p-hero .crumb a:hover{color:var(--fg)}
.detail{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pad);padding:clamp(80px,10vw,150px) var(--pad);border-top:1px solid var(--rule)}
.detail aside{grid-column:1/span 4}
.detail aside .facts{position:sticky;top:90px}
.detail .copy{grid-column:6/span 7}
.detail .copy p{margin:0 0 .9em;font:300 clamp(21px,2vw,30px)/1.3 var(--sans);letter-spacing:-.015em;text-wrap:pretty}
.detail figure{margin:clamp(40px,5vw,80px) 0 0}
.detail figure img{width:100%;height:auto;border-radius:4px;background:#111}
.detail figcaption{margin-top:12px;color:var(--mute);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.detail figcaption .open{color:var(--fg2);white-space:nowrap}.detail figcaption .open:hover{color:var(--fg)}
.detail figure.grid .cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1vw,14px);align-items:start}
.detail figure.grid .cells a{display:block;min-width:0}
.detail figure.grid .cells a:focus-visible img{outline:1px solid var(--amber);outline-offset:3px}
.detail figure.grid figcaption .open{color:var(--mute)}
@media (max-width:560px){.detail figure.grid .cells{grid-template-columns:minmax(0,1fr)}}
.detail .logo{width:88px;height:auto;margin:0 0 28px}
.next{position:relative;display:block;min-height:70svh;overflow:hidden;border-top:1px solid var(--rule)}
.next .film{opacity:.45;transition:opacity .8s}
.next:hover .film{opacity:.7}
.next .inner{position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:var(--pad)}
.next .mono{display:block;margin-top:14px;color:var(--fg2)}
.next h2{margin:10px 0 0;font:400 clamp(48px,8vw,150px)/.88 var(--sans);letter-spacing:-.05em}

/* simple pages */
.page{min-height:100svh;padding:clamp(120px,16vh,190px) var(--pad) clamp(80px,10vw,140px)}
.page h1{margin:0 0 clamp(40px,6vw,90px);font:400 clamp(56px,10vw,190px)/.86 var(--sans);letter-spacing:-.055em}
.page .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pad)}
.page .grid > .mono{grid-column:span 3;color:var(--mute);padding-top:8px}
.page .grid > .body{grid-column:4/span 8}
.page .body p{margin:0 0 .8em;font:300 clamp(21px,2vw,30px)/1.3 var(--sans);letter-spacing:-.015em;max-width:36ch}
.contact-list{margin:0 0 36px;padding:0;list-style:none;border-top:1px solid var(--rule)}
.contact-list a{display:grid;grid-template-columns:minmax(110px,26%) 1fr auto;gap:var(--pad);padding:18px 0;border-bottom:1px solid var(--rule);align-items:baseline;font-size:clamp(22px,2.4vw,36px);letter-spacing:-.02em}
.contact-list a:hover{color:var(--amber)}
.contact-list a>span{min-width:0;overflow-wrap:anywhere}
@media (max-width:560px){.contact-list a{grid-template-columns:1fr auto;gap:6px 12px;font-size:19px}.contact-list a .mono{grid-column:1/-1}}
.about-hero{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pad);align-items:end}
.about-hero h1{grid-column:1/span 7}
.about-hero .mark{grid-column:10/span 3}

/* footer */
.foot{position:relative;padding:clamp(70px,10vw,140px) var(--pad) var(--pad);border-top:1px solid var(--rule);overflow:hidden}
.foot .word{margin:0;font:400 clamp(64px,15.5vw,300px)/.8 var(--sans);letter-spacing:-.06em;white-space:nowrap}
.foot .row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pad);margin-top:clamp(40px,5vw,70px);color:var(--mute)}
.foot .row > *{grid-column:span 3}
.foot .row .films{grid-column:span 6;color:var(--fg2);text-transform:none;font:400 13px/1.5 var(--mono);letter-spacing:0;max-width:52ch}
.foot .links a{display:block}
.foot .links a:hover{color:var(--fg)}

/* reveal: opacity and transform only (a clip on an observed element deadlocks IntersectionObserver) */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}

/* pixel transition canvas */
#px{position:fixed;inset:0;z-index:90;pointer-events:none;width:100%;height:100%}

/* small screens */
@media (max-width:820px){
  .nav{grid-template-columns:1fr auto}
  .nav a:not(.home){display:none}
  .nav .nav-menu{display:block}
  .nav.open{pointer-events:auto;grid-template-columns:1fr;background:var(--bg);height:100svh;align-content:start;gap:0}
  .nav.open a{display:block;font:400 clamp(40px,12vw,64px)/1.05 var(--sans);text-transform:none;letter-spacing:-.04em;padding:10px 0}
  .nav.open a.home{font:400 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.04em;padding-bottom:10px}
  .nav.open .nav-menu{position:absolute;right:var(--pad);top:14px}
  .sec-head,.split,.detail,.index-grid,.page .grid,.about-hero,.foot .row{grid-template-columns:1fr}
  .sec-head > *,.split > *,.detail > *,.index-grid > *,.page .grid > *,.about-hero > *,.foot .row > *{grid-column:1/-1!important}
  .mark{max-width:160px}
  .index-list{margin-bottom:36px}
  .index-stage{justify-content:flex-start;min-height:44svh}
  .index-card{position:relative;right:auto;bottom:auto;width:100%;margin-top:28px}
  .detail aside .facts{position:static}
  .hero .meta{display:none}
  /* phones: the film becomes a full-width 16:9 panel under the headline, so nothing is cropped */
  .hero,.p-hero{height:auto;min-height:0;display:flex;flex-direction:column;gap:20px;padding:92px var(--pad) 28px}
  .hero h1,.p-hero .inner,.p-hero .crumb{position:static;left:auto;right:auto;bottom:auto;top:auto}
  .hero h1{order:1}.hero .film{order:2}
  .p-hero .crumb{order:1}.p-hero .film{order:2}.p-hero .inner{order:3}
  .hero .film,.p-hero .film{position:relative;inset:auto;aspect-ratio:16/9;margin:0 calc(-1 * var(--pad));width:auto}
  .hero .film::after,.p-hero .film::after{background:none}
  .film-toggle{right:12px;bottom:12px}
  .p-hero .film.is-photo{left:auto;-webkit-mask-image:none;mask-image:none}
  .p-hero .film{overflow:hidden}
  .p-hero h1{font-size:clamp(46px,14vw,80px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js [data-reveal]{opacity:1;transform:none}
}

/* copy deterrent (see site.js): no long-press save, no text selection, no image dragging. The contact list stays selectable. */
html{-webkit-touch-callout:none}
body,body *{-webkit-user-select:none;user-select:none}
.contact-list,.contact-list *{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none}
img:not(a img){pointer-events:none}