@property --edge{syntax:"<length>";inherits:false;initial-value:10px}
@view-transition{navigation:auto}
:root{--bg:#F3F4F2;--ink:#0C0D10;--ink2:#3a3c42;--mute:#6B6E75;--line:rgba(12,13,16,.08);--chip:#E6E7E3;--blue:#1532FF;--fill:#1532FF;--haze:21,50,255;--ease:cubic-bezier(.16,1,.3,1);--pad:clamp(18px,2.4vw,36px)}
*{box-sizing:border-box;margin:0;padding:0}
/* photo colour: opening a photo washes the site in that photo's colour, and it stays */
html.tint{--mute:#55585F;--line:rgba(12,13,16,.1);--chip:rgba(12,13,16,.06)}
html{background:var(--bg);transition:background-color 1.2s var(--ease)}
body{background:var(--bg);transition:background-color 1.2s var(--ease),color 1.2s var(--ease);color:var(--ink);font:500 14px/1.5 "Satoshi",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
.pad{padding-left:var(--pad);padding-right:var(--pad)}

/* soft photographs: edges melt into the page, and open up on hover */
/* soft photographs: a short, eased feather and rounded corners; opens fully on hover */
.soft{--edge:10px;border-radius:12px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) calc(var(--edge)*.2),rgba(0,0,0,.55) calc(var(--edge)*.5),rgba(0,0,0,.88) calc(var(--edge)*.8),#000 var(--edge),#000 calc(100% - var(--edge)),rgba(0,0,0,.88) calc(100% - var(--edge)*.8),rgba(0,0,0,.55) calc(100% - var(--edge)*.5),rgba(0,0,0,.18) calc(100% - var(--edge)*.2),transparent 100%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.18) calc(var(--edge)*.2),rgba(0,0,0,.55) calc(var(--edge)*.5),rgba(0,0,0,.88) calc(var(--edge)*.8),#000 var(--edge),#000 calc(100% - var(--edge)),rgba(0,0,0,.88) calc(100% - var(--edge)*.8),rgba(0,0,0,.55) calc(100% - var(--edge)*.5),rgba(0,0,0,.18) calc(100% - var(--edge)*.2),transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) calc(var(--edge)*.2),rgba(0,0,0,.55) calc(var(--edge)*.5),rgba(0,0,0,.88) calc(var(--edge)*.8),#000 var(--edge),#000 calc(100% - var(--edge)),rgba(0,0,0,.88) calc(100% - var(--edge)*.8),rgba(0,0,0,.55) calc(100% - var(--edge)*.5),rgba(0,0,0,.18) calc(100% - var(--edge)*.2),transparent 100%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.18) calc(var(--edge)*.2),rgba(0,0,0,.55) calc(var(--edge)*.5),rgba(0,0,0,.88) calc(var(--edge)*.8),#000 var(--edge),#000 calc(100% - var(--edge)),rgba(0,0,0,.88) calc(100% - var(--edge)*.8),rgba(0,0,0,.55) calc(100% - var(--edge)*.5),rgba(0,0,0,.18) calc(100% - var(--edge)*.2),transparent 100%);mask-composite:intersect;
  transition:--edge .9s var(--ease),transform .9s var(--ease)}
.soft img{transition:transform 1.4s var(--ease)}
.soft:hover{--edge:2px}
.soft:hover img{transform:scale(1.02)}
.soft.open{--edge:0px}

/* header */
.top{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-top:clamp(18px,2.4vw,32px)}
.brand h1,.brand .name{font:600 clamp(40px,5.4vw,84px)/.92 "Clash Display",sans-serif;letter-spacing:-.025em;display:block}
.brand.small .name{font-size:clamp(22px,2vw,30px)}
.brand .sub{margin-top:14px;display:flex;flex-wrap:wrap;gap:4px 18px;color:var(--mute)}
.brand .sub b{font-weight:500;color:var(--ink)}
.menu{display:flex;gap:clamp(14px,2vw,30px);padding-top:8px;font-size:15px}
.menu a{position:relative;color:var(--mute);transition:color .3s}
.menu a:hover,.menu a[aria-current]{color:var(--ink)}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.menu a:hover::after,.menu a[aria-current]::after{transform:none}
.menu a.mail{color:var(--blue)}
.menu-btn{display:none;padding-top:6px;font-size:15px}

/* page heading for inner pages */
.ph{padding-top:clamp(56px,10vh,120px);padding-bottom:clamp(24px,4vh,48px)}
.ph h1{font:600 clamp(44px,7vw,110px)/.9 "Clash Display",sans-serif;letter-spacing:-.03em}

/* reveal on load / scroll */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* footer */
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(16px,3vw,48px);padding-top:clamp(40px,6vh,80px);padding-bottom:clamp(18px,2.4vw,32px)}
.home .foot{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) minmax(0,1fr);align-items:start}
.inner .foot{border-top:1px solid var(--line);margin-top:clamp(72px,11vh,140px);padding-top:clamp(28px,4vh,48px)}
.foot .sign{font:600 clamp(30px,3.6vw,56px)/.92 "Clash Display",sans-serif;letter-spacing:-.025em;align-self:start;transition:color .3s}
.foot .sign:hover{color:var(--blue)}
.foot.two{grid-template-columns:2.3fr 1fr}
.foot h3,.k{font:500 12px/1 "Satoshi",sans-serif;color:var(--mute);margin-bottom:10px;display:block}
.rows>*{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;border-top:1px solid var(--line);transition:border-color .4s,padding .5s var(--ease)}
.rows>:last-child{border-bottom:1px solid var(--line)}
.rows span{color:var(--mute);text-align:right;transition:color .35s}
.rows b{font-weight:500;transition:color .35s}
.rows b,.rows span{position:relative;z-index:1}
/* clickable rows: a soft blue haze settles over the row and follows the pointer */
.rows a::before,.idx>*::before{content:"";position:absolute;inset:-6px -18px;border-radius:18px;pointer-events:none;
  background:radial-gradient(55% 120% at var(--mx,35%) 50%,rgba(var(--haze),.26),rgba(var(--haze),.1) 55%,rgba(var(--haze),0) 82%);
  filter:blur(10px);opacity:0;transform:scale(.97);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.rows a:hover::before,.rows a:focus-visible::before,.idx>*:hover::before,.idx>*:focus-visible::before{opacity:1;transform:none}
.rows a:hover,.rows a:focus-visible{padding-left:10px}
.rows a:hover span,.rows a:focus-visible span{color:var(--blue)}
.rows a:focus-visible,.idx>*:focus-visible{outline:none}
/* home: the selected work is the first thing to read after the photographs */
.sel .rows>*{padding:clamp(12px,1.6vh,16px) 0}
.sel .rows b{font:600 clamp(19px,1.75vw,27px)/1.1 "Clash Display",sans-serif;letter-spacing:-.01em}
.sel .rows span{font-size:clamp(14px,1.05vw,16px)}
.sel .rows{counter-reset:sel}
.sel .rows>*{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto}
.sel .rows>*::after{counter-increment:sel;content:counter(sel,decimal-leading-zero);grid-row:1;grid-column:1;position:relative;z-index:1;font:500 12px/1 "Satoshi",sans-serif;color:var(--mute)}
.sel .rows b{grid-column:2}
.sel .rows span{grid-column:3;color:var(--ink);font-variant-numeric:tabular-nums}
.sel .rows span::after{content:" →";display:inline-block;width:1.3em;opacity:.35;transition:opacity .3s,transform .45s var(--ease)}
.sel .rows a:hover span::after,.sel .rows a:focus-visible span::after{opacity:1;transform:translateX(4px)}
.sel .k{color:var(--ink);font-weight:700;font-size:11px;letter-spacing:.09em;text-transform:uppercase}

/* now playing */
.song{display:flex;align-items:center;gap:12px;width:100%;text-align:left}
.song .art{position:relative;width:60px;height:60px;flex:none;border-radius:6px;overflow:hidden;background:var(--chip)}
.song .art img{width:100%;height:100%;object-fit:cover}
.song .art i{position:absolute;inset:0;display:grid;place-items:center;background:rgba(12,13,16,.35);color:#fff;font-style:normal;font-size:12px;opacity:0;transition:opacity .3s}
.song:hover .art i,.song.on .art i{opacity:1}
.song b{display:block;font-weight:500;max-width:26ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song span{color:var(--mute)}
.prog{height:1px;background:var(--line);margin-top:10px;position:relative;overflow:hidden}
.prog u{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink)}
.skip{margin-top:10px;display:flex;gap:14px;color:var(--mute)}
.skip button:hover{color:var(--ink)}

/* the photo "place": a photo grows out of its spot into its own room */
.place{position:fixed;inset:0;z-index:60;pointer-events:none}
.place .wash{position:absolute;inset:0;background:var(--bg);opacity:0;transition:opacity .6s var(--ease),background-color 1.2s var(--ease)}
.place.on{pointer-events:auto}
.place.on .wash{opacity:.97}
.place .fly{position:fixed;left:0;top:0;transform-origin:0 0;will-change:transform;border-radius:10px;overflow:hidden}
.place .fly img{width:100%;height:100%;object-fit:cover}
.place .ui{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease) .25s}
.place.on .ui{opacity:1}
.place .cap{position:absolute;left:var(--pad);bottom:var(--pad);font-size:15px}
.place .cap span{display:block;color:var(--mute);font-size:13px;margin-top:2px}
.place .x{position:absolute;right:var(--pad);top:var(--pad);font-size:15px}
.place .nav{position:absolute;right:var(--pad);bottom:var(--pad);display:flex;gap:18px;font-size:15px;color:var(--mute)}
.place .nav button:hover,.place .x:hover{color:var(--ink)}

@media (max-width:760px){
  .top{flex-direction:column;gap:12px;padding-top:26px}
  .home .menu{flex-wrap:wrap;gap:8px 15px;font-size:14px}
  .inner .menu{display:none}
  .inner .menu-btn{display:block;position:absolute;right:var(--pad);top:22px}
  .inner .top.open .menu{display:flex;flex-direction:column;gap:12px;font-size:22px}
  .foot,.home .foot,.foot.two{grid-template-columns:1fr;gap:28px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important}@view-transition{navigation:none}}

/* the name glides between pages */
.brand h1,.brand .name{view-transition-name:jf-name;width:fit-content}
.menu{view-transition-name:jf-menu}
::view-transition-group(jf-name),::view-transition-group(jf-menu){animation-duration:.7s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root){animation:.25s ease both jf-out}
::view-transition-new(root){animation:.55s cubic-bezier(.16,1,.3,1) both jf-in}
@keyframes jf-out{to{opacity:0}}
@keyframes jf-in{from{opacity:0;transform:translateY(10px)}}
.vt .brand.rv{opacity:1;transform:none;transition:none}

/* photos settle into focus as they scroll in */
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  #grid .cell img,.venture .shot img,.ads .soft img{animation-name:jf-lens;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:entry 0% cover 45%}
}}
@keyframes jf-lens{from{scale:1.16}to{scale:1}}

/* keyboard focus survives the soft photo mask */
.soft:focus-visible{--edge:0px;outline:3px solid var(--blue);outline-offset:-3px}
.menu a{white-space:nowrap}
.rows a{min-height:44px;align-items:center}
/* viewer controls: 44px targets, clear of the notch and home bar */
.place .x,.place .nav button{min-height:44px;padding:0 10px;margin:0 -10px}
.place .nav{gap:0}
.place .x{top:max(calc(var(--pad) - 10px),env(safe-area-inset-top))}
.place .nav{bottom:max(calc(var(--pad) - 10px),env(safe-area-inset-bottom))}
.place .cap{bottom:max(var(--pad),env(safe-area-inset-bottom))}
@media (max-width:860px){.top{flex-direction:column;gap:12px}}
@media (max-width:760px){
  .home .menu{display:grid;grid-template-columns:repeat(3,max-content);gap:0 22px;font-size:14px;padding-top:0}
  .home .menu a,.home .menu .day{padding:12px 0;text-align:left}
  .home .menu a::after{bottom:8px}
  .inner .menu-btn{top:12px;right:calc(var(--pad) - 12px);padding:16px 12px 8px}
  .inner .top.open .menu{gap:0}
  .inner .top.open .menu a,.inner .top.open .menu .day{padding:6px 0;text-align:left}
}
@media print{.js .rv{opacity:1!important;transform:none!important}}

/* no browser back-swipe when dragging the reel sideways */
html,body{overscroll-behavior-x:none}
.reel{overscroll-behavior:contain}
/* resolving back to light */
.snap,.snap *{transition:none!important}
html.ripple::view-transition-old(root),html.ripple::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.ripple::view-transition-new(root){z-index:2}
.tint .reel .me,.tint .about>.soft{cursor:pointer}

/* where Joshua works, boxed beside the name */
.nameline{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);flex-wrap:wrap}
.where{list-style:none;display:grid;gap:3px;padding:10px 14px 10px 12px;border:1px solid rgba(12,13,16,.14);border-radius:12px;font:700 12px/1.25 "Satoshi",sans-serif;letter-spacing:.01em;white-space:nowrap}
.where li{display:flex;align-items:center;gap:8px}
.where li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 0 rgba(21,50,255,.45);animation:jf-ping 2.6s var(--ease) infinite}
.where li:nth-child(2)::before{animation-delay:.4s}.where li:nth-child(3)::before{animation-delay:.8s}
@keyframes jf-ping{0%{box-shadow:0 0 0 0 rgba(21,50,255,.45)}70%,100%{box-shadow:0 0 0 7px rgba(21,50,255,0)}}
@media (prefers-reduced-motion:reduce){.where li::before{animation:none}}
@media (max-width:760px){.where{display:flex;gap:14px;padding:8px 12px}}

/* home music: now playing, then what's up next */
#np .queue{margin-top:18px;display:grid}
#np .queue .k{margin-bottom:6px}
#np .queue button{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:7px 0;text-align:left;border-top:1px solid var(--line)}
#np .queue button::before{content:"";position:absolute;inset:-1px -10px;border-radius:12px;background:radial-gradient(60% 130% at 30% 50%,rgba(var(--haze),.18),rgba(var(--haze),0) 80%);opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
#np .queue button:hover::before{opacity:1}
#np .queue img{width:36px;height:36px;border-radius:6px;object-fit:cover;position:relative}
#np .queue span{min-width:0;position:relative}
#np .queue b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#np .queue i{display:block;font-style:normal;color:var(--mute);font-size:13px}
#np .queue em{font-style:normal;font-size:11px;color:var(--blue);opacity:0;transition:opacity .3s;position:relative}
#np .queue button:hover em{opacity:1}
#np .queue button:hover b{color:var(--blue)}
#np{min-width:0}
#np .song>div:not(.art){min-width:0;flex:1}
#np .song b{max-width:100%}
main{overflow-x:clip}
/* home: the three columns end on one line */
.home .foot{align-items:stretch}
.home .foot>*{display:flex;flex-direction:column}
.home .foot>div:last-child .rows{flex:1;display:grid;grid-auto-rows:1fr}
.home #np .queue{margin-top:auto;padding-top:14px}
.home #np .queue button:last-child{border-bottom:1px solid var(--line)}
@media (max-width:760px){.home .foot>div:last-child .rows{display:block}.home #np .queue{margin-top:18px}}
.home .sel .rows{flex:1;display:grid;grid-auto-rows:1fr}
.home #np .queue{padding-top:10px}
.home #np .queue button{padding:5px 0}
@media (max-width:760px){.home .sel .rows{display:block}}

/* full-screen menu + floating Menu pill (phones and tablets) */
.pill{display:none;position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:55;align-items:center;gap:9px;padding:13px 20px 13px 16px;border-radius:999px;background:#0C0D10;color:#fff;font:600 15px/1 "Satoshi",sans-serif;box-shadow:0 12px 30px -10px rgba(12,13,16,.55);transition:transform .5s var(--ease),opacity .3s}
.pill i{width:8px;height:8px;border-radius:50%;background:#5C72FF}
.pill:active{transform:scale(.95)}
.sheet-on .pill{opacity:0;pointer-events:none}
@media (max-width:860px){.pill{display:flex}}
.sheet{position:fixed;inset:0;z-index:58;background:var(--bg);padding:max(18px,env(safe-area-inset-top)) var(--pad) max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow-y:auto;opacity:0;transition:opacity .4s var(--ease)}
.sheet-on .sheet{opacity:1}
.sheet-top{display:flex;justify-content:space-between;align-items:center;min-height:44px}
.sheet-home{font:600 22px/1 "Clash Display",sans-serif;letter-spacing:-.02em}
.sheet-x{font-size:15px;min-height:44px;padding:0 4px}
.sheet-main{display:flex;flex-direction:column;margin-top:clamp(28px,7vh,64px)}
.sheet-main a{display:flex;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font:600 clamp(36px,10vw,64px)/1.05 "Clash Display",sans-serif;letter-spacing:-.025em}
.sheet-main a span{font:500 12px/1 "Satoshi",sans-serif;color:var(--mute);letter-spacing:0;min-width:1.6em}
.sheet-main a[aria-current]{color:var(--blue)}
.sheet-side{display:flex;gap:22px;margin-top:28px;font-size:17px}
.sheet-side a.mail{color:var(--blue)}
.sheet-where{margin-top:auto;padding-top:28px;font:700 12px/1.4 "Satoshi",sans-serif;color:var(--mute);letter-spacing:.02em}
.sheet-main a,.sheet-side,.sheet-where{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i)*45ms + 60ms)}
.sheet-on .sheet-main a,.sheet-on .sheet-side,.sheet-on .sheet-where{opacity:1;transform:none}