/* Original Y&CO mark, with a balanced name lockup. Header only. */
body.page-mode .topbar .wordmark{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:max-content;max-width:150px;gap:6px;padding-block:4px;
  text-decoration:none;flex:none;
}
body.page-mode .topbar .wordmark-mark{
  display:flex!important;align-items:center;justify-content:center;
  width:50px;height:50px;flex:none;border-radius:50%;
  background:#1b1b1f;color:#c9ff24;
  font:800 14px/1 Manrope,Arial,sans-serif;letter-spacing:-.055em;
  direction:ltr;box-shadow:none;transform:none;transition:none;
}
body.page-mode .topbar .wordmark-name{
  display:block;margin:0;color:#272521;text-align:center;
  font-family:Manrope,'Helvetica Neue',Arial,sans-serif;
  font-size:13px;font-style:normal;font-weight:650;
  line-height:1.25;letter-spacing:-.025em;white-space:nowrap;direction:ltr;
}
body.page-mode .topbar .wordmark:focus-visible{
  outline:2px solid #272521;outline-offset:5px;border-radius:6px;
}
@media(max-width:760px){
  body.page-mode .topbar .wordmark{max-width:110px;gap:5px;padding-block:3px}
  body.page-mode .topbar .wordmark-mark{width:42px;height:42px;font-size:11.5px}
  body.page-mode .topbar .wordmark-name{font-size:11.5px}
}

/* A light ink gesture surrounds the original, unchanged Y&CO disc. */
body.page-mode .topbar .wordmark-mark{position:relative;overflow:visible}
body.page-mode .topbar .wordmark-mark::after{
  content:'';position:absolute;inset:-7px;pointer-events:none;
  background:url('assets/yousco-ink-gesture.svg') center / contain no-repeat;
  transform:rotate(-7deg);transform-origin:center;
  transition:transform 700ms cubic-bezier(.2,.65,.3,1),opacity 700ms ease;
  opacity:.9;
}
@media(hover:hover){
  body.page-mode .topbar .wordmark:hover .wordmark-mark::after{transform:rotate(2deg);opacity:1}
}
@media(max-width:760px){body.page-mode .topbar .wordmark-mark::after{inset:-6px}}
@media(prefers-reduced-motion:reduce){
  body.page-mode .topbar .wordmark-mark::after{transition:none}
  body.page-mode .topbar .wordmark:hover .wordmark-mark::after{transform:rotate(-7deg)}
}