:root{color-scheme:light;--sidebar:clamp(230px,26vw,360px);--gutter:28px}*{box-sizing:border-box}body{margin:0;background:#fff;color:#111;font-family:Georgia,'Times New Roman',serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a:focus-visible,button:focus-visible{outline:1px solid #222;outline-offset:6px}[hidden]{display:none!important}header{position:fixed;top:25px;left:var(--gutter);width:calc(var(--sidebar) - 2 * var(--gutter));z-index:3}.name{font-size:clamp(23px,2.2vw,32px);letter-spacing:-.035em;line-height:1.2}#menu{position:fixed;top:112px;left:var(--gutter);width:calc(var(--sidebar) - 2 * var(--gutter));z-index:4;display:flex;align-items:flex-start;flex-direction:column;gap:18px}#menu a{font-size:14px;text-transform:uppercase;letter-spacing:.015em}#menu a:hover,#menu a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}main{margin-left:var(--sidebar);padding:28px var(--gutter) 0 0}.home-image{display:flex;justify-content:center;align-items:center;height:calc(100svh - 56px)}.home-image img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}main.gallery{height:calc(100svh - 76px)}.image-stage{height:100%;display:flex;align-items:center;justify-content:center;position:relative}.image-stage img{max-height:100%;max-width:100%;object-fit:contain;animation:appear .25s ease}#gallery-footer{margin-left:var(--sidebar);min-height:76px;padding:20px var(--gutter) 20px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}#caption,#count{font-size:13px;color:#555}.gallery-controls{display:flex;align-items:center;gap:20px}.gallery-controls button{font-size:14px;padding:5px 0}.gallery-controls button:hover{text-decoration:underline;text-underline-offset:4px}#index-toggle{text-transform:uppercase;margin-left:8px}.gallery-controls button:disabled{color:#bbb;cursor:default}main.index{height:auto;padding-bottom:46px}.index-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px}.index-grid button{display:flex;align-items:center;justify-content:center;height:270px;padding:0}.index-grid img{width:100%;height:100%;object-fit:contain;transition:opacity .2s}.index-grid button:hover img{opacity:.75}.about{margin-top:0;margin-bottom:80px;display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,1.5fr);gap:40px}.about img{width:100%;height:auto}.about h1{font-size:16px;font-weight:normal;margin:0 0 25px;text-transform:uppercase}.about p{font-size:16px;line-height:1.6;margin:0 0 22px}.about .contacts{margin-top:36px}.about a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}.about .clients{font-size:14px}.skip{position:fixed;top:-100px;z-index:10;background:white;padding:14px}.skip:focus{top:0}@keyframes appear{from{opacity:.35}to{opacity:1}}@media(max-width:600px){:root{--gutter:18px;--mobile-header:123px}header{top:0;left:0;width:100%;height:var(--mobile-header);padding:20px var(--gutter);background:white}.name{font-size:28px}#menu{top:75px;left:var(--gutter);width:calc(100% - 2 * var(--gutter));flex-direction:row;gap:18px}#menu a{font-size:13px;white-space:nowrap}main{margin-left:0;margin-top:var(--mobile-header);padding:12px var(--gutter) 0}.home-image{height:calc(100svh - var(--mobile-header) - 30px)}main.gallery{height:calc(100svh - var(--mobile-header) - 88px)}#gallery-footer{margin-left:0;padding:16px var(--gutter);flex-wrap:wrap;gap:8px}#caption{min-width:100%}.gallery-controls{gap:16px;margin-left:auto}.index-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.index-grid button{height:230px}.about{grid-template-columns:1fr;gap:35px}.about>img{max-width:360px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Fixed sidebar and image proportions matched to the supplied reference. */
:root{--sidebar:34.5vw;--gutter:5.65vw}
.sidebar{position:fixed;left:5.65vw;top:10.25svh;transform:none;width:27vw;z-index:4}
.sidebar header{position:static;width:100%}
.name{display:block;white-space:nowrap;font-family:Didot,'Bodoni MT','Times New Roman',serif;font-size:clamp(22px,2.12vw,46px);font-weight:200;letter-spacing:0;line-height:.85}
.sidebar #menu{position:static;width:100%;margin-top:1.46vw;gap:.58vw}
#menu a{font-family:Georgia,'Times New Roman',serif;font-size:clamp(10px,.7285vw,16px);font-weight:400;line-height:1.5;letter-spacing:0}
main{margin-left:34.5vw;padding:28px 13.35vw 0 0}
main:has(.home-image){padding:0;width:52.15vw}
.home-image{height:100svh}
.home-image img{max-width:100%;max-height:80svh}
#gallery-footer{margin-left:34.5vw;padding-right:13.35vw}
@media(max-width:600px){
 :root{--gutter:18px;--mobile-header:108px}
 .sidebar{left:0;top:0;width:100%;background:white}
 .sidebar header{height:auto;padding:24px 18px 0}
 .name{font-size:28px;line-height:1}
 .sidebar #menu{width:auto;margin:18px 18px 22px;gap:20px}
 #menu a{font-size:11px;line-height:1.5}
 main,main:has(.home-image){margin-left:0;margin-top:var(--mobile-header);padding:12px 18px 0;width:auto}
 .home-image{height:calc(100svh - var(--mobile-header) - 30px)}
 .home-image img{max-width:100%;max-height:100%}
 #gallery-footer{margin-left:0;padding-right:18px}
}

/* About: centered portrait, menu typography and compact lists. */
main.about{display:block;margin-left:30vw;margin-top:10.25svh;margin-bottom:60px;padding:0;width:44vw;font-family:Georgia,'Times New Roman',serif;font-size:clamp(10px,.7285vw,16px);font-weight:400;letter-spacing:0}
.about>img{display:block;width:clamp(110px,11vw,170px);height:auto;margin:0 auto 30px}
.about h1,.about h2{font:inherit;line-height:1.5;font-weight:400;text-transform:uppercase;margin:0 0 22px}
.about p,.about .clients{font:inherit;line-height:1.6;margin:0 0 22px}
.about .clients h2{margin-bottom:8px}
.about .clients ul{list-style:none;padding:0;margin:0}
.about .clients li{line-height:1.5;margin:0}
.about .contacts{margin-top:24px}
.about .contacts p{margin:0;line-height:1.5}
@media(max-width:600px){main.about{margin-left:0;margin-top:var(--mobile-header);padding:20px 24px 0;width:auto;font-size:11px}.about>img{width:130px;margin-bottom:28px}}

/* About proportions refined to the supplied biography reference. */
main.about{margin-left:36.2vw;width:43vw;font-size:clamp(11px,.83vw,17px)}
.about>img{width:clamp(158.4px,15.84vw,244.8px);margin-bottom:32px}
.about h1,.about h2{color:#888;margin-bottom:1vw;line-height:1.4}
.about p{line-height:1.4;margin-bottom:1.8vw}
.about .clients{margin-top:1.8vw;margin-bottom:1.8vw;line-height:1.4}
.about .clients h2{margin-bottom:1vw}
.about .clients li,.about .contacts p{line-height:1.4}
.about .contacts{margin-top:1.8vw}
@media(max-width:600px){main.about{margin-left:0;width:auto;font-size:11px}.about>img{width:187.2px}.about h1,.about h2,.about .clients h2{margin-bottom:14px}.about p,.about .clients{margin-bottom:24px}.about .contacts{margin-top:24px}.about .contacts p{margin-bottom:0}}

/* Contact labels with their details on the following line. */
.about .contacts p{color:#888;font-weight:400;margin:0 0 20px;line-height:1.4}
.about .contacts a{display:block;color:#111;font-weight:400;margin-top:6px}

/* Work project links appear within the Work section. */
#work-projects{max-width:100%;padding-left:12px;margin:2px 0 8px}
#menu #work-projects a{display:block;line-height:1.5;max-width:23vw}
@media(max-width:600px){.work-section{--mobile-header:205px}.sidebar #menu{position:relative}#work-projects{position:absolute;left:52px;top:27px;padding-left:0;margin:0;width:250px}#menu #work-projects a{max-width:250px;white-space:normal}}

#menu #work-projects a+a{margin-top:6px}

/* Personal projects follow the same submenu hierarchy as Work. */
#personal-projects{max-width:100%;padding-left:12px;margin:2px 0 8px}
#menu #personal-projects a{display:block;line-height:1.5;max-width:23vw}
@media(max-width:600px){.projects-section{--mobile-header:155px}#personal-projects{position:absolute;left:104px;top:27px;padding-left:0;margin:0;width:200px}#menu #personal-projects a{max-width:200px;white-space:normal}}

.work-overview{padding-top:10.25svh;padding-bottom:60px}.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 44px;max-width:650px}.work-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;text-align:center}.work-cover{height:clamp(200px,25vw,380px);display:flex;align-items:center;justify-content:center}.work-cover img{display:block;max-width:100%;max-height:100%;object-fit:contain}.work-card span{margin-top:24px;font-family:Georgia,'Times New Roman',serif;font-size:clamp(10px,.7285vw,16px);line-height:1.5;text-transform:uppercase}.work-card:hover span{text-decoration:underline}.work-card:focus-visible{outline:1px solid;outline-offset:8px}
@media(max-width:600px){.sidebar #menu{gap:14px}.work-overview{padding-top:18px;padding-bottom:36px}.work-grid{gap:34px 20px}.work-cover{height:45vw}.work-card span{font-size:10px;margin-top:16px}#personal-projects{left:156px}}

/* Mobile navigation takes up its own space before every page's content. */
@media (max-width: 600px) {
  .sidebar {
    position: static;
    width: auto;
    padding: 24px 18px 0;
    transform: none;
  }
  .sidebar header {
    position: static;
    height: auto;
    width: auto;
    padding: 0;
  }
  .name {
    font-size: clamp(23px, 7.1vw, 34px);
    line-height: 1.15;
    white-space: normal;
  }
  .sidebar #menu {
    position: static;
    width: auto;
    margin: 26px 0 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 16px;
  }
  #menu > a { order: 0; }
  #menu a { white-space: normal; }
  #menu #work-projects,
  #menu #personal-projects,
  #menu #editorial-projects {
    position: static;
    order: 1;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 6px 0 0;
    padding: 0 0 0 12px;
  }
  #menu #work-projects a,
  #menu #personal-projects a,
  #menu #editorial-projects a {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  main,
  main:has(.home-image),
  main.about {
    margin-left: 0;
    margin-top: 0;
    width: auto;
    padding: 32px 18px 0;
  }
  main.gallery { height: auto; }
  .image-stage,
  .home-image {
    height: auto;
    min-height: 0;
  }
  .image-stage img,
  .home-image img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 70svh;
    object-fit: contain;
  }
  #gallery-footer {
    margin-left: 0;
    padding: 20px 18px 28px;
    gap: 14px;
  }
  .gallery-controls {
    flex-wrap: wrap;
    gap: 12px 16px;
  }
  main.work-overview { padding-bottom: 36px; }
  main.index { padding-bottom: 46px; }
}

#editorial-projects { max-width: 100%; padding-left: 12px; margin: 2px 0 8px; }
#menu #editorial-projects a { display: block; line-height: 1.5; max-width: 23vw; }
main.editorial-page { padding-top: 10.25svh; }
.editorial-entry, .editorial-page h1 { font: 400 clamp(11px, .83vw, 17px)/1.5 Georgia, 'Times New Roman', serif; text-transform: uppercase; margin: 0; }
.editorial-entry:hover { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 600px) {
  #menu #editorial-projects { position: static; order: 1; flex: 0 0 100%; width: 100%; max-width: 100%; margin: 6px 0 0; padding: 0 0 0 12px; }
  #menu #editorial-projects a { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  main.editorial-page { padding-top: 32px; }
}