/* DESIGN.md social dock, approved by Daniel on 21 September 2026.
   Aceternity geometry/motion with Afterglow colour/type; all rules scoped. */
.landing .ci-social-section{padding:64px 12px 56px;text-align:center;scroll-margin-top:32px}
.landing .ci-social-section h2{font:600 32px/1.2 var(--font-display);letter-spacing:-.015em;margin:0;color:var(--color-text)}
.landing .ci-social-section h2 span{color:var(--color-accent)}
.landing .ci-social-dock{display:inline-flex;align-items:end;height:64px;margin-top:80px;padding:0 16px 12px;border-radius:16px;background:var(--color-bg);outline:1px solid var(--color-border);max-width:100%}
.landing .ci-dock-list{display:flex;align-items:end;gap:16px;list-style:none;padding:0;margin:0}
.landing .ci-dock-list li{flex:none;line-height:0;margin:0;padding:0}
.landing .ci-dock-link{--dock-size:40px;position:relative;display:block;width:var(--dock-size);height:var(--dock-size);text-decoration:none;color:var(--color-support);border-radius:50%;outline-offset:4px;isolation:isolate}
.landing .ci-dock-tile{display:grid;place-items:center;width:100%;height:100%;background:var(--color-surface);border-radius:50%;transition:color 120ms;pointer-events:none}
.landing .ci-dock-icon{width:50%;height:50%;fill:currentColor;shape-rendering:geometricPrecision}
.landing .ci-dock-name{display:none}
.landing .ci-dock-tip{position:absolute;left:50%;bottom:calc(100% + 8px);padding:3px 8px;transform:translate(-50%,10px);background:var(--color-surface);border:1px solid var(--color-border);border-radius:5px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 120ms,transform 160ms cubic-bezier(.16,1,.3,1);z-index:2;line-height:1.45;white-space:nowrap}
.landing .ci-dock-tip strong{display:block;font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--color-text)}
.landing .ci-dock-link:is(:hover,:focus-visible){color:var(--color-accent);z-index:2}
.landing .ci-dock-link:is(:hover,:focus-visible) .ci-dock-tile{outline:1px solid var(--color-accent);outline-offset:-1px}
.landing .ci-dock-link:is(:hover,:focus-visible) .ci-dock-tip{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.landing .ci-dock-tip::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.landing .ci-dock-link:focus-visible{outline:2px solid var(--color-accent)}
.landing .ci-dock-link:focus-visible .ci-dock-tip{transition:none}
.landing .ci-social-dock:has(.ci-dock-link:focus-visible) .ci-dock-link{width:40px;height:40px}
.landing .ci-social-dock:has(.ci-dock-link:focus-visible) .ci-dock-link:not(:focus-visible){color:var(--color-support)}
.landing .ci-social-dock:has(.ci-dock-link:focus-visible) .ci-dock-link:not(:focus-visible) .ci-dock-tile{outline:none}
.landing .ci-social-dock:has(.ci-dock-link:focus-visible) .ci-dock-link:not(:focus-visible) .ci-dock-tip{opacity:0;visibility:hidden;pointer-events:none}
.landing .ci-dock-link:active .ci-dock-tile{color:var(--color-action-pressed)}
.landing .ci-social-dock[data-dismiss-tip] .ci-dock-tip{opacity:0;visibility:hidden;pointer-events:none}
@media(hover:none),(pointer:coarse),(max-width:767px){
  .landing .ci-social-section{padding:48px 12px}
  .landing .ci-social-section h2{font-size:28px;max-width:340px;margin:auto}
  .landing .ci-social-dock{height:auto;padding:12px;margin-top:32px}
  .landing .ci-dock-list{gap:8px}
  .landing .ci-dock-link,.landing .ci-social-dock:has(.ci-dock-link:focus-visible) .ci-dock-link{width:48px;height:74px;display:flex;flex-direction:column;align-items:center;gap:8px;border-radius:5px}
  .landing .ci-dock-tile{width:48px;height:48px;flex:none}
  .landing .ci-dock-icon{width:24px;height:24px}
  .landing .ci-dock-name{display:block;font-family:var(--font-body);font-size:12px;line-height:1.4;color:var(--color-text)}
  .landing .ci-dock-tip{display:none}
}
@media(max-width:380px){
  .landing .ci-social-dock--six .ci-dock-list{display:grid;grid-template-columns:repeat(3,48px);gap:16px}
}
@media(prefers-reduced-motion:reduce){
  .landing .ci-dock-tile,.landing .ci-dock-tip{transition:none}
  .landing .ci-dock-tip{transform:translate(-50%,0)}
}
@media(forced-colors:active){
  .landing .ci-social-dock,.landing .ci-dock-tile,.landing .ci-dock-tip{outline:1px solid ButtonText}
  .landing .ci-dock-link:is(:hover,:focus-visible){color:Highlight}
  .landing .ci-dock-link:focus-visible{outline-color:Highlight}
}