/* K53 Pass /socials (public/socials.html): one page of big buttons to every K53 Pass profile.
   Tokens and the base (topbar, footer, badge, focus ring) come from app.css; this file only adds
   the page's own parts. Kept out of app.css on purpose: socials.html is not in the service worker's
   precache, and a returning visitor's worker serves its own version's app.css, so styles the page
   depends on live here and always come from the network. Flat colour, 3px ink outlines, hard
   offset shadow only on the one red action (DESIGN.md). */
.socials { max-width: 560px; padding-top: 0; }
.soc-hero { margin: 0 calc(-1 * var(--gutter)); padding: 22px var(--gutter) 28px; background: var(--yellow); border-bottom: var(--bw) solid var(--ink); }
.soc-hero h1 { margin: 0 0 6px; font-size: 34px; font-weight: 900; line-height: 1.1; }
.soc-lead { margin: 0 0 18px; font-size: 18px; max-width: 34ch; }
.soc-primary { display: flex; flex-direction: column; justify-content: center; min-height: 76px; padding: 10px 22px; color: var(--white); background: var(--red); border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink); text-decoration: none; }
.soc-primary:hover { background: #cc0027; }
.soc-primary:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.soc-primary-t { font-size: 24px; font-weight: 900; line-height: 1.15; }
.soc-primary-s { font-size: 16px; font-weight: 600; }
.soc-h { margin: 26px 0 12px; font-size: 22px; font-weight: 900; }
.soc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.soc-btn { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 10px 14px 10px 10px; color: var(--ink); background: var(--white); border: var(--bw) solid var(--ink); border-radius: 18px; text-decoration: none; }
.soc-btn:hover { background: var(--cream); }
.soc-btn:active { transform: translateY(2px); }
.soc-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; color: var(--yellow); background: var(--ink); border-radius: 14px; }
.soc-ico svg { display: block; }
.soc-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.soc-name { font-size: 21px; font-weight: 900; line-height: 1.15; }
.soc-handle { font-size: 16px; color: var(--muted); overflow-wrap: anywhere; }
.soc-go { flex: 0 0 auto; display: inline-flex; }
.soc-mail { margin: 26px 0 0; padding: 14px 16px; background: var(--cream); border: var(--bw) solid var(--ink); border-left-width: 10px; border-left-color: var(--blue); border-radius: 14px; font-size: 17px; }
.soc-mail a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--blue); font-weight: 700; overflow-wrap: anywhere; }
@media (min-width: 600px) {
  .soc-hero { margin: 24px 0 0; padding: 26px 26px 30px; border: var(--bw) solid var(--ink); border-radius: var(--r-big); }
  .soc-hero h1 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) { .soc-primary:active, .soc-btn:active { transform: none; } }