/* An illustrated laptop on white paper. Native controls borrow the same washes. */
.painted-desktop-open { overflow: hidden; }
.painted-desktop { --display-left: 15.45%; --display-top: 9.96%; --display-width: 68.95%; --display-height: 55.47%; position: fixed; inset: 0; margin: auto; padding: 0; border: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; overflow-x: hidden; overflow-y: auto; color: #514e48; background: transparent; font-family: Georgia, 'Times New Roman', serif; overscroll-behavior: contain; }
.painted-desktop::backdrop { background: transparent; }
.painted-desktop[open] { display: block; }
.painted-desktop *, .painted-desktop *::before, .painted-desktop *::after { box-sizing: border-box; }
.painted-desktop [hidden] { display: none !important; }
.painted-desktop-paper { position: relative; isolation: isolate; background: #fff; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px 30px 20px; }
.painted-desktop-paper{transition:background-color 450ms ease-out}
.is-portal-painting .painted-desktop-paper{background:transparent}
.is-portal-painting .painted-desktop-paper::before{opacity:0}
.is-portal-painting .painted-desktop-heading-copy,.is-portal-painting .painted-desktop-caption{visibility:hidden}
.painted-computer-art{mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201536%201024%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27edge%27%20x%3D%27-5%25%27%20y%3D%27-5%25%27%20width%3D%27110%25%27%20height%3D%27110%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.043%27%20numOctaves%3D%272%27%20seed%3D%274%27%20result%3D%27grain%27%2F%3E%3CfeDisplacementMap%20in%3D%27SourceGraphic%27%20in2%3D%27grain%27%20scale%3D%279%27%20xChannelSelector%3D%27R%27%20yChannelSelector%3D%27G%27%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%272.2%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20filter%3D%27url%28%23edge%29%27%20fill%3D%27white%27%20d%3D%27M201%20710%20201%20101Q201%2051%20248%2051L1289%2052Q1337%2052%201337%20103L1337%20711%201483%20870Q1504%20895%201506%20924L1502%20947%201484%20956%201494%20969%201450%20981%201401%20978%201349%20991%201292%20981%201235%20999%201187%20985%201123%201002%201041%20987%20963%201000%20881%20982%20798%201000%20713%20986%20640%201001%20566%20983%20500%20991%20449%20977%20384%20988%20329%20976%20271%20987%20220%20973%20159%20981%20103%20968%2049%20961%2024%20946%2042%20929%2047%20894Q45%20878%2062%20851Z%27%2F%3E%3C%2Fsvg%3E");mask-size:100% 100%;mask-repeat:no-repeat;}
.laptop-approaching>header,.laptop-approaching>footer,.laptop-approaching>.social-hit,.laptop-approaching>.laptop-hit{visibility:hidden}
.painted-desktop-heading { width: min(1090px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; z-index: 2; }
.painted-desktop-heading h2 { margin: 0; font-size: 27px; line-height: 1.15; font-weight: 400; letter-spacing: -.025em; }
.painted-desktop-heading p { margin: 7px 0 0; font-size: 12px; color: #89837a; }
.painted-desktop button { font: inherit; color: inherit; cursor: pointer; border: 0; border-radius: 0; background: transparent; }
.painted-desktop button:hover { background: transparent; }
.painted-desktop button:focus-visible, .painted-desktop a:focus-visible { outline: none; }
.painted-folder-body:focus-visible { outline: 2px dashed #71867c99; outline-offset: -5px; }
.painted-room-back { padding: 11px 2px 11px 12px !important; color: #7c7569 !important; font-size: 13px !important; flex: none; }
.painted-room-back:hover { color: #454b43 !important; }
.painted-computer { position: relative; width: min(1130px, 100%); aspect-ratio: 3 / 2; flex: none; margin: -4px 0 -13px; }
.painted-computer-art { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
.painted-computer-screen { position: absolute; left: var(--display-left); top: var(--display-top); width: var(--display-width); height: var(--display-height); overflow: hidden; isolation: isolate; background: linear-gradient(137deg, #f7f5e980, #d6e1de1a 63%, #efe9dd70); border-radius: 1.6% 1.7% .8% 1%; }
.painted-desktop-home { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6% 6% 4%; }
.painted-desktop-welcome { font-size: clamp(13px, 1.7vw, 21px); margin: 0 0 5.5%; color: #727b73; font-style: italic; }
.painted-desktop-folders { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 3%; }
.painted-folder { min-width: 0; padding: 0 2px 9px !important; display: flex; flex-direction: column; align-items: center; position: relative; }
.painted-folder-art { display: block; position: relative; isolation: isolate; width: min(100%, 139px); filter: saturate(.92); transition: filter 650ms ease-out; }
.painted-folder-art svg { display: block; width: 100%; height: auto; }
.painted-folder-label { font-size: clamp(11px, 1.25vw, 16px); line-height: 1.2; color: #5a605a; margin-top: -4%; padding: 3px 5px; }
.painted-folder:hover .painted-folder-art, .painted-folder:focus-visible .painted-folder-art { filter: saturate(1.1) contrast(1.035); animation: painted-pigment-touch 750ms ease-out both; }
.painted-folder:hover .painted-folder-label { color: #343d36; }
.painted-desktop-note { margin: 6% 0 0; color: #9a9488; font-size: clamp(10px, 1vw, 12px); font-style: italic; }
.painted-desktop-caption { color: #a19b90; font-size: 12px; font-style: italic; margin: 0; position: relative; z-index: 2; }
.painted-folder-window { position: absolute; inset: 5% 4%; display: flex; flex-direction: column; isolation: isolate; background: #f8f5edf5 url('/assets/painted/paper-wash.webp') center / 512px 512px; box-shadow: 0 3px 15px #5554430c; clip-path: polygon(.6% 1.4%, 4% .8%, 7% 1.2%, 12% .5%, 18% .8%, 24% .3%, 30% 1%, 38% .5%, 44% 1%, 52% .3%, 59% .7%, 67% .1%, 75% .8%, 83% .3%, 90% 1%, 96% .5%, 99.6% 1.3%, 99.8% 9%, 99.4% 19%, 100% 28%, 99.5% 38%, 99.9% 46%, 99.5% 56%, 99.9% 64%, 99.4% 75%, 100% 85%, 99.5% 98.8%, 94% 99.3%, 86% 98.9%, 78% 99.5%, 70% 99.1%, 63% 99.6%, 53% 99.1%, 43% 99.7%, 34% 99.2%, 27% 99.8%, 19% 99.1%, 11% 99.5%, 4% 98.9%, .4% 99%, .7% 90%, .1% 80%, .6% 71%, 0 67%, .4% 57%, .1% 48%, .5% 39%, 0 31%, .7% 21%, .3% 12%); }
.painted-folder-window::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .65; background-image: radial-gradient(ellipse 75% 2.7% at 36% 1%, #a49c7820 0, transparent 75%), radial-gradient(ellipse 1.3% 48% at .1% 63%, #9ca89524 0, transparent 84%), radial-gradient(ellipse 61% 2% at 70% 99%, #998e7624 0, transparent 78%), radial-gradient(ellipse 1.5% 37% at 99% 28%, #a9988024 0, transparent 84%); pointer-events: none; }
.painted-folder-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 45px; padding: 10px 15px 8px; position: relative; }
.painted-folder-bar h3 { margin: 0; font-size: clamp(14px, 1.5vw, 19px); font-weight: 400; }
.painted-folder-back { padding: 4px 0 !important; font-size: 11px !important; color: #7c8378 !important; }
.painted-folder-close { padding: 0 2px !important; font-size: 25px !important; font-weight: 300 !important; line-height: 1; color: #8e877a !important; }
.painted-folder-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 23px 20px; scrollbar-width: thin; scrollbar-color: #c6c2af transparent; overscroll-behavior: contain; }
.painted-folder-body h4 { margin: 0 0 7px; font-size: 18px; font-weight: 400; line-height: 1.25; }
.painted-folder-body h5 { margin: 0 0 5px; font-size: 14px; font-weight: 400; }
.painted-folder-subheading { margin: 0 0 19px; font-size: 12px; font-style: italic; color: #8c897d; }
.painted-folder-foot { position: relative; padding: 7px 16px 9px; font-size: 10px; color: #a09a8e; }
.painted-folder-empty { text-align: center; min-height: 74%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 20px 10px; }
.painted-empty-art { width: 89px; opacity: .45; margin: -12px 0 2px; }
.painted-folder-empty h4 { font-style: italic; color: #7d7d70; font-size: 19px; }
.painted-folder-empty p { max-width: 310px; margin: 2px 0 0; font-size: 12px; line-height: 1.55; color: #999386; }
.painted-copy { white-space: pre-line; font-size: 13px; line-height: 1.6; margin: 0 0 10px; color: #6f7064; }
.painted-content-meta { margin: 2px 0 10px; font-size: 11px; line-height: 1.5; color: #919183; }
.painted-content-link { display: inline-block; position: relative; color: #667f75; font-size: 12px; padding-bottom: 4px; text-decoration: none; transition: color 500ms ease-out; }
.painted-content-link:hover { color: #405d52; }
.painted-project-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.painted-project-card { position: relative; padding: 2px 0 13px; }
.painted-note { position: relative; padding: 0 0 17px; margin-bottom: 17px; }
.painted-timeline { list-style: none; margin: 0; padding: 0 0 0 13px; }
.painted-timeline-entry { position: relative; padding: 0 0 23px 20px; }
.painted-timeline-entry::before { content: ''; width: 6px; height: 5px; border-radius: 45% 55% 40% 60%; position: absolute; left: -3px; top: 4px; background: #9aa88c9c; }
.painted-timeline-date { font-size: 11px; color: #93907f; margin: 0 0 5px; }
.painted-resume-name { font-size: 23px !important; color: #65756a; }
.painted-resume-section { padding-top: 20px; }
.painted-resume-entry { margin: 12px 0 17px; }
.painted-resume-item { font-size: 13px; line-height: 1.5; color: #6f7064; margin: 7px 0; }
.painted-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
/* The canvas wash owns disclosure; pigment dries in place as the matte grows. */
.watercolor-revealing { will-change: mask-image; animation: painted-pigment-drying 1050ms ease-out both; }
.watercolor-lifting { will-change: mask-image; animation: painted-pigment-lifting 700ms ease-in both; }
@keyframes painted-pigment-touch { 0% { filter: saturate(.92) contrast(1); } 38% { filter: saturate(1.23) contrast(1.045) brightness(.98); } 100% { filter: saturate(1.1) contrast(1.035); } }
@keyframes painted-pigment-drying { 0% { filter: saturate(1.14) contrast(.975) brightness(.992); } 46% { filter: saturate(1.07) contrast(1.015); } 100% { filter: saturate(1) contrast(1) brightness(1); } }
@keyframes painted-pigment-lifting { 0% { filter: saturate(1) contrast(1) brightness(1); } 100% { filter: saturate(.78) contrast(.94) brightness(1.025); } }
@media (max-height: 780px) and (min-width: 761px) { .painted-computer { width: min(1030px, calc((100dvh - 119px) * 1.5), 100%); } .painted-desktop-paper { padding-top: 20px; } .painted-desktop-heading { max-width: min(1030px, calc((100dvh - 119px) * 1.5)); } }
@media (max-width: 760px) { .painted-desktop-paper { padding: 23px 14px 21px; justify-content: center; } .painted-desktop-heading { align-items: flex-start; padding: 0 10px; } .painted-desktop-heading h2 { font-size: 24px; } .painted-desktop-heading p { max-width: 180px; line-height: 1.4; } .painted-room-back { font-size: 11px !important; padding-top: 5px !important; } .painted-computer { width: min(750px, 100vw); max-width: none; margin: 24px 0 13px; } .painted-computer-screen { --display-left: 15.45%; --display-width: 68.95%; } .painted-folder-window { inset: 3%; } .painted-folder-bar { min-height: 35px; padding: 7px 10px 5px; gap: 5px; } .painted-folder-body { padding: 10px 14px 13px; } .painted-folder-subheading { margin-bottom: 10px; font-size: 10px; } .painted-folder-empty { min-height: 72%; padding: 0 5px 6px; } .painted-empty-art { width: 64px; margin-top: -8px; } .painted-folder-empty h4 { font-size: 15px; } .painted-folder-empty p { font-size: 10px; } .painted-folder-foot { font-size: 8px; padding: 5px 10px; } .painted-folder-body h4 { font-size: 16px; } .painted-copy { font-size: 12px; } .painted-content-meta { font-size: 10px; } .painted-project-list { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .painted-desktop-paper { justify-content: flex-start; padding-top: 24px; } .painted-desktop-heading { width: 100%; } .painted-computer { margin-top: max(46px, calc((100dvh - 550px) * .22)); } .painted-desktop-folders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 13%; width: 79%; } .painted-folder-art { width: 55px; } .painted-desktop-welcome { margin-bottom: 3%; font-size: 12px; } .painted-desktop-home { padding: 2%; } .painted-folder { padding-bottom: 2px !important; } .painted-folder-label { font-size: 10px; } .painted-desktop-note { display: none; } .painted-desktop-caption { margin-top: 18px; font-size: 11px; } .painted-empty-art { display: none; } .painted-folder-empty { min-height: 58%; } .painted-folder-back { font-size: 9px !important; } .painted-folder-bar h3 { font-size: 13px; } .painted-folder-close { font-size: 21px !important; } }
@media (prefers-reduced-motion: reduce) { .painted-desktop, .painted-desktop::backdrop, .painted-desktop *, .painted-desktop *::before { animation: none !important; transition: none !important; } }
@media (max-width: 600px) {
 .painted-computer-screen.has-open-folder { overflow: visible; isolation: auto; }
 .painted-folder-window { position: fixed; inset: 124px 16px 24px; z-index: 5; background-color: #f8f5ed; box-shadow: 0 5px 25px #514c4612; }
 .painted-folder-bar { min-height: 45px; padding: 10px 16px; }
 .painted-folder-body { padding: 16px 20px 24px; }
 .painted-folder-body h4 { font-size: 20px; }
 .painted-folder-body h5 { font-size: 16px; }
 .painted-copy { font-size: 14px; line-height: 1.65; }
 .painted-content-meta,.painted-content-link,.painted-timeline-date { font-size: 12px; }
 .painted-folder-empty h4 { font-size: 20px; }
 .painted-folder-empty p { font-size: 13px; }
 .painted-folder-foot { font-size: 10px; padding: 10px 16px; }
 .painted-folder-close { font-size: 26px !important; }
 .painted-folder-back { font-size: 12px !important; }
}

.painted-desktop.is-reduced, .painted-desktop.is-reduced::backdrop, .painted-desktop.is-reduced *, .painted-desktop.is-reduced *::before { animation: none !important; transition: none !important; }

/* Settled pigment and skipped paper stay present after every reveal. */
.painted-folder-art::before { content: ''; position: absolute; inset: 25% 9% 16%; z-index: 1; pointer-events: none; background: url('/assets/painted/paper-wash.webp') 21% 37% / 170px 170px; mix-blend-mode: screen; opacity: .3; clip-path: polygon(5% 4%, 29% 1%, 37% 10%, 94% 9%, 99% 18%, 96% 88%, 89% 98%, 7% 94%, 0 86%, 1% 13%); }
.painted-folder-art::after { content: ''; position: absolute; inset: 23% 8% 15%; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, transparent 63%, #4d514415 76%, #4d514448 94%, transparent 99%), url('/assets/painted/pigment-wash.png') 18% 57% / 270px 270px; background-blend-mode: multiply; mix-blend-mode: luminosity; opacity: .31; clip-path: polygon(5% 7%, 12% 2%, 28% 1%, 35% 10%, 63% 9%, 70% 12%, 96% 11%, 100% 19%, 98% 43%, 96% 68%, 94% 89%, 88% 98%, 63% 97%, 48% 94%, 28% 96%, 8% 93%, 0 84%, 1% 65%, 0 42%, 2% 19%); transition: opacity 650ms ease-out; }
.painted-folder:hover .painted-folder-art::after, .painted-folder:focus-visible .painted-folder-art::after { opacity: .48; }
.painted-folder-art svg path:last-child { stroke-dasharray: 17 3 6 4 24 2; stroke-width: 2.3; opacity: .49; }
.painted-folder-label { position: relative; }
.painted-folder-label::after, .painted-room-back::after, .painted-folder-back::after, .painted-content-link::after { content: ''; position: absolute; pointer-events: none; height: 4px; left: 6%; right: 5%; bottom: 0; background: currentColor; opacity: .18; clip-path: polygon(0 38%, 13% 13%, 22% 38%, 34% 20%, 46% 35%, 58% 15%, 67% 27%, 79% 8%, 94% 22%, 100% 40%, 97% 76%, 84% 63%, 76% 92%, 60% 67%, 50% 88%, 35% 65%, 24% 94%, 12% 72%, 2% 89%); transition: opacity 600ms ease-out; }
.painted-folder-label::after { opacity: .04; bottom: -2px; }
.painted-folder:hover .painted-folder-label::after, .painted-folder:focus-visible .painted-folder-label::after, .painted-room-back:hover::after, .painted-room-back:focus-visible::after, .painted-folder-back:hover::after, .painted-folder-back:focus-visible::after, .painted-content-link:hover::after, .painted-content-link:focus-visible::after { opacity: .49; }
.painted-room-back, .painted-folder-back, .painted-folder-close { position: relative; }
.painted-folder-bar::after, .painted-folder-foot::before, .painted-project-card::after, .painted-note::after { content: ''; position: absolute; pointer-events: none; left: 2%; right: 3%; height: 2px; background: linear-gradient(90deg, transparent, #a599791f 9%, #a599793b 18%, #a599791a 35%, #a5997937 48%, #a5997917 71%, #a5997928 88%, transparent); clip-path: polygon(0 39%, 11% 20%, 21% 40%, 34% 2%, 44% 30%, 58% 21%, 67% 39%, 81% 4%, 91% 30%, 100% 39%, 97% 81%, 86% 69%, 73% 99%, 61% 72%, 47% 92%, 35% 70%, 24% 96%, 12% 69%, 0 90%); }
.painted-folder-bar::after, .painted-project-card::after, .painted-note::after { bottom: 0; }
.painted-folder-foot::before { top: 0; }
.painted-timeline-entry::after { content: ''; position: absolute; left: 0; top: 6px; bottom: 0; width: 2px; background: linear-gradient(#9aa88c36, #a9ae9952 31%, #a9ae991c 57%, #9aa88c40 75%, transparent); clip-path: polygon(10% 0, 84% 0, 62% 11%, 96% 29%, 65% 45%, 94% 59%, 55% 81%, 77% 100%, 13% 100%, 38% 78%, 5% 62%, 31% 45%, 0 29%, 39% 12%); }
.painted-timeline-entry::before { background: #a8b398 url('/assets/painted/pigment-wash.png') 34% 18% / 80px 80px; background-blend-mode: soft-light; box-shadow: 0 0 2px #7e977242; }
/* The irregular ink frame is visible at keyboard focus without rigid UI chrome. */
.painted-desktop button:focus-visible::before, .painted-content-link:focus-visible::before { content: ''; position: absolute; inset: -5px; z-index: 3; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cpath d='M4 5L19 3 34 4 50 2 66 4 80 3 96 5 98 16 97 27 99 39 96 46 83 47 67 46 51 48 36 46 20 48 5 45 2 34 3 23 1 14 4 5' fill='none' stroke='%236b8071' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M8 7L29 6M73 44L91 45' fill='none' stroke='%236b8071' stroke-width='.5' opacity='.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
@media (forced-colors: active) { .painted-desktop button:focus-visible, .painted-desktop a:focus-visible, .painted-folder-body:focus-visible { outline: 2px solid Highlight; outline-offset: 3px; } .painted-desktop button:focus-visible::before, .painted-content-link:focus-visible::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .watercolor-revealing, .watercolor-lifting { animation: none !important; } }

.painted-desktop-paper::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('/assets/painted/paper-wash.webp') center / 512px 512px; opacity: .08; }

/* Inside the laptop: the display is the whole painted workspace. */
.painted-desktop.is-screen-desktop { overflow: hidden; background: transparent; }
.is-screen-desktop .painted-desktop-paper { width: 100%; height: 100dvh; min-height: 0; padding: 0; display: block; background: transparent; transition: none; }
.is-screen-desktop .painted-desktop-paper::before { display: none; }
.is-screen-desktop .painted-computer { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; margin: 0; }
.is-screen-desktop .painted-computer-art { display: none; }
.is-screen-desktop .painted-desktop-wallpaper { position: absolute; inset: 8px; isolation: isolate; overflow: hidden; pointer-events: none; background-color: #e5e8df; background-size: cover; background-position: center; clip-path: polygon(.35% .4%, 7% .2%, 15% .6%, 23% .15%, 32% .5%, 42% .2%, 51% .45%, 60% .1%, 70% .6%, 81% .25%, 91% .55%, 99.6% .15%, 99.85% 10%, 99.6% 21%, 99.9% 32%, 99.55% 43%, 99.9% 54%, 99.6% 65%, 99.85% 76%, 99.6% 87%, 99.8% 99.5%, 91% 99.75%, 81% 99.3%, 72% 99.7%, 62% 99.35%, 51% 99.8%, 41% 99.4%, 31% 99.7%, 21% 99.3%, 11% 99.75%, .2% 99.45%, .45% 89%, .1% 78%, .5% 67%, .15% 56%, .55% 45%, .2% 34%, .5% 23%, .15% 11%); }
.is-screen-desktop .painted-desktop-wallpaper::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: url('/assets/painted/paper-wash.webp') center / 512px 512px; mix-blend-mode: soft-light; opacity: .7; }
.is-screen-desktop .painted-desktop-wallpaper::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: url('/assets/painted/pigment-wash.png') 23% 39% / 810px 810px; mix-blend-mode: luminosity; opacity: .13; }
.is-screen-desktop .painted-desktop-layer-wash { position: absolute; pointer-events: none; opacity: .24; background: #95afba; border-radius: 31% 64% 45% 51% / 46% 39% 67% 59%; clip-path: polygon(2% 24%, 9% 13%, 18% 17%, 25% 7%, 34% 12%, 45% 1%, 53% 11%, 65% 5%, 73% 18%, 84% 12%, 94% 25%, 98% 42%, 92% 51%, 100% 63%, 92% 75%, 94% 86%, 83% 92%, 72% 86%, 60% 100%, 48% 90%, 36% 95%, 29% 82%, 17% 87%, 9% 72%, 1% 66%, 6% 49%, 0 40%); }
.is-screen-desktop .painted-desktop-layer-wash::before { content: ''; position: absolute; inset: 0; background: url('/assets/painted/pigment-wash.png') center / cover; mix-blend-mode: luminosity; opacity: .53; }
.is-screen-desktop .painted-desktop-layer-wash:nth-child(1) { inset: -14% 24% 39% -18%; background-color: #afc6c9; opacity: .37; }
.is-screen-desktop .painted-desktop-layer-wash:nth-child(2) { inset: 12% -23% 8% 38%; background-color: #a8c1b7; opacity: .28; }
.is-screen-desktop .painted-desktop-layer-wash:nth-child(3) { inset: 45% 43% -19% -25%; background-color: #ae94a0; opacity: .27; }
.is-screen-desktop .painted-desktop-layer-wash:nth-child(4) { inset: 52% -8% -27% 14%; background-color: #789fa4; opacity: .25; }
.is-screen-desktop .painted-desktop-layer-wash:nth-child(5) { inset: -21% -29% 48% 61%; background-color: #c8b894; opacity: .24; }
.is-screen-desktop .painted-desktop-layer-wash:nth-child(6) { inset: 19% 64% 28% -9%; background-color: #d1c9af; opacity: .25; }
.is-screen-desktop .painted-desktop-heading { position: absolute; top: 25px; left: 31px; right: 31px; width: auto; max-width: none; margin: 0; padding: 0 5px; min-height: 40px; z-index: 4; align-items: center; color: #425c59; }
.is-screen-desktop .painted-desktop-heading::before { content: ''; position: absolute; inset: -12px -16px -10px; z-index: -1; pointer-events: none; background: #f5f3e7db url('/assets/painted/paper-wash.webp') center / 512px 512px; clip-path: polygon(.1% 8%, 11% 2%, 23% 7%, 37% 1%, 52% 5%, 65% 0, 78% 8%, 90% 3%, 99.7% 10%, 100% 88%, 90% 94%, 76% 88%, 65% 98%, 52% 91%, 39% 100%, 24% 90%, 12% 97%, .2% 87%); opacity: .93; }
.is-screen-desktop .painted-desktop-heading h2 { font-size: 17px; letter-spacing: -.01em; color: #405a57; }
.is-screen-desktop .painted-desktop-heading p { margin: 4px 0 0; font-size: 10px; color: #74827a; }
.is-screen-desktop .painted-room-back { color: #4c6962 !important; font-size: 12px !important; padding: 8px 2px 8px 12px !important; }
.is-screen-desktop.is-portal-painting .painted-desktop-heading-copy { visibility: visible; }
.is-screen-desktop .painted-desktop-toolbar { position: absolute; top: 33px; left: clamp(220px, 23vw, 350px); right: 195px; display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); color: #62786f; font-size: 12px; line-height: 1.6; z-index: 4; pointer-events: none; }
.is-screen-desktop .painted-desktop-toolbar span:last-child { margin-left: auto; color: #7a857b; }
.is-screen-desktop .painted-computer-screen { inset: 114px max(36px, 8vw) 112px; width: auto; height: auto; border-radius: 0; overflow: visible; isolation: auto; background: none; z-index: 2; }
.is-screen-desktop .painted-desktop-home { padding: 0; align-items: flex-end; justify-content: center; height: 100%; }
.is-screen-desktop .painted-desktop-welcome { width: min(57%, 570px); font-size: clamp(25px, 2.8vw, 37px); line-height: 1.2; text-align: center; margin: 0 0 30px; color: #516c67; text-shadow: 0 1px 9px #f3f2e478; }
.is-screen-desktop .painted-desktop-folders { width: min(57%, 570px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; }
.is-screen-desktop .painted-folder { justify-self: center; width: 180px; max-width: 100%; padding: 0 5px 12px !important; }
.is-screen-desktop .painted-folder-art { width: clamp(108px, 12.6vw, 156px); }
.is-screen-desktop .painted-folder-label { font-size: 16px; color: #425e57; margin-top: -4%; padding: 5px 8px 3px; text-shadow: 0 1px 8px #f6f3e47a; }
.is-screen-desktop .painted-folder:hover .painted-folder-label { color: #304e45; }
.is-screen-desktop .painted-desktop-note { width: min(57%, 570px); text-align: center; font-size: 12px; margin: 28px 0 0; color: #647d70; }
.is-screen-desktop .painted-desktop-caption { position: absolute; bottom: 20px; left: 27px; margin: 0; z-index: 2; max-width: 28%; font-size: 11px; line-height: 1.4; color: #66837d; }
.is-screen-desktop .painted-desktop-dock { position: absolute; left: 50%; bottom: 24px; width: min(610px, 61vw); min-height: 66px; display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.5vw, 35px); padding: 13px 25px 11px; transform: translateX(-50%); isolation: isolate; z-index: 3; color: #59746a; pointer-events: auto; }
.is-screen-desktop .painted-desktop-dock::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #f4f0e2cf url('/assets/painted/paper-wash.webp') center / 512px 512px; opacity: .94; clip-path: polygon(.8% 10%, 6% 4%, 17% 9%, 28% 2%, 40% 7%, 51% 1%, 64% 8%, 75% 3%, 86% 10%, 95% 5%, 99% 14%, 99.7% 43%, 99.1% 69%, 98.7% 90%, 91% 95%, 81% 90%, 69% 98%, 58% 93%, 46% 100%, 34% 93%, 23% 99%, 11% 92%, 2% 96%, .3% 73%, .7% 49%); box-shadow: 0 3px 14px #65786c15; }
.is-screen-desktop .painted-desktop-dock > span { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 45px; font-size: 10px; line-height: 1.2; letter-spacing: .015em; }
.is-screen-desktop .painted-desktop-dock > span::before { content: ''; display: block; width: 27px; height: 25px; background: currentColor; opacity: .53; clip-path: polygon(6% 25%, 14% 13%, 39% 11%, 47% 24%, 89% 23%, 96% 33%, 92% 85%, 82% 94%, 17% 91%, 6% 84%); }
.is-screen-desktop .painted-desktop-dock > span:nth-child(2) { color: #899c8d; }
.is-screen-desktop .painted-desktop-dock > span:nth-child(3) { color: #9b8d9a; }
.is-screen-desktop .painted-desktop-dock > span:nth-child(4) { color: #a99b76; }
.is-screen-desktop .painted-desktop-dock > span:nth-child(5) { color: #829aa5; }
.is-screen-desktop .painted-folder-window { position: absolute; inset: 97px max(30px, 7vw) 113px; width: auto; height: auto; max-width: 1120px; margin-inline: auto; z-index: 6; }
.is-screen-desktop .painted-folder-bar { min-height: 60px; padding: 15px 27px 11px; }
.is-screen-desktop .painted-folder-bar h3 { font-size: 23px; }
.is-screen-desktop .painted-folder-back { font-size: 13px !important; }
.is-screen-desktop .painted-folder-close { font-size: 29px !important; }
.is-screen-desktop .painted-folder-body { padding: 24px 38px 30px; }
.is-screen-desktop .painted-folder-subheading { margin-bottom: 24px; font-size: 13px; }
.is-screen-desktop .painted-folder-body h4 { font-size: 23px; }
.is-screen-desktop .painted-folder-body h5 { font-size: 17px; }
.is-screen-desktop .painted-copy { font-size: 15px; line-height: 1.7; }
.is-screen-desktop .painted-content-meta, .is-screen-desktop .painted-content-link, .is-screen-desktop .painted-timeline-date { font-size: 12px; }
.is-screen-desktop .painted-folder-foot { padding: 12px 28px 14px; font-size: 11px; }
.is-screen-desktop .painted-folder-empty { min-height: 77%; }
.is-screen-desktop .painted-empty-art { display: block; width: 111px; }
.is-screen-desktop .painted-folder-empty h4 { font-size: 27px; }
.is-screen-desktop .painted-folder-empty p { max-width: 380px; font-size: 14px; line-height: 1.7; }
.is-screen-desktop .painted-project-list { gap: 25px 35px; }
.is-screen-desktop .painted-project-card { padding-bottom: 22px; }
.is-screen-desktop .painted-timeline-entry { padding: 0 0 31px 24px; }
@media (max-width: 900px) { .is-screen-desktop .painted-desktop-toolbar { display: none; } .is-screen-desktop .painted-desktop-welcome, .is-screen-desktop .painted-desktop-folders, .is-screen-desktop .painted-desktop-note { width: 64%; } .is-screen-desktop .painted-folder { width: 158px; } .is-screen-desktop .painted-folder-art { width: 126px; } }
@media (max-width: 600px) {
 .is-screen-desktop .painted-desktop-wallpaper { inset: 5px; }
 .is-screen-desktop .painted-desktop-heading { top: 20px; left: 24px; right: 24px; padding: 0; min-height: 34px; }
 .is-screen-desktop .painted-desktop-heading::before { inset: -10px -12px; }
 .is-screen-desktop .painted-desktop-heading h2 { font-size: 16px; }
 .is-screen-desktop .painted-desktop-heading p { display: none; }
 .is-screen-desktop .painted-room-back { font-size: 11px !important; padding: 7px 0 7px 10px !important; }
 .is-screen-desktop .painted-computer-screen { inset: 97px 27px 104px; }
 .is-screen-desktop .painted-desktop-home { align-items: center; }
 .is-screen-desktop .painted-desktop-welcome { width: 100%; font-size: 29px; line-height: 1.25; margin-bottom: 28px; }
 .is-screen-desktop .painted-desktop-folders { width: 100%; gap: 27px 15px; }
 .is-screen-desktop .painted-folder { width: 136px; padding-bottom: 8px !important; }
 .is-screen-desktop .painted-folder-art { width: 119px; }
 .is-screen-desktop .painted-folder-label { font-size: 14px; }
 .is-screen-desktop .painted-desktop-note { display: block; width: 100%; font-size: 11px; margin-top: 26px; }
 .is-screen-desktop .painted-desktop-dock { bottom: 20px; width: calc(100% - 48px); min-height: 62px; padding: 10px 15px; gap: 15px; }
 .is-screen-desktop .painted-desktop-dock > span { min-width: 35px; font-size: 9px; }
 .is-screen-desktop .painted-desktop-dock > span::before { width: 23px; height: 22px; }
 .is-screen-desktop .painted-desktop-caption { display: none; }
 .is-screen-desktop .painted-folder-window { inset: 82px 12px 101px; max-width: none; }
 .is-screen-desktop .painted-folder-bar { min-height: 53px; padding: 13px 17px 10px; }
 .is-screen-desktop .painted-folder-bar h3 { font-size: 21px; }
 .is-screen-desktop .painted-folder-body { padding: 19px 22px 25px; }
 .is-screen-desktop .painted-folder-subheading { font-size: 12px; margin-bottom: 20px; }
 .is-screen-desktop .painted-folder-body h4 { font-size: 22px; }
 .is-screen-desktop .painted-copy { font-size: 14px; }
 .is-screen-desktop .painted-folder-foot { padding: 11px 18px 13px; font-size: 10px; }
 .is-screen-desktop .painted-folder-empty h4 { font-size: 23px; }
 .is-screen-desktop .painted-folder-empty p { font-size: 13px; }
 .is-screen-desktop .painted-empty-art { width: 91px; }
}
@media (max-height: 610px) and (min-width: 601px) { .is-screen-desktop .painted-desktop-heading { top: 18px; } .is-screen-desktop .painted-computer-screen { inset: 86px 7vw 93px; } .is-screen-desktop .painted-desktop-welcome { width: 100%; font-size: 24px; margin-bottom: 20px; } .is-screen-desktop .painted-desktop-home { align-items: center; } .is-screen-desktop .painted-desktop-folders { width: min(90%, 830px); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .is-screen-desktop .painted-folder-art { width: 112px; } .is-screen-desktop .painted-desktop-note { width: 100%; margin-top: 18px; } .is-screen-desktop .painted-desktop-dock { bottom: 17px; min-height: 58px; } .is-screen-desktop .painted-folder-window { inset: 83px 5vw 91px; } }
@media (max-height: 640px) and (max-width: 600px) { .is-screen-desktop .painted-computer-screen { inset: 86px 27px 90px; } .is-screen-desktop .painted-desktop-welcome { font-size: 24px; margin-bottom: 19px; } .is-screen-desktop .painted-desktop-folders { gap: 17px 12px; } .is-screen-desktop .painted-folder-art { width: 95px; } .is-screen-desktop .painted-folder-label { font-size: 13px; } .is-screen-desktop .painted-desktop-note { display: none; } .is-screen-desktop .painted-desktop-dock { bottom: 14px; min-height: 55px; } .is-screen-desktop .painted-folder-window { inset: 77px 10px 83px; } }

.is-screen-desktop .painted-desktop-wallpaper { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201000%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22paint%22%20x%3D%22-8%25%22%20y%3D%22-12%25%22%20width%3D%22116%25%22%20height%3D%22124%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.013%20.036%22%20numOctaves%3D%223%22%20seed%3D%228%22%20result%3D%22grain%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22grain%22%20scale%3D%2228%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.35%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%221000%22%20fill%3D%22%23ecede3%22%2F%3E%3Cg%20filter%3D%22url%28%23paint%29%22%3E%3Cpath%20d%3D%22M-70%2093Q103%2048%20281%20113T632%2092Q839%20139%201002%2092T1680%20101L1659%20559Q1510%20535%201400%20578T1007%20562Q808%20602%20587%20551T-72%20586Z%22%20fill%3D%22%23bcced1%22%20opacity%3D%22.63%22%2F%3E%3Cpath%20d%3D%22M-76%20505Q60%20446%20191%20391Q260%20301%20352%20384L494%20459Q580%20420%20680%20493T957%20496Q1084%20448%201245%20385Q1331%20355%201395%20425L1667%20504%201692%20788-83%20810Z%22%20fill%3D%22%239dbab4%22%20opacity%3D%22.51%22%2F%3E%3Cpath%20d%3D%22M-74%20579Q26%20524%20104%20519L213%20409Q241%20386%20279%20455L382%20515Q421%20512%20485%20557L610%20576%20471%20813-80%20809Z%22%20fill%3D%22%23b299a4%22%20opacity%3D%22.52%22%2F%3E%3Cpath%20d%3D%22M-52%20656Q88%20598%20246%20644T551%20618Q792%20679%20977%20612T1369%20643Q1504%20628%201669%20589L1661%20994Q1473%20979%201306%201017L924%20984Q645%201024%20425%20987T-75%201019Z%22%20fill%3D%22%238dabad%22%20opacity%3D%22.51%22%2F%3E%3Cpath%20d%3D%22M863%20343Q967%20299%201142%20349T1676%20314L1664%20507Q1484%20493%201307%20526T843%20478Z%22%20fill%3D%22%23c9bf9d%22%20opacity%3D%22.23%22%2F%3E%3Cpath%20d%3D%22M-23%20729Q184%20707%20385%20738T748%20726Q893%20696%201007%20728T1459%20713%22%20fill%3D%22none%22%20stroke%3D%22%23f7f4e6%22%20stroke-width%3D%2217%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.29%22%2F%3E%3Cpath%20d%3D%22M44%20774Q208%20757%20380%20783M497%20841Q693%20812%20913%20842M1175%20901Q1360%20875%201584%20897%22%20fill%3D%22none%22%20stroke%3D%22%23f7f4e6%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.29%22%2F%3E%3Cpath%20d%3D%22M-40%20233Q191%20203%20353%20238M718%20187Q876%20166%201098%20189M1260%20247Q1436%20209%201643%20240%22%20fill%3D%22none%22%20stroke%3D%22%23f8f5e9%22%20stroke-width%3D%2229%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.32%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

/* Dock shortcuts are small painted folders with comfortable real hit areas. */
.is-screen-desktop .painted-desktop-dock { min-height: 82px; padding: 8px 17px; gap: clamp(10px, 2.1vw, 28px); }
.is-screen-desktop .painted-dock-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 76px; min-height: 64px; padding: 3px 10px 5px !important; color: #567068; font-size: 11px; line-height: 1.2; }
.is-screen-desktop .painted-dock-item > svg { display: block; width: 48px; height: 36px; }
.is-screen-desktop .painted-dock-item .painted-folder-art { width: 50px; }
.is-screen-desktop .painted-dock-item .painted-folder-label, .is-screen-desktop .painted-dock-item > span:last-child:not(.painted-folder-art) { font-size: 11px; margin-top: -1px; padding: 2px 1px; color: #597166; }
.is-screen-desktop .painted-dock-item:hover .painted-folder-art, .is-screen-desktop .painted-dock-item:focus-visible .painted-folder-art { animation: painted-pigment-touch 750ms ease-out both; }
.is-screen-desktop .painted-dock-item:hover .painted-folder-art::after, .is-screen-desktop .painted-dock-item:focus-visible .painted-folder-art::after { opacity: .49; }
.is-screen-desktop .painted-dock-item:hover .painted-folder-label::after, .is-screen-desktop .painted-dock-item:focus-visible .painted-folder-label::after { opacity: .49; }
@media (max-width: 600px) { .is-screen-desktop .painted-desktop-dock { min-height: 76px; bottom: 16px; padding: 6px 9px; gap: 3px; } .is-screen-desktop .painted-dock-item { min-width: 58px; min-height: 62px; padding: 3px 6px 4px !important; } .is-screen-desktop .painted-dock-item .painted-folder-art { width: 44px; } .is-screen-desktop .painted-dock-item > svg { width: 43px; height: 33px; } .is-screen-desktop .painted-dock-item .painted-folder-label, .is-screen-desktop .painted-dock-item > span:last-child:not(.painted-folder-art) { font-size: 10px; } }
@media (max-height: 610px) and (min-width: 601px) { .is-screen-desktop .painted-desktop-dock { min-height: 70px; padding: 4px 15px; } .is-screen-desktop .painted-dock-item { min-height: 59px; } }
.is-screen-desktop .painted-desktop-caption { max-width: clamp(90px, calc(19.5vw - 48px), 260px); }

.is-screen-desktop.is-portal-painting .painted-desktop-caption{visibility:visible}
.is-screen-desktop:not(.is-arriving):not(.is-leaving) .painted-desktop-paper{background:#faf8ef}

/* Full-color painted lake: the six separate deposits stay soft and light. */
.is-screen-desktop .painted-desktop-wallpaper{background-image:url(/assets/painted/desktop-lake-wallpaper-v1.webp)}
.is-screen-desktop .painted-desktop-layer-wash:nth-child(n){opacity:.065;clip-path:none;mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27pool%27%20x%3D%27-12%25%27%20y%3D%27-12%25%27%20width%3D%27124%25%27%20height%3D%27124%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.055%27%20numOctaves%3D%272%27%20seed%3D%273%27%20result%3D%27grain%27%2F%3E%3CfeDisplacementMap%20in%3D%27SourceGraphic%27%20in2%3D%27grain%27%20scale%3D%278%27%20xChannelSelector%3D%27R%27%20yChannelSelector%3D%27G%27%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%271.2%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%27white%27%20filter%3D%27url%28%23pool%29%27%20d%3D%27M12%2022Q25%205%2043%2015Q68-5%2085%2022Q104%2044%2087%2062Q99%2087%2069%2090Q42%20111%2023%2086Q-2%2080%2011%2055Q-7%2041%2012%2022Z%27%2F%3E%3C%2Fsvg%3E");mask-size:100% 100%;mask-repeat:no-repeat}
.is-screen-desktop .painted-desktop-wallpaper::before{opacity:.18}
.is-screen-desktop .painted-desktop-wallpaper::after{opacity:.045}