/* Social channels: the homepage band and the /social.html hub.
   Both read the same SOCIALS array, so adding a channel in data.mjs styles it
   without touching this file. */

.socbar{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:34px;align-items:center;
  background:var(--wash);border:1px solid var(--line);border-radius:18px;padding:30px 32px}
.socbar__t h2{margin:6px 0 10px}
.socbar__t .prose{margin:0;max-width:52ch}
.socbar__l{display:grid;gap:10px}

.soc{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 15px;
  transition:border-color .15s,transform .15s}
.soc:hover{border-color:var(--brand);transform:translateY(-1px)}
.soc__i{display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:10px;background:var(--brand-50);color:var(--brand)}
.soc__t{display:grid;line-height:1.25;min-width:0}
.soc__t b{font-size:14px}
.soc__t i{font-style:normal;font-size:12.5px;color:var(--muted)}
.soc:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Mini variant: glyph only, for the card header on /social.html */
.socmini__a{display:inline-flex}
.socmini__i{display:grid;place-items:center}

.socgrid{display:grid;gap:16px}
.socpage{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.socpage__h{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.socpage__h:hover .socpage__t b{color:var(--brand)}
.socpage__i{display:grid;place-items:center;width:46px;height:46px;flex:none;
  border-radius:12px;background:var(--brand-50);color:var(--brand)}
.socpage__t{display:grid;line-height:1.25}
.socpage__t b{font-size:17px}
.socpage__t i{font-style:normal;font-size:13px;color:var(--muted)}
.socpage__g{margin-left:auto;color:var(--muted);flex:none}
.socpage .prose{margin:14px 0 0}

/* Live account figures, filled in by social.js from /api/?action=social_feed.
   Hidden until there is something to say: an empty "Followers: —" box reads as
   a broken widget, which is worse than not having one. */
.socpage__live{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:13px}
.socpage__live[hidden]{display:none}
.socpage__fig{color:var(--ink)}
.socpage__fig b{font-size:15px;font-variant-numeric:tabular-nums}
.socpage__when{color:var(--muted);font-size:12px}
/* The account's own bio, quoted. It doubles as proof the handle is ours and
   live, and it carries the offer in the owner's words rather than ours. */
.socpage__bio{flex:1 1 100%;margin:2px 0 0;padding-left:11px;
  border-left:2px solid var(--brand-50);color:var(--muted);font-size:12.5px;
  line-height:1.5;white-space:pre-line}

@media (max-width:820px){
  .socbar{grid-template-columns:1fr;gap:22px;padding:24px}
}