/* Branded link cards. The selected admin color controls the whole accent. */
#links .link-card{
  --link-accent:#bd96ff;
  --link-tint:#654197;
  --link-border:#735391;
  --link-wash:#352543;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 32px;
  gap:5px 13px;
  align-content:center;
  min-height:104px;
  padding:19px 18px 19px 15px;
  border:1px solid var(--link-border);
  border-left:3px solid var(--link-accent);
  border-radius:15px;
  background:radial-gradient(ellipse at 0 0,var(--link-tint),transparent 78%),linear-gradient(110deg,var(--link-wash),#1b191f 85%);
  color:#fcf9f3;
  box-shadow:inset 0 1px #ffffff12;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
#links .link-card.gold{--link-accent:#f2ca67;--link-tint:#795923;--link-border:#8d723b;--link-wash:#3c301c}
#links .link-card.lime{--link-accent:#b7df79;--link-tint:#476534;--link-border:#668349;--link-wash:#253521}
#links .link-card:hover,#links .link-card:focus-visible{
  border-color:var(--link-accent);
  box-shadow:inset 0 1px #ffffff22,0 5px 22px #0003;
  transform:translateY(-2px);
}
#links .link-card strong{
  grid-column:2;grid-row:1;
  font-family:'Onest',Arial,Helvetica,sans-serif;
  font-size:18px;font-weight:600;
  line-height:1.35;letter-spacing:-.012em;
  hyphens:none;text-wrap:wrap;overflow-wrap:break-word;
}
#links .link-card small{
  grid-column:2;grid-row:2;
  font-size:13px;line-height:1.5;
  color:#e4dde9;opacity:1;max-width:100%;
}
#links .link-card .link-icon{
  grid-column:1;grid-row:1/3;align-self:center;
  display:block;width:42px;height:52px;
  background:none;border:0;border-radius:0;
}
#links .link-orb{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 70%}
#links .link-card .link-arrow{
  grid-column:3;grid-row:1/3;align-self:center;
  display:grid;place-items:center;width:32px;height:36px;
  color:#f5d98e;font-size:0;
}
#links .link-arrow svg{display:block;width:32px;height:32px;overflow:visible}
#links .arrow-flight{transform-origin:center;transition:transform .25s ease}
#links .arrow-frame{opacity:.8}
#links .link-card:hover .arrow-flight,#links .link-card:focus-visible .arrow-flight{transform:translate(2px,-2px)}
/* One short greeting when a card first enters view; repeat on hover/focus. */
@media(prefers-reduced-motion:no-preference){
  #links .link-card.is-entering .link-orb,#links .link-card:hover .link-orb,#links .link-card:focus-visible .link-orb{animation:arbat-orb-rock 3.8s ease-in-out both}
  #links .link-card.is-entering .orb-spark,#links .link-card:hover .orb-spark{animation:arbat-spark 3.8s ease-in-out both}
  #links .link-card.is-entering .arrow-flight{animation:arbat-arrow-in 3.8s ease-in-out both}
}
@keyframes arbat-orb-rock{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-6deg) translateY(-2px)}65%{transform:rotate(4deg) translateY(-1px)}}
@keyframes arbat-spark{0%,100%{opacity:.25;transform:scale(.95);transform-origin:44px 27px}40%{opacity:1;transform:scale(1.2);transform-origin:44px 27px}}
@keyframes arbat-arrow-in{0%,35%,100%{transform:translate(0,0)}55%,70%{transform:translate(2px,-2px)}}
@media(max-width:540px){
  #links .link-grid{gap:11px}
  #links .link-card{grid-template-columns:36px minmax(0,1fr) 28px;gap:5px 11px;min-height:100px;padding:17px 13px 17px 10px;border-radius:13px}
  #links .link-card strong{font-size:17px;line-height:1.35}
  #links .link-card small{font-size:12px;line-height:1.5}
  #links .link-card .link-icon{width:36px;height:45px}
  #links .link-card .link-arrow,#links .link-arrow svg{width:28px;height:28px}
}
@media(max-width:360px){
  #links .link-card{grid-template-columns:30px minmax(0,1fr) 24px;gap:4px 9px;padding-right:11px}
  #links .link-card strong{font-size:16px}
  #links .link-card .link-icon{width:30px;height:38px}
  #links .link-card .link-arrow,#links .link-arrow svg{width:24px;height:24px}
}