:root { color-scheme:light; --face:#c6c6c6; --paper:#fff; --ink:#171717; --blue:#000080; --shadow:#808080; }
* { box-sizing:border-box; }
body { margin:0; padding:28px; background:#008080; color:var(--ink); font:13px/1.45 Tahoma, "MS Sans Serif", Arial, sans-serif; }
a { color:#0000ee; }
a:visited { color:#0000ee; }
button,input,select { font:inherit; border-radius:0; }
button, .toolbar-button { color:var(--ink); background:var(--face); border:2px solid; border-color:#fff #555 #555 #fff; padding:5px 12px; text-decoration:none; cursor:pointer; }
button:active,.toolbar-button:active { border-color:#555 #fff #fff #555; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px dotted #000080; outline-offset:3px; }
input { background:#fff; border:2px solid; border-color:#808080 #fff #fff #808080; padding:6px; min-width:0; max-width:100%; }
h1,h2,h3,p,a { overflow-wrap:anywhere; }
.desktop-label { color:#e3eeee; font-size:11px; margin:0 auto 8px; max-width:1240px; }
.portfolio-window { max-width:1240px; margin:0 auto; background:var(--face); border:2px solid; border-color:#fff #282828 #282828 #fff; padding:3px; box-shadow:1px 1px 0 #000; }
.window-wide .portfolio-window { max-width:none; }
.window-title { min-height:28px; display:flex; align-items:center; gap:8px; background:#000080; color:#fff; padding:3px 4px 3px 7px; }
.window-title strong { font-size:13px; }
.window-app-icon { color:#fff; font-size:19px; line-height:1; }
.window-size { margin-left:auto; padding:0; min-width:22px; height:21px; line-height:15px; font-size:18px; font-weight:bold; }
.primary-nav { display:flex; align-items:center; gap:4px; padding:3px 5px; border-bottom:1px solid #808080; box-shadow:0 1px #fff; }
.primary-nav a,.logout-button { display:inline-block; padding:4px 9px; text-decoration:none; color:#000; background:none; border:0; font:inherit; }
.primary-nav a:hover,.logout-button:hover { background:var(--blue); color:white; }
.primary-nav [aria-current] { text-decoration:underline; text-underline-offset:3px; }
.logout-form { margin-left:auto; }
.window-toolbar { padding:9px 6px; display:flex; align-items:center; gap:16px; }
.toolbar-button { display:inline-flex; gap:9px; align-items:center; color:#000!important; }
.toolbar-role { font-size:12px; }
.about-shortcut { margin-left:auto; }
.explorer-layout { display:grid; grid-template-columns:192px minmax(0,1fr); gap:5px; }
.explorer-sidebar { border:2px solid; border-color:#808080 #fff #fff #808080; padding:14px 9px; background:#efefea; align-self:start; position:sticky; top:8px; }
.sidebar-identity { padding:0 3px 14px; border-bottom:1px solid #aaa; display:grid; grid-template-columns:28px 1fr; gap:0 6px; }
.sidebar-identity small { grid-column:2; font-size:11px; color:#555; }
.computer-icon { grid-row:span 2; color:#000080; font-size:29px; line-height:1.1; }
.explorer-sidebar h2 { font-size:12px; margin:14px 5px 6px; }
.folder-link { display:flex; align-items:center; gap:7px; padding:8px 5px; color:#111!important; text-decoration:none; line-height:1.25; }
.folder-link:hover { background:#ddd; }
.folder-link small { margin-left:auto; color:#666; font-size:10px; }
.folder-link[aria-current] { background:#d5d5d0; }
.folder-icon { display:inline-block; width:17px; height:12px; background:#e8c961; border:1px solid #7c6427; box-shadow:inset 1px 1px #fff1ae; position:relative; flex-shrink:0; }
.folder-icon::before { content:""; position:absolute; top:-4px; left:-1px; width:8px; height:4px; background:#e8c961; border:1px solid #7c6427; border-bottom:0; }
.sidebar-note { margin:24px 5px 2px; font-size:11px; color:#666; }
main { min-width:0; background:white; border:2px solid; border-color:#808080 #fff #fff #808080; padding:20px; }
.directory-heading { display:flex; justify-content:space-between; align-items:start; gap:18px; margin-bottom:24px; }
h1 { font-size:23px; margin:0 0 6px; line-height:1.2; }
.directory-heading p { margin:0; color:#555; font-size:12px; }
.project-search { font-size:11px; width:205px; flex-shrink:0; }
.project-search input { display:block; width:100%; margin-top:4px; background:#fff; border-color:#808080 #ddd #ddd #808080; }
.category-group { scroll-margin-top:16px; margin-bottom:30px; }
.category-group>h2 { display:flex; align-items:center; gap:9px; font-size:14px; margin:0 0 12px; padding:0 0 7px; border-bottom:1px solid #b5b5b5; }
.category-group>h2 small { margin-left:auto; color:#666; font-weight:normal; font-size:11px; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:start; }
.project { background:var(--face); border:2px solid; border-color:#fff #808080 #808080 #fff; min-width:0; margin:0; }
.project-toggle { list-style:none; cursor:pointer; padding:5px; }
.project-toggle::-webkit-details-marker { display:none; }
.project-thumbnail { display:flex; aspect-ratio:16/10; background:#efefea; border:2px solid; border-color:#808080 #fff #fff #808080; overflow:hidden; align-items:center; justify-content:center; }
.project-thumbnail img { width:100%; height:100%; object-fit:contain; background:#e9e9e3; }
.empty-preview { display:flex; flex-direction:column; align-items:center; gap:14px; color:#666; font-size:11px; }
.empty-preview .folder-icon { width:36px; height:25px; }
.project-label { display:flex; align-items:start; gap:5px; padding-top:8px; }
.file-icon { font-size:18px; line-height:1; color:#4c4c4c; }
.project-title { font-weight:bold; color:#111; font-size:12px; text-decoration:none; }
.project-toggle:hover .project-title { text-decoration:underline; }
.project-filetype { display:block; color:#444; font-size:10px; margin:2px 0 2px 23px; }
.project-indicator { margin-left:auto; font-size:12px; }
.project-indicator::before { content:"+"; }
.project[open] { grid-column:1/-1; }
.project[open]>.project-toggle { background:#000080; color:#fff; padding:7px 9px; }
.project[open]>.project-toggle .project-thumbnail,.project[open]>.project-toggle .project-filetype { display:none; }
.project[open]>.project-toggle .project-title,.project[open]>.project-toggle .file-icon { color:white; }
.project[open]>.project-toggle .project-label { padding:0; }
.project[open]>.project-toggle .project-indicator::before { content:"−"; }
.project-content { background:#fff; margin:4px; padding:12px 16px; }
.project-category { text-transform:uppercase; letter-spacing:1px; font-size:10px; color:#666; }
.project-description,.detail-description,.detail-copy,.section-caption,.about-placeholder { white-space:pre-line; max-width:850px; line-height:1.65; }
.media-frame { width:960px; max-width:100%; margin:18px 0; }
.media-frame img,.project-video { display:block; width:100%; height:auto; }
.project-video { aspect-ratio:var(--media-ratio,16/9); object-fit:contain; background:#000; }
.media-image img[data-image-src] { aspect-ratio:auto var(--media-ratio,16/9); }
figcaption,.media-caption { margin-top:6px; font-size:11px; color:#555; }
.placeholder-area { aspect-ratio:var(--media-ratio,16/9); padding:16px; background:#eee; display:grid; place-items:center; color:#777; }
.gif-paused-label { display:block; padding:16px; }
.gif-toggle { margin-top:6px; }
.embed-stage { position:relative; aspect-ratio:var(--media-ratio,16/9); }
.embed-stage iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.embed-provider { display:block; }
[hidden] { display:none!important; }
.detail-page,.about-page { padding:24px; }
.detail-page h1 { margin-top:20px; }
.detail-section { margin-top:30px; }
.detail-section h2,.about-page h2 { font-size:16px; border-bottom:1px solid #bbb; padding-bottom:7px; }
.section-jumps { font-size:12px; }
.site-footer { display:flex; gap:3px; margin-top:5px; font-size:11px; }
.site-footer>span,.site-footer>a { padding:3px 7px; border:1px solid; border-color:#808080 #fff #fff #808080; color:#222; text-decoration:none; }
.site-footer>span:nth-child(2) { flex:1; }
.skip-link { position:absolute; left:-10000px; }
.skip-link:focus { left:32px; top:0; background:white; padding:6px; z-index:5; }
[data-project="headweight-game"] .media-video,[data-project-page="headweight-game"] .media-video,[data-project="ai-to-real"] .media-video,[data-project-page="ai-to-real"] .media-video { width:320px; }
.page-login,.page-error { max-width:580px; margin:12vh auto; }
.page-login>header,.page-error>header { background:#000080; color:#fff; padding:9px; border:2px solid #c6c6c6; }
.page-login>header h1 { font-size:16px; margin:0; }
.page-login>header hr,.page-error>header hr { display:none; }
.page-login main,.page-error main { background:#c6c6c6; padding:25px; }
.login-form input[type=password],.login-form input[type=text] { width:75%; }
.login-error { color:#950000; }
@media(min-width:1500px) { .window-wide .project-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1000px) { body{padding:16px} .explorer-layout{grid-template-columns:165px minmax(0,1fr)} .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .directory-heading{display:block} .project-search{display:block;width:100%;margin-top:14px} }
@media(max-width:600px) { body{padding:7px;font-size:13px} .desktop-label{display:none} .explorer-layout{display:block} .window-toolbar{gap:8px;padding:7px 3px}.toolbar-role{display:none}.toolbar-button{padding:5px 8px}.explorer-sidebar{position:static;margin-bottom:5px;padding:8px}.sidebar-identity,.sidebar-note,.explorer-sidebar h2{display:none}.explorer-sidebar nav{display:flex;gap:4px;flex-wrap:wrap}.folder-link{padding:7px;font-size:11px;background:#e2e2dc}.folder-link small{display:none}.all-work{display:none} main,.detail-page,.about-page{padding:12px}.directory-heading{margin-bottom:20px}.project-grid{gap:8px}.project-title{font-size:11px}.file-icon{display:none}.project-filetype{margin-left:0}.project-toggle{padding:3px}.project-label{gap:2px}.project-content{padding:10px}.category-group>h2{font-size:13px}.site-footer{font-size:10px}.site-footer>span:nth-child(2){display:none}.site-footer>a{margin-left:auto}.window-title strong{font-size:12px}.primary-nav a,.logout-button{padding:4px 7px} }

/* About: selected self-portraits and a compact CV. */
.about-intro { max-width:760px; font-size:14px; }
.about-portraits { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:660px;margin:22px 0; }
.about-portraits .media-frame { width:100%;margin:0; }
.about-portraits img { height:210px;object-fit:cover;border:3px solid;border-color:#808080 #ddd #ddd #808080; }
.about-portraits>p { grid-column:1/-1;margin:0;font-size:11px;color:#555; }
.experience-list { list-style:none;padding:0; }
.experience-list li { margin:0 0 15px; }
.experience-list p { margin:3px 0;color:#444; }
@media(max-width:600px){.about-portraits{gap:6px}.about-portraits img{height:120px}.about-intro{font-size:13px}}

.about-portraits:has(> figure:only-of-type) { grid-template-columns:minmax(0,260px); }
.about-portraits:has(> figure:only-of-type) img { height:auto; }

.about-contact { scroll-margin-top:20px; margin-top:18px; }
.contact-details { margin:16px 0 20px; }
.contact-details>div { display:grid;grid-template-columns:85px minmax(0,1fr);gap:16px;padding:8px 0; }
.contact-details dt { color:#555; }
.contact-details dd { margin:0; }
.contact-details a { overflow-wrap:anywhere; }
.contact-socials { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px; }
@media(max-width:600px){.contact-details>div{grid-template-columns:60px minmax(0,1fr);gap:10px}}

.about-header { display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:32px;align-items:start;margin-bottom:24px; }
.about-header .about-portraits { margin:0;max-width:100%; }
.about-header .about-intro { margin-top:18px; }
.software-groups { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px; }
.software-group summary { cursor:pointer;font-size:12px;font-weight:bold;margin:8px 0; }
.software-group summary .folder-icon { display:inline-block;vertical-align:middle;margin:0 8px 0 4px; }
.software-group summary:focus-visible { outline:1px dotted currentColor;outline-offset:4px; }
.software-groups ul { list-style:none;padding:0;margin:0; }
.software-groups li { padding:4px 0; }
@media(max-width:800px){.about-header{grid-template-columns:minmax(0,1fr) 180px;gap:20px}.software-groups{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.about-header{grid-template-columns:1fr}.about-header .about-portraits{width:220px}.software-groups{grid-template-columns:1fr;gap:12px}}

.about-header { grid-template-columns:minmax(0,1fr) 310px;gap:40px; }
.about-header-copy .about-intro { max-width:470px; }
.about-profile { min-width:0; }
.about-profile .about-portraits { width:100%;max-width:260px; }
.about-profile .contact-details>div { grid-template-columns:60px minmax(0,1fr);gap:10px;padding:6px 0; }
.about-profile .contact-details { margin:12px 0; }
.about-profile .contact-socials { gap:6px;margin-bottom:0; }
@media(max-width:1000px){.about-header{grid-template-columns:minmax(0,1fr) 260px;gap:22px}}
@media(max-width:700px){.about-header{grid-template-columns:1fr}.about-profile{max-width:310px}.about-header-copy .about-intro{max-width:none}}