/* The "say hello" popup that opens when an email link is clicked. */

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(17,17,17,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.15s ease;
  z-index:300;
}
.modal-overlay.is-open{
  opacity:1;
  visibility:visible;
}
.modal-box{
  background:var(--paper);
  border:3px solid var(--ink);
  padding:32px;
  width:100%;
  max-width:420px;
  position:relative;
  transform:translateY(8px);
  transition:transform 0.15s ease;
}
.modal-overlay.is-open .modal-box{
  transform:translateY(0);
}
.modal-close{
  position:absolute;
  top:16px;
  right:16px;
  background:none;
  border:none;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  padding:4px;
}
.modal-close:hover{color:var(--red);}
.modal-eyebrow{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  opacity:0.6;
  margin-bottom:10px;
}
.modal-title{
  font-family:'Archivo Black', sans-serif;
  font-size:28px;
  text-transform:lowercase;
  margin-bottom:12px;
}
.modal-desc{
  font-size:13px;
  opacity:0.8;
  margin-bottom:24px;
  max-width:40ch;
}
.modal-email-row{
  display:flex;
  border:2px solid var(--ink);
  margin-bottom:12px;
}
.modal-email{
  flex:1;
  padding:12px 14px;
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.modal-copy-btn{
  border:none;
  border-left:2px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:12px 18px;
  cursor:pointer;
  white-space:nowrap;
}
.modal-copy-btn:hover{background:var(--red);}
.modal-mail-btn{
  display:block;
  text-align:center;
  text-decoration:none;
  border:2px solid var(--ink);
  padding:12px 14px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--ink);
  background:var(--caution);
}
.modal-mail-btn:hover{background:var(--red);color:var(--paper);border-color:var(--red);}

@media (max-width:480px){
  .modal-email-row{flex-direction:column;}
  .modal-copy-btn{border-left:none;border-top:2px solid var(--ink);}
}
.resume-modal-box{
  max-width:420px;
  transition:max-width .3s ease;
}
.resume-modal-box.is-expanded{
  max-width:min(720px, 92vw);
}

/* ---- preview card ---- */
.resume-preview-card{
  display:block;
  width:100%;
  text-align:left;
  background:var(--paper);
  border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  padding:20px;
  margin:20px 0 16px;
  cursor:pointer;
  font-family:'IBM Plex Mono', monospace;
  transition:transform .2s ease, box-shadow .2s ease;
}
.resume-preview-card:hover{
  transform:translate(-3px,-3px);
  box-shadow:9px 9px 0 var(--red);
}
.resume-preview-header{
  border-bottom:2px solid var(--ink);
  padding-bottom:10px;
  margin-bottom:14px;
}
.resume-preview-name{
  display:block;
  font-family:'Archivo Black', sans-serif;
  font-size:16px;
  text-transform:uppercase;
}
.resume-preview-role{
  display:block;
  font-size:10px;
  opacity:.6;
  margin-top:4px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.resume-preview-lines{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
}
.resume-preview-lines span{
  display:block;
  height:6px;
  background:var(--ink);
  opacity:.12;
}
.resume-preview-lines span.short{
  width:60%;
}
.resume-preview-hint{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--red);
  font-weight:700;
}

/* ---- expanded state ---- */
.resume-back-btn{
  background:none;
  border:none;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--ink);
  cursor:pointer;
  padding:0 0 14px;
  opacity:.7;
}
.resume-back-btn:hover{
  opacity:1;
  color:var(--red);
}

.resume-viewer-large{
  width:100%;
  height:70vh;
  border:2px solid var(--ink);
  margin-bottom:16px;
  overflow:hidden;
}
.resume-viewer-large iframe{
  width:100%;
  height:100%;
  border:none;
  display:block;
}

.resume-download-btn{
  background:var(--caution);
}
.resume-download-btn:hover{
  background:var(--red);
  color:var(--paper);
  border-color:var(--red);
}

@media (max-width:480px){
  .resume-viewer-large{height:55vh;}
  .resume-preview-card{padding:16px;}
}
/* ============================================
   PROJECT DETAILS MODAL — shared popup that shows
   a project's full description/features/tech stack.
   Reuses .modal-box/.modal-overlay from the contact
   modal, just wider and taller with its own scroll.
   ============================================ */
.project-modal-box{
  max-width:760px;
  max-height:85vh;
  display:flex;
  flex-direction:column;
}
.project-modal-body{
  overflow-y:auto;
  padding-right:6px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.project-modal-body::-webkit-scrollbar{
  display:none;
}
/* project-desc / project-cols / feature-list / tech-badge styles are
   already defined in work.css and apply here unchanged since these are
   the exact same elements, just copied into the modal via JS. */

@media (max-width:768px){
  .project-modal-body .project-cols{
    grid-template-columns:1fr;
    gap:28px;
  }
}