:root{--ink:#292e28;--paper:#faf8ef;--paper-dark:#eceade;--desktop:#b8c7af;--desktop-dots:#73836d;--line:#363b32;--peach:#edc4ae;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;--sans:'Helvetica Neue',Helvetica,Arial,sans-serif;--folder-front:#d1ddbd;--folder-back:#adbf9a;color-scheme:light;font-family:var(--sans);color:var(--ink);background:var(--desktop);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}a{color:inherit}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #426b9c;outline-offset:5px}button{border:0;background:none}svg{display:block}button svg,a svg{pointer-events:none}[hidden]{display:none!important}.symbol-library{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;top:-60px;left:20px;z-index:1000;background:var(--paper);padding:12px;border:2px solid var(--ink)}.skip-link:focus{top:10px}
.menubar{height:43px;background:var(--paper);border-bottom:2px solid var(--line);display:flex;align-items:center;gap:27px;padding:0 30px;position:relative;z-index:100;font-family:var(--mono);font-size:12px;letter-spacing:-.3px}.owner-name{font-weight:700;padding:9px 0;font-size:12px;letter-spacing:0}.menubar nav{display:flex;gap:25px;height:100%;align-items:center}.menubar nav button{height:100%;padding:0 2px;font-size:12px}.menubar nav button:hover,.owner-name:hover{background:var(--paper-dark)}.menu-right{margin-left:auto;display:flex;align-items:center;gap:21px}.time-zone{font-size:11px}#clock{min-width:40px;font-variant-numeric:tabular-nums}.wallpaper-toggle{display:flex;gap:0;padding:6px}.wallpaper-toggle span{width:10px;height:10px;border:1px solid var(--ink);border-radius:50%;background:#b8c7af}.wallpaper-toggle span+span{margin-left:-3px;background:#c1ced8}.wallpaper-toggle span:last-child{background:#edc4ae}
.desktop{position:relative;height:calc(100svh - 78px);min-height:760px;isolation:isolate;background-color:var(--desktop);background-image:radial-gradient(circle at .5px .5px,var(--desktop-dots) .55px,transparent .75px);background-size:4px 4px;overflow:hidden}.desktop-heading{position:absolute;left:39px;top:32px;display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:1.3px}.desktop-heading span+span{font-family:var(--sans);font-size:12px;letter-spacing:0;opacity:.7}.desktop-shortcuts{position:absolute;right:34px;top:48px;display:flex;flex-direction:column;gap:29px;align-items:center}.desktop-icon{display:flex;flex-direction:column;align-items:center;gap:7px;width:90px;padding:4px;text-decoration:none;transition:transform .15s}.desktop-icon:hover{transform:translateY(-3px)}.desktop-icon svg{width:49px;height:52px;filter:drop-shadow(2px 2px 0 #29312725)}.desktop-icon span{font-family:var(--mono);font-size:11px;background:var(--paper);padding:3px 5px;white-space:nowrap;border:1px solid transparent}.desktop-icon:hover span{color:var(--paper);background:var(--ink)}
.window{position:absolute;background:var(--paper);border:2px solid var(--line);box-shadow:5px 5px 0 #2d352a35;min-width:0}.window:focus-within{border-color:var(--ink)}.titlebar{height:34px;display:flex;align-items:center;gap:9px;padding:0 10px;border-bottom:2px solid var(--line);background:var(--paper);cursor:grab;touch-action:none;user-select:none}.titlebar:active{cursor:grabbing}.titlebar h1,.titlebar h2{font-family:var(--mono);font-size:12px;line-height:1.2;margin:0;white-space:nowrap;font-weight:600;letter-spacing:-.3px}.title-lines{flex:1;height:17px;background:repeating-linear-gradient(to bottom,var(--line) 0,var(--line) 1px,transparent 1px,transparent 3px);min-width:10px;opacity:.8}.window-close,.window-decoration,.window-expand{width:14px;height:14px;flex-shrink:0;border:1.5px solid var(--line);background:var(--paper);position:relative;padding:0}.window-close:before,.window-close:after{content:'';position:absolute;top:5px;left:2px;width:7px;height:1.5px;background:var(--ink);opacity:0;transform:rotate(45deg)}.window-close:after{transform:rotate(-45deg)}.window-close:hover:before,.window-close:hover:after,.window-close:focus-visible:before,.window-close:focus-visible:after{opacity:1}.window-decoration{border-color:transparent}.window-expand:after{content:'';position:absolute;inset:2px;border-top:1px solid var(--ink)}
.welcome-window{left:8%;top:95px;width:650px;z-index:3}.welcome-content{padding:27px 39px 27px;outline:none}.eyebrow{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:1.3px;display:flex;align-items:center;gap:8px;line-height:1.5}.tiny-spark{font-size:19px;line-height:14px}.intro-layout{margin-top:24px}.intro-heading{font-size:48px;letter-spacing:-2px;line-height:1.02;font-weight:500}.intro-heading>span{font-family:Georgia,'Times New Roman',serif;font-size:96px;font-style:italic;font-weight:400;letter-spacing:-5px;line-height:1.08}.intro-description{font-size:19px;line-height:1.45;letter-spacing:-.35px;margin:16px 0 12px}.intro-secondary{font-size:13px;line-height:1.75;color:#666b5e;margin:0}.welcome-actions{display:flex;flex-wrap:wrap;align-items:center;gap:23px;margin-top:22px}.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:42px;padding:12px 17px;border:1.5px solid var(--line);font-family:var(--mono);font-size:11px;text-decoration:none;line-height:1.4;box-shadow:2px 2px 0 #424b3b25;transition:transform .15s,box-shadow .15s}.button-primary{background:var(--ink);color:var(--paper)}.button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #424b3b35}.button:active{transform:translate(1px,1px);box-shadow:none}.button span{font-size:16px;line-height:1}.text-button{display:flex;text-decoration:none;align-items:center;gap:12px;padding:10px 0;font-family:var(--mono);font-size:10px;border-bottom:1px solid transparent}.text-button:hover{border-bottom-color:var(--ink)}.text-button span{font-size:16px}.window-status{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #a5aa98;background:#f0f0e4;padding:9px 15px;font:9px var(--mono);color:#626856}.window-status>span:first-child{display:flex;align-items:center;gap:6px}.status-dot{display:inline-block;vertical-align:middle;width:6px;height:6px;background:#657d58;border-radius:50%;flex-shrink:0}
.projects-window{left:54%;top:326px;width:470px;z-index:4}.finder-toolbar{padding:9px 13px;border-bottom:1px solid #b5b8a8;background:#f3f1e7;display:flex;align-items:center;gap:12px;font:9px var(--mono);height:43px}.back-button{width:24px;height:24px;flex-shrink:0;font-size:19px;border:1px solid #a7ad9d;line-height:20px;padding:0;background:var(--paper);box-shadow:1px 1px 0 #cccdbd}.back-button:disabled{opacity:.35}.back-button:hover:not(:disabled){background:var(--paper-dark)}.view-controls{display:flex;gap:2px;margin-left:auto}.view-toggle{font-size:18px;padding:1px 5px;height:25px;border:1px solid transparent;line-height:1}.view-toggle.active{background:#e2e3d5;border-color:#a2a793}.folder-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px 37px;padding:28px 46px 32px}.folder-item{display:flex;flex-direction:column;align-items:center;padding:5px;min-width:0}.folder-item svg{width:77px;height:64px;transition:transform .15s;filter:drop-shadow(2px 2px 0 #2c31292a)}.folder-item strong{font:12px var(--mono);margin-top:7px;padding:3px 5px}.folder-item>span{font:9px var(--mono);margin-top:5px;color:#7c806f;white-space:nowrap}.folder-item:hover svg{transform:translateY(-4px)}.folder-item:hover strong{background:var(--ink);color:var(--paper)}.folder-blue{--folder-front:#c6d9de;--folder-back:#a4becb}.folder-peach{--folder-front:#ecc6ae;--folder-back:#d4a991}.folder-lilac{--folder-front:#d6cddd;--folder-back:#bbb0c7}.finder-footer{padding:9px 13px;border-top:1px solid #afb5a0;display:flex;gap:12px;justify-content:space-between;position:relative;min-height:31px;background:#f3f1e7;font:9px var(--mono);color:#717661}.finder-footer>span:nth-child(2){padding-right:10px}.resize-decoration{position:absolute;bottom:1px;right:2px;font-size:14px;color:#8e9480}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:18px;max-height:380px;overflow-y:auto;scrollbar-color:#a0aa92 var(--paper-dark);scrollbar-width:thin}.project-card{text-align:left;border:1px solid #bec2ae;background:#fffdf6;padding:0;overflow:hidden;display:flex;flex-direction:column}.project-card:hover{border-color:var(--ink);box-shadow:2px 2px 0 #29312725}.project-card:focus-visible{outline-offset:-4px}.project-card-visual{height:94px;background:#e5e8d9;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;width:100%;border-bottom:1px solid #c1c5b4}.project-card-label{padding:11px;display:flex;flex-direction:column;gap:5px}.project-card-label strong{font:11px var(--mono);line-height:1.4}.project-card-label>span{font-size:10px;line-height:1.5;color:#777b6a}.project-card-visual img{width:100%;height:100%;object-fit:cover}.project-grid.list-view{grid-template-columns:1fr;gap:7px}.list-view .project-card{flex-direction:row;align-items:center}.list-view .project-card-visual{width:80px;height:68px;flex-shrink:0;border:0;border-right:1px solid #c1c5b4}.list-view .project-card-label{flex:1}.list-view .project-card-visual .project-glyph{transform:scale(.7)}.list-view .project-card-label>span{font-size:10px}.projects-window.expanded{width:min(740px,calc(100% - 70px));left:50%;top:110px;transform:translateX(-50%)}.expanded .project-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:480px}.expanded .project-grid.list-view{grid-template-columns:1fr}.folder-grid.list-view{grid-template-columns:1fr;gap:0;padding:10px 25px}.folder-grid.list-view .folder-item{flex-direction:row;gap:13px;border-bottom:1px solid #d8dacb;padding:10px 0}.folder-grid.list-view .folder-item:last-child{border-bottom:0}.folder-grid.list-view .folder-item svg{width:39px;height:35px}.folder-grid.list-view .folder-item strong{margin:0}.folder-grid.list-view .folder-item>span{margin:0 0 0 auto}
.desktop-bottom{position:absolute;bottom:21px;left:39px;right:39px;display:flex;justify-content:space-between;align-items:center;font:10px var(--mono);color:#43523d}.restore-button{font:10px var(--mono);display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid #52644950;background:#e8eddf45}.restore-button:hover{background:var(--paper)}.restore-button>span{font-size:15px}.system-footer{height:35px;background:var(--paper);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 30px;font:9px var(--mono);letter-spacing:.1px}.system-footer>span:first-child{display:flex;align-items:center;gap:7px}.info-window{left:50%;top:125px;width:520px;transform:translateX(-50%);z-index:10}.document-content{padding:34px}.document-content h3{font:italic 42px/1.1 Georgia,serif;letter-spacing:-1.4px;margin:22px 0}.document-content p{font-size:14px;line-height:1.8;color:#646956;margin:18px 0}.document-content .document-footnote{font:10px/1.8 var(--mono);padding-top:17px;border-top:1px solid #c7cbb8}.skill-labels{display:flex;flex-wrap:wrap;gap:6px;margin:23px 0}.skill-labels span{font:9px var(--mono);border:1px solid #c0c5b0;padding:7px 9px;background:#eeeee2}.document-content .button{margin-top:7px}.contact-window{width:470px;top:180px}.contact-illustration{width:80px;height:70px;float:right;transform:rotate(-9deg);margin:-4px -3px 8px 10px}.detail-window{left:50%;top:80px;width:570px;transform:translateX(-50%);z-index:15}.detail-content{max-height:min(640px,calc(100svh - 180px));overflow-y:auto;overscroll-behavior:contain}.detail-visual{height:225px;border-bottom:1px solid var(--ink);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#e5e8d9}.detail-visual:has(img){height:280px;background:#deded2}.detail-visual img{height:100%;width:100%;object-fit:contain}.detail-copy{padding:29px 34px 34px}.detail-copy h3{font:italic 36px/1.15 Georgia,serif;letter-spacing:-1px;margin:15px 0}.detail-copy p{font-size:14px;line-height:1.8;color:#656a58}.detail-copy .skill-labels{margin:19px 0}.detail-copy .project-link{margin-top:8px}.detail-copy .pending-link{font:10px/1.7 var(--mono);padding-top:15px;border-top:1px solid #c7cbb8;color:#777b69}.award{font:10px var(--mono);background:#eae2bc;padding:10px 12px;border:1px solid #b8ae7a;display:inline-block;margin-bottom:5px}.noscript-note{position:fixed;bottom:0;padding:20px;background:var(--paper);z-index:999;width:100%;border-top:2px solid var(--ink);text-align:center}
/* Small, code-drawn project emblems, not simulated product screenshots. */
.project-glyph{position:relative;display:flex;align-items:center;justify-content:center;font-family:var(--mono)}.visual-repo{background:#cfd9c4}.repo-glyph{width:58px;height:49px;background:var(--paper);border:2px solid var(--ink);box-shadow:4px 4px 0 #65795a38;font-size:24px}.repo-glyph:before{position:absolute;content:'';height:8px;top:0;left:0;right:0;border-bottom:2px solid var(--ink);background:repeating-linear-gradient(90deg,var(--ink) 0,var(--ink) 2px,transparent 2px,transparent 5px)}.repo-glyph span{transform:translateY(5px)}.visual-logic{background:#e8ceb7}.logic-glyph{gap:4px;align-items:end;height:45px}.logic-glyph i{width:11px;background:#657b56;border:1.5px solid var(--ink);height:20px}.logic-glyph i:nth-child(2){height:32px;background:#c8b460}.logic-glyph i:nth-child(3){height:24px;background:#d39979}.logic-glyph i:nth-child(4){height:43px;background:#a8bac4}.visual-handy{background:#e6dec2}.handy-glyph{font:45px Georgia,serif;color:#655a3d;line-height:1}.visual-radar{background:#d0ddd3}.radar-glyph{border:1.5px solid #4c6b58;width:61px;height:61px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0,transparent 13px,#4c6b5860 14px,#4c6b5860 15px)}.radar-glyph:before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:#4c6b5880}.radar-glyph:after{content:'✦';position:absolute;font-size:17px;right:6px;top:15px}.visual-telemetry{background:#ced9de}.telemetry-glyph{font-size:27px;border-bottom:2px solid var(--ink);padding:5px}.visual-simon{background:#dad2de}.simon-glyph{display:grid;grid-template-columns:repeat(2,24px);gap:4px;transform:rotate(-8deg)}.simon-glyph i{width:24px;height:24px;border:1.5px solid var(--ink);background:#b2c39d}.simon-glyph i:nth-child(2){background:#dbab91}.simon-glyph i:nth-child(3){background:#d3c16c}.simon-glyph i:nth-child(4){background:#a7bcc6}.visual-wordle{background:#e1e1ca}.wordle-glyph{gap:3px}.wordle-glyph i{font-style:normal;background:#79926c;color:var(--paper);font-size:16px;display:grid;place-items:center;width:23px;height:29px;border:1px solid #596e4c}.visual-roomba{background:#dcd9c9}.roomba-glyph{width:55px;height:55px;border:2px solid var(--ink);border-radius:50%;box-shadow:inset 0 0 0 6px #b7b6a8,inset 0 0 0 7px var(--ink);font-size:12px}.roomba-glyph:after{content:'';position:absolute;top:10px;width:10px;height:5px;border:1px solid var(--ink);border-radius:4px}.visual-artist{background:#d9bac2}.artist-glyph{font:italic 59px Georgia,serif;transform:rotate(-12deg);color:#734956}.visual-caption{position:absolute;bottom:12px;left:15px;font:8px var(--mono);letter-spacing:1px;opacity:.55}.detail-visual .project-glyph{scale:2}.detail-visual .handy-glyph{scale:2.7}.detail-visual .artist-glyph{scale:2.5}
@media(min-width:1550px){.welcome-window{left:14%;top:135px}.projects-window{left:53%;top:345px;width:500px}.desktop-shortcuts{right:65px;top:65px}.desktop-heading{left:55px;top:38px}}
@media(max-width:1200px) and (min-width:761px){.welcome-window{left:5%;width:570px;top:105px}.welcome-content{padding:27px 30px}.intro-heading{font-size:48px}.intro-heading>span{font-size:88px}.projects-window{left:auto;right:6%;width:420px;top:365px}.folder-grid{gap:12px 25px;padding:21px 30px}.desktop-shortcuts{right:20px;top:30px;flex-direction:row;gap:12px}.desktop-shortcuts .desktop-icon{width:75px}.desktop-shortcuts svg{width:36px;height:39px}.desktop{min-height:800px}.time-zone{display:none}}
@media(max-width:760px){.menubar{padding:0 15px;gap:17px;height:45px}.owner-name{font-size:11px}.menubar nav{gap:15px}.menubar nav button{font-size:10px}.menu-right{gap:0}.time-zone,#clock{display:none}.wallpaper-toggle{padding:5px 0}.desktop{height:auto;min-height:calc(100svh - 80px);padding:100px 20px 26px;display:flex;flex-direction:column;gap:28px;overflow:visible}.desktop-heading{left:23px;top:27px;font-size:9px;gap:7px}.desktop-heading span+span{font-size:11px}.desktop-shortcuts{top:19px;right:20px;flex-direction:row;gap:13px}.desktop-shortcuts .desktop-icon{width:47px;gap:3px;padding:0}.desktop-shortcuts svg{width:30px;height:34px}.desktop-shortcuts span{font-size:8px;padding:2px 3px}.desktop-shortcuts .desktop-icon:first-child{display:none}.window,.welcome-window,.projects-window,.projects-window.expanded{position:relative;inset:auto!important;width:100%;transform:none!important;box-shadow:4px 4px 0 #2d352a35}.titlebar{height:33px;gap:7px;cursor:default;touch-action:auto}.titlebar h1,.titlebar h2{font-size:11px}.welcome-content{padding:25px 24px 27px}.eyebrow{font-size:8px;letter-spacing:1px}.intro-layout{margin-top:23px}.intro-heading{font-size:40px;letter-spacing:-2px}.intro-heading>span{font-size:72px;letter-spacing:-4px}.intro-description{font-size:16px;line-height:1.5;margin-top:22px}.intro-secondary{font-size:12px;line-height:1.8}.desktop-break{display:none}.welcome-actions{gap:16px;margin-top:23px;flex-wrap:wrap}.button{min-height:42px;padding:11px 12px;font-size:10px;gap:20px}.text-button{font-size:9px;gap:8px}.window-status{font-size:8px;padding:9px 10px}.folder-grid{padding:25px 24px;gap:20px}.folder-item strong{font-size:11px}.folder-item>span{font-size:8px}.finder-toolbar{font-size:8px;padding:8px 9px;gap:8px}.finder-footer{font-size:8px}.project-grid,.expanded .project-grid{max-height:480px;grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:10px}.project-card-label{padding:10px}.project-card-label strong{font-size:10px}.project-card-label>span{font-size:9px}.desktop-bottom{position:relative;inset:auto;order:6;gap:15px;margin-top:8px}.restore-button{font-size:8px;padding:7px}.system-footer{font-size:8px;padding:0 15px;gap:15px}.footer-extra{display:none}.info-window,.detail-window{position:fixed;left:14px!important;right:14px!important;top:78px!important;width:auto!important;max-height:calc(100svh - 106px);transform:none!important;z-index:101!important;box-shadow:5px 5px 0 #2d352a50,0 0 0 100vmax #26302266}.info-window .document-content{max-height:calc(100svh - 174px);overflow:auto}.document-content{padding:25px}.document-content h3{font-size:36px;margin:21px 0}.document-content p{font-size:13px}.document-content .document-footnote{font-size:9px}.detail-content{max-height:calc(100svh - 144px)}.detail-visual{height:185px}.detail-copy{padding:24px}.detail-copy h3{font-size:32px}.detail-copy p{font-size:13px}.contact-illustration{width:64px;height:59px}.window-expand{display:none}}
@media(max-width:380px){.menubar{gap:10px;padding:0 11px}.menubar nav{gap:9px}.owner-name{font-size:11px;white-space:nowrap}.desktop{padding-left:12px;padding-right:12px}.welcome-content{padding:23px 20px}.intro-heading{font-size:35px}.intro-heading>span{font-size:60px}.welcome-actions{gap:12px}.desktop-shortcuts{right:13px;gap:9px}.desktop-heading{left:17px}.project-grid{gap:8px;padding:9px}}
.project-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.project-badges .project-badge { display: inline-block; max-width: 100%; padding: 5px 7px; border: 1px solid #bec5b1; background: #e9eddf; color: #47513e; font: 9px/1.4 var(--mono); overflow-wrap: anywhere; }
.project-badges .badge-platform { background: #e2ebed; border-color: #b7c5c9; color: #43575c; }
.project-badges .badge-context { background: #f0e7cf; border-color: #cbbf9d; color: #685b3e; }
.project-card-label > .project-badges { margin-top: 4px; }
.project-badges.compact { gap: 4px; }
.project-badges.compact .project-badge { padding: 3px 5px; font-size: 8px; }
.detail-copy > .project-badges { margin: 19px 0; }
.project-source { display: block; width: fit-content; margin: 16px 0; font: 10px/1.5 var(--mono); text-underline-offset: 4px; }
.project-photos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: #f0eee3; border-bottom: 1px solid #c6cbb8; }
.photo-thumbnails { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-thumbnail { width: 54px; height: 44px; padding: 3px; border: 1px solid #b7bda7; background: var(--paper); }
.photo-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumbnail[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.photo-thumbnail:hover { border-color: var(--ink); }
.project-card-visual.visual-app-screenshot { padding: 5px; background: #e1e6e8; }
.project-card-visual.visual-app-screenshot img { object-fit: contain; }
.detail-visual.visual-app-screenshot:has(img) { height: min(440px, 54svh); padding: 12px; background: #e1e6e8; }
.project-card-visual.visual-tablet-screenshot { background: #f1ddc8; }
.project-card-visual.visual-tablet-screenshot img { object-fit: contain; }
.detail-visual.visual-tablet-screenshot:has(img) { height: auto; aspect-ratio: 2272 / 1552; background: #f1ddc8; }
.project-photos:has(.screenshot-thumbnail) .photo-thumbnail { width: 43px; height: 68px; }
.screenshot-thumbnail img { object-fit: contain; }
.project-card-visual.visual-desktop-screenshot { background: #e3e8e9; padding: 5px; }
.project-card-visual.visual-desktop-screenshot img { object-fit: contain; }
.detail-visual.visual-desktop-screenshot:has(img) { height: 330px; background: #e3e8e9; padding: 10px; }
.project-photos:has(.screenshot-thumbnail) .photo-thumbnail.landscape-thumbnail { width: 70px; height: 50px; }
.photo-tools { display: flex; flex-wrap: wrap; flex: 1; min-width: 145px; align-items: center; justify-content: space-between; gap: 4px 14px; }
.photo-counter { font: 9px var(--mono); color: #7e866d; white-space: nowrap; }
.photo-fullsize { font: 9px var(--mono); text-decoration: none; border-bottom: 1px solid #a6af93; padding: 5px 0; white-space: nowrap; }
.photo-fullsize > span { margin-left: 7px; }

/* Paper notes for tools and core skills. */
.desktop-notes {
  position: absolute;
  left: 8%;
  bottom: 110px;
  width: 624px;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 24px;
  align-items: center;
  z-index: 1;
}
.skills-note {
  position: relative;
  min-width: 0;
  padding: 18px 22px;
  background: linear-gradient(165deg, #f1f0ce, #e4e6b7);
  border: 1px solid #a7ae86;
  box-shadow: 3px 5px 0 #303a281a, 0 7px 10px #303a2810;
  transform: rotate(-3deg);
  z-index: 1;
}
.skills-note::before {
  content: '';
  position: absolute;
  top: -9px;
  left: calc(50% - 30px);
  width: 60px;
  height: 20px;
  background: #f4f1d6a6;
  border-inline: 1px dashed #a8ae8560;
  transform: rotate(5deg);
  pointer-events: none;
}
.skills-note-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.skills-note-heading h2 { font: italic 23px/1.2 Georgia, serif; letter-spacing: -.6px; margin: 0; }
.skills-note-heading button { display: inline-flex; align-items: center; gap: 9px; padding: 3px 0; border-bottom: 1px solid #acb69c; font: 9px var(--mono); }
.skills-note-heading button:hover { border-color: var(--ink); }
.skills-note-heading button > span { font-size: 13px; }
.skills-note-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; list-style: none; margin: 12px 0 0; padding: 0; }
.skills-note-list li { font: italic 17px/1.3 Georgia, serif; }
.tools-note { background: linear-gradient(165deg, #f4d0af, #e8b58f); border-color: #ba9373; transform: rotate(2deg); }
.tools-note::before { background: #f7e6c9b3; border-color: #bba28370; transform: rotate(-6deg); }
.tools-note .skills-note-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.restore-button { margin-left: auto; }

/* The desktop is the entry point to each collection. */
.desktop-folders {
  position: absolute;
  top: 32px;
  left: 56%;
  width: 420px;
  z-index: 1;
}
.desktop-folder-heading {
  margin-bottom: 30px;
  font: 10px var(--mono);
  letter-spacing: 1px;
  color: #44543b;
}
.desktop-folder-heading > span {
  display: block;
  margin-top: 9px;
  font: 12px var(--sans);
  letter-spacing: 0;
  opacity: .75;
}
.desktop-folder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 17px;
}
.desktop-folder svg { width: 70px; height: 60px; }
.desktop-folder strong {
  background: var(--paper);
  font-size: 11px;
}
.desktop-folder > span { color: #4e5b45; }
.desktop-folder[data-category="Achievements"] { grid-column: 2; }
.desktop-showcase { margin-top: 56px; }
.showcase-heading { margin-bottom: 12px; font: 9px/1.5 var(--mono); letter-spacing: 1px; color: #44543b; }
.showcase-grid { display: grid; gap: 12px; }
.showcase-project { display: grid; grid-template-columns: minmax(64px, 38%) minmax(0, 1fr); align-items: center; gap: 15px; width: 100%; padding: 11px; text-align: left; background: #faf8efe8; border: 1px solid #748269; box-shadow: 3px 3px 0 #29312722; }
.showcase-project:hover { background: var(--paper); border-color: var(--ink); }
.showcase-project > img { display: block; width: 100%; height: 92px; object-fit: contain; background: white; border: 1px solid #c6ccbe; }
.showcase-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.showcase-copy > strong { font: italic 21px/1.1 Georgia, serif; }
.showcase-copy > span { font: 11px/1.5 var(--sans); color: #606d56; }
.showcase-copy > .showcase-meta { display: flex; flex-wrap: wrap; gap: 7px; justify-content: space-between; font: 9px/1.5 var(--mono); color: #43523c; }
.folder-yellow { --folder-front: #e9d797; --folder-back: #c6b578; }
.folder-gray { --folder-front: #d3d6cb; --folder-back: #aeb6a6; }
.folder-cream { --folder-front: #eee4c9; --folder-back: #cfc09f; }
.folder-grid {
  max-height: 380px;
  overflow-y: auto;
  scrollbar-color: #a0aa92 var(--paper-dark);
  scrollbar-width: thin;
}
.folder-empty-state {
  grid-column: 1 / -1;
  padding: 30px 10px 36px;
  text-align: center;
}
.folder-empty-state > svg {
  width: 48px;
  height: 56px;
  margin: 0 auto 24px;
}
.folder-empty-state .eyebrow { justify-content: center; font-size: 8px; }
.folder-empty-state h3 {
  font: italic 30px/1.2 Georgia, serif;
  letter-spacing: -.8px;
  margin: 16px 0;
}
.folder-empty-state p { font-size: 12px; line-height: 1.9; color: #707660; }
.visual-transformer { background: #e9ddaf; }
.visual-sensor { background: #d8dfca; }
.electrical-glyph > svg { width: 65px; height: 55px; }
.electrical-glyph path { fill: none; stroke: currentColor; stroke-width: 2; }
.certificate-glyph { font: 55px Georgia, serif; }
.visual-certificate { background: #f1eee4; }
.project-card-visual.visual-certificate { padding: 8px; }
.project-card-visual.visual-certificate img { object-fit: contain; }
.detail-visual.visual-certificate:has(img) { height: 350px; padding: 12px; background: #f1eee4; }
.visual-award { background: #e8ddba; }
.award-glyph {
  width: 64px;
  height: 64px;
  border: 1.5px solid #8e7d45;
  border-radius: 50%;
  background: #f6edcf;
  color: #7b6833;
  font: 49px Georgia, serif;
  box-shadow: 2px 2px 0 #a18c5240;
}
.detail-visual .award-glyph { scale: 1.6; }

@media (min-width: 761px) {
  .desktop { min-height: 960px; }
  .welcome-window { top: 75px; }
}
@media (min-width: 1550px) {
  .desktop { min-height: 1000px; }
  .desktop-folders { top: 38px; left: 56%; width: 440px; }
  .welcome-window { top: 115px; }
  .desktop-notes { left: 14%; bottom: 95px; }
}
@media (min-width: 1201px) and (max-width: 1365px) {
  .desktop { min-height: 1000px; }
  .desktop-folders { left: auto; right: 11%; width: 300px; }
  .desktop-folder-grid { gap: 28px 7px; }
  .desktop-folder strong { font-size: 10px; }
}
@media (min-width: 761px) and (max-width: 1200px) {
  .desktop { min-height: 970px; }
  .desktop-folders { left: auto; right: 5%; width: 330px; }
  .desktop-shortcuts { top: auto; bottom: 65px; }
  .welcome-window { top: 85px; }
  .desktop-folder-grid { gap: 30px 8px; }
  .desktop-folder strong { font-size: 10px; }
  .desktop-notes { left: 5%; width: 570px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .desktop { min-height: 990px; }
  .welcome-window { left: 4%; width: 500px; }
  .desktop-notes { left: 4%; width: min(500px, calc(70% - 50px)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skills-note-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desktop-folders { width: 200px; right: 3%; }
  .desktop-folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 5px; }
  .desktop-folder[data-category="Achievements"] { grid-column: auto; }
  .desktop-folder-heading { line-height: normal; }
  .desktop-showcase { margin-top: 42px; }
  .showcase-project { gap: 8px; padding: 8px; }
  .showcase-copy > strong { font-size: 16px; }
  .showcase-copy > span { font-size: 10px; }
}
@media (max-width: 760px) {
  .system-footer { height: auto; min-height: 35px; padding: 10px 15px; flex-wrap: wrap; align-items: flex-start; row-gap: 8px; }
  .system-footer > span:first-child { align-items: flex-start; }
  .system-footer > span:first-child .status-dot { margin-top: 2px; }
  .project-photos { padding: 10px 12px; gap: 10px; }
  .photo-counter, .photo-fullsize { font-size: 8px; }
  .welcome-window { order: 1; }
  .desktop-folders { position: relative; inset: auto; width: 100%; order: 2; z-index: auto; }
  .projects-window { order: 3; }
  .desktop-notes { position: relative; inset: auto; align-self: center; width: min(360px, calc(100% - 12px)); grid-template-columns: 1fr; gap: 28px; margin: 16px 0 10px; order: 4; }
  .skills-note { padding: 18px 20px; transform: rotate(-2deg); }
  .tools-note { transform: rotate(2deg); }
  .desktop-folder-heading { margin: 5px 3px 22px; font-size: 8px; }
  .desktop-folder-heading > span { font-size: 11px; }
  .desktop-folder-grid { gap: 22px 5px; }
  .desktop-folder svg { width: 62px; height: 54px; }
  .desktop-folder strong { font-size: 9px; padding: 3px; }
  .desktop-folder > span { font-size: 8px; margin-top: 4px; }
  .desktop-showcase { margin: 44px 3px 16px; }
  .detail-visual.visual-desktop-screenshot:has(img) { height: 240px; padding: 8px; }
  .folder-empty-state { padding: 24px 5px; }
  .folder-empty-state h3 { font-size: 27px; }
  .folder-empty-state p { font-size: 11px; }
  .detail-visual.visual-certificate:has(img) { height: 230px; padding: 8px; }
}
/* A readable personal file, with its own contents and scroll area. */
.about-window {
  top: 70px;
  width: min(790px, calc(100% - 50px));
  height: min(710px, calc(100svh - 170px));
  display: flex;
  flex-direction: column;
}
.about-window > .titlebar, .about-window > .window-status { flex-shrink: 0; }
.about-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 15px;
  border-bottom: 1px solid #b7beaa;
  background: #f1f0e5;
  font: 8px var(--mono);
  letter-spacing: .5px;
  color: #727962;
  flex-shrink: 0;
}
.about-layout { display: grid; grid-template-columns: 145px minmax(0, 1fr); min-height: 0; flex: 1; }
.about-sections { padding: 25px 11px; border-right: 1px solid #c0c7b1; background: #eceddf; }
.about-contents-label { padding: 0 10px 15px; font: 8px var(--mono); letter-spacing: 1px; color: #8b927a; }
.about-sections button {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 10px;
  width: 100%;
  text-align: left;
  font: 10px var(--mono);
  border: 1px solid transparent;
}
.about-sections button > span { font-size: 8px; opacity: .5; }
.about-sections button:hover { background: #e1e5d3; }
.about-sections button.active { background: var(--paper); border-color: #b6bea3; box-shadow: 2px 2px 0 #45523d15; }
.about-sidebar-note { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 50px; }
.about-sidebar-note > svg { width: 45px; height: 55px; transform: rotate(-5deg); opacity: .65; }
.about-sidebar-note > span { font: 8px/1.9 var(--mono); text-align: center; color: #8b927a; }
.about-content { overflow-y: auto; overscroll-behavior: contain; padding: 29px 33px; scrollbar-width: thin; scrollbar-color: #9da98b #f0eee2; min-height: 0; }
.about-content:focus-visible { outline: 2px solid #426b9c; outline-offset: -4px; }
.about-section { padding-bottom: 31px; margin-bottom: 31px; border-bottom: 1px solid #d0d4c1; }
.about-section:last-child { border: 0; padding-bottom: 0; margin-bottom: 0; }
.about-section p { font-size: 12px; line-height: 1.85; color: #6c735e; margin: 12px 0; }
.about-profile > h3 { font: 45px/1.03 var(--sans); letter-spacing: -1.9px; font-weight: 500; margin: 20px 0; }
.about-profile > h3 em { font-family: Georgia, serif; font-size: 55px; font-weight: 400; letter-spacing: -2.4px; }
.about-profile > .about-lead { font-size: 15px; line-height: 1.65; color: var(--ink); letter-spacing: -.2px; }
.about-profile > .eyebrow { font-size: 8px; }
.about-availability { display: flex; align-items: center; gap: 7px; font: 8px/1.8 var(--mono); color: #62754b; margin: 18px 0 21px; }
.about-highlight { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #ede6c9; border: 1px solid #c8bd91; text-align: left; }
.about-highlight:hover { background: #e6dcba; }
.about-highlight-symbol { font: 35px Georgia, serif; color: #8b7744; }
.about-highlight > span:nth-child(2) { display: flex; flex-direction: column; gap: 6px; }
.about-highlight strong { font-size: 11px; font-weight: 600; }
.about-highlight > span:nth-child(2) > span { font: 8px var(--mono); color: #8b8060; }
.about-highlight-arrow { margin-left: auto; font-size: 17px; }
.about-section-heading > span { font: 8px var(--mono); letter-spacing: 1px; color: #8b927a; }
.about-section-heading > h3 { font: italic 29px/1.2 Georgia, serif; letter-spacing: -.6px; margin: 11px 0 14px; }
.about-interest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; margin: 23px 0 28px; }
.about-interest-grid > article { padding-left: 13px; border-left: 2px solid #c0c8ad; }
.about-interest-grid h4 { margin: 0; font: 600 12px/1.5 var(--sans); }
.about-interest-grid p { margin: 7px 0 0; }
.about-skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; border: 1px solid #cdd2bd; }
.about-skill-group { padding: 19px 17px; position: relative; min-width: 0; }
.about-skill-group:nth-child(odd) { border-right: 1px solid #cdd2bd; }
.about-skill-group:nth-child(-n+2) { border-bottom: 1px solid #cdd2bd; }
.about-skill-number { font: 8px var(--mono); color: #929a81; }
.about-skill-group h4 { font-size: 12px; line-height: 1.5; margin: 8px 0; font-weight: 600; }
.about-skill-group p { font-size: 10px; line-height: 1.7; margin: 7px 0 12px; }
.about-tags { display: flex; flex-wrap: wrap; gap: 5px; padding: 0; margin: 0; list-style: none; }
.about-tags > li { font: 8px/1.4 var(--mono); padding: 5px 6px; background: #eceee1; border: 1px solid #d4d9c4; }
.about-working-note { display: flex; flex-direction: column; gap: 8px; margin-top: 21px; padding-left: 12px; border-left: 2px solid #c6d0b4; }
.about-working-note > strong { font: 9px var(--mono); }
.about-working-note > span { font-size: 11px; line-height: 1.9; color: #7c846d; }
.about-experience-list { margin-top: 25px; }
.about-experience-item { border-left: 1px solid #c8cfb8; padding: 0 0 20px 20px; position: relative; }
.about-experience-item:last-child { padding-bottom: 0; }
.about-experience-item:before { content: ''; width: 7px; height: 7px; position: absolute; top: 2px; left: -4px; background: #b6c5a6; border: 1px solid #7e906a; }
.about-entry-meta { font: 8px/1.5 var(--mono); letter-spacing: .3px; color: #919780; }
.about-experience-item h4 { font-size: 14px; line-height: 1.6; font-weight: 500; margin: 7px 0; }
.about-experience-item h4 a, .about-experience-item h4 button { display: inline; padding: 0; text-decoration: none; border-bottom: 1px solid #c5cdb5; text-align: left; }
.about-experience-item h4 span { font-size: 11px; margin-left: 6px; color: #8c9579; }
.about-experience-item h4 a:hover, .about-experience-item h4 button:hover { border-color: var(--ink); }
.about-experience-item p { margin-top: 8px; font-size: 11px; }
.about-inline-link { display: inline-flex; align-items: center; gap: 14px; font: 9px/1.5 var(--mono); border-bottom: 1px solid #9fa98c; padding: 7px 0; margin-top: 11px; text-align: left; }
.about-inline-link:hover { border-color: var(--ink); }
.about-inline-link > span { font-size: 15px; }
.about-education-list { margin-top: 24px; }
.about-education-item + .about-education-item { margin-top: 25px; padding-top: 24px; border-top: 1px solid #e0e3d5; }
.about-education-date { font: 9px var(--mono); color: #8a9278; }
.about-education-item h4 { font-size: 14px; font-weight: 500; margin: 10px 0; line-height: 1.5; }
.about-education-item p { font-size: 11px; margin: 7px 0; }
.about-education-item .about-institution { color: var(--ink); font-size: 12px; }
.about-language-list { margin: 21px 0 17px; }
.about-language-list > div { display: flex; align-items: center; gap: 15px; padding: 14px 0; border-bottom: 1px solid #e0e3d5; }
.about-language-list dt { font-size: 13px; width: 100px; }
.about-language-list dd { margin: 0; flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 13px; font-size: 11px; color: #8a9278; }
.about-language-code { font: 9px var(--mono); color: #63734d; background: #e9eddd; border: 1px solid #ccd5b8; min-width: 39px; text-align: center; padding: 5px 7px; }
.about-section .about-language-note { font-size: 10px; line-height: 1.9; }
.about-language-note button { padding: 0; border-bottom: 1px solid #bac4aa; font-size: 10px; }
.about-closing { padding: 23px; background: #eff0e5; border: 1px solid #d0d6c0; margin-top: 31px; }
.about-closing h4 { font: italic 23px/1.2 Georgia, serif; margin: 0 0 13px; letter-spacing: -.5px; }
.about-closing p { font-size: 11px; margin-bottom: 17px; }
.about-closing .button { font-size: 9px; min-height: 38px; padding: 10px 14px; }
.certificate-glyph > svg { width: 44px; height: 54px; }
.document-content .contact-email { font: 10px/1.7 var(--mono); color: #8b927a; margin-top: 15px; overflow-wrap: anywhere; }
.contact-profile-links { display: flex; flex-wrap: wrap; gap: 16px 24px; border-top: 1px solid #c7cbb8; margin-top: 25px; padding-top: 18px; font: 10px var(--mono); }
.contact-profile-links a { text-decoration: none; border-bottom: 1px solid #c7cbb8; padding-bottom: 5px; }
.contact-profile-links a span { margin-left: 10px; }

@media (max-width: 760px) {
  .about-window { height: calc(100svh - 108px); max-height: none; }
  .about-toolbar { padding: 10px 12px; font-size: 7px; letter-spacing: .1px; }
  .about-layout { display: flex; flex-direction: column; }
  .about-sections { display: flex; gap: 4px; overflow-x: auto; padding: 7px; flex-shrink: 0; border-right: 0; border-bottom: 1px solid #c0c7b1; scrollbar-width: none; }
  .about-sections button { flex-shrink: 0; width: auto; white-space: nowrap; padding: 11px 10px; gap: 8px; font-size: 9px; }
  .about-contents-label, .about-sidebar-note { display: none; }
  .about-content { padding: 25px 22px; flex: 1; }
  .about-profile > h3 { font-size: 38px; }
  .about-profile > h3 em { font-size: 46px; }
  .about-profile > .about-lead { font-size: 13px; }
  .about-profile > .eyebrow { font-size: 7px; letter-spacing: .7px; }
  .about-section p { font-size: 11px; }
  .about-availability { font-size: 7px; align-items: flex-start; }
  .about-availability .status-dot { margin-top: 4px; }
  .about-highlight { padding: 12px; gap: 10px; }
  .about-highlight-symbol { font-size: 29px; }
  .about-highlight strong { font-size: 10px; line-height: 1.5; }
  .about-highlight > span:nth-child(2) > span { font-size: 7px; line-height: 1.7; }
  .about-skill-grid { grid-template-columns: 1fr; }
  .about-skill-group:nth-child(odd) { border-right: 0; }
  .about-skill-group:not(:last-child) { border-bottom: 1px solid #cdd2bd; }
  .about-skill-group { padding: 17px; }
  .about-skill-group p { font-size: 10px; }
  .about-section-heading > h3 { font-size: 27px; }
  .about-interest-grid { grid-template-columns: 1fr; gap: 20px; }
  .about-experience-item { padding-left: 16px; }
  .about-experience-item h4 { font-size: 13px; }
  .about-experience-item p, .about-education-item p { font-size: 11px; }
  .about-education-item h4 { font-size: 13px; }
  .about-education-item .about-institution { font-size: 11px; }
  .about-language-list dt { width: 75px; font-size: 12px; }
  .about-language-list dd { gap: 8px; font-size: 10px; }
  .about-language-code { font-size: 8px; }
  .about-closing { padding: 18px; }
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}