@font-face{font-family:Portfolio;src:url('inter-variable.woff2') format('woff2');font-weight:100 900;font-display:optional}
:root{--black:#000;--white:#f5f5f3;--margin:32px;--gap:12px;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--black);scrollbar-color:#444 var(--black);scrollbar-width:thin}
body{margin:0;background:var(--black);color:var(--white);font-family:Portfolio,sans-serif}
::selection{background:#dadada;color:#000}
.opening{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:40px var(--margin)}
.masthead{text-align:center;color:#d9d9d7}
.lead-photograph{--lead-height:min(440px,52svh);width:min(calc(100vw - var(--margin)*2),calc(var(--lead-height)*var(--cover-ratio,.75)));aspect-ratio:var(--cover-ratio,.75);max-width:100%}
.js .lead-photograph:not([data-cover-ready]){visibility:hidden}
.js .lead-photograph img{opacity:0}
.js .lead-photograph[data-image-ready] img{opacity:1}
@media(prefers-reduced-motion:no-preference){.js .lead-photograph img{transition:opacity 360ms cubic-bezier(.2,.55,.3,1)}}
.lead-photograph .photograph{width:100%;height:100%;border-radius:16px;overflow:visible}
.lead-photograph img{border-radius:inherit}
h1{font:500 clamp(64px,7vw,104px)/.96 Portfolio,sans-serif;margin:0;letter-spacing:-.03em;font-optical-sizing:auto}
h1 span{display:block}
main{width:calc(100% - var(--margin)*2);max-width:1440px;margin:24px auto 64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
main[data-laid-out]{display:block}
.js main:not([data-laid-out]){visibility:hidden}
.photo-row{display:flex;gap:var(--gap);margin:0 auto var(--gap);align-items:flex-start}
.photograph{display:block;appearance:none;border:0;padding:0;margin:0;background:#000;color:var(--white);cursor:zoom-in;min-width:0;flex:none;overflow:visible;aspect-ratio:var(--ratio,auto)}
.photograph img{display:block;width:100%;height:100%;object-fit:contain;dynamic-range-limit:no-limit}
.photograph:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.photograph:hover{cursor:zoom-in}
.photograph.load-failed{outline:1px solid #555;outline-offset:-1px}
dialog{border:0;padding:0;margin:0;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;background:var(--black);color:var(--white)}
dialog[open]{display:flex;flex-direction:column}
dialog::backdrop{background:#000}
.viewer-toolbar{display:flex;justify-content:flex-end;padding:12px 18px 0;flex:none;height:62px}
.viewer-stage{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;padding:0 64px}
.viewer-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;dynamic-range-limit:no-limit}
.viewer-navigation{display:flex;justify-content:center;gap:12px;height:66px;padding-top:8px;flex:none}
.viewer-toolbar button,.viewer-navigation button{width:44px;height:44px;padding:11px;appearance:none;border:0;border-radius:0;background:transparent;color:var(--white);cursor:pointer}
.viewer-toolbar button:hover,.viewer-navigation button:hover{background:#191919}
.viewer-toolbar button:focus-visible,.viewer-navigation button:focus-visible{outline:2px solid var(--white);outline-offset:0}
.viewer-navigation button:disabled{color:#4b4b4b;cursor:default}
svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square}
.skip{position:fixed;top:8px;left:8px;z-index:5;padding:12px;background:var(--white);color:#000;text-decoration:none;clip-path:inset(100%)}
.skip:focus{clip-path:none;outline:2px solid var(--white);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:900px){:root{--margin:20px;--gap:10px}.viewer-stage{padding:0 20px}}
@media(max-width:700px){.opening{gap:24px;padding:28px var(--margin)}.lead-photograph{--lead-height:min(400px,48svh)}h1{font-size:clamp(52px,16vw,72px)}main{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){:root{--margin:12px;--gap:8px}main{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:24px}.viewer-stage{padding:0 8px}.viewer-toolbar{padding:8px 8px 0;height:56px}.viewer-navigation{padding-bottom:env(safe-area-inset-bottom);height:72px}}
@media(prefers-reduced-motion:no-preference){.viewer-toolbar button,.viewer-navigation button{transition:background-color 140ms ease-out}}

.scroll-cue{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:#a5a5a3;text-decoration:none}
.scroll-cue svg{width:24px;height:24px;stroke-width:1.5}
.scroll-cue:hover{color:var(--white)}
.scroll-cue:focus-visible{outline:2px solid var(--white);outline-offset:2px}
@keyframes scroll-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media(prefers-reduced-motion:no-preference){.scroll-cue svg{animation:scroll-nudge 1400ms ease-in-out 1000ms 3}.scroll-cue:hover svg,.scroll-cue:focus-visible svg{animation-play-state:paused}}

@media(min-width:1600px){.lead-photograph{--lead-height:min(560px,50svh)}}