#window-layer{position:relative;z-index:20}

.window{position:absolute;top:80px;left:180px;width:560px;max-height:calc(100vh - 66px);display:flex;flex-direction:column;background:#d4d0c8;border:2px outset #fff;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:box-shadow .15s,transform .15s;z-index:10}
/* Same specificity trap as lightbox: .window { display:flex } beats .hidden { display:none } when both apply */
.window.hidden{display:none!important}
.window:hover{box-shadow:0 16px 36px rgba(0,0,0,.55)}
.titlebar{height:28px;flex:0 0 28px;background:linear-gradient(90deg,#214d77,#4d88c2);display:flex;justify-content:space-between;align-items:center;color:#fff;padding:0 6px}
.titlebar button{width:22px}
.content{background:#fff;color:#000;padding:14px;min-height:220px;overflow-y:auto;flex:1 1 auto}
.folders{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.folder-item{cursor:pointer;padding:8px;border:1px solid transparent;border-radius:2px}
.folder-item:hover{background:#0a246a;color:#fff}

.resume-section{margin-bottom:16px}
.resume-section h3{margin:0 0 8px;font-size:14px;border-bottom:1px solid #808080;padding-bottom:4px}
.resume-placeholder{color:#666;font-size:12px;margin:0;line-height:1.5}
.resume-item{margin:0 0 10px;font-size:12px;line-height:1.4}

.contact-panel.hidden{display:none!important}
.contact-intro{margin:0 0 14px;font-size:13px;line-height:1.4}
.contact-options{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.contact-option{
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
 min-width:120px;min-height:110px;padding:14px 16px;
 border:2px outset #fff;background:#d4d0c8;color:#000;
 font:bold 13px Tahoma,Arial,sans-serif;cursor:pointer;touch-action:manipulation
}
.contact-option:hover{background:#c8c4bc}
.contact-option:active{border-style:inset}
.contact-option:focus{outline:1px dotted #000;outline-offset:1px}
.contact-option-icon{width:40px;height:40px;object-fit:contain;image-rendering:auto;flex:0 0 auto}
.contact-back{
 display:inline-block;margin:0 0 12px;min-height:36px;padding:6px 12px;
 border:2px outset #fff;background:#d4d0c8;color:#000;
 font:12px Tahoma,Arial,sans-serif;cursor:pointer;touch-action:manipulation
}
.contact-back:active{border-style:inset}
.contact-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#contact-form label{display:block;margin:8px 0 4px;font-size:12px}
#contact-form input,#contact-form textarea{width:100%;box-sizing:border-box;margin:0 0 4px}
.contact-feedback{font-size:12px;padding:8px;margin:8px 0;border:1px inset #808080}
.contact-feedback.success{background:#e8f5e9;color:#2e7d32}
.contact-feedback.error{background:#ffebee;color:#c62828}
.contact-feedback.hidden{display:none!important}
#contact-send{min-height:36px;margin-top:6px;padding:6px 16px;touch-action:manipulation}
#contact-send:disabled{opacity:.5;cursor:not-allowed}
.contact-mailto{margin:12px 0 0;font-size:12px;line-height:1.4;color:#333}
.contact-mailto a{color:#000080}
.contact-instagram-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:8px 0 4px}
.contact-instagram-logo{width:48px;height:48px}
.contact-instagram-handle{margin:0;font:bold 14px Tahoma,Arial,sans-serif}
.contact-instagram-note{margin:0;font-size:12px;color:#444;line-height:1.4}
.contact-instagram-open{
 display:inline-flex;align-items:center;justify-content:center;
 min-height:40px;padding:8px 16px;margin-top:4px;
 border:2px outset #fff;background:#d4d0c8;color:#000;text-decoration:none;
 font:bold 13px Tahoma,Arial,sans-serif;touch-action:manipulation
}
.contact-instagram-open:active{border-style:inset}

.about-tagline{font-size:13px;color:#333;margin:8px 0}
.about-summary{font-size:12px;line-height:1.5;margin:8px 0}
.about-list{margin:12px 0;padding-left:18px;font-size:12px;line-height:1.6}
#about{width:420px;min-height:320px}
#about .content{min-height:260px}

@media (max-width:760px), (hover:none) and (pointer:coarse){
 .window{
  position:fixed!important;
  inset:38px 4px 46px 4px!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  transform:none!important;
  transition:none;
 }
 .window:hover{box-shadow:0 8px 20px rgba(0,0,0,.5)}
 .titlebar{height:44px;flex-basis:44px;padding:0 4px 0 8px;touch-action:manipulation}
 .titlebar>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .titlebar>div{display:flex;flex:0 0 auto}
 .titlebar button{width:44px;height:40px;margin-left:2px;font-size:15px}
 .content{min-height:0;padding:10px;overscroll-behavior:contain}
 .folders{grid-template-columns:1fr}
 .folder-item{min-height:30px;padding:12px;display:flex;align-items:center}
 #about,#about .content{width:auto;min-height:0}
 .contact-option{min-width:140px;min-height:120px;padding:16px}
 .contact-option-icon{width:44px;height:44px}
 .contact-back,#contact-send,.contact-instagram-open{min-height:44px}
 button,input,textarea{font-size:16px}
}