/* Grimsdale Web Design — site credit bar. Package appendix CSS.
   Sanctioned variances for this site: --gwd-bg is set to var(--fives-bg) in the markup;
   padding reserves the PWA safe areas (deploy/CLAUDE.md). Do not restyle — the lockup
   and the #D5331E underline are brand-fixed. The flourish (gwd-credit.js) adds its own
   rules below the bar's; the bar's rules are never edited. */
.gwd-credit{
  box-sizing:border-box;
  background:var(--gwd-bg);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:18px max(24px, var(--safe-right)) calc(16px + var(--safe-bottom)) max(24px, var(--safe-left)); text-align:center;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
.gwd-credit__link{ position:relative; display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.gwd-credit__by{ font-size:13px; font-weight:500; letter-spacing:.01em; color:var(--gwd-fg); }
.gwd-credit__link svg,
.gwd-credit__link img{ height:24px; width:auto; display:block; }
.gwd-credit__link::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1.5px;
  background:#D5331E; transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.6,.1,.2,1);
}
.gwd-credit__link:hover::after{ transform:scaleX(1); }
.gwd-credit__copy{ margin:0; font-size:12px; color:var(--gwd-copy); }

/* ── flourish: "Your ball." ──────────────────────────────────────────────
   Added by the flourish (gwd-credit.js); the bar's rules above are never
   edited. `position:relative` with no offsets does not move the bar — it
   only makes the band the containing block for the absolutely positioned
   ball. The band is NOT clipped: the ball travels to the viewport's inner
   edges (the glass), which is inside the document's own box, so no
   horizontal overflow is created. `pinch-zoom` is kept — the flourish
   never blocks the visitor's zoom. */
.gwd-credit{ position:relative; touch-action:pan-y pinch-zoom; }
.gwd-credit__ball{
  position:absolute; left:0; top:0; width:6px; height:6px; border-radius:50%;
  background:#D5331E; pointer-events:none; will-change:transform; opacity:0;
}
@media (prefers-reduced-motion: reduce){ .gwd-credit__ball{ display:none !important; } }