/* ========================================
   SOCIALS PAGE
   Platform directory, stream block, and gated links
   ======================================== */

/* ---- PAGE TOKENS ---- */
.socials-page {
  --socials-copy: var(--shell-ink-soft);
  --socials-heading: color-mix(in srgb, var(--shell-ink-soft) 90%, var(--shell-wood-fill) 10%);
  --socials-kicker: color-mix(in srgb, var(--shell-ink-soft) 66%, var(--shell-wood-fill) 34%);
  --socials-muted: color-mix(in srgb, var(--shell-ink-soft) 82%, transparent);
  --socials-panel-bg: color-mix(in srgb, var(--shell-surface-soft) 90%, var(--shell-wood-fill) 10%);
  --socials-panel-bg-strong: color-mix(in srgb, var(--shell-surface) 94%, var(--shell-wood-fill) 6%);
  --socials-panel-bg-accent: color-mix(in srgb, var(--shell-wood-fill) 24%, var(--shell-surface-soft) 76%);
  --socials-panel-bg-hover: color-mix(in srgb, var(--shell-surface-highlight) 56%, var(--socials-panel-bg-accent) 44%);
  --socials-wip-copy: color-mix(in srgb, var(--shell-ink-soft) 56%, transparent);
  --socials-wip-badge: color-mix(in srgb, black 26%, var(--socials-panel-bg) 74%);
  --content-safe-pad-top: 8rem;
  --content-safe-pad-right: 10rem;
  --content-safe-pad-bottom: 12rem;
  --content-safe-pad-left: 10rem;
  --socials-panel-radius: 1.05rem;
  --socials-tile-radius: 1rem;
  --socials-directory-box-width: 22.5rem;
  --socials-tile-width: 8.75rem;
  --socials-stream-tile-width: 8.55rem;
  --socials-tile-icon-size: 3.9rem;
  --socials-tile-lift: -0.18rem;
  --socials-tile-frame: color-mix(in srgb, var(--shell-wood-fill) 28%, var(--shell-ink-soft) 72%);
  --socials-tile-fill: color-mix(in srgb, var(--shell-surface) 82%, var(--shell-wood-fill) 18%);
  --socials-tile-fill-hover: color-mix(in srgb, var(--shell-surface-highlight) 52%, var(--socials-tile-fill) 48%);
  --socials-tile-icon-fill: color-mix(in srgb, var(--shell-surface-highlight) 44%, var(--shell-surface-soft) 56%);
  --socials-tile-reveal-fill: color-mix(in srgb, var(--shell-surface) 92%, var(--shell-wood-fill) 8%);
  --socials-toggle-fill: color-mix(in srgb, var(--shell-wood-fill) 30%, var(--shell-surface-soft) 70%);
  --socials-toggle-fill-hover: color-mix(in srgb, var(--shell-surface-highlight) 40%, var(--socials-toggle-fill) 60%);
  --socials-live-fill: #ff5d66;
  display: grid;
  gap: 1rem;
  align-content: start;
  color: var(--socials-copy);
}

/* ---- PANEL SHELLS ---- */
.socials-intro,
.socials-main,
.socials-collapsible-panel {
  padding: 1rem;
  border-radius: var(--socials-panel-radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--shell-surface-highlight) 18%, transparent), transparent 32%),
    var(--socials-panel-bg);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--shell-ink-soft) 12%, transparent),
    0 0.8rem 1.8rem color-mix(in srgb, black 14%, transparent);
}

.socials-intro-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--socials-kicker);
}

.socials-intro h1,
.socials-main h2 {
  margin: 0;
  color: var(--socials-heading);
}

.socials-intro p,
.socials-subcopy {
  margin: 0.6rem 0 0;
  line-height: 1.45;
  color: var(--socials-muted);
}

/* ---- DIRECTORY GROUPS ---- */
.socials-directory {
  display: grid;
  gap: 0;
}

.socials-directory-lead-divider {
  height: 1px;
  margin-top: 0.95rem;
  background: color-mix(in srgb, var(--shell-ink-soft) 14%, transparent);
}

.socials-directory-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
}

.socials-directory-group {
  display: grid;
  gap: 0;
  align-content: start;
  min-height: 100%;
  padding: 0.95rem;
  border: 1px solid color-mix(in srgb, var(--shell-ink-soft) 12%, transparent);
  border-radius: calc(var(--socials-panel-radius) - 0.2rem);
  background:
    linear-gradient(180deg, color-mix(in srgb, white 7%, transparent), transparent 40%),
    color-mix(in srgb, var(--socials-panel-bg-strong) 88%, var(--shell-wood-fill) 12%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 5%, transparent),
    0 0.45rem 1rem color-mix(in srgb, black 8%, transparent);
}

.socials-directory-group + .socials-directory-group {
  margin-top: 0;
}

.socials-directory-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--socials-heading);
}

.socials-directory-group .socials-subcopy {
  max-width: 42rem;
}

.socials-directory-group .socials-icon-grid {
  margin-top: 0.8rem;
}

/* ---- TILE LAYOUTS ---- */
.socials-icon-grid,
.socials-side-stack {
  display: grid;
  gap: 0.75rem;
  align-items: start;
  justify-content: start;
}

.socials-icon-grid {
  margin-top: 0.9rem;
}

.socials-icon-grid--main {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--socials-tile-width)), var(--socials-tile-width)));
}

.socials-side-stack--stream {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--socials-stream-tile-width)), var(--socials-stream-tile-width)));
}

.socials-side-stack--nsfw {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--socials-tile-width)), var(--socials-tile-width)));
}

/* ---- LINK TILES ---- */
.social-tile {
  border: 1px solid color-mix(in srgb, var(--socials-tile-frame) 84%, transparent);
  border-radius: var(--socials-tile-radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, white 10%, transparent), transparent 34%),
    var(--socials-tile-fill);
  color: inherit;
  text-decoration: none;
  min-height: 6.1rem;
  padding: 0.55rem 0.55rem 0.62rem;
  display: grid;
  justify-items: center;
  align-content: start;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--shell-surface-highlight) 10%, transparent),
    0 0.55rem 1.1rem color-mix(in srgb, black 10%, transparent);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.social-tile:hover,
.social-tile:focus-visible {
  background:
    linear-gradient(180deg, color-mix(in srgb, white 14%, transparent), transparent 34%),
    var(--socials-tile-fill-hover);
  border-color: color-mix(in srgb, var(--socials-tile-frame) 98%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--shell-surface-highlight) 18%, transparent),
    0 0.95rem 1.7rem color-mix(in srgb, black 16%, transparent);
  transform: translateY(var(--socials-tile-lift));
}

.social-tile:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--shell-surface-highlight) 56%, transparent);
  outline-offset: 0.15rem;
}

.social-tile--wip {
  pointer-events: auto;
  user-select: none;
  cursor: default;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 34%),
    color-mix(in srgb, var(--socials-tile-fill) 54%, #76727a 46%);
  border-color: color-mix(in srgb, var(--shell-ink-soft) 22%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, black 10%, transparent),
    0 0.35rem 0.85rem color-mix(in srgb, black 12%, transparent);
  transform: none;
}

.social-tile--wip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 18%, transparent 18% 82%, rgba(0, 0, 0, 0.08) 82%),
    linear-gradient(0deg, rgba(30, 26, 31, 0.08), rgba(30, 26, 31, 0.08));
  opacity: 0.88;
  pointer-events: none;
}

.social-tile--wip::after {
  content: "WIP";
  position: absolute;
  top: 0.48rem;
  right: 0.48rem;
  padding: 0.18rem 0.42rem 0.2rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #7c5f46 62%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 248, 239, 0.24), transparent 70%),
    color-mix(in srgb, #8f7055 72%, #5b4739 28%);
  color: #f4e6d7;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0.2rem 0.48rem rgba(37, 23, 18, 0.18);
  z-index: 2;
}

.social-tile--wip:hover,
.social-tile--wip:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 34%),
    color-mix(in srgb, var(--socials-tile-fill) 54%, #76727a 46%);
  border-color: color-mix(in srgb, var(--shell-ink-soft) 22%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, black 10%, transparent),
    0 0.35rem 0.85rem color-mix(in srgb, black 12%, transparent);
  transform: none;
}

.social-tile-icon {
  width: var(--socials-tile-icon-size);
  height: var(--socials-tile-icon-size);
  position: relative;
  border-radius: 0.95rem;
  border: 1px solid color-mix(in srgb, var(--shell-ink-soft) 26%, transparent);
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, white 18%, transparent), transparent 54%),
    var(--socials-tile-icon-fill);
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 10%, transparent),
    inset 0 -0.35rem 0.7rem color-mix(in srgb, black 10%, transparent);
}

.social-tile-icon img {
  width: 68%;
  height: 68%;
  object-fit: contain;
  filter: saturate(0.92) brightness(1.06);
}

.social-tile--wip .social-tile-icon {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.08), transparent 54%),
    color-mix(in srgb, var(--socials-tile-icon-fill) 34%, #5d5a61 66%);
  border-color: color-mix(in srgb, #58545c 78%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -0.35rem 0.7rem rgba(17, 15, 18, 0.16);
}

.social-tile--wip .social-tile-icon img {
  filter: grayscale(1) brightness(0.92) contrast(0.9);
  opacity: 0.72;
}

.social-tile-icon::after {
  content: "";
  position: absolute;
  inset: -0.28rem;
  border-radius: inherit;
  border: 1px solid transparent;
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
}

.social-tile-reveal {
  width: 100%;
  margin-top: 0.55rem;
  max-height: 1.95rem;
  opacity: 1;
  transform: none;
  padding: 0.48rem 0.65rem 0.5rem;
  overflow: hidden;
  border-radius: 0.82rem;
  background: var(--socials-tile-reveal-fill);
  text-align: center;
  transition:
    max-height 240ms cubic-bezier(0.22, 0.84, 0.3, 1),
    padding 220ms ease;
}

.social-tile:hover .social-tile-reveal,
.social-tile:focus-visible .social-tile-reveal,
.social-tile:focus-within .social-tile-reveal {
  max-height: 4.3rem;
  padding: 0.48rem 0.65rem 0.68rem;
}

.social-tile--wip .social-tile-reveal {
  max-height: none;
  padding: 0.5rem 0.62rem 0.58rem;
  background: color-mix(in srgb, var(--socials-tile-reveal-fill) 72%, rgba(61, 56, 63, 0.58) 28%);
}

.social-tile-title {
  display: block;
  font-weight: 700;
  line-height: 1.15;
}

.social-tile-handle {
  display: block;
  margin-top: 0;
  font-size: 0.72rem;
  line-height: 1.32;
  font-weight: 500;
  color: color-mix(in srgb, var(--socials-copy) 78%, transparent);
  text-transform: none;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-0.24rem);
  transition:
    max-height 220ms cubic-bezier(0.22, 0.84, 0.3, 1),
    opacity 180ms ease,
    transform 220ms ease,
    margin-top 220ms ease;
}

.social-tile:hover .social-tile-handle,
.social-tile:focus-visible .social-tile-handle,
.social-tile:focus-within .social-tile-handle {
  margin-top: 0.18rem;
  max-height: 2.4rem;
  opacity: 1;
  transform: translateY(0);
}

.social-tile--wip .social-tile-title {
  color: color-mix(in srgb, var(--socials-copy) 82%, #d7cfca 18%);
}

.social-tile--wip .social-tile-handle {
  color: color-mix(in srgb, var(--socials-copy) 56%, transparent);
  max-height: 0;
  opacity: 0;
  transform: translateY(-0.24rem);
}

.social-tile--wip:hover .social-tile-handle,
.social-tile--wip:focus-visible .social-tile-handle {
  margin-top: 0.18rem;
  max-height: 2.5rem;
  opacity: 1;
  transform: translateY(0);
}

.social-tile-live-dot {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--shell-ink-soft) 20%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, black 24%, transparent);
}

.social-tile-live-label {
  position: absolute;
  top: 1.55rem;
  right: 0.66rem;
  display: none;
  font-size: 0.56rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, #ffd8d8 82%, #ffffff 18%);
  text-shadow: 0 0 0.45rem color-mix(in srgb, var(--socials-live-fill) 34%, transparent);
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.social-tile--twitch.is-live .social-tile-live-dot {
  background: var(--socials-live-fill);
  box-shadow:
    0 0 0 1px color-mix(in srgb, black 28%, transparent),
    0 0 0.7rem color-mix(in srgb, var(--socials-live-fill) 65%, transparent);
  animation: socials-live-pulse 1.6s ease-in-out infinite;
}

.social-tile--twitch.is-live .social-tile-live-label {
  display: block;
}

.social-tile--twitch.is-live .social-tile-icon {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 14%, transparent),
    inset 0 -0.35rem 0.7rem color-mix(in srgb, black 10%, transparent),
    0 0 1rem color-mix(in srgb, #ff9797 34%, transparent),
    0 0 1.7rem color-mix(in srgb, #ff6d77 24%, transparent);
}

.social-tile--twitch.is-live .social-tile-icon::after {
  border-color: color-mix(in srgb, #ffd0d0 42%, transparent);
  box-shadow:
    0 0 0.9rem color-mix(in srgb, #ff9292 42%, transparent),
    0 0 1.6rem color-mix(in srgb, #ff616d 26%, transparent);
  opacity: 1;
  animation: socials-twitch-aura 2.6s ease-out infinite;
}

.social-tile--twitch.is-offline .social-tile-live-dot {
  background: color-mix(in srgb, #e9caa3 56%, transparent);
}

.social-tile--twitch.is-unavailable .social-tile-live-dot {
  background: color-mix(in srgb, #df8575 72%, transparent);
}

/* ---- STREAM + NSFW SHELLS ---- */
.socials-stream-layout {
  display: grid;
  gap: 0.9rem;
  grid-template-areas:
    "stack"
    "embed"
    "schedule";
}

.socials-stream-layout .socials-side-stack--stream {
  grid-area: stack;
}

.socials-stream-layout .socials-embed-shell {
  grid-area: embed;
}

.socials-stream-layout .socials-schedule {
  grid-area: schedule;
}

.socials-disclosure,
.socials-gated-panel {
  border: none;
  background: transparent;
  padding: 0;
}

.socials-disclosure > summary,
.socials-toggle {
  list-style: none;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
}

.socials-disclosure > summary::-webkit-details-marker {
  display: none;
}

.socials-toggle-indicator {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--shell-ink-soft) 22%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, white 12%, transparent), transparent 40%),
    var(--socials-toggle-fill);
  display: grid;
  place-items: center;
  transition:
    background 180ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 7%, transparent),
    0 0.45rem 0.95rem color-mix(in srgb, black 10%, transparent);
}

.socials-disclosure > summary:hover .socials-toggle-indicator,
.socials-disclosure > summary:focus-visible .socials-toggle-indicator,
.socials-toggle:hover .socials-toggle-indicator,
.socials-toggle:focus-visible .socials-toggle-indicator {
  background:
    linear-gradient(180deg, color-mix(in srgb, white 14%, transparent), transparent 40%),
    var(--socials-toggle-fill-hover);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 10%, transparent),
    0 0.72rem 1.18rem color-mix(in srgb, black 14%, transparent);
}

.socials-toggle-chevron {
  width: 0.68rem;
  height: 0.68rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.08rem) rotate(45deg);
  transition: transform 220ms cubic-bezier(0.22, 0.84, 0.3, 1);
}

.socials-disclosure[open] .socials-toggle-chevron,
.socials-gated-panel.is-open .socials-toggle-chevron {
  transform: translateY(0.08rem) rotate(-135deg);
}

.socials-disclosure-body {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.9rem;
}

.socials-nsfw-body[hidden] {
  display: none !important;
}

.socials-embed-shell,
.socials-schedule {
  border-radius: var(--socials-panel-radius);
  border: 1px solid color-mix(in srgb, var(--shell-ink-soft) 14%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, white 8%, transparent), transparent 42%),
    var(--socials-panel-bg-strong);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 6%, transparent),
    0 0.65rem 1.2rem color-mix(in srgb, black 12%, transparent);
}

.socials-schedule {
  padding: 0.95rem 1rem;
  line-height: 1.5;
}

.socials-embed-box {
  min-height: 26rem;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--shell-surface-highlight) 10%, transparent), transparent 70%),
    color-mix(in srgb, var(--shell-surface) 94%, black 6%);
  display: grid;
  place-items: center;
}

.socials-embed-box iframe {
  width: 100%;
  height: 100%;
  min-height: 26rem;
  border: 0;
  display: block;
}

.socials-embed-state {
  margin: 0;
  max-width: 22rem;
  padding: 1.1rem 1.2rem;
  text-align: center;
  line-height: 1.45;
  color: var(--socials-muted);
}

.socials-embed-state a {
  color: inherit;
  font-weight: 700;
}

/* ---- MOTION ---- */
@keyframes socials-live-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.16);
  }
}

@keyframes socials-twitch-aura {
  0% {
    opacity: 0.18;
    transform: scale(0.9);
  }

  35% {
    opacity: 0.52;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.16);
  }
}

/* ---- RESPONSIVE ---- */
@media (min-width: 901px) {
  .socials-stream-layout {
    grid-template-columns: minmax(var(--socials-stream-tile-width), var(--socials-stream-tile-width)) minmax(0, 1fr);
    grid-template-areas:
      "stack embed"
      "schedule schedule";
    align-items: start;
  }

  .socials-side-stack--stream {
    grid-template-columns: minmax(var(--socials-stream-tile-width), var(--socials-stream-tile-width));
  }

  .socials-embed-box,
  .socials-embed-box iframe {
    min-height: 42rem;
  }

  .socials-schedule {
    max-width: 100%;
  }
}

@media (min-width: 621px) and (max-width: 700px) {
  .socials-page {
    --content-safe-pad-right: 1.55rem;
    --content-safe-pad-left: 1.55rem;
    --socials-tile-width: 8.15rem;
    --socials-stream-tile-width: 8.1rem;
    justify-items: center;
  }

  .socials-stream-layout {
    grid-template-areas:
      "embed"
      "schedule"
      "stack";
  }

  .socials-intro,
  .socials-main,
  .socials-collapsible-panel {
    width: min(100%, calc(100vw - 1.85rem));
    margin-inline: auto;
    padding: 0.95rem;
  }

  .socials-icon-grid--main,
  .socials-side-stack--stream,
  .socials-side-stack--nsfw {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .socials-embed-box,
  .socials-embed-box iframe {
    min-height: 23rem;
  }

  .socials-schedule {
    width: 100%;
    padding: 0.95rem 1rem;
  }

  .socials-directory-grid {
    grid-template-columns: 1fr;
  }

  .socials-directory-group + .socials-directory-group {
    margin-top: 0;
  }
}

@media (min-width: 701px) and (max-width: 1399px) {
  .socials-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "commission commission"
      "art secondary";
    width: min(100%, 46rem);
    margin-inline: auto;
  }

  .socials-directory-group[aria-labelledby="socials-commission-platforms-title"] {
    grid-area: commission;
  }

  .socials-directory-group[aria-labelledby="socials-art-platforms-title"] {
    grid-area: art;
  }

  .socials-directory-group[aria-labelledby="socials-secondary-platforms-title"] {
    grid-area: secondary;
  }

  .socials-directory-group .socials-icon-grid--main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .socials-directory-group[aria-labelledby="socials-commission-platforms-title"] .socials-icon-grid--main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .socials-directory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 84rem);
    margin-inline: auto;
  }

  .socials-directory-group .socials-icon-grid--main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .socials-page {
    --content-safe-pad-right: 1.15rem;
    --content-safe-pad-left: 1.15rem;
    justify-items: center;
  }

  .socials-stream-layout {
    grid-template-areas:
      "embed"
      "schedule"
      "stack";
  }

  .socials-intro,
  .socials-main,
  .socials-collapsible-panel {
    width: min(100%, calc(100vw - 1rem));
    margin-inline: auto;
  }

  .socials-intro,
  .socials-main,
  .socials-collapsible-panel {
    padding: 0.8rem;
  }

  .socials-icon-grid--main,
  .socials-side-stack--stream,
  .socials-side-stack--nsfw {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .social-tile {
    min-height: 5.2rem;
    padding: 0.45rem;
  }

  .social-tile-reveal {
    margin-top: 0.42rem;
    padding: 0.42rem 0.42rem 0.44rem;
  }

  .social-tile:hover .social-tile-reveal,
  .social-tile:focus-visible .social-tile-reveal,
  .social-tile:focus-within .social-tile-reveal {
    padding: 0.42rem 0.42rem 0.56rem;
  }

  .social-tile-title {
    font-size: 0.7rem;
    line-height: 1.08;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .social-tile-handle {
    font-size: 0.58rem;
    line-height: 1.16;
  }

  .socials-toggle-indicator {
    width: 2rem;
    height: 2rem;
  }

  .socials-embed-box,
  .socials-embed-box iframe {
    min-height: 18rem;
  }

  .socials-schedule {
    padding: 0.8rem 0.85rem;
  }

  .socials-directory-title {
    font-size: 0.92rem;
  }

  .socials-directory-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-top: 0.85rem;
  }

  .socials-directory-group {
    padding: 0.8rem;
  }

  .socials-directory-group + .socials-directory-group {
    margin-top: 0;
  }
}