:root{--paper:#fbf6e8;--ink:#233c58;--wine:#a72d47;--rule:#cfc2a0;--secondary:#4a5763;color-scheme:light;scrollbar-color:var(--wine) var(--paper)}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;font-size:14px;line-height:1.6}
button,input{font:inherit;color:inherit}
a{color:inherit;text-underline-offset:5px}
a:hover{color:var(--wine);border-bottom-color:transparent}
button,a,input{ -webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--wine);outline-offset:5px}
::selection{color:var(--paper);background:var(--wine)}
svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip-link{position:fixed;left:16px;top:12px;padding:12px 18px;background:var(--paper);transform:translateY(-160%);z-index:10}
.skip-link:focus{transform:none}
.site-header,main,footer{width:min(1360px,calc(100% - 80px));margin-inline:auto}
.site-header{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.signature{display:flex;align-items:center;gap:12px;min-height:44px;font-family:'Fraunces',serif;font-size:25px;letter-spacing:-.02em}
.signature img{width:39px;height:39px;object-fit:contain}
.back-link{display:flex;align-items:center;gap:9px;min-height:44px}
.artwork{position:relative;width:100%;height:clamp(470px,calc(100svh - 223px),750px);overflow:hidden;background:#a72d47;isolation:isolate}
.art-layer{display:block;position:absolute;inset:0;width:100%;height:100%;border:0}
#fallback-art{stroke:none;z-index:1}
#study-canvas{z-index:2;opacity:0;transition:opacity 240ms ease-out}
[data-renderer=webgpu] #study-canvas{opacity:1}
[data-renderer=webgpu] #fallback-art{visibility:hidden}
.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto auto;align-items:center;gap:35px;padding:22px 0 21px;margin:0;border-bottom:1px solid var(--rule)}
.control{display:flex;min-width:0;flex-direction:column;gap:5px;line-height:1.4}
.control span{display:block}
input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:44px;cursor:pointer;background:transparent;margin:0;accent-color:var(--wine)}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:#b9a7a3}
input[type=range]::-moz-range-track{height:2px;background:#b9a7a3}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;background:var(--wine);border:4px solid var(--paper);box-shadow:0 0 0 1px var(--wine);width:14px;height:14px;border-radius:50%;margin-top:-6px}
input[type=range]::-moz-range-thumb{background:var(--wine);border:4px solid var(--paper);box-shadow:0 0 0 1px var(--wine);width:7px;height:7px;border-radius:50%}
button{background:transparent;border:0;cursor:pointer;min-height:44px;min-width:44px;padding:10px 2px;text-decoration:underline;text-underline-offset:5px}
button:hover{color:var(--wine)}
button:disabled{cursor:default;color:#66555a;text-decoration:none;opacity:.8}
.play-button{display:flex;align-items:center;justify-content:center;gap:8px;min-width:76px;text-decoration:none}
.play-shape{fill:currentColor;stroke:none}
.pause-shape{display:none}
[data-motion=playing] .play-shape{display:none}
[data-motion=playing] .pause-shape{display:block}
.introduction{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:38px 0 74px}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:300;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(32px,3.25vw,48px);line-height:1.08;max-width:12ch}
h1 em{font-weight:300}
.introduction p{margin:0 0 8px;max-width:69ch;color:var(--ink)}
.introduction .provenance{color:var(--secondary)}
.introduction .renderer-status{font-size:14px;color:var(--secondary);margin-top:14px}
.source-heading{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-bottom:30px;padding-top:30px;border-top:1px solid var(--rule)}
h2{font-size:30px;line-height:1.2;max-width:20ch}
.source-heading p{margin:0;max-width:69ch;color:var(--secondary)}
.paintings{display:grid;grid-template-columns:1fr 1fr;gap:36px}
figure{margin:0;min-width:0}
.photo-link{display:block;border:0;overflow:hidden}
.photo-link img{display:block;width:100%;height:auto;aspect-ratio:1.5;object-fit:contain;transition:transform 400ms cubic-bezier(.16,1,.3,1)}
.photo-link:hover img{transform:scale(1.012)}
figcaption{display:flex;align-items:start;justify-content:space-between;gap:16px;padding-top:18px}
h3{font-size:26px;line-height:1.2}
figcaption p{font-size:14px;margin:5px 0 0;color:var(--secondary)}
figcaption a{display:flex;align-items:center;gap:7px;min-height:44px;white-space:nowrap;text-decoration:underline}
figcaption svg{width:16px;height:16px}
.other-studies{display:flex;gap:56px;justify-content:flex-end;padding:55px 0 45px;margin-top:46px;border-top:1px solid var(--rule)}
.other-studies a{display:flex;gap:20px;align-items:center;min-height:44px;font-family:'Fraunces',serif;font-size:25px}
footer{display:flex;justify-content:space-between;gap:24px;padding:25px 0 40px;border-top:1px solid var(--rule);color:var(--secondary)}
footer a{display:flex;align-items:center;min-height:44px}footer span{padding-top:11px}
@media(min-width:1600px){.artwork{height:750px}}
@media(max-width:1000px){.site-header,main,footer{width:calc(100% - 48px)}.artwork{height:clamp(510px,68svh,710px)}.controls{gap:24px;grid-template-columns:repeat(3,minmax(0,1fr)) auto auto}.introduction,.source-heading{gap:32px}.paintings{gap:24px}figcaption{flex-direction:column;gap:4px}figcaption a{font-size:14px}}
@media(max-width:620px){.site-header,main,footer{width:calc(100% - 32px)}.site-header{min-height:75px;gap:12px}.signature{font-size:22px;gap:8px}.signature img{width:32px;height:32px}.back-link{gap:4px;font-size:14px}.back-link svg{width:17px}.artwork{height:clamp(390px,59svh,540px)}.controls{grid-template-columns:1fr 1fr;gap:6px 24px;padding:20px 0}.control{grid-column:1 / -1;display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;min-height:44px}.control span{font-size:14px}.play-button{justify-content:flex-start;min-width:0;width:100%;margin-top:5px}#reset{justify-self:end;margin-top:5px;padding-inline:10px}.introduction{grid-template-columns:1fr;gap:20px;padding:30px 0 48px}h1{font-size:39px;max-width:none}h1 em{display:block}.introduction p{line-height:1.65}.source-heading{display:block;padding-top:26px;margin-bottom:24px}h2{font-size:29px;max-width:17ch;margin-bottom:16px}.paintings{grid-template-columns:1fr;gap:34px}figcaption{flex-direction:row;align-items:start;gap:10px}h3{font-size:25px}figcaption p{max-width:23ch}figcaption a{white-space:normal;max-width:100px;line-height:1.45;gap:4px}.other-studies{justify-content:space-between;gap:18px;padding:24px 0;margin-top:34px}.other-studies a{font-size:21px;gap:10px}.other-studies svg{width:18px}footer{gap:12px;padding:18px 0 26px}footer span{max-width:160px;text-align:right}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.photo-link:hover img{transform:none}}