/* ---------- collage name: "Angie He" cut from Angie's alphabet sheet ----------
   One shared file for the top-bar logo (every page) and the big homepage nameplate.
   Each letter is its own transparent cut-out (images/logo/<letter>-s.webp small, -l.webp large).
   --h = letter height relative to the "a" · --r = tilt · --y = baseline nudge in px at top-bar size (scales with the letters) · --i = wiggle order */
.cl{display:inline-flex;align-items:center;white-space:nowrap;line-height:0}
.cl img{display:block;width:auto;height:calc(var(--h) * var(--u, 34px));
  transform:rotate(var(--r)) translateY(calc(var(--y) * var(--u, 34px) * .03));
  filter:drop-shadow(0 1px 1.2px rgba(62,39,35,.32));
  -webkit-user-drag:none;user-select:none}
.cl > * + *{margin-left:calc(var(--u, 34px) * -.07)}      /* touching or slightly overlapping */
.cl > .sp{display:block;width:calc(var(--u, 34px) * .34)}
.cl > .sp,.cl > .sp + *{margin-left:0}
.cl .ch{display:block}

.home.collage{display:inline-flex;text-decoration:none;border:0;padding:4px 2px;letter-spacing:0;white-space:nowrap}
.home.collage:hover{border:0}
.home.collage:focus-visible{outline:2px solid var(--raspberry);outline-offset:4px;border-radius:2px}
.home.collage .cl{--u:34px}
@media (max-width:420px){ .home.collage .cl{--u:27px} }
@media (max-width:350px){ .home.collage .cl{--u:23px} }

/* homepage nameplate: same letters, newspaper size (height follows the old headline size) */
.cl.big{--u:.86em}

/* hover: each letter wiggles in turn (mouse and trackpad only; still under reduced motion) */
@keyframes cl-wiggle{
  0%,100%{transform:rotate(var(--r)) translateY(calc(var(--y) * var(--u, 34px) * .03))}
  30%{transform:rotate(calc(var(--r) - 7deg)) translateY(calc((var(--y) - 3) * var(--u, 34px) * .03))}
  62%{transform:rotate(calc(var(--r) + 5deg)) translateY(calc(var(--y) * var(--u, 34px) * .03))}
  84%{transform:rotate(calc(var(--r) - 2deg)) translateY(calc(var(--y) * var(--u, 34px) * .03))}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .home.collage:hover .cl img,.home.collage:focus-visible .cl img,
  .cl.big:hover img{animation:cl-wiggle .5s ease-in-out calc(var(--i) * 70ms) 1 both}
}