:root{color-scheme:light;--bio-bg:#faf7ef;--bio-ink:#171714;--bio-muted:#615b50;--bio-gold:#8b671d;--bio-line:#d9d0bd;--photo-ink:#fffaf0;--photo-gold:#f5d98a;--safe-top:max(42px,env(safe-area-inset-top,0px));--safe-bottom:max(20px,env(safe-area-inset-bottom,0px))}
*{box-sizing:border-box}html{background:var(--bio-bg)}body{margin:0;background:var(--bio-bg);color:var(--bio-ink);font-family:Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--bio-gold);outline-offset:5px}.skip-link{position:absolute;left:15px;top:-100px;z-index:10;background:var(--bio-bg);padding:12px}.skip-link:focus{top:var(--safe-top)}
.bio-masthead{padding:calc(var(--safe-top) + 10px) max(24px,env(safe-area-inset-right)) 18px max(24px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;gap:20px}.identity{display:flex;align-items:center;gap:10px}.identity img{border-radius:50%;background:#faf7ef}.identity span{font-size:20px;font-weight:700;letter-spacing:-.7px}.identity small{display:block;font-size:9px;font-weight:500;letter-spacing:2px;margin-top:4px}
main{display:grid;gap:3px}.photo-link{display:block;position:relative;isolation:isolate;overflow:hidden;min-height:460px;height:88svh;background:#232320;color:var(--photo-ink);-webkit-text-fill-color:var(--photo-ink)}.photo-link>img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;transition:transform .6s ease}.photo-link::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.12) 55%,rgba(0,0,0,.88) 100%)}.photo-learn{height:calc(100svh - 125px);min-height:430px}.photo-learn>img{object-position:50% 38%}.photo-app>img{object-position:46% center}.photo-story>img{object-position:50% 35%}.photo-caption{position:absolute;bottom:0;left:0;right:0;padding:30px max(24px,env(safe-area-inset-right)) calc(28px + var(--safe-bottom)) max(24px,env(safe-area-inset-left))}.eyebrow{font-size:10px;line-height:1.5;letter-spacing:2px;font-weight:600;color:var(--photo-gold);-webkit-text-fill-color:var(--photo-gold)}.photo-caption h1,.photo-caption h2{font:500 clamp(48px,12vw,100px)/1.02 Georgia,'Times New Roman',serif;letter-spacing:-2px;margin:12px 0 18px}.caption-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px}.caption-bottom p{font-size:13px;line-height:1.6;max-width:250px;margin:0}.arrow{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid #fff8;border-radius:50%;font-size:24px}.photo-link:focus-visible{outline-color:var(--photo-gold);outline-offset:-6px}.photo-link:hover .arrow{background:var(--photo-gold);color:#171714;-webkit-text-fill-color:#171714}
footer{padding:48px max(24px,env(safe-area-inset-right)) calc(32px + var(--safe-bottom)) max(24px,env(safe-area-inset-left))}.footer-title{font:30px/1.2 Georgia,serif;margin:0 0 24px}footer nav{display:grid}footer nav a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;border-bottom:1px solid var(--bio-line);font-size:14px;line-height:1.5}footer nav a:hover{text-decoration:underline;text-underline-offset:5px}footer nav span{color:var(--bio-gold)}.signoff{color:var(--bio-muted);font-size:12px;line-height:1.8;margin-top:36px}.email{font-size:12px;text-decoration:underline;text-underline-offset:4px}
@media(min-width:800px){:root{--safe-top:max(18px,env(safe-area-inset-top,0px))}.bio-masthead{padding-left:40px;padding-right:40px}main{grid-template-columns:1fr 1fr}.photo-link,.photo-learn{height:85svh;min-height:580px}.photo-caption{padding-left:40px;padding-right:40px}.photo-caption h1,.photo-caption h2{font-size:clamp(56px,6vw,100px)}footer{max-width:900px;margin:auto;padding-left:40px;padding-right:40px}}
@media(max-height:500px) and (orientation:landscape){.photo-link,.photo-learn{height:115svh;min-height:380px}.photo-caption h1,.photo-caption h2{font-size:52px}.photo-caption{padding-top:20px}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.photo-link:hover>img{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){.photo-link>img{transition:none}}
/* Full-bleed photo edition: the masthead belongs to the first image. */
body{background:#111110}.bio-masthead{position:absolute;inset:0 0 auto;z-index:2;color:var(--photo-ink);-webkit-text-fill-color:var(--photo-ink);background:linear-gradient(#000a,transparent);padding-bottom:32px}.bio-masthead .identity img{width:40px;height:40px}.bio-masthead .identity span{font-size:18px}.bio-masthead .identity small{font-size:8px}main{gap:0;grid-template-columns:1fr}.photo-link,.photo-learn{height:100svh;min-height:500px}.photo-caption h1,.photo-caption h2{font-size:clamp(48px,10vw,92px)}.photo-link>img{object-position:center}.photo-link>img.letterboxed-source{height:134.46%;top:-17.23%;object-position:center}.photo-link.photo-results>img{object-position:right center}.photo-results .photo-caption{padding-bottom:calc(36px + var(--safe-bottom))}
#bio-menu-open{width:48px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0;background:#0005;border:1px solid #fffa;border-radius:50%;cursor:pointer}#bio-menu-open span{width:20px;height:2px;background:#fff}#bio-menu-open:focus-visible{outline-color:var(--photo-gold)}
@media(min-width:800px){.photo-link,.photo-learn{height:100svh;min-height:620px}.photo-link>img{object-fit:contain}.photo-link>img.letterboxed-source{object-fit:contain}.photo-caption{max-width:1100px;margin:auto}.bio-masthead{padding-left:40px;padding-right:40px}}
@media(max-height:500px) and (orientation:landscape){.photo-link,.photo-learn{height:130svh;min-height:440px}.photo-link>img{object-fit:contain}.photo-caption h1,.photo-caption h2{font-size:48px}}

/* Keep the two challenge characters together, with room for the phone masthead and caption. */
.photo-summer{background:#172016}
.challenge-prefix{display:block;font:600 clamp(15px,2vw,23px)/1.4 Inter,Arial,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--photo-gold);-webkit-text-fill-color:var(--photo-gold);margin-bottom:10px}
.photo-summer>picture{position:absolute;inset:0;z-index:-2}
.photo-summer>picture>img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
@media(max-width:799px){.photo-summer>picture>img{object-position:50% 0}}
/* Only the opened drawer adopts the inner website menu. Keep the original photo masthead. */
.photo-hub { --bg:#f9f9f7; --text-main:#1a202c; --text-muted:#5f6f85; --secondary:#9b6f19; --button-hover:rgba(255,255,255,.98); }
@media (pointer:coarse), (max-width:900px) {
 .photo-hub .balance-menu-drawer { top:max(env(safe-area-inset-top, 0px), 24px); height:calc(100dvh - max(env(safe-area-inset-top, 0px), 24px)); padding-top:14px; padding-bottom:calc(24px + max(env(safe-area-inset-bottom, 0px), 24px)); }
}