:root{color-scheme:dark;--bg:#0b1422;--ink:#e7e4d6;--muted:#929cac;--gold:#d5bc75;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 25%,#17283e 0,transparent 66%),var(--bg);color:var(--ink)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.4}a{color:inherit;text-decoration:none}a:hover{color:var(--gold)}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:5px}[hidden]{display:none!important}main{max-width:1560px;padding:28px clamp(18px,4vw,64px) 38px;margin:auto}.masthead{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}.masthead a{letter-spacing:.06em}.masthead i{font-style:normal;color:var(--gold);margin-left:24px}.viewer{position:relative}.stage{position:relative;width:100%;height:min(74svh,950px);min-height:260px;background:#070c13;overflow:hidden;border:1px solid #8292a72c}canvas,#original{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.viewer.fill #original{object-fit:cover}.loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:13px 20px;background:#091321e3;border:1px solid #b9c4d523;font-size:12px;letter-spacing:.025em;border-radius:4px;display:flex;flex-direction:column;gap:12px;text-align:center;line-height:1.6}.loading button{border:0;background:transparent;color:var(--gold);text-decoration:underline}.stage-controls{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;white-space:nowrap;background:#07111edd;border:1px solid #c8d9ec24;padding:7px 9px;border-radius:6px;backdrop-filter:blur(16px);transition:opacity .3s}.stage-controls button{border:0;background:transparent;font-size:11px;letter-spacing:.015em;padding:8px 13px;line-height:1.3;border-radius:3px}.stage-controls button:hover,.stage-controls button[aria-pressed=true],.stage-controls button[aria-expanded=true]{background:#bccbe111;color:#efd896}.stage-controls span[aria-hidden]{margin-left:4px}.divider{height:17px;width:1px;background:#d8e2ee25;margin:0 2px}.caption{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:29px 0 26px}.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:9px;color:var(--gold);margin:0 0 10px}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(29px,3.4vw,49px);font-weight:400;line-height:1.05;margin:0;letter-spacing:-.025em}h1 em{font-weight:400;color:#ded4b1}.description{display:flex;gap:35px;align-items:flex-end;font-size:12px;line-height:1.7;color:#b2bbca}.description p{margin:0}.description .attribution{font-size:10px;color:var(--muted);padding-bottom:2px}.settings{display:flex;gap:38px;align-items:center;padding:22px;background:#101e30;border:1px solid #a8bdd01a;border-top:0}.settings label{width:220px;max-width:100%;font-size:11px;letter-spacing:.025em;color:#bdc9d9}.settings output{float:right;color:var(--gold);font-size:10px}.settings input{display:block;width:100%;margin:13px 0 0;accent-color:var(--gold);cursor:pointer}.settings-actions{display:flex;gap:8px;margin-left:auto}.settings-actions button{border:1px solid #9ab1cc32;padding:9px 12px;background:transparent;font-size:11px;border-radius:3px}.settings-actions button:hover{background:#d5bc7512}.noscript{font-size:12px}.viewer:fullscreen,.viewer.window-full{position:fixed;inset:0;width:100vw;height:100dvh;z-index:1000;background:#070c13}.viewer:fullscreen .stage,.viewer.window-full .stage{height:100dvh;width:100vw;border:0;min-height:0}.viewer:fullscreen .settings,.viewer.window-full .settings{position:absolute;bottom:83px;left:50%;transform:translateX(-50%);width:min(800px,calc(100% - 36px));background:#101e30f5;border:1px solid #a8bdd02e;border-radius:6px}.viewer:fullscreen .stage-controls,.viewer.window-full .stage-controls{bottom:max(22px,env(safe-area-inset-bottom))}body.has-full{overflow:hidden}@media(min-width:900px){.stage:not(:hover) .stage-controls{opacity:.5}.stage:focus-within .stage-controls{opacity:1}}@media(max-width:700px){main{padding:19px 15px 28px}.masthead{font-size:9px;margin-bottom:20px}.masthead i{margin-left:12px}.stage{height:auto;aspect-ratio:3840/3041;min-height:0}.stage-controls{bottom:10px;gap:0;padding:5px;border-radius:4px}.stage-controls button{padding:8px 9px;font-size:10px}.caption{padding:23px 0;align-items:flex-start;gap:20px;flex-direction:column}.description{align-items:center;justify-content:space-between;gap:18px;width:100%;font-size:11px}.description .attribution{font-size:9px}.eyebrow{font-size:8px;letter-spacing:.16em}.settings{flex-wrap:wrap;gap:20px;padding:18px}.settings label{flex:1;min-width:110px}.settings-actions{width:100%;margin:0;justify-content:space-between}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

#stroke-map{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:.9}.viewer.fill #stroke-map{object-fit:cover}.stage-controls,.loading{z-index:2}.settings{flex-wrap:wrap}.stroke-review{display:flex;align-items:center;gap:18px;width:100%;border-top:1px solid #a8bdd01a;padding-top:16px}.stroke-review button{border:1px solid #9ab1cc32;padding:9px 12px;background:transparent;font-size:11px;border-radius:3px;white-space:nowrap}.stroke-review button[aria-pressed=true]{color:var(--gold);border-color:#d5bc7570}.stroke-review span{font-size:10px;line-height:1.5;color:var(--muted)}@media(max-width:700px){.stroke-review{align-items:flex-start;flex-direction:column;gap:9px}.stroke-review button{font-size:10px}}

.embedded main{padding:0;max-width:none}.embedded .masthead,.embedded .caption{display:none}.embedded .stage{height:100svh;min-height:0;aspect-ratio:auto;border:0}.embedded .settings{position:absolute;z-index:3;bottom:77px;left:50%;transform:translateX(-50%);width:min(800px,calc(100% - 24px));max-height:calc(100svh - 94px);overflow-y:auto;background:#101e30f5;border:1px solid #a8bdd02e;border-radius:6px}.embedded .viewer:fullscreen .settings,.embedded .viewer.window-full .settings{bottom:83px}

/* Creation notes share the artwork's page and remain outside its fullscreen stage. */
.making-of { display:grid; grid-template-columns:minmax(180px, .8fr) minmax(0, 2fr); gap:clamp(36px, 6vw, 92px); max-width:1140px; margin:64px auto 0; padding:48px 0 28px; border-top:1px solid var(--making-line); scroll-margin-top:28px; }
.making-of-heading .eyebrow { text-align:left; color:var(--making-accent); font-size:9px; letter-spacing:.16em; }
.making-of h2 { margin:0; font:400 clamp(26px, 2.4vw, 34px)/1.2 Georgia,serif; letter-spacing:-.025em; }
.making-of .making-byline { margin:18px 0 25px; font-size:11px; line-height:1.6; color:var(--making-muted); }
.making-of .return-link { display:inline-block; padding:8px 0; font-size:11px; color:var(--making-accent); }
.making-of h3 { margin:32px 0 12px; font:400 23px/1.3 Georgia,serif; letter-spacing:-.015em; }
.making-of-copy { min-width:0; }
.making-of-copy p { margin:0 0 20px; font-size:15px; line-height:1.85; color:var(--making-body); }
.making-of-copy .making-lede { margin-top:0; font:400 22px/1.6 Georgia,serif; color:inherit; }
.making-of-copy a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.making-of-copy a:hover { color:var(--making-accent); }
.making-of-copy .making-credits { margin:32px 0 0; padding-top:22px; border-top:1px solid var(--making-line); font-size:12px; line-height:1.8; color:var(--making-muted); }
.making-related { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; margin-top:34px; padding-top:22px; border-top:1px solid var(--making-line); font-size:12px; }
.making-related a { padding:6px 0; text-decoration:none; }
@media(max-width:700px) {
  .making-of { display:block; margin-top:38px; padding-top:30px; padding-bottom:16px; }
  .making-of-heading { margin-bottom:32px; }
  .making-of .making-byline { margin:12px 0 8px; }
  .making-of-copy p { font-size:16px; line-height:1.8; }
  .making-of-copy .making-lede { font-size:21px; line-height:1.6; }
  .making-of h3 { font-size:22px; }
}

:root { --making-line:#9fb0c02e; --making-accent:var(--gold); --making-muted:var(--muted); --making-body:#b7c1d1; }
.art-nav { display:flex; align-items:center; gap:28px; }
.masthead .making-link { font-size:10px; letter-spacing:.035em; text-transform:none; color:var(--gold); padding:10px 0; }
.embedded .making-of { display:none; }
@media(max-width:700px) { .art-nav { gap:23px; } .masthead>span { font-size:0; } .masthead>span i { font-size:9px; } }
