/* Shared UniQueen mark: jade and peacock teal with songket-inspired gold. */
.brand-wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #164d49;
  font: 600 27px/1.08 "Bodoni 72", Didot, Georgia, serif;
  letter-spacing: .085em;
  text-decoration: none;
}
.brand-motto {
  display: grid;
  gap: 1px;
  margin-top: 7px;
  color: #886c3b;
  font: 14px/1.45 "Songti SC", "Noto Serif CJK SC", serif;
  letter-spacing: .12em;
}
.brand-motto-zh, .brand-motto-en {
  display: flex;
  align-items: center;
  white-space: nowrap;
  transform: skewX(-11deg);
  transform-origin: left center;
  text-shadow: 0 1px 0 #fff9e9;
}
.brand-motto-zh {
  justify-content: space-between;
  font-family: "STXingkai", "HanziPen SC", "Kaiti SC", "STKaiti", "KaiTi", serif;
  font-style: normal;
  letter-spacing: .08em;
}
.brand-motto-en {
  margin-top: 3px;
  color: #886c3b;
  font: 11px/1.4 "Bodoni 72", Didot, Georgia, serif;
  letter-spacing: .02em;
}
.motto-separator {
  display: inline-block;
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  margin: 0 7px;
  border-radius: 50%;
  background: #b9a476;
  opacity: .9;
}
.uq-mark {
  position: relative;
  display: grid;
  flex: 0 0 68px;
  align-self: stretch;
  min-height: 68px;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 1px solid #d1aa59;
  border-radius: 18px 18px 18px 8px;
  background: linear-gradient(155deg, #167967 0%, #0d6059 51%, #0a454e 100%);
  box-shadow: inset 0 0 0 2px rgb(255 247 223 / 19%), 0 3px 10px rgb(13 96 89 / 14%);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.uq-mark:hover {
  transform: translateY(-2px) rotate(-1deg);
  box-shadow: 0 6px 16px rgb(13 96 89 / 23%), inset 0 0 0 2px rgb(255 247 223 / 24%);
}
.uq-mark:focus-visible { outline: 3px solid #b17521; outline-offset: 4px; }
.uq-mark .mark-art { display: block; width: 100%; height: 100%; overflow: visible; }
.uq-mark .mark-u {
  fill: none;
  stroke: #edc66f;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity .25s ease;
}
.uq-mark .mark-jk {
  fill: #fff5dc;
  stroke: #0c554f;
  stroke-width: .7px;
  paint-order: stroke;
  font: italic 500 25px "Apple Chancery", "URW Chancery L", "Baskerville", "Iowan Old Style", Palatino, serif;
  letter-spacing: .01em;
  text-anchor: middle;
  filter: drop-shadow(0 0 3px rgb(255 224 157 / 55%));
  transform-box: fill-box;
  transform-origin: center;
  animation: monogram-glitch 4.8s steps(1, end) infinite;
}
.uq-mark .mark-jk-dot { fill: #f4d58e; stroke: none; }
.uq-mark .mark-heart {
  fill: transparent;
  stroke: #f3adb7;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
}
.uq-mark::before {
  position: absolute;
  z-index: 2;
  inset: -20% auto -20% -55%;
  width: 34%;
  content: "";
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 30%), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: logo-glint 6.4s ease-in-out infinite;
}
.uq-mark::after {
  position: absolute;
  z-index: 3;
  top: 7px;
  right: 8px;
  color: #ffe8ad;
  content: "✦";
  font: 15px/1 Georgia, serif;
  text-shadow: 0 0 5px #fff8e5, 0 0 13px #ffd47a;
  pointer-events: none;
  animation: sparkle-tease 3.2s ease-in-out infinite;
}
.uq-mark:hover::after, .uq-mark:focus-visible::after { color: #fff2c1; text-shadow: 0 0 10px #ffe6a1; }
.uq-mark:hover .mark-jk, .uq-mark:focus-visible .mark-jk { fill: #fff9e9; filter: drop-shadow(0 0 8px #f5d387); }
.uq-mark.is-hearting { box-shadow: 0 0 0 3px rgb(237 198 111 / 26%), 0 0 24px rgb(243 173 183 / 30%), inset 0 0 0 2px rgb(255 247 223 / 25%); }
.uq-mark.is-hearting .mark-u { opacity: .13; }
.uq-mark.is-hearting .mark-heart { opacity: 1; animation: draw-heart .95s ease-in-out forwards; }
.uq-mark.is-hearting::before, .uq-mark.is-hearting::after { animation: none; opacity: 0; }
.uq-mark.is-heart-complete .mark-heart { fill: rgb(243 173 183 / 25%); transition: fill .2s ease; }
.uq-mark.is-heart-complete .mark-jk { fill: #fff9e9; filter: drop-shadow(0 0 8px #f5d387); animation: jk-delight .72s cubic-bezier(.2,.8,.2,1.3) both; }
.uq-mark.is-heart-complete .mark-jk-dot { fill: #fff9df; }
.uq-mark.is-heart-complete::after {
  z-index: 4;
  color: #fff9e9;
  opacity: 1;
  text-shadow: 0 0 5px #fff, 0 0 15px #ffe199, 0 0 26px #ffc95f;
  animation: star-burst .78s ease-out both;
}
.uq-mark .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@keyframes draw-heart { to { stroke-dashoffset: 0; } }
@keyframes jk-delight { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-8px) scale(1.28); } 68% { transform: translateY(1px) scale(.96); } 100% { transform: translateY(0) scale(1.08); } }
@keyframes monogram-glitch { 0%, 95%, 100% { transform: translate(0, 0); } 96% { transform: translate(1px, -1px); } 97% { transform: translate(-1px, 1px); } 98% { transform: translate(0, 0); } }
@keyframes logo-glint { 0%, 72% { left: -55%; } 88%, 100% { left: 130%; } }
@keyframes sparkle-tease { 0%, 66%, 100% { opacity: .42; transform: scale(.76) rotate(0); } 78% { opacity: 1; transform: scale(1.22) rotate(24deg); } }
@keyframes star-burst { 0% { opacity: .3; transform: scale(.5) rotate(-18deg); } 48% { opacity: 1; transform: scale(1.8) rotate(18deg); } 100% { opacity: 1; transform: scale(1.22) rotate(0); } }
@media (max-width: 620px) {
  .site-header .brand { gap: 8px; }
  .site-header .uq-mark { flex-basis: 54px; min-height: 62px; }
  .site-header .brand-wordmark { font-size: 21px; }
  .site-header .brand-motto { font-size: 12px; margin-top: 4px; }
  .site-header .brand-motto-en { font-size: 10px; }
  .site-header .motto-separator { width: 4px; height: 4px; flex-basis: 4px; margin: 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .uq-mark, .uq-mark .mark-u { transition: none; }
  .uq-mark .mark-jk, .uq-mark::before, .uq-mark::after { animation: none; }
  .uq-mark.is-hearting .mark-heart { animation-duration: .01ms; }
  .uq-mark.is-heart-complete .mark-jk, .uq-mark.is-heart-complete::after { animation: none; }
}