/* A physical phone lives at the edge of the photograph, not in the page layout. */
.phone-dock{--dock-width:clamp(230px,20vw,290px);position:fixed;z-index:31;width:var(--dock-width);height:calc(var(--dock-width)*2.04);right:calc(var(--dock-width)*-.27);bottom:calc(var(--dock-width)*-1.76);pointer-events:none}
.contact-phone{position:relative;width:100%;height:100%;container-type:inline-size;color:#e7decb;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;isolation:isolate;transform-origin:50% 50%;border-radius:14% / 6.4%;filter:drop-shadow(7px 14px 17px #0008);will-change:transform}
.phone-dock .contact-phone{transform:rotate(-18deg);pointer-events:none}
.phone-frame{position:absolute;max-width:none;width:107.5%;height:108.97%;left:-3.81%;top:-3.63%;pointer-events:none;user-select:none;z-index:-1;filter:brightness(.56);transition:filter .55s ease;mask:url("assets/phone/iphone-8.webp") center/100% 100% no-repeat;-webkit-mask:url("assets/phone/iphone-8.webp") center/100% 100% no-repeat}
.contact-phone.is-lifted .phone-frame{filter:brightness(1)}
.phone-launcher{position:absolute;inset:0 0 auto;height:16%;transform:rotate(-18deg);transform-origin:50% calc(var(--dock-width)*1.02);border-radius:14% 14% 0 0 / 16% 16% 0 0;border:0;outline:none;background:transparent;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.phone-launcher:focus-visible{outline:none}
body:has(.phone-launcher:focus-visible) #hint{text-decoration:underline;text-underline-offset:4px}
/* An address-book page behind the glass, using the desk's paper and ink palette. */
.phone-screen{position:absolute;inset:11.95% 6.45% 11.75%;display:flex;flex-direction:column;padding:7cqw 6cqw 4.8cqw;overflow:auto;scrollbar-width:none;overscroll-behavior:contain;opacity:0;visibility:hidden;pointer-events:none;transition:none;isolation:isolate;color:#292e2b;background:radial-gradient(ellipse at 80% 20%,#d1c3a21a,transparent 65%),linear-gradient(104deg,#afa287,#c2b69a 44%,#b8ac90);box-shadow:inset 0 0 5cqw #332c202e}
.phone-screen::before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/phone/paper-grain.webp') center/520px auto;mix-blend-mode:multiply;opacity:.24;pointer-events:none}
.contact-phone.screen-on .phone-screen{opacity:1;visibility:visible;pointer-events:auto}
.phone-kicker{display:flex;justify-content:space-between;align-items:center;gap:2cqw;padding-bottom:4cqw;margin:0 0 7cqw;border-bottom:1px solid #454b4273;font:400 3.05cqw/1.4 'Courier New',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#43483d}
.phone-kicker span:last-child{color:#854b39;letter-spacing:.04em}
.phone-screen h2{font:normal 10.2cqw/1.08 Georgia,serif;letter-spacing:-.045em;margin:0 0 4cqw;color:#232c29}
.phone-intro{font:italic 4.6cqw/1.45 Georgia,serif;color:#4e5144;margin:0;max-width:100%}
.phone-contact-list{display:flex;flex-direction:column;gap:0;margin:10cqw 0 auto;border-bottom:1px solid #454b4255}
.phone-contact-link{display:grid;grid-template-columns:6cqw minmax(0,1fr) 4cqw;align-items:center;gap:3cqw;padding:4.7cqw 0;border-top:1px solid #454b4255;color:#29342e;text-decoration:none;min-height:22cqw}
.phone-contact-number{align-self:start;padding-top:1.2cqw;font:400 3cqw/1.5 'Courier New',ui-monospace,monospace;color:#82553e}
.phone-contact-link strong{display:block;font:normal 6.25cqw/1.15 Georgia,serif;letter-spacing:-.025em}
.phone-contact-link small{display:block;margin-top:2cqw;font:400 4cqw/1.5 'Courier New',ui-monospace,monospace;color:#353b30;overflow-wrap:anywhere}
.phone-arrow{font:normal 5cqw/1 Georgia,serif;color:#82553e}
.phone-contact-link:hover{background:#624a2810}.phone-contact-link:focus-visible{outline:1px solid #7a4534;outline-offset:3px}
.phone-colophon{display:flex;justify-content:space-between;align-items:center;margin-top:7cqw;color:#655543;font:italic 4cqw/1.4 Georgia,serif}
.phone-colophon span:last-child{font-style:normal;color:#854b39}
#contact-dialog{inset:0;width:100%;height:100svh;height:100dvh;overflow:hidden;touch-action:pan-y pinch-zoom}
#contact-dialog .contact-phone{position:fixed;pointer-events:auto}
#contact-dialog::backdrop{background:#080c0ade;backdrop-filter:blur(3px)}
#contact-dialog.phone-closing::backdrop{animation:shade-out .5s both}
@media(hover:hover) and (pointer:fine){.phone-dock:has(.phone-launcher:hover) .contact-phone{filter:drop-shadow(7px 14px 17px #0008) brightness(1.07)}}
@media(max-width:650px){.phone-dock{--dock-width:220px;right:-85px}}
@media(prefers-reduced-motion:reduce){.contact-phone{will-change:auto}.phone-screen,.phone-frame{transition:none}}

.phone-home-button{position:absolute;left:40%;top:88.5%;width:20%;height:10%;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.phone-home-button:focus-visible{outline:1px solid #bbc3ac;outline-offset:-7px}