*{box-sizing:border-box}body{margin:0;background:#fff;color:#232323;font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}header{height:88px;display:flex;justify-content:space-between;align-items:center;padding:0 36px}.monogram{font-family:Georgia,serif;font-size:42px;letter-spacing:-4px;line-height:1}nav{display:flex;gap:26px;font-size:11px}nav a{padding:8px 0;color:#8b8b8b}nav a[aria-current],nav a:hover{color:#161616}.collage{width:100%;display:flex;flex-wrap:wrap;overflow:hidden}.photo{position:relative;padding:0;border:0;background:#e8e7e4;overflow:hidden;display:block;flex:none}.photo img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.3,1)}.photo span{position:absolute;left:24px;bottom:22px;font-size:13px;font-weight:normal;color:#fff;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;z-index:1;text-shadow:0 1px 15px #0006}.photo:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#0003);opacity:0;transition:opacity .25s}.photo:hover img,.photo:focus-visible img{transform:scale(1.035)}.photo:hover span,.photo:focus-visible span,.photo:hover:after,.photo:focus-visible:after{opacity:1;transform:none}button:focus-visible,a:focus-visible{outline:2px solid #b8a088;outline-offset:-4px}#contact{min-height:calc(100dvh - 88px);padding:8vh 12vw 12vh;display:flex;align-items:center;justify-content:center;gap:8vw}#contact[hidden]{display:none}.portrait{width:300px;max-width:40vw;aspect-ratio:3/4;background:#eeedeb;overflow:hidden}.portrait svg{width:100%;height:100%;fill:#d8d6d2}.contact-copy h1{font-size:23px;font-weight:normal;margin:0 0 20px}.contact-copy p{font-size:12px;line-height:1.6;margin:0 0 18px}.contact-copy small{display:block;font-size:10px;line-height:1.8;color:#aaa;margin-top:50px}dialog{position:fixed;inset:0;border:0;padding:0;background:transparent;color:#fff;max-width:none;max-height:none;width:100%;height:100dvh;margin:0;overflow:hidden}dialog::backdrop{background:#121212b8;backdrop-filter:grayscale(1) brightness(.65) blur(3px);-webkit-backdrop-filter:grayscale(1) brightness(.65) blur(3px)}dialog[open]{display:grid;grid-template-rows:minmax(0,1fr) 95px;gap:24px;padding:48px 70px 24px}.stage{min-height:0;display:flex;justify-content:center;align-items:center;pointer-events:none}.stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 15px 70px #0005;pointer-events:auto}.icon{position:absolute;background:none;border:0;color:#fff;line-height:1;padding:16px;font-weight:normal;opacity:.7;z-index:2}.icon:hover{opacity:1}.close{top:6px;right:15px;font-size:30px}.previous,.next{top:calc(50% - 65px);font-size:25px}.previous{left:8px}.next{right:8px}.filmstrip{display:flex;justify-content:center;gap:7px;align-items:center;overflow-x:auto;max-width:100%;padding:5px;margin:0 auto}.thumb{border:0;background:none;padding:0;flex:0 0 auto;height:70px;opacity:.4;transition:opacity .2s}.thumb img{height:100%;width:auto;max-width:140px;object-fit:cover;display:block}.thumb[aria-pressed="true"],.thumb:hover{opacity:1}.thumb[aria-pressed="true"]{outline:1px solid #fff;outline-offset:3px}@media(max-width:600px){header{height:70px;padding:0 20px}.monogram{font-size:36px}nav{gap:22px;font-size:10px}.photo span{left:14px;bottom:14px;font-size:11px}dialog[open]{padding:55px 35px 15px;grid-template-rows:minmax(0,1fr) 75px;gap:20px}.thumb{height:54px}.previous{left:0}.next{right:0}.icon{padding:10px;font-size:22px}.close{right:8px;top:10px;font-size:28px}#contact{flex-direction:column;gap:35px;align-items:flex-start;padding:35px 12vw 60px}.portrait{width:220px;max-width:70vw}.contact-copy small{margin-top:30px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.collage[hidden]{display:none}

/* Keep the collage width unchanged while the viewer locks page scrolling. */
html{scrollbar-gutter:stable}
.filmstrip{justify-content:flex-start;width:max-content}

/* Fit every photograph within its available space, including mobile Safari. */
.photo img{object-fit:contain}
.stage{min-width:0;overflow:hidden}
.stage img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;box-shadow:none}
@media(hover:none){.photo:hover img,.photo:focus-visible img{transform:none}}
@media(max-width:600px){
 html{scrollbar-gutter:auto}
 .collage{display:block}
 .photo{width:100%}
 .photo img{height:auto;width:100%;transform:none}
 dialog[open]{padding:max(52px,env(safe-area-inset-top)) 10px max(12px,env(safe-area-inset-bottom));grid-template-rows:minmax(0,1fr) 38px 66px;gap:8px}
 .stage{grid-row:1;grid-column:1}
 .filmstrip{grid-row:3;grid-column:1;width:max-content;max-width:100%;min-width:0}
 .previous,.next{top:auto;bottom:calc(86px + env(safe-area-inset-bottom));width:44px;height:38px;padding:6px;font-size:24px;background:#0003;border-radius:3px}
 .previous{left:calc(50% - 55px)}
 .next{right:calc(50% - 55px)}
 .thumb img{object-fit:contain}
}

dialog[open]{grid-template-columns:minmax(0,1fr)}

/* The monogram unfolds into the name; the same dot becomes the i's dot. */
.monogram{position:relative;display:inline-flex;align-items:baseline;isolation:isolate;letter-spacing:-1.8px;line-height:1.15;white-space:nowrap;width:max-content;padding-right:.2em}
.logo-m{position:relative;z-index:2;background:#fff}
.logo-reveal{display:inline-block;overflow:hidden;max-width:0;opacity:0;transition:max-width .7s cubic-bezier(.22,.7,.2,1),opacity .35s .08s}
.logo-name{display:inline-block;transform:translateX(-105%);transition:transform .7s cubic-bezier(.22,.7,.2,1)}
.logo-dot{position:absolute;left:var(--dot-start,.86em);top:.79em;width:.115em;height:.115em;border-radius:50%;background:currentColor;z-index:3;transition:left .7s cubic-bezier(.22,.7,.2,1),top .7s cubic-bezier(.3,0,.2,1),transform .7s}
.monogram:is(:hover,:focus-visible) .logo-reveal{max-width:3em;opacity:1;transition-delay:0s}
.monogram:is(:hover,:focus-visible) .logo-name{transform:translateX(0)}
.monogram:is(:hover,:focus-visible) .logo-dot{left:var(--dot-end,2.52em);top:.18em;transform:scale(.88)}
@media(prefers-reduced-motion:reduce){.monogram *{transition:none!important}}

/* Browse each shoot inside the collage without changing the visitor's other choices. */
.photo{transform-origin:top left;overflow:hidden;background:#e8e7e4}
.photo-open{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;color:inherit;display:block}
.photo-open img{width:100%;height:100%;object-fit:contain;transform:none!important}
.photo:after{pointer-events:none}
.photo .shoot-title{left:18px;bottom:36px}
.tile-arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;background:#ffffffe0;color:#252525;display:grid;place-items:center;font:26px/1 Georgia,serif;padding:0 0 3px;opacity:0;transition:opacity .2s;z-index:3;box-shadow:0 1px 7px #0002}
.tile-prev{left:13px}.tile-next{right:13px}
.photo:hover .tile-arrow,.photo:focus-within .tile-arrow{opacity:1}
.tile-dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:1px;z-index:3;padding:2px 5px;border-radius:20px;background:#0002;max-width:calc(100% - 20px)}
.tile-dot{position:relative;flex:0 0 13px;width:13px;height:15px;padding:0;border:0;background:transparent}
.tile-dot:after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:#ffffff70;box-shadow:0 1px 3px #0004;transition:background .2s,transform .2s}
.tile-dot[aria-pressed="true"]:after{background:#fff;transform:translate(-50%,-50%) scale(1.3)}
@media(hover:none){.tile-arrow{opacity:.85;width:32px;height:32px}.photo .shoot-title{opacity:1;transform:none}.tile-dot{height:20px}}
/* A quiet vertical contact sheet, independent of the collage's selected covers. */
dialog.series-viewer[open]{display:block;padding:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;height:100dvh}
.series-header{position:sticky;top:0;z-index:5;height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:linear-gradient(#151515b8,#15151500);pointer-events:none}
.series-title{font-size:12px;font-weight:normal;letter-spacing:.04em;margin:0;pointer-events:auto}
.series-header .close{position:static;pointer-events:auto;font-size:30px;padding:12px;opacity:.9}
.series{display:flex;flex-direction:column;align-items:center;gap:40px;padding:12px 70px 70px}
.series-photo{margin:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.series-photo img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 120px);object-fit:contain;box-shadow:0 12px 50px #0003}
.series-photo figcaption{font-size:10px;letter-spacing:.08em;color:#ffffff90}
@media(max-width:600px){.series-header{height:56px;padding:0 14px}.series{padding:4px 10px 35px;gap:28px}.series-photo img{max-height:calc(100dvh - 100px)}.tile-prev{left:10px}.tile-next{right:10px}.photo .shoot-title{font-size:11px;bottom:39px}}

/* Continuous image sequence, with only the title and close control. */
.series{width:78%;max-width:1000px;margin:0 auto;padding:0 0 48px;gap:0}
.series-photo{gap:0;line-height:0}
.series-photo img{max-width:100%;max-height:78dvh;box-shadow:none}
.series-photo figcaption{display:none}
@media(max-width:600px){.series{width:90%;padding:0 0 28px;gap:0}.series-photo img{max-height:78dvh}}

.tile-dots{gap:5px;background:none;padding:0;pointer-events:none;bottom:14px}
.tile-dots span{display:block;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.25;box-shadow:0 1px 2px #0003}
.tile-dots span.current{opacity:.75}
.tile-arrow{width:22px;height:22px;font-size:21px;background:#fff;box-shadow:none}
.photo:hover .tile-arrow,.photo:focus-within .tile-arrow{opacity:.5}
@media(hover:none){.tile-arrow{width:24px;height:24px;opacity:.5}}

/* Keep the indicator dots in normal flow; photo captions are positioned separately. */
.photo .tile-dots{display:flex;align-items:center;justify-content:center;gap:5px;height:12px;bottom:12px}
.photo .tile-dots span{position:static;inset:auto;flex:0 0 auto;display:block;width:var(--dot-size);height:var(--dot-size);opacity:var(--dot-opacity);transform:none;margin:0;padding:0;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0007;transition:width .2s,height .2s,opacity .2s}

/* Indicators stay out of the composition until the visitor interacts. */
.photo .tile-dots{opacity:0;gap:4px;transition:opacity .22s}
@media(hover:hover){.photo:hover .tile-dots,.photo:focus-within .tile-dots{opacity:1}}
@media(hover:none){.photo.is-browsing .tile-dots{opacity:1}}

/* Trial: a continuous horizontal image ribbon. */
dialog.series-viewer[open]{display:grid;grid-template-rows:66px minmax(0,1fr);gap:0;overflow:hidden;scrollbar-gutter:auto;padding:0}
.series-header{position:relative;height:66px}
.series{flex-direction:row;align-items:center;justify-content:flex-start;width:100%;max-width:none;height:100%;margin:0;padding:0 8vw 28px;gap:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#ffffff55 transparent}
.series-photo{flex:0 0 auto;width:auto;height:min(78dvh,calc(100dvh - 120px));display:block}
.series-photo img{width:auto;height:100%;max-width:none;max-height:none;display:block}
@media(max-width:600px){dialog.series-viewer[open]{grid-template-rows:56px minmax(0,1fr)}.series-header{height:56px}.series{padding:0 5vw 24px}.series-photo{height:min(72dvh,60vw)}}

/* An alphabetical, scrollable directory stays within the viewport. */
.portfolio-nav{position:relative;display:flex;align-items:center;z-index:20}
.shoot-menu{position:absolute;top:100%;right:-16px;width:256px;max-width:calc(100vw - 32px);max-height:min(560px,calc(100dvh - 100px));overflow-y:auto;overscroll-behavior:contain;padding:12px 0;background:#fff;box-shadow:0 8px 28px #00000012;border:1px solid #eee;scrollbar-width:thin;scrollbar-color:#ccc transparent}
.shoot-menu[hidden]{display:none}
nav .shoot-menu a{display:block;padding:11px 18px;font-size:12px;line-height:1.4;color:#666;white-space:normal}
nav .shoot-menu a:hover,nav .shoot-menu a:focus-visible{background:#f5f4f2;color:#161616;outline-offset:-2px}
@media(max-width:600px){.shoot-menu{right:-12px;max-height:calc(100dvh - 90px)}nav .shoot-menu a{padding:13px 18px}}

/* Contact portrait and direct contact links. */
#contact .portrait{aspect-ratio:4/5;background:transparent}
.portrait img{display:block;width:100%;height:auto}
.contact-links{display:flex;flex-direction:column;gap:18px;margin-top:30px}
.contact-links a{display:block;font-size:12px;line-height:1.6;width:fit-content}
.contact-links span{display:block;font-size:10px;color:#999;margin-bottom:3px}
.contact-links a:hover{color:#777}
@media(max-width:600px){#contact .portrait{width:260px;max-width:75vw}.contact-links{gap:20px}}