/* Jono Renton Photographic Works. One photograph at a time on white.
   --m is the window margin: the nav starts --m from the left edge and sits --m above the bottom edge. */
@font-face{font-family:"Fairplex Wide";src:url("/fonts/FairplexWideBook.woff2") format("woff2");font-display:swap}
:root{--paper:#fff;--ink:#111;--grey:#999;--name:#777;
  --font:"Fairplex Wide","Helvetica Neue",Helvetica,Arial,sans-serif;
  --m:clamp(28px,3.8vw,60px);--gap:clamp(28px,5vh,64px);--inset:clamp(0px,5vw,96px);--capH:0px;
  color-scheme:light}
*{box-sizing:border-box}
html,body{height:100%}
html{padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--paper);color:var(--grey);font:400 13px/1.5 var(--font);letter-spacing:.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a,button{color:var(--grey);text-decoration:none;font:inherit;background:none;border:0;padding:0;cursor:pointer;transition:color .2s}
a:hover,button:hover,a[aria-current="page"]{color:var(--ink)}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
img{display:block;max-width:100%;height:auto}

.site{min-height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;row-gap:var(--gap);padding-block:var(--m);
  padding-left:max(var(--m),env(safe-area-inset-left,0px));padding-right:max(var(--m),env(safe-area-inset-right,0px))}
.top,.foot{line-height:1}
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.name{grid-column:2;margin:0;font-size:18px;line-height:1;color:var(--name);text-transform:uppercase;letter-spacing:2px;text-align:center}
.name a{color:inherit}
.top .right{grid-column:3;justify-self:end}
.count{font-variant-numeric:tabular-nums;letter-spacing:1px}
.top .info{display:none}
.foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.foot nav{display:flex;flex-wrap:wrap;gap:12px clamp(16px,2vw,28px);text-transform:uppercase;letter-spacing:2px}

/* Without JavaScript (and for crawlers): every photograph in a simple column */
.slides{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap)}
.slides figure{margin:0}
figcaption{padding-top:12px;font-size:12px;text-align:center}
.hit{display:none}

/* With JavaScript: one at a time, crossfading */
.js body{overflow:hidden}
.js .site{height:100%}
.js .stage{position:relative;min-height:0;margin-inline:var(--inset);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.js .stage[data-captions]{--capH:40px}
.js .slides{position:absolute;inset:0;display:block}
.js .slides li{position:absolute;inset:0;display:none;opacity:0;transition:opacity .9s ease}
.js .slides li.near{display:block}
.js .slides li.on{opacity:1}
.js .slides figure{height:100%}
.js .slides img{width:100%;height:calc(100% - var(--capH));object-fit:contain}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,32px)}
.js .pair{grid-template-rows:minmax(0,1fr)}
.js .slides .pair img{width:100%;height:100%;object-fit:contain;min-height:0}
.js .pair img:first-child{object-position:right center}.js .pair img:last-child{object-position:left center}
.js figcaption{position:absolute;left:0;right:0;bottom:0;padding:0;line-height:20px}
.js .hit{display:block;position:absolute;top:0;bottom:0;width:50%;z-index:2}
.hit.prev{left:0;cursor:w-resize}.hit.next{right:0;cursor:e-resize}
.no-js .info,.no-js .count{display:none}

/* Information */
dialog{border:0;padding:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:var(--paper);color:#777;opacity:0;transition:opacity .4s,display .4s allow-discrete,overlay .4s allow-discrete}
dialog[open]{opacity:1;display:grid;place-items:center;overflow:auto}
@starting-style{dialog[open]{opacity:0}}
dialog::backdrop{background:var(--paper)}
dialog .in{max-width:34em;text-align:center;font-size:14px;line-height:1.7;padding:96px 24px 64px}
dialog h2{margin:0 0 24px;font-weight:400;font-size:18px;color:#555;text-transform:uppercase;letter-spacing:2px}
dialog p{margin:0 0 14px}
dialog ul{list-style:none;margin:0;padding:0}
dialog .spec{margin-top:28px}
dialog h3{margin:0 0 4px;font-weight:400;font-size:14px;color:var(--ink)}
dialog a{color:var(--ink);border-bottom:1px solid #ddd}
dialog .close{position:fixed;top:calc(env(safe-area-inset-top,0px) + var(--m));right:max(var(--m),env(safe-area-inset-right,0px))}
.panel{display:none}.panel.show{display:block}

@media (max-width:640px){
  :root{--m:24px;--gap:28px;--inset:0px}
  .count{display:none}
  .js .top .info{display:inline}
  .foot .info{display:none}
  .foot nav{gap:10px 16px;letter-spacing:1.4px;font-size:11px}
  .name{font-size:15.5px}
}
@media (max-width:640px) and (orientation:portrait){
  .js .pair{grid-template-columns:none;grid-template-rows:1fr 1fr;gap:12px}
  .js .pair img:first-child{object-position:center bottom}.js .pair img:last-child{object-position:center top}
}
@media (orientation:landscape) and (max-height:500px){:root{--m:18px;--gap:14px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}