/* Compact player-status navigation. Geometry lives on the frame, not the labels. */
html{scroll-padding-top:86px}
.site-header{height:68px;padding-inline:clamp(22px,5.5vw,150px);gap:22px;background:#08111bef;border-block:1px solid #72cddd30;box-shadow:0 5px 28px #0004;backdrop-filter:blur(14px)}
.site-header.scrolled{background:#08111bf5;border-color:#72cddd42}
.site-header:after{content:'';position:absolute;inset:auto 5.5% -1px;height:2px;background:linear-gradient(90deg,#7bdeef66 0 8%,transparent 8% 10%,#7bdeef22 10% 25%,transparent 25% 70%,#7bdeef44 70% 88%,transparent 88% 90%,#7bdeef66 90%);pointer-events:none}
.site-header .brand-glyph{font-size:29px;margin-right:10px}
.site-header .wordmark{font-size:15px;min-height:42px}
.desktop-nav{gap:4px;padding:4px;background:#06101a;border:1px solid #67afc02b;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.desktop-nav a,.site-header .header-contact{position:relative;overflow:hidden;isolation:isolate;font-size:14px;line-height:1.3;border:1px solid #5d91a72b;border-radius:0;background:#10203066;color:#b6c9d8;min-height:40px;padding:10px 18px;transition:background .25s,border-color .25s,box-shadow .25s,color .25s;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.desktop-nav a:before{content:'';position:absolute;left:7px;top:7px;width:3px;height:3px;background:#79afbc66}
.desktop-nav a:after,.site-header .header-contact:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 36%,#9befff24 49%,transparent 62%);transform:translateX(-130%)}
.desktop-nav a:hover,.desktop-nav a.active,.site-header .header-contact:hover,.site-header .header-contact.active{color:#d5faff;background:#17405870;border-color:#7bdef1a6;box-shadow:inset 0 0 18px #67d5ef18,0 0 10px #70ddec12}
.desktop-nav a.active:before{background:#b8f9ff;box-shadow:0 0 6px #85e8ff}
.desktop-nav a.active:after,.site-header .header-contact.active:after{animation:hud-scan 7s ease-in-out infinite}
.desktop-nav a:hover:after,.site-header .header-contact:hover:after{animation:hud-scan 1.3s ease-out}
.desktop-nav a:focus-visible,.header-contact:focus-visible{outline-offset:-3px;outline:2px solid #bdedff}
@keyframes hud-scan{0%,60%{transform:translateX(-130%)}90%,100%{transform:translateX(130%)}}
.mobile-nav{top:68px;border-color:#73d8f344;background:#081420fc}
.mobile-nav a{font-size:20px;padding:13px 16px;border-left:2px solid #6799ac22;margin-block:4px}
.mobile-nav a.active{border-color:#87dff2;color:#c8f5ff;background:#65cff012}
/* The photograph is untouched; the energy trace is masked to the outer edge. */
.portrait-frame{position:relative;isolation:isolate;width:min(100%,345px);padding:9px;border:1px solid #66bace50;box-shadow:0 0 22px #58bbe510;transition:box-shadow .4s}
.portrait-frame:before,.portrait-frame:after{content:'';position:absolute;inset:-4px;pointer-events:none;background:linear-gradient(#9de5f2,#9de5f2) left top/24px 2px,linear-gradient(#9de5f2,#9de5f2) left top/2px 24px,linear-gradient(#9de5f2,#9de5f2) right bottom/24px 2px,linear-gradient(#9de5f2,#9de5f2) right bottom/2px 24px;background-repeat:no-repeat}
.portrait-frame:after{inset:3px;background-position:right top,right top,left bottom,left bottom;opacity:.35}
.portrait-frame:hover{box-shadow:0 0 26px #67d8f12b}
.portrait-frame .designer-mark{width:100%;height:310px}
.portrait-frame>img{display:block;width:100%;height:auto;max-width:100%;border-radius:0;filter:none;object-fit:contain}
.portrait-trace{position:absolute;inset:0;pointer-events:none;border-radius:0;padding:1px;background:linear-gradient(120deg,transparent 30%,#b6f7ff 47%,#6edff5 50%,transparent 68%);background-size:300% 300%;mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0);animation:portrait-trace 12s linear infinite}
@keyframes portrait-trace{0%,100%{background-position:0% 0%}25%{background-position:100% 0%}50%{background-position:100% 100%}75%{background-position:0% 100%}}
/* Project actions preserve each game's destination. */
.project-actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:8px}
.project-actions .play-now{min-height:44px;padding:10px 18px;font-size:14px;gap:20px;background:#7cdbec0b;border-color:#7bdae65c}
.flight-choices{min-width:0;flex-wrap:wrap;gap:4px}
.flight-choices button{min-height:44px}
.selector-controls{grid-template-columns:54px minmax(0,1fr) 54px}
/* Software and workshop illustrations occupy separate, ordinary layout rows. */
.blueprint .skills-software{display:grid;grid-template-rows:auto auto 1fr;min-width:0;height:100%}
.blueprint .skills-columns{align-items:stretch;margin-bottom:0}
.blueprint .workshop-decoration{display:grid;grid-template-columns:minmax(90px,.8fr) minmax(0,2fr);align-items:end;gap:clamp(10px,1.2vw,20px);margin-top:clamp(16px,2.1vh,28px);align-self:end;min-width:0;padding-bottom:0}
.blueprint .iteration-art{width:100%;height:auto;max-width:160px;align-self:center;opacity:.75}
.blueprint .forge-composition{display:grid;grid-template-columns:minmax(0,1fr) 76px;align-items:start;min-width:0;gap:8px}
.blueprint .lever-note{grid-column:2;grid-row:1;font:11px/1.45 'Segoe Print','Bradley Hand',cursive;letter-spacing:.04em;color:#98c8de;justify-self:end;max-width:76px;padding-top:4px}
.blueprint .lever-note svg{display:block;width:48px;height:24px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.blueprint .skills-software .blacksmith-art{grid-column:1;grid-row:1;position:static;inset:auto;transform:none;z-index:auto;width:100%;max-width:100%;height:auto;margin:0;opacity:1;mix-blend-mode:normal;pointer-events:none}
.blueprint .skills-software .blacksmith-art img{width:100%;height:auto;aspect-ratio:1774/887;object-fit:contain;animation:none;transform:none;mix-blend-mode:normal}
.blueprint .blueprint-bottom{width:100%;max-width:1180px;margin:0 auto;padding-block:12px;border-top:1px solid #88bfe433}
@media(min-width:901px){
 .blueprint{padding-block:clamp(28px,3vh,48px) 22px}
 .blueprint .section-heading{display:flex;align-items:end;width:100%;max-width:1180px;margin:0 auto clamp(22px,3vh,34px);gap:32px}
 .blueprint .section-heading h2{font-size:clamp(44px,4vw,68px)}
 .blueprint .section-heading .eyebrow{margin-bottom:14px}
 .blueprint .section-heading>p{margin:0;max-width:290px;font-size:14px}
 .blueprint .workshop-top{width:100%;max-width:1180px;margin:0 auto;padding-block:9px}
 .blueprint .skills-columns{width:100%;max-width:1180px;margin:clamp(16px,2vh,26px) auto 0;gap:clamp(28px,3vw,50px)}
 .blueprint .technical-heading{margin-bottom:14px}
 .blueprint .technical-heading h3{font-size:clamp(16px,1.3vw,21px)}
 .blueprint .skill-tile{height:100%;min-height:clamp(98px,9vh,104px);padding:9px 8px;gap:8px}
 .blueprint .skill-tile .skill-name{font-size:13px}
 .blueprint .skill-matrix{gap:7px;grid-auto-rows:1fr}
 .blueprint .skill-icon{font-size:28px}
 .blueprint .skill-tile img{width:32px;height:32px}
}
@media(min-width:761px) and (max-width:1000px){.site-header{padding-inline:24px;gap:12px}.desktop-nav a{padding-inline:12px}.site-header .wordmark{font-size:13px}.site-header .header-contact{padding-inline:12px}.header-contact span{margin-left:8px}}
@media(max-width:900px){
 .blueprint .section-heading,.blueprint .workshop-top,.blueprint .skills-columns{width:100%;max-width:100%;margin-inline:0}
 .blueprint .skills-columns{grid-template-columns:1fr;margin-block:28px 0;gap:32px}
 .blueprint .skills-software{display:grid;grid-template-rows:auto auto auto;height:auto}
 .blueprint .workshop-decoration{width:min(100%,520px);justify-self:end;margin-top:26px}
 .blueprint .blueprint-bottom{margin:0;padding-block:12px;gap:8px}
 .blueprint .technical-heading h3{font-size:clamp(15px,3vw,19px);white-space:normal}
 .blueprint .skill-tile{height:auto;min-height:104px}
 .blueprint .skill-tile .skill-name{font-size:12px}
}
@media(max-width:760px){
 .site-header{height:64px;padding-inline:6%;gap:16px}
 .site-header .brand-glyph{font-size:27px}.site-header .header-contact{min-height:36px;font-size:12px;padding:8px 11px}.site-header .header-contact span{margin-left:8px}
 .mobile-nav{top:64px}.site-header .wordmark{font-size:13px}.desktop-nav{display:none}
 .portrait-frame{width:120px;grid-column:2;grid-row:1/3;padding:6px}
 .portrait-frame .designer-mark{height:115px;grid-column:auto;grid-row:auto}
 .portrait-frame:before{background-size:14px 1px,1px 14px,14px 1px,1px 14px}.portrait-frame:after{display:none}
 .blueprint .lever-note{font-size:10px}.blueprint .workshop-decoration{grid-template-columns:minmax(76px,.7fr) minmax(0,2fr);gap:9px}.blueprint .forge-composition{grid-template-columns:minmax(0,1fr) 61px;gap:5px}
 .blueprint .blueprint-bottom{flex-direction:column}.blueprint .blueprint-bottom>span:last-child{align-self:flex-end}
 .project-actions{gap:16px}.selector-controls{grid-template-columns:40px minmax(0,1fr) 40px}.flight-choices button{padding:10px 8px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){.desktop-nav a:after,.site-header .header-contact:after,.portrait-trace{animation:none!important;transform:none}.portrait-trace{background:#7bcee766}.portrait-frame{transition:none}}

.cv-actions{display:flex;align-items:center;flex-wrap:wrap;gap:24px;flex-shrink:0}

/* Account for browser chrome as well as the fixed navigation on a 1080p
   monitor. Artwork remains in its own row below all Software cards. */
@media(min-width:1001px){
 #skills{padding-block:clamp(12px,1.5svh,16px) 16px}
 #skills .section-heading{margin-bottom:16px}
 #skills .section-heading h2{font-size:clamp(42px,3.2vw,60px);line-height:1.05}
 #skills .section-heading .eyebrow{margin-bottom:8px}
 #skills .workshop-top{padding-block:7px}
 #skills .skills-columns{margin-top:14px}
 #skills .technical-heading{margin-bottom:10px}
 #skills .technical-heading>span{width:36px;height:36px;font-size:20px}
 #skills .skill-matrix{grid-auto-rows:clamp(80px,9svh,92px)}
 #skills .skill-tile{height:100%;min-height:0;padding:6px 8px;gap:6px}
 #skills .skill-icon{font-size:27px;line-height:1}
 #skills .skill-tile img{width:28px;height:28px}
 #skills .skill-tile .skill-name{font-size:13px;line-height:1.3}
 #skills .workshop-decoration{margin-top:14px}
 #skills .iteration-art{max-width:140px;max-height:100px;object-fit:contain}
 #skills .skills-software .blacksmith-art img{height:clamp(100px,14svh,145px);object-fit:contain;object-position:center bottom}
 #skills .blueprint-bottom{padding-block:10px}
 #about{min-height:calc(100svh - 94px)}
}
@media(max-width:1000px){
 #about{min-height:calc(100svh - 72px)}
}