/* =========================================================
   Socials page (night theme). Shared bar/signal/close: night.css.
   Night photo opener, full-width platform rows on night, green close.
   Platform colours appear only on hover/focus, as brand markers.
   ========================================================= */

/* ---------- Opener ---------- */
.sx-hero { position: relative; min-height: 56svh; display: grid; align-items: end; overflow: clip; background: var(--night); color: #fff; }
.sx-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 30% 50%; }
.sx-hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 15, 20, 0.95) 0%, rgba(11, 15, 20, 0.6) 40%, rgba(11, 15, 20, 0.1) 80%); }
.sx-hero-copy { position: relative; z-index: 2; padding-block: clamp(96px, 18svh, 180px) clamp(44px, 8svh, 80px); }
.sx-title { margin: 0; font-size: clamp(3.4rem, 9vw, 8rem); line-height: 0.92; letter-spacing: -0.05em; color: #fff; }
.sx-title span { color: var(--sc-accent); }
.sx-lead { margin: 1.1rem 0 0; max-width: 40ch; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: #dde3ea; }
@media (prefers-reduced-motion: no-preference) { .sx-hero-img { animation: sx-settle 1.6s var(--sc-ease-out) both; } }
@keyframes sx-settle { from { transform: scale(1.06); } to { transform: scale(1); } }

/* ---------- Platform rows ---------- */
.sx-list { background: var(--night); color: #fff; }
.sx-list ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.sx-row { --brand: #3a4452; --brand-ink: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.sx-row--discord { --brand: #4752c4; }
.sx-row--tiktok { --brand: #111; }
.sx-row--instagram { --brand: #d62976; }
.sx-row--youtube { --brand: #ff0033; }
.sx-row--roblox { --brand: #e8e8e8; --brand-ink: #111; }
.sx-row--x { --brand: #e8e8e8; --brand-ink: #111; }
.sx-row a { display: block; text-decoration: none; color: inherit; transition: background-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out); }
.sx-row-inner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px clamp(20px, 4vw, 48px); padding-block: clamp(28px, 6svh, 52px); }
.sx-icon { display: grid; place-items: center; width: clamp(56px, 7vw, 76px); height: clamp(56px, 7vw, 76px); border-radius: 50%; background: rgba(255, 255, 255, 0.07); font-size: clamp(1.6rem, 2.6vw, 2.2rem); transition: background-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out); }
.sx-icon svg.icon { width: 0.9em; height: 0.9em; }
.sx-body { display: flex; flex-direction: column; min-width: 0; }
.sx-name { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -0.045em; }
.sx-blurb { margin-top: 0.5rem; color: var(--night-soft); font-size: 1.05rem; transition: color 240ms var(--sc-ease-out); }
.sx-handle { font-weight: 600; color: #f5a48f; white-space: nowrap; transition: color 240ms var(--sc-ease-out); }
.sx-go { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.6em 1.1em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); font-weight: 600; white-space: nowrap; transition: border-color 240ms var(--sc-ease-out), background-color 240ms var(--sc-ease-out); }
.sx-row a:hover, .sx-row a:focus-visible { background: var(--brand); color: var(--brand-ink); }
.sx-row a:hover .sx-icon, .sx-row a:focus-visible .sx-icon { background: rgba(255, 255, 255, 0.16); transform: scale(1.06); }
.sx-row a:hover .sx-blurb, .sx-row a:hover .sx-handle, .sx-row a:focus-visible .sx-blurb, .sx-row a:focus-visible .sx-handle { color: inherit; }
.sx-row a:hover .sx-go, .sx-row a:focus-visible .sx-go { border-color: currentColor; background: rgba(255, 255, 255, 0.12); }
.sx-row a:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.sx-row a:active .sx-icon { transform: scale(0.98); }
@media (max-width: 760px) {
  .sx-row-inner { grid-template-columns: auto 1fr; }
  .sx-handle { grid-column: 2; margin-top: -6px; }
  .sx-go { grid-column: 2; justify-self: start; }
}