#contact-panel:not([open]) { display: none; }
.profile-links button.primary {
 padding: 11px 15px;
 border: 0;
 border-radius: 8px;
}
#contact-panel {
 width: min(32rem, calc(100% - 2rem));
 max-height: calc(100% - 2rem);
 padding: clamp(1.25rem, 5vw, 2rem);
 overflow: auto;
 background: var(--panel);
 color: var(--text);
 border: 1px solid var(--line);
 border-radius: 1rem;
}
#contact-panel::backdrop { background: rgb(0 0 0 / 70%); }
#contact-panel h2 { margin: 0; padding-right: 3rem; font-size: 1.8rem; }
#contact-panel p { color: var(--muted); }
.contact-close { position: absolute; top: 1rem; right: 1rem; }
.contact-close button {
 width: 2.75rem;
 height: 2.75rem;
 border: 1px solid var(--line);
 border-radius: .5rem;
 background: transparent;
 font-size: 1.5rem;
}
#contact-form, #contact-form label { display: grid; gap: .4rem; }
#contact-form { gap: .85rem; }
#contact-form :is(input, textarea) {
 width: 100%;
 border: 1px solid var(--line);
 border-radius: .5rem;
 padding: .6rem .75rem;
 background: var(--bg);
 color: var(--text);
 font: inherit;
 font-size: 16px;
}
#contact-form :is(input, textarea):focus-visible { outline: 2px solid var(--accent); }
#contact-form textarea { resize: vertical; }
#contact-form button {
 justify-self: start;
 padding: .65rem 1rem;
 border: 0;
 border-radius: .5rem;
 background: var(--text);
 color: var(--bg);
 font-weight: 600;
}
.contact-methods {
 display: flex;
 flex-wrap: wrap;
 gap: .75rem 1.25rem;
 border-top: 1px solid var(--line);
 margin-top: 1.25rem;
 padding-top: 1rem;
}
.contact-methods a {
 display: grid;
 place-items: center;
 width: 44px;
 height: 44px;
 border: 1px solid var(--line);
 border-radius: .5rem;
 color: var(--accent);
}
.contact-methods a:hover { border-color: var(--accent); }