:root{--paper:#f9f9f9;--ink:#101010;--gap:clamp(8px,.62vw,14px);--portrait:min(15.5vw,34svh);font:600 clamp(11px,.66vw,14px)/1.13 Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}img{display:block;width:100%}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}.skip{position:fixed;top:-6rem;left:1rem;z-index:20;background:white;padding:10px}.skip:focus{top:5px}
header{position:fixed;z-index:6;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;pointer-events:none;padding:var(--gap) var(--gap) 0 calc(8.333vw + var(--gap))}header a{pointer-events:auto}.mast,.serif{font-family:Georgia,'Times New Roman',serif}.mast{letter-spacing:-.04em}nav{display:flex;gap:1em}nav a{color:#777}nav a:hover,nav a[aria-current]{color:var(--ink)}
.mark{position:fixed;z-index:0;pointer-events:none;bottom:.8svh;left:-.03em;transform-origin:0 100%;transform:rotate(-90deg) translateY(100%) scaleY(.8);font-size:min(26svh,24vw);line-height:.83;font-weight:900;letter-spacing:-.091em;white-space:nowrap;transition:opacity .75s}
.imprint{position:fixed;z-index:0;top:50svh;left:calc(8.333vw + var(--gap));right:var(--gap);display:grid;grid-template-columns:8.333vw 8.333vw 25vw minmax(130px,20vw);align-items:start;pointer-events:none;letter-spacing:-.035em;transition:opacity .75s}.imprint p{margin:.6em 0 0}.imprint strong,.imprint b{font-weight:inherit}body[data-target=work] :is(.mark,.imprint){opacity:.035}
main{position:relative;z-index:1;min-height:100svh;outline:none}.tile{display:block;min-width:0;width:100%;text-align:left}.frame{display:block;position:relative;overflow:hidden;background:#080808}.tile img{height:100%;object-fit:cover;object-position:var(--crop,50%) center}.frame:after{content:'';position:absolute;inset:0;background:#080808;pointer-events:none;transform:translateY(-101%)}
@keyframes open-frame{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}
@keyframes lift-black{from{transform:translateY(0)}to{transform:translateY(-101%)}}
.home-row:nth-child(-n+2) .frame,.lane .tile:nth-child(-n+3) .frame{animation:open-frame .55s cubic-bezier(.68,0,.23,1) calc(120ms + var(--delay)) backwards}
.home-row:nth-child(-n+2) .frame:after,.lane .tile:nth-child(-n+3) .frame:after{animation:lift-black .68s cubic-bezier(.76,0,.22,1) calc(485ms + var(--delay)) backwards}
.home{overflow:clip;padding:0 var(--gap)}.home-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;height:max(60svh,calc(var(--portrait)*1.75));align-items:start}.home-row:first-child{height:100svh}.home-row:last-child{height:max(50svh,calc(var(--portrait)*1.55))}
.home-row .tile{width:var(--portrait);margin-top:var(--lift);--lift:19svh;--out:-9vw}.home-row .tile:nth-child(2){--lift:10svh;--out:-3vw}.home-row .tile:nth-child(3){--lift:18svh;--out:3vw}.home-row .tile:nth-child(4){--lift:15svh;--out:9vw}.home-row:nth-child(even) .tile{justify-self:end}.home-row:not(:first-child) .tile{margin-top:calc(var(--portrait)*-.62)}.home-row:not(:first-child) .tile:nth-child(2){margin-top:calc(var(--portrait)*-.44)}.home-row:not(:first-child) .tile:nth-child(4){margin-top:calc(var(--portrait)*-.54)}
.home .frame{aspect-ratio:3/4}.leaving .home .tile{transform:translateX(var(--out)) scale(1.09);opacity:0;transition:transform .68s cubic-bezier(.65,0,.35,1),opacity .56s .12s ease-in}.leaving :is(.work,.info){opacity:0;transition:opacity .6s}
.work{padding:12.8svh var(--gap) 15svh calc(16.667vw + var(--gap))}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25vw}.lane{display:flex;flex-direction:column;gap:clamp(36px,9svh,110px);will-change:transform}.grid .tile{transition:opacity .4s,filter .4s}.grid .frame{aspect-ratio:1.56}.dim{opacity:.15;filter:blur(2.5px) saturate(.3)}
.rail{position:fixed;left:var(--gap);bottom:4.7svh;z-index:3}.topics summary{font:normal 1.12rem Georgia,serif;cursor:pointer;list-style:none;width:fit-content}.topics summary::-webkit-details-marker{display:none}.choices{display:grid;justify-items:start;margin-top:1.3em;gap:.18em}.choices button{line-height:1.15}.choices button[aria-pressed=true]{text-decoration:underline;text-underline-offset:2px}.choices button:hover,.contacts a:hover,.info-more a:hover{text-decoration:underline}
.info{min-height:100svh;animation:arrive .7s ease}.contacts{position:absolute;top:17svh;left:calc(25vw + var(--gap));display:grid;justify-items:start;gap:.3em}.email{font-size:clamp(18px,1.6vw,32px);font-weight:750;letter-spacing:-.06em;margin-bottom:.65em}.info-more{position:absolute;left:calc(33.333vw + var(--gap));top:66svh;display:grid;grid-template-columns:16.667vw auto}.info-more a{width:fit-content}@keyframes arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
dialog{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:15px 2vw;border:0;background:var(--paper);color:var(--ink)}dialog[open]{display:flex;flex-direction:column;animation:arrive .35s ease}dialog::backdrop{background:var(--paper)}body:has(dialog[open]){overflow:hidden}.viewerbar{display:flex;align-items:center;justify-content:space-between;font-size:14px;gap:8px}.viewerbar button{padding:8px}.large{flex:1;min-height:0;display:grid;place-items:center;padding:3vh 0}.large img{height:100%;min-height:0;object-fit:contain}
@media(max-width:700px){:root{--portrait:min(21vw,31svh)}header{padding:14px 12px 0 16vw;font-size:12px}nav{gap:1.2em}.mark{font-size:min(25svh,34vw)}.imprint{left:16vw;right:3vw;grid-template-columns:1fr 1.7fr;gap:10px}.imprint>span{display:none}.home-row .tile:nth-child(odd){--lift:28svh}.home-row .tile:nth-child(2){--lift:13svh}.home-row .tile:nth-child(4){--lift:19svh}.home-row{height:46svh}.work{padding:11svh 8px 17svh}.grid{gap:7px}.lane{gap:6svh}.rail{left:8px;bottom:12px;padding:9px;background:var(--paper)}.topics summary:after{content:' +'}details[open] summary:after{content:' −'}.choices{gap:4px}.choices button{min-height:22px}.contacts{left:16vw;top:17svh}.info-more{left:16vw;top:76svh;grid-template-columns:26vw auto}}
.home .tile[data-format=square] .frame{aspect-ratio:1}
.home .tile:is([data-format=wide],[data-format=drawing]){width:min(98%,calc(var(--portrait)*1.28))}
.home .tile:is([data-format=wide],[data-format=drawing]) .frame{aspect-ratio:1.55}
.home .tile[data-format=drawing] img{object-fit:contain;background:white}
@media(max-width:700px){
  /* Keep four partial images at the fold, then alternate the high and low points. */
  .home-row:nth-child(2){--a:calc(-1.12 * var(--portrait));--b:calc(-.14 * var(--portrait));--c:calc(-.79 * var(--portrait));--d:calc(-.4 * var(--portrait))}
  .home-row:nth-child(3n){--a:5svh;--b:-12svh;--c:11svh;--d:-4svh}
  .home-row:nth-child(3n+1){--a:-13svh;--b:3svh;--c:-5svh;--d:12svh}
  .home-row:nth-child(3n+2):not(:nth-child(2)){--a:1svh;--b:10svh;--c:-12svh;--d:-4svh}
  .home-row:not(:first-child) .tile:nth-child(1){margin-top:var(--a)}
  .home-row:not(:first-child) .tile:nth-child(2){margin-top:var(--b)}
  .home-row:not(:first-child) .tile:nth-child(3){margin-top:var(--c)}
  .home-row:not(:first-child) .tile:nth-child(4){margin-top:var(--d)}
}
.tile,.large{-webkit-touch-callout:none;user-select:none}.tile img,.large img{-webkit-user-drag:none;user-select:none}
.tile img{opacity:0}.tile img.ready{opacity:1;animation:develop .82s ease-out backwards}
.lane .tile:nth-child(-n+3) .frame:after{transform:none;opacity:0;animation:dissolve .95s ease-in-out calc(425ms + var(--delay)) backwards}
@keyframes develop{from{opacity:0;transform:translateY(4px) scale(1.012)}to{opacity:1;transform:none}}
@keyframes dissolve{from{opacity:1}to{opacity:0}}
.info footer{position:absolute;bottom:var(--gap);right:var(--gap);max-width:74vw;text-align:right;font-size:10px;font-weight:400;color:#696965;line-height:1.35}
dialog{background:transparent}dialog[open]{animation:viewer-in .46s ease both}dialog::backdrop{background:rgb(249 249 249 / .96);animation:viewer-in .46s ease both}
dialog.closing,dialog.closing::backdrop{animation:viewer-out .25s ease-in both}
@keyframes viewer-in{from{opacity:0}to{opacity:1}}@keyframes viewer-out{to{opacity:0}}
.large{container-type:size;position:relative;margin:3vh 0;padding:0;isolation:isolate}
.plate{position:absolute;place-self:center;width:min(100cqw,calc(100cqh * var(--ratio)));aspect-ratio:var(--ratio);overflow:hidden;background:#090909;animation:plate-in .55s cubic-bezier(.22,.68,.22,1) both}
.plate img{animation:develop .8s .14s ease-out backwards}
.plate.out{animation:viewer-out .5s ease both}
@keyframes plate-in{from{opacity:0;transform:translateY(var(--slide));clip-path:inset(5% 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after,dialog::backdrop{animation:none!important;transition:none!important}.lane{transform:none!important}}