/* A full-screen continuation of the portfolio, using its Alef/frame identity. */
dialog.personal-stage{inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--bg);color:var(--ink);overflow:auto;box-shadow:none}
dialog.personal-stage[open]{display:grid;grid-template-rows:auto 1fr auto;animation:stage-enter .38s ease-out both}
dialog.personal-stage::backdrop{background:var(--bg)}
.stage-header,.stage-footer{width:88%;max-width:1500px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:28px}
.stage-header{min-height:90px;position:sticky;top:0;z-index:3;background:var(--bg)}
.stage-header nav{display:flex;align-items:center;gap:30px;margin-inline-start:auto}
.stage-header button,.stage-footer button,.stage-contact-options button{border:0;background:none;padding:12px 0;min-height:44px;font:400 15px Heebo,sans-serif}
.stage-header nav button{color:var(--muted);position:relative}
.stage-header nav button[aria-current]{color:var(--ink)}
.stage-header nav button[aria-current]::after{content:'';position:absolute;bottom:4px;right:0;left:0;height:1px;background:var(--accent)}
.stage-header .stage-close{height:auto;display:flex;align-items:center;gap:16px;padding:8px 18px;border:1px solid #5c5e55;border-radius:0;font-size:13px}
.stage-close span:last-child{font:300 25px Arial;color:var(--accent)}
.stage-header button:hover,.stage-contact-options button:hover{color:var(--accent)}
.stage-about{width:82%;max-width:1130px;margin:auto;display:grid;grid-template-columns:1.1fr 1fr;gap:10%;align-items:center;padding:24px 0 36px}
.stage-copy{min-width:0}
.stage-name,.stage-contact-frame{position:relative;padding:25px 32px;margin-bottom:30px}
.stage-name::before,.stage-contact-frame::before,.stage-name::after,.stage-contact-frame::after{content:'';position:absolute;width:29px;height:29px;border:1px solid var(--accent);pointer-events:none}
.stage-name::before,.stage-contact-frame::before{right:0;top:0;border-bottom:0;border-left:0}
.stage-name::after,.stage-contact-frame::after{left:0;bottom:0;border-top:0;border-right:0}
.stage-label{font:400 13px/1.5 Heebo,sans-serif;color:var(--accent);margin:0 0 10px}
.stage-name h3{font:400 clamp(60px,6.2vw,86px)/1.12 Alef,Arial,sans-serif;letter-spacing:-.035em;margin:0}
.stage-copy>p{font:400 17px/1.95 Heebo,sans-serif;color:#bfc1b7;margin:0 0 18px}
.stage-portrait{margin:0;position:relative;align-self:center;min-width:0;max-width:min(430px,45dvh);justify-self:center}
.stage-portrait .portrait{display:block;float:none;width:100%;height:auto;aspect-ratio:4/4.6;object-fit:cover;object-position:center;margin:0;outline:0;box-shadow:none}
.stage-portrait figcaption{color:#9b9e91;font:400 9px Heebo,Arial,sans-serif;letter-spacing:2px;margin-top:16px}
.stage-footer{min-height:84px;border-top:1px solid var(--line);padding:16px 0}
.stage-links{display:flex;flex-wrap:wrap;gap:30px;font-size:14px}
.stage-links a{padding:10px 0;min-height:44px}
.stage-next{display:flex;align-items:center;gap:24px;white-space:nowrap;font-size:15px}
.stage-next span{font-size:26px;color:var(--accent)}
.stage-contact{width:88%;max-width:1060px;margin:auto;text-align:center;padding:20px 0;display:flex;flex-direction:column;align-items:center}
.stage-contact-frame{padding:30px 70px;margin:0 0 30px}
.stage-contact-frame h2{font:400 clamp(64px,7.2vw,100px)/1.12 Alef,sans-serif;letter-spacing:-.035em;margin:0}
.stage-invitation{font:400 16px/1.7 Heebo,sans-serif;color:var(--accent);margin:20px 0 0}
.stage-email{display:inline-flex;align-items:center;justify-content:center;gap:25px;max-width:100%;font:400 clamp(26px,3.8vw,51px)/1.4 Alef,Arial,sans-serif;letter-spacing:-.02em;position:relative;padding-bottom:15px}
.stage-email::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:#66685d;transition:background .2s,transform .2s;transform:scaleX(.55)}
.stage-email:hover::after,.stage-email:focus-visible::after{background:var(--accent);transform:scaleX(1)}
.stage-arrow{color:var(--accent);transition:transform .2s}
.stage-email:hover .stage-arrow{transform:translate(3px,-3px)}
.stage-contact-options{display:flex;gap:36px;align-items:center;justify-content:center;margin-top:30px;font:400 14px Heebo,sans-serif}
.stage-contact-options a,.stage-contact-options button{min-height:44px;padding:12px 0;font-size:14px;color:var(--muted)}
.stage-contact-options span{color:var(--accent);margin-inline-start:6px}
.stage-contact-options a:hover{color:var(--ink)}
#copy-email-status{display:block;min-height:24px;font-size:13px;color:var(--accent);margin-top:5px}
.stage-credit{font:400 13px Heebo,sans-serif;color:var(--muted)}
.stage-credit span{color:var(--accent);margin:0 12px}
.personal-stage[open] .stage-name::before{animation:stage-focus-corner .65s ease-out both}
.personal-stage[open] .stage-name::after{animation:stage-focus-corner .65s ease-out both;--corner-direction:-1}
.personal-stage[open] .stage-contact-frame::before,.personal-stage[open] .stage-contact-frame::after{animation:contact-frame-lock 1.15s cubic-bezier(.22,.7,.25,1) .12s both}
.stage-contact-frame::before{--frame-x:12px;--frame-y:-12px;--frame-clip:0 0 80% 80%}
.stage-contact-frame::after{--frame-x:-12px;--frame-y:12px;--frame-clip:80% 80% 0 0}
/* The two corner strokes draw in and settle once, when the dialog opens. */
@keyframes contact-frame-lock{
 0%{opacity:0;clip-path:inset(var(--frame-clip));transform:translate(var(--frame-x),var(--frame-y))}
 40%{opacity:1;clip-path:inset(0);transform:translate(calc(var(--frame-x) * .35),calc(var(--frame-y) * .35))}
 85%,100%{opacity:1;clip-path:inset(0);transform:translate(0,0)}
}
@keyframes stage-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes stage-focus-corner{from{opacity:0;translate:calc(8px * var(--corner-direction,1)) calc(-8px * var(--corner-direction,1))}to{opacity:1;translate:0 0}}
@media(max-width:900px){.stage-about{width:86%;gap:6%;grid-template-columns:1.2fr 1fr}.stage-copy>p{font-size:15px}.stage-name{padding:20px 25px}.stage-name h3{font-size:62px}.stage-header .opening-signature{font-size:9px;letter-spacing:1px}}
@media(max-width:620px){.stage-header,.stage-footer{width:calc(100% - 40px);gap:16px}.stage-header{min-height:80px;flex-wrap:wrap;justify-content:space-between}.stage-header .opening-signature{display:none}.stage-header nav{gap:22px;margin:0}.stage-header nav button{font-size:14px}.stage-header .stage-close{font-size:12px;padding:8px 10px;gap:12px}.stage-about{width:calc(100% - 48px);display:flex;flex-direction:column;align-items:stretch;gap:25px;padding:20px 0 30px}.stage-name{margin-bottom:25px}.stage-name h3{font-size:60px}.stage-copy>p{font-size:15px;line-height:1.9}.stage-portrait{width:100%;display:flex;align-items:flex-end;gap:20px}.stage-portrait .portrait{width:145px;height:165px;object-fit:cover}.stage-portrait figcaption{font-size:8px;letter-spacing:1.4px;writing-mode:vertical-rl;transform:rotate(180deg);margin:0}.stage-footer{min-height:84px;flex-wrap:wrap;padding:16px 0}.stage-links{gap:8px 18px;font-size:12px}.stage-footer .stage-next{font-size:13px;gap:10px}.stage-contact{width:calc(100% - 48px);padding:30px 0}.stage-contact-frame{width:100%;padding:25px 17px;margin-bottom:40px}.stage-contact-frame h2{font-size:64px}.stage-invitation{font-size:14px;max-width:240px;margin:15px auto 0}.stage-email{font-size:27px;gap:12px}.stage-contact-options{gap:25px;margin-top:20px}.stage-contact-options a,.stage-contact-options button{font-size:13px}.stage-credit{font-size:11px}.stage-credit span{margin:0 6px}}
@media(max-width:360px){.stage-email{font-size:23px}.stage-contact-frame h2{font-size:57px}.stage-header nav{gap:14px}.stage-header .stage-close{gap:8px}}
@media(prefers-reduced-motion:reduce){dialog.personal-stage[open],.personal-stage[open] .stage-name::before,.personal-stage[open] .stage-name::after,.personal-stage[open] .stage-contact-frame::before,.personal-stage[open] .stage-contact-frame::after{animation:none}}

.stage-name h3:focus,.stage-contact-frame h2:focus{outline:none}
@media(max-width:620px){.stage-portrait{max-width:none}}

/* Full name in the biographical About introduction. */
.stage-name h3{font-size:clamp(32px,4.4vw,58px)}

/* Align the About heading frame and photograph along their top edge. */
@media(min-width:621px){.stage-about{align-items:start}.stage-portrait{align-self:start}}
@media(max-width:620px){
 .stage-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:22px 18px;align-items:start}
 .stage-copy{display:contents}.stage-name{grid-column:1/-1;grid-row:1;margin-bottom:0}
 .stage-copy>p{grid-column:1/-1;margin:0;font-size:16px;line-height:1.85}
 .stage-copy>p:first-of-type{grid-column:2;grid-row:2;font-size:15px}
 .stage-portrait{grid-column:1;grid-row:2;display:block;width:100%;margin:0}
 .stage-portrait .portrait{display:block;width:100%;height:auto;aspect-ratio:3/4;float:none;margin:0;object-fit:cover;object-position:center}
 .stage-portrait figcaption{display:none}
}
@media(max-width:360px){
 .stage-about{grid-template-columns:minmax(0,1fr)}
 .stage-name,.stage-copy>p{grid-column:1}
 .stage-copy>p:first-of-type{grid-column:1;grid-row:3;font-size:16px}
 .stage-portrait{grid-column:1;grid-row:2;max-width:170px;justify-self:center}
}

/* One invitation, enclosed by the same quiet corners as the opening title. */
.stage-contact{width:88%;max-width:780px;padding:32px 0}
.stage-contact-frame{width:100%;padding:62px 42px 25px;margin:0}
.stage-contact-frame h2{font-size:clamp(64px,6.3vw,88px)}
.stage-contact-frame::before,.stage-contact-frame::after{width:42px;height:42px}
/* Optical centering beneath the Alef heading's tight RTL letter spacing. */
.stage-invitation{max-width:440px;margin:24px auto 0;text-wrap:balance;text-align:center;translate:.22em 0}
.contact-links{display:flex;align-items:center;justify-content:center;gap:38px;margin-top:40px}
.contact-link{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;min-width:52px;padding:10px 12px;white-space:nowrap;color:var(--ink);font:400 22px/1.4 Heebo,Arial,sans-serif;transition:color .2s}
.contact-link::before,.contact-link::after{content:'';position:absolute;width:8px;height:8px;border:1px solid var(--accent);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.contact-link::before{right:0;top:0;border-left:0;border-bottom:0;transform:translate(4px,-4px)}
.contact-link::after{left:0;bottom:0;border-right:0;border-top:0;transform:translate(-4px,4px)}
.contact-link-arrow{font:400 18px/1 Arial;color:var(--accent);transition:transform .2s}
.contact-link:hover,.contact-link:focus-visible{color:var(--accent)}
.contact-link:hover::before,.contact-link:hover::after,.contact-link:focus-visible::before,.contact-link:focus-visible::after{opacity:1;transform:none}
.contact-link:hover .contact-link-arrow{transform:translate(2px,-2px)}
.contact-link:focus-visible{outline:1px solid var(--accent);outline-offset:5px}
.contact-email-group{display:flex;align-items:center;justify-content:center;gap:0;min-width:0}
.contact-email-address{user-select:text;letter-spacing:-.015em}
.contact-copy{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--muted);font:400 24px/1 Arial,sans-serif;cursor:pointer;transition:color .2s}
.contact-copy:hover,.contact-copy:focus-visible{color:var(--accent)}
.contact-copy:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
#copy-email-status.contact-feedback{min-height:24px;max-width:100%;margin:12px auto 0;font-size:12px;line-height:1.8;color:var(--muted)}
.stage-contact-footer{justify-content:center}
@media(max-width:620px){
 .stage-contact{width:calc(100% - 32px);padding:28px 0}
 .stage-contact-frame{padding:45px 14px 20px}
 .stage-contact-frame::before,.stage-contact-frame::after{width:25px;height:25px}
 .stage-contact-frame h2{font-size:64px}
 .stage-invitation{margin:20px auto 0;font-size:15px;max-width:285px;line-height:1.8}
 .contact-links{flex-direction:column;gap:8px;margin-top:25px}
 .contact-link{font-size:20px;padding:10px 5px;gap:8px;min-height:48px;min-width:44px}
 .contact-link-arrow{display:inline;font-size:16px}
 .contact-copy{font-size:22px}
 #copy-email-status.contact-feedback{font-size:11px;min-height:40px;margin-top:10px;text-wrap:balance}
 .stage-contact-footer{gap:8px;font-size:11px}
 .stage-contact-footer .stage-credit{font-size:10px}
}
@media(max-width:360px){.stage-contact-frame h2{font-size:57px}.stage-invitation{font-size:14px}.contact-link{font-size:18px}.stage-contact-footer .stage-credit span{margin:0 3px}}
@media(prefers-reduced-motion:reduce){.contact-link,.contact-link::before,.contact-link::after,.contact-link-arrow,.contact-copy{transition:none}}
/* Keep the portrait and introduction together, including on narrow phones. */
@media(max-width:620px){
 .stage-header{min-height:76px;padding-top:env(safe-area-inset-top)}
 .stage-header nav button{min-width:44px}
 .stage-about{margin-block:0;padding-top:12px;row-gap:24px;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
 .stage-name{grid-column:1/-1;grid-row:1;padding:20px 22px}
 .stage-copy>p:first-of-type{grid-column:2;grid-row:2;font-size:15px;align-self:center}
 .stage-portrait{grid-column:1;grid-row:2;max-width:none;align-self:start}
 .stage-copy>p:not(:first-of-type){grid-column:1/-1}
 .stage-portrait .portrait{aspect-ratio:3/4;object-position:50% 55%}
 .stage-footer{padding-bottom:max(16px,env(safe-area-inset-bottom))}
 .stage-links a{display:inline-flex;align-items:center;min-height:44px}
}