/* The account control (templates/_account.html): one hover target, name and face; the face travels into the menu. */
.ac { position: relative; display: flex; align-items: center; gap: .65rem; padding: .4rem 0 .4rem .8rem; margin-left: auto;
  cursor: default; outline: none; font-family: Oxygen, system-ui, sans-serif; }
.ac-name { font-size: .82rem; font-weight: 300; color: #111; white-space: nowrap; transition: opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.ac-face { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; background: #fafafa;
  border: 1px solid rgba(0,0,0,.14); font-family: 'Cormorant Garamond', Georgia, serif; color: #111; flex: none; }
.ac-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-sm { width: 30px; height: 30px; font-size: 1rem; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease; }
.ac-menu { position: absolute; right: -6px; top: calc(100% + 2px); z-index: 80; width: 264px; padding: 22px 22px 16px; background: #fff;
  border: 1px solid rgba(0,0,0,.14); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.10); text-align: center;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility 0s .35s; }
.ac::after { content: ''; position: absolute; left: -20px; right: -10px; top: 100%; height: 14px; }   /* the hover bridge */
.ac:hover .ac-menu, .ac:focus-within .ac-menu, .ac.is-open .ac-menu {
  opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.ac:hover .ac-sm, .ac:focus-within .ac-sm, .ac.is-open .ac-sm { transform: translate(-60px, 44px) scale(2.6); opacity: 0; }
.ac:hover .ac-name, .ac:focus-within .ac-name, .ac.is-open .ac-name { transform: translate(-30px, 132px); opacity: 0; }
.ac-lg { width: 84px; height: 84px; font-size: 2.2rem; margin: 0 auto 12px; transform: scale(.4) translate(60px, -90px); opacity: 0;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.ac:hover .ac-lg, .ac:focus-within .ac-lg, .ac.is-open .ac-lg { transform: none; opacity: 1; }
.ac-menu-name { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.35rem; line-height: 1.2; color: #111; }
.ac-menu-org { margin: .2rem 0 0; font-size: .72rem; color: #737373; line-height: 1.4; }
.ac-links { display: flex; flex-direction: column; margin-top: 14px; border-top: 1px solid #ececec; }
.ac-links a { text-decoration: none; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; padding: .7rem 0;
  border-bottom: 1px solid #ececec; color: #1c1c1c; }
.ac-links a:last-child { border-bottom: 0; color: #737373; }
.ac-links a:hover { color: #111; background: #fafafa; }
.ac-signin { margin-left: auto; font-family: Oxygen, system-ui, sans-serif; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: #4d4d4d; text-decoration: none; padding: .36rem .8rem; border: 1px solid rgba(0,0,0,.38); }
.ac-signin:hover { color: #111; border-color: #111; }
@media (max-width: 560px) { .ac-name { display: none; } .ac-menu { right: -4px; } }
@media (prefers-reduced-motion: reduce) { .ac *, .ac-menu { transition: none !important; } }