/* RecallMenu project only; existing portfolio panels retain their styling. */
#recallmenu .project-details{min-width:0}
#recallmenu figure{margin:0 0 1.8em}
#recallmenu figure a{display:block;border:1px solid #e5e7eb;border-radius:3px;overflow:hidden;background:#f3f6fa;transition:border-color .2s}
#recallmenu figure a:hover{border-color:#1ea0d8}
#recallmenu figure a:focus-visible{outline:2px solid #1ea0d8;outline-offset:4px}
#recallmenu figure img{display:block;width:100%;height:auto}
#recallmenu figcaption{display:flex;justify-content:space-between;gap:.5em;margin-top:.7em;font-size:.72em;letter-spacing:.09em;text-transform:uppercase;color:#666}
#recallmenu figcaption span{color:#999;white-space:nowrap}
#recallmenu .recallmenu-gallery{display:grid;grid-template-columns:1fr 1fr;gap:1.1em}
#recallmenu .recallmenu-gallery a{height:180px;display:flex;align-items:flex-start;justify-content:center}
#recallmenu .recallmenu-gallery img{height:100%;width:100%;object-fit:contain;object-position:top}
#recallmenu .tech-stack{gap:1em;align-items:flex-start}
#recallmenu .tech-stack-section{padding:0;min-width:0}
#recallmenu .tech-stack-section ul{font-size:.86em;letter-spacing:0;padding-left:1.1em}
#recallmenu .recallmenu-visit{margin-bottom:0}
@media screen and (max-width:480px){
 #recallmenu .tech-stack{display:grid;grid-template-columns:1fr 1fr}
 #recallmenu .recallmenu-gallery{gap:.7em}
 #recallmenu .recallmenu-gallery a{height:150px}
 #recallmenu figcaption{font-size:.65em;letter-spacing:.025em}
 #recallmenu figcaption span{display:none}
}

/* Native modal lives outside the animated panel to avoid clipping. */
#recallmenu-image-dialog{padding:18px;border:1px solid #ddd;border-radius:5px;background:white;color:#555;max-width:min(800px,86vw);max-height:78dvh;margin:auto;overflow:auto;box-shadow:0 16px 64px #0004}
#recallmenu-image-dialog::backdrop{background:rgba(20,25,30,.72)}
#recallmenu-image-dialog .recallmenu-image-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:12px}
#recallmenu-image-title{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin:0;line-height:1.5}
#recallmenu-image-dialog button{display:grid;place-items:center;padding:0;width:44px;height:44px;flex-shrink:0;border:1px solid #ccc;border-radius:4px;background:white;color:#555;font-size:28px;line-height:1;letter-spacing:0;box-shadow:none;cursor:pointer}
#recallmenu-image-dialog button:hover{color:#1ea0d8;border-color:#1ea0d8}
#recallmenu-image-dialog button:focus-visible{outline:2px solid #1ea0d8;outline-offset:3px}
#recallmenu-image-dialog img{display:block;width:auto;height:auto;max-width:min(760px,calc(86vw - 38px));max-height:min(620px,calc(78dvh - 96px));object-fit:contain;margin:auto}
@media(max-width:480px){#recallmenu-image-dialog{padding:12px}#recallmenu-image-dialog img{max-width:calc(86vw - 26px)}}

/* Match project, About, and Contact content widths on desktop. */
@media screen and (min-width:981px){
 #recallmenu.panel,#work.panel,#project2.panel,#about.panel,#contact.panel,#family.panel{width:min(850px,calc(100vw - 6em))}
 #recallmenu.panel>.content,#work.panel>.content,#project2.panel>.content,#about.panel>.content,#contact.panel>.content,#family.panel>.content{width:100%;min-width:0}
}

/* Keep project title links consistent with the dark interaction accent. */
:is(#recallmenu,#work,#project2) a:hover .highlight,
:is(#recallmenu,#work,#project2) a:focus-visible .highlight{color:#1ea0d8}

#family .family-photos{display:grid;grid-template-columns:repeat(2,minmax(0,300px));justify-content:center;gap:24px;margin:0 0 2em;padding:0}
#family .family-photos a{display:block;border:0;line-height:0}
#family .family-photos a:focus-visible{outline:2px solid #1ea0d8;outline-offset:4px}
#family .family-photos img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center;margin:0}
#recallmenu-image-dialog.family-photo-dialog{max-width:min(390px,86vw)}
#recallmenu-image-dialog.family-photo-dialog img{max-width:min(350px,calc(86vw - 38px));max-height:min(350px,calc(78dvh - 96px))}
@media(max-width:480px){#family .family-photos{gap:16px}#recallmenu-image-dialog.family-photo-dialog img{max-width:min(350px,calc(86vw - 26px))}}

#family .inner > header,#family .inner > p{text-align:center}

#recallmenu-image-dialog.family-photo-dialog .recallmenu-image-heading{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}
#recallmenu-image-dialog.family-photo-dialog #recallmenu-image-title{grid-column:2;grid-row:1;text-align:center}
#recallmenu-image-dialog.family-photo-dialog .recallmenu-image-heading button{grid-column:3;grid-row:1}

.family-heart-burst{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.family-heart-burst span{position:absolute;left:50%;top:50%;font-size:26px;line-height:1;color:#d64a70;opacity:0;animation:family-heart-pop .85s ease-out forwards}
.family-heart-burst span:nth-child(even){color:#eb85a0;font-size:22px}
@keyframes family-heart-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}15%{opacity:.9}100%{opacity:0;transform:translate(calc(-50% + var(--heart-x)),calc(-50% + var(--heart-y))) scale(.85)}}
@media(prefers-reduced-motion:reduce){.family-heart-burst{display:none}}

#about .about-tech-stack{columns:2;column-gap:2.5em}
#about .about-tech-stack li{break-inside:avoid;padding-bottom:.45em}
@media(max-width:600px){#about .about-tech-stack{columns:1}}

/* Envelope feedback starts after form validation, before delivery completes. */
#contact #sendMsg{overflow:visible}
#contact .ship-envelope{position:absolute;top:50%;left:calc(100% - 8px);display:block;width:32px;height:32px;line-height:0;color:#1ea0d8;opacity:0;visibility:hidden;pointer-events:none;transform:translate(0,-50%)}
#contact .ship-envelope svg{display:block;width:100%;height:100%}
#contact .ship-envelope.is-animating{animation:ship-envelope-send .85s cubic-bezier(.22,.61,.36,1)}
@keyframes ship-envelope-send{0%{visibility:visible;opacity:0;transform:translate(0,-50%) rotate(-6deg)}12%{opacity:1}100%{visibility:visible;opacity:0;transform:translate(var(--ship-distance,120px),-50%) rotate(6deg)}}
@media(prefers-reduced-motion:reduce){#contact .ship-envelope.is-animating{animation:ship-envelope-fade .25s ease-out}}
@keyframes ship-envelope-fade{from{visibility:visible;opacity:1}to{visibility:visible;opacity:0}}

#contact #contact-send-status{margin:1em 0 0;padding:.8em 1em;border-radius:6px;border:1px solid transparent;font-size:.9em;line-height:1.5;letter-spacing:normal;text-transform:none}
#contact #contact-send-status:empty{margin:0;padding:0;border:0}
#contact #contact-send-status[data-state="sending"]{color:#34566b;background:#f1f7fb;border-color:#d5e3ed}
#contact #contact-send-status[data-state="success"]{color:#225b3e;background:#eef8f1;border-color:#b8d8c3}
#contact #contact-send-status[data-state="error"]{color:#8b2831;background:#fff2f2;border-color:#edc2c6}