*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:#fff;font-family:'Jost',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0}

/* One full-screen section per look; scroll down to change look. */
.book{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scrollbar-width:none}
.book::-webkit-scrollbar,.row::-webkit-scrollbar{display:none}
.look,.end{height:100vh;height:100svh;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden}

/* Inside a look: photos fill the full height and sit side by side; swipe sideways. */
.row{height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;outline:none}
.track{display:flex;gap:3px;height:100%;width:max-content;margin:0 auto;will-change:transform}
/* margin:auto centres a strip narrower than the screen (black at the sides) instead of cropping to fill */
.slide{height:100%;flex:0 0 auto;scroll-snap-align:center}
.slide picture{display:contents}
.slide img{height:100%;width:auto;display:block;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}

.nm{position:absolute;top:0;left:0;margin:0;padding:max(16px,env(safe-area-inset-top)) 18px 16px;font-weight:400;font-size:12px;letter-spacing:.34em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.55);z-index:3;pointer-events:none}
.cap{position:absolute;left:0;right:0;bottom:0;padding:44px 18px max(16px,env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.45));display:flex;justify-content:space-between;align-items:flex-end;z-index:3;pointer-events:none;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase}
.cap h2{margin:0;font:inherit}

/* Swipe hint: drifting chevrons at the edge, never styled as a button. */
.edge{position:absolute;top:0;bottom:0;width:56px;z-index:4;display:flex;align-items:center;justify-content:center;transition:opacity .45s;pointer-events:none;cursor:default}
.edge.r{right:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.28))}
.edge.l{left:0;background:linear-gradient(270deg,transparent,rgba(0,0,0,.28));opacity:0}
.edge span{font-size:28px;line-height:1;opacity:0;animation:chev 1.6s ease-in-out infinite;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.edge span+span{animation-delay:.2s;margin-left:-9px}
.edge.l span{animation-name:chevL}
@keyframes chev{0%{opacity:0;transform:translateX(-6px)}50%{opacity:1}100%{opacity:0;transform:translateX(6px)}}
@keyframes chevL{0%{opacity:0;transform:translateX(6px)}50%{opacity:1}100%{opacity:0;transform:translateX(-6px)}}
.look.atEnd .edge.r{opacity:0}
.look.moved .edge.l{opacity:1}
@media (hover:none){.look.moved .edge.r{opacity:0}}
/* Mouse users can't swipe: the edges become clickable (plus trackpad and ← → keys). */
@media (hover:hover) and (pointer:fine){
  .edge{pointer-events:auto;cursor:pointer}
  .edge:hover span{animation:none;opacity:1}
  .look.atEnd .edge.r,.look:not(.moved) .edge.l{pointer-events:none}
}

/* Cover: one portrait on narrow screens (nothing to swipe), three in a strip on wide screens. */
.cover .wide-only{display:none}
.cover .edge{display:none}

/* Wide screens (tablet landscape, laptop, desktop). */
@media (min-aspect-ratio:1/1){
  .slide{scroll-snap-align:start}
  .nm{padding:22px 26px;font-size:13px}
  .cap{padding:50px 26px 20px}
  .edge{width:90px}
  .edge span{font-size:34px}
  .cover .wide-only{display:block}
  .cover .edge{display:flex}
}

/* Closing screen: stats + contact. */
.end{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;text-align:center;padding:24px}
.end p{margin:0}
.end .n{font-size:16px;letter-spacing:.36em;text-transform:uppercase}
.end .tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9a9a9a;font-weight:300}
.stats{display:grid;grid-template-columns:repeat(2,auto);gap:10px 28px;margin:8px 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:left}
.stats div{display:contents}
.stats dt{color:#8a8a8a;font-weight:300}
.stats dd{margin:0}
.contact{display:flex;gap:28px;margin-top:6px}
.lk{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#fff;text-decoration:none;border-bottom:1px solid #666;padding-bottom:3px;cursor:pointer}
.lk:hover,.lk:focus-visible{border-color:#fff}
.lk[disabled]{opacity:.5;cursor:default}
.ts:empty{display:none}
.email{min-height:1.4em;font-size:13px;letter-spacing:.06em}
.email a{color:#fff}
.email .copy{margin-left:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9a9a9a;cursor:pointer}
.email .err{color:#d99;font-size:12px}
@media (min-aspect-ratio:1/1){.stats{grid-template-columns:repeat(4,auto)}}

@media (prefers-reduced-motion:reduce){.edge span{animation:none;opacity:.9}}