@import url('https://fonts.googleapis.com/css2?family=Fragment+Mono:ital@0;1&display=swap');
:root{--paper:#fbfaf6;--ink:#303b34;--muted:#72776d;--line:#dcded5}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--paper);color:var(--ink);font:11px/1.75 'Fragment Mono',Arial,monospace;overflow:hidden}a{color:inherit;text-underline-offset:4px}a:hover{color:#855d43}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:1px solid #536a51;outline-offset:4px}.skip{position:absolute;top:-60px;z-index:5;background:var(--paper);padding:10px}.skip:focus{top:0}h1,h2,h3,h4,p,figure{margin:0}h1,h2,h3,h4{font-size:inherit;font-weight:400}.site-grid{display:grid;grid-template-columns:minmax(210px,24%) minmax(0,49%) minmax(240px,27%);height:100dvh;padding:0 16px;max-width:1800px;margin:auto}.intro,main,.vita{min-height:0;padding:0 22px;display:flex;flex-direction:column}main{border-left:1px solid var(--line);border-right:1px solid var(--line)}.column-header{height:76px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line)}.intro h1{font-size:14px}.column-body{padding-top:30px}.intro .column-body{overflow-y:auto;scrollbar-width:thin;padding-bottom:25px}.titles{line-height:1.9;margin-bottom:25px}.introduction{max-width:240px;margin-bottom:28px}.contact{display:flex;flex-wrap:wrap;gap:12px 22px;font-size:10px}.sidebar-painting{margin:44px auto 0;max-width:205px}.sidebar-painting img{display:block;width:100%;height:clamp(190px,36dvh,380px);object-fit:contain}.sidebar-painting figcaption{margin-top:14px;font-size:9px;color:var(--muted)}.project-navigation{display:flex;align-items:center;gap:14px;font-size:10px;flex:none}.project-navigation button{font-size:20px;padding:4px 2px;line-height:1}.project-carousel{overflow-y:auto;min-height:0;padding:26px 0 35px;scrollbar-width:thin;overscroll-behavior:contain}.project-figure img{display:block;width:100%;height:clamp(220px,47dvh,650px);object-fit:contain;background:#f2f1eb}.project-figure figcaption{font-size:8px;color:var(--muted);line-height:1.6;margin-top:10px;max-width:100%}.project-copy{padding-top:26px;max-width:650px}.project-copy h3{font-size:15px;line-height:1.6;margin-bottom:9px}.project-type{font-size:9px;color:var(--muted);margin-bottom:18px}.project-copy p:not(.project-type){margin-bottom:15px}.project-role{color:var(--muted);font-size:10px}.project-copy>a{display:inline-block;margin-top:5px;font-size:10px}.vita-scroll{overflow-y:auto;scrollbar-width:thin;padding-bottom:35px;overscroll-behavior:contain}.vita section+section{margin-top:30px;padding-top:28px;border-top:1px solid var(--line)}.vita h3{color:var(--muted);font-size:10px;margin-bottom:25px}.vita article{margin-bottom:26px}.vita h4{margin-bottom:7px}.vita p{font-size:10px;color:var(--muted);margin-bottom:8px}.vita-painting{margin:40px 0 0}.vita-painting img{display:block;width:100%;height:200px;object-fit:contain}.vita-painting figcaption{font-size:8px;color:var(--muted);margin-top:12px}@media(min-width:1500px){body{font-size:12px}.intro,main,.vita{padding-left:28px;padding-right:28px}.project-figure img{height:50dvh}}@media(max-width:1000px) and (min-width:761px){.site-grid{grid-template-columns:23% 48% 29%;padding:0 6px}.intro,main,.vita{padding:0 14px}body{font-size:10px}.column-header{font-size:9px}.project-navigation{gap:8px}.sidebar-painting{margin-top:30px}.contact{flex-direction:column;gap:9px}.project-copy h3{font-size:13px}}@media(max-width:760px){html,body{height:auto;overflow:auto}.site-grid{display:block;height:auto;padding:0 24px}.intro,main,.vita{padding:0;border:0}.column-header{height:64px}.intro .column-body{display:grid;grid-template-columns:1fr 130px;gap:0 25px;overflow:visible;padding:25px 0 35px}.titles,.introduction,.contact{grid-column:1}.titles{margin-bottom:16px}.introduction{margin-bottom:20px}.sidebar-painting{grid-column:2;grid-row:1/4;margin:0;align-self:center;width:100%}.sidebar-painting img{height:190px}.sidebar-painting figcaption{font-size:8px}main{border-top:1px solid var(--line)}.project-carousel{overflow:visible;padding-top:24px;padding-bottom:40px}.project-figure img{height:clamp(250px,45dvh,500px)}.vita{border-top:1px solid var(--line)}.vita-scroll{overflow:visible}.vita-painting{max-width:230px;margin:35px auto}.vita-painting img{height:240px}.project-copy{padding-top:24px}}@media(max-width:380px){.intro .column-body{grid-template-columns:1fr 95px;gap:0 14px}.sidebar-painting img{height:155px}.titles{font-size:10px}.contact{gap:12px}}

/* Uniform portrait images, sized to preserve the complete bank painting. */
.project{width:min(100%,calc(58dvh * 1388 / 1800));margin:0 auto}
.project-figure img{width:100%;height:auto;aspect-ratio:1388/1800;object-fit:cover;object-position:center;background:none;border:0;display:block}
.project-figure img.place-still{object-position:32% center}
.project-figure figcaption{font-size:8px;line-height:1.65;margin-top:12px}
.project-copy{padding-top:14px}
.project-copy h3{font-size:10px;line-height:1.7;margin-bottom:8px}
.project-copy p:not(.project-type){font-size:10px;line-height:1.8;margin-bottom:9px}
.project-copy>a{font-size:9px;margin-top:3px}
@media(max-width:760px){.project{width:min(100%,420px)}.project-figure img{height:auto;aspect-ratio:1388/1800}.project-copy{padding-top:14px}}

/* Wider editorial crops, with a deliberate focal point for each project. */
.project{width:100%;margin:0}
.project-figure img{width:100%;height:clamp(280px,57dvh,720px);aspect-ratio:auto;object-fit:cover;object-position:center}
.project-figure img.project-image-0{object-position:center 42%}
.project-figure img.project-image-1{object-position:14% center}
.project-figure img.project-image-2{object-position:center 50%}
.project-figure img.project-image-3{object-position:center top}
@media(max-width:760px){.project{width:100%}.project-figure img{height:clamp(300px,53dvh,600px)}}

.project-image-frame{overflow:hidden;height:clamp(320px,67dvh,800px)}
.project-image-frame img{height:100%;width:100%;display:block}
.project-figure img.project-image-1{object-position:left center;transform:scale(1.15);transform-origin:10% 55%}
.project-figure img.project-image-3{object-position:center 15%}
@media(max-width:760px){.project-image-frame{height:clamp(320px,57dvh,650px)}.project-image-frame img{height:100%}.project-figure img.project-image-1{transform:scale(1.05);transform-origin:left center}}

/* Focus the MHS image on the engraving and upper-left lettering. */
.project-figure img.project-image-2{object-position:left top;transform:scale(1.3);transform-origin:left top}

/* User-selected image crops, standardized to the supplied bank image. */
.project-image-frame{height:auto;aspect-ratio:1072/1172}
.project-image-frame img{width:100%;height:100%;object-fit:cover;object-position:center;transform:none!important}
.project-image-frame img.project-image-1{object-position:left center}
.project-image-frame img.project-image-2{object-position:left top}
.project-image-frame img.project-image-3{object-position:center}
@media(max-width:760px){.project-image-frame{height:auto;aspect-ratio:1072/1172}.project-image-frame img{height:100%}}
/* Focal points follow the revised project order. */
.project-image-frame img.project-image-0{object-position:center}
.project-image-frame img.project-image-1{object-position:center}
.project-image-frame img.project-image-3{object-position:left center}

/* Preserve the supplied crops and let their proportions set the image shape. */
.project-image-frame{height:auto;aspect-ratio:auto;overflow:visible;display:flex;align-items:center;justify-content:center}
.project-image-frame img{width:auto;height:auto;max-width:100%;max-height:67dvh;aspect-ratio:auto;object-fit:contain;object-position:center!important;transform:none!important;background:none;border:0}
@media(max-width:760px){.project-image-frame{height:auto;aspect-ratio:auto}.project-image-frame img{width:auto;height:auto;max-width:100%;max-height:65dvh}}

.sidebar-painting figcaption,.vita-painting figcaption{text-align:center}

/* Compact experience entries with the institution and role kept together. */
.vita-scroll{line-height:1.5}
.vita h3{margin-bottom:17px}
.vita article{margin-bottom:18px}
.vita h4{margin-bottom:3px;line-height:1.5}
.vita p{margin-bottom:3px;line-height:1.5}
.vita section+section{margin-top:22px;padding-top:20px}

/* Tight entries, separated by whitespace and indented below section headings. */
.vita article{margin-left:18px;margin-bottom:28px}
.vita h3{margin-bottom:20px}
.vita h4{line-height:1.4;margin-bottom:3px}
.vita p{line-height:1.4;margin-bottom:3px}
.vita article p+p{margin-top:5px}
.vita section+section{margin-top:28px;padding-top:24px}

/* Reference text uses a line height of approximately 1.2. */
.vita-scroll,.vita h4,.vita p{line-height:1.2}
.vita h4{margin-bottom:2px}
.vita p{margin-bottom:0}
.vita article p+p{margin-top:4px}

.vita article{margin-left:28px}

/* Section labels sit beside the entries, as in the reference's vita. */
.vita section{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:16px;align-items:start}
.vita section>h3{grid-column:1;grid-row:1 / span 20;margin:0;line-height:1.2}
.vita section>article{grid-column:2;margin-left:0;margin-bottom:26px}
.vita section>article:last-child{margin-bottom:0}
@media(max-width:1000px) and (min-width:761px){.vita section{grid-template-columns:64px minmax(0,1fr);column-gap:12px}}

/* Matching canvases supplied by Emma, shown in full at the column width. */
.project-image-frame{display:block;height:auto;aspect-ratio:auto;overflow:visible}
.project-image-frame img{display:block;width:100%;height:auto;max-width:100%;max-height:none;aspect-ratio:auto;transform:none!important;object-fit:contain}
@media(max-width:760px){.project-image-frame img{width:100%;height:auto;max-height:none}}

/* Direct dragging with a damped settle; artwork retains its supplied canvas. */
.project-image-window{width:100%;aspect-ratio:1280/769;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.project-image-rail{height:100%;display:flex;will-change:transform}
.project-image-rail .project-image-frame{display:block;flex:0 0 100%;height:100%;aspect-ratio:auto;overflow:hidden}
.project-image-rail .project-image-frame img{display:block;width:100%;height:100%;max-height:none;object-fit:contain;pointer-events:none}
.is-dragging .project-image-window{cursor:grabbing}