*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#151515;color:#fff}
body{font-family:Arial,Helvetica,sans-serif}
main{position:relative;min-height:100svh;min-height:100dvh;isolation:isolate;--edge:clamp(32px,5vw,80px)}
.diptych,.shade{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.diptych{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden}
.photograph{width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;object-position:var(--position,center)}
.shade{z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.06) 50%,transparent 75%)}
.identity{position:absolute;left:var(--edge);top:50%;transform:translateY(-50%);max-width:calc(50% - var(--edge) * 2)}
h1{margin:0}
.logo{display:block;width:clamp(190px,22vw,330px);max-width:100%;height:auto}
nav{position:absolute;left:calc(50% + 12px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px}
a{color:inherit;display:flex;align-items:center;justify-content:center;width:44px;min-height:44px;border-radius:50%;transition:background .15s}
a svg{width:21px;height:21px;filter:drop-shadow(0 1px 3px #000b)}
a:hover{background:#ffffff22}
a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(max-height:480px) and (orientation:landscape){main{--edge:24px}.logo{width:140px}}
@media(max-width:900px) and (orientation:portrait){
 .diptych{grid-template-columns:minmax(0,1fr)}
 #photograph-right{display:none}
 .identity{top:max(28px,env(safe-area-inset-top));transform:none;max-width:calc(100% - var(--edge) * 2)}
 nav{left:calc(var(--edge) - 10px);top:auto;bottom:max(28px,env(safe-area-inset-bottom));transform:none;flex-direction:row;gap:4px}
 .shade{background:linear-gradient(110deg,#0009,transparent 80%)}
}
@media(max-width:600px) and (orientation:portrait){
 main{--edge:18px}
 .logo{width:180px}
 .photograph{object-position:var(--mobile-position,60% center)}
}

.photo-credit{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));margin:0;color:#fff;opacity:.5;font-size:10px;font-weight:400;line-height:1.2;letter-spacing:.08em;writing-mode:vertical-rl;transform:rotate(180deg);pointer-events:none}
.credit-left{right:calc(50% + 16px)}
.credit-right{right:max(16px,env(safe-area-inset-right))}
@media(max-width:900px) and (orientation:portrait){
 .credit-left{right:max(16px,env(safe-area-inset-right))}
 .credit-right{display:none}
}

.logo{dynamic-range-limit:no-limit}
.logo-picture{display:block}