/* Social reel — warm signal links (landscape) */

html .profile-section--social .social-reel-wrap {
  position: relative !important;
  --s-ink: #f6f3ec;
  --s-muted: #958f84;
  --s-accent: #cc785c;
  --s-accent-2: #e4a07c;
  --s-shell: #171614;
}

html .profile-section--social .social-reel-wrap::before,
html .profile-section--social .social-reel-wrap::after {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  bottom: 16px !important;
  width: 28px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

html .profile-section--social .social-reel-wrap::before {
  left: 0 !important;
  background: linear-gradient(90deg, rgba(18, 17, 15, 0.95), transparent) !important;
}

html .profile-section--social .social-reel-wrap::after {
  right: 0 !important;
  background: linear-gradient(270deg, rgba(18, 17, 15, 0.95), transparent) !important;
}

html .profile-section--social .social-reel {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(72%, 300px) !important;
  gap: 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-inline: max(12px, calc(50% - 150px)) !important;
  scroll-behavior: smooth !important;
  padding: 16px max(12px, calc(50% - 150px)) 22px !important;
  margin: 0 -4px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
}

html .profile-section--social .social-reel.is-program-scroll {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

html .profile-section--social .social-reel::-webkit-scrollbar {
  display: none !important;
  height: 0 !important;
}

html .profile-section--social .social-reel .profile-social-cell,
html .profile-section--social .social-reel .profile-social-cell.is-featured,
html .profile-section--social .social-reel .profile-social-cell.is-hero {
  grid-column: auto !important;
  min-width: 0 !important;
  border: 0 !important;
  scroll-snap-align: center !important;
  scroll-snap-stop: always !important;
  transform: scale(0.94) !important;
  opacity: 0.55 !important;
  filter: saturate(0.85) !important;
  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms ease,
    filter 320ms ease !important;
}

html .profile-section--social .social-reel .profile-social-cell.is-snap-active {
  transform: scale(1) !important;
  opacity: 1 !important;
  filter: none !important;
}

html .profile-section--social .social-reel-nav {
  position: absolute !important;
  top: 50% !important;
  z-index: 4 !important;
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(250, 249, 245, 0.12) !important;
  border-radius: 50% !important;
  background: rgba(20, 19, 17, 0.9) !important;
  color: var(--s-ink) !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28) !important;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    transform 240ms cubic-bezier(0.22, 1.25, 0.36, 1) !important;
}

html .profile-section--social .social-reel-nav:hover {
  background: var(--s-accent) !important;
  border-color: transparent !important;
  color: #fff !important;
  transform: translateY(-50%) scale(1.06) !important;
}

html .profile-section--social .social-reel-nav--prev { left: -2px !important; }
html .profile-section--social .social-reel-nav--next { right: -2px !important; }

html .profile-section--social .social-reel-nav[hidden] {
  display: none !important;
}

html .profile-section--social .social-story,
html .profile-section--social .social-card.social-story {
  height: 100% !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Landscape signal card */
html .profile-section--social .social-story-inner,
html .profile-section--social .social-card.social-story .social-card-inner,
html .profile-section--social .social-card.social-story .social-story-inner {
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 124px !important;
  height: 100% !important;
  padding: 14px 14px 14px 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(250, 249, 245, 0.09) !important;
  background: var(--s-shell) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2) !important;
  isolation: isolate !important;
  transform: translate3d(0, 0, 0) !important;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms ease,
    box-shadow 240ms ease,
    background 240ms ease !important;
}

html .profile-section--social .social-story-rail {
  position: absolute !important;
  left: 0 !important;
  top: 16px !important;
  bottom: 16px !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--s-accent-2), var(--s-accent)) !important;
  opacity: 0.55 !important;
  transform: scaleY(0.72) !important;
  transform-origin: center !important;
  transition:
    opacity 260ms ease,
    transform 360ms cubic-bezier(0.22, 1.2, 0.36, 1) !important;
}

html .profile-section--social .social-story-wash {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 0.35 !important;
}

html .profile-section--social .social-story-wash img {
  position: absolute !important;
  right: -18% !important;
  top: -30% !important;
  width: 68% !important;
  height: 160% !important;
  object-fit: cover !important;
  filter: blur(28px) saturate(1.4) brightness(0.7) !important;
  transform: scale(1.05) !important;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease !important;
}

html .profile-section--social .social-story-wash::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(23, 22, 20, 0.96) 28%, rgba(23, 22, 20, 0.72) 62%, rgba(23, 22, 20, 0.4) 100%),
    linear-gradient(180deg, transparent, rgba(23, 22, 20, 0.55)) !important;
}

html .profile-section--social .social-story-logo,
html .profile-section--social .social-card.social-story .social-logo {
  position: relative !important;
  z-index: 1 !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 16px !important;
  background: rgba(250, 249, 245, 0.06) !important;
  border: 1px solid rgba(250, 249, 245, 0.12) !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition:
    transform 360ms cubic-bezier(0.22, 1.25, 0.36, 1),
    border-color 220ms ease,
    box-shadow 220ms ease !important;
}

html .profile-section--social .social-story-logo::before,
html .profile-section--social .social-story-logo::after,
html .profile-section--social .social-card.social-story .social-logo::before,
html .profile-section--social .social-card.social-story .social-logo::after {
  display: none !important;
  content: none !important;
}

html .profile-section--social .social-story-logo img,
html .profile-section--social .social-card.social-story .social-logo img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  transition: transform 360ms cubic-bezier(0.22, 1.25, 0.36, 1) !important;
}

html .profile-section--social .social-story-body {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

html .profile-section--social .social-story-top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html .profile-section--social .social-story-index {
  color: rgba(250, 249, 245, 0.38) !important;
  font: 700 10.5px/1 JetBrains Mono, ui-monospace, monospace !important;
  letter-spacing: 0.08em !important;
}

html .profile-section--social .social-story-qr {
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 7px !important;
  background: rgba(204, 120, 92, 0.16) !important;
  border: 1px solid rgba(204, 120, 92, 0.28) !important;
  color: var(--s-accent-2) !important;
  font-size: 11px !important;
}

html .profile-section--social .social-story-copy {
  min-width: 0 !important;
  text-align: left !important;
}

html .profile-section--social .social-card.social-story .social-name {
  margin: 0 !important;
  color: var(--s-ink) !important;
  font-family: var(--design-font-display, Fredoka, Quicksand, sans-serif) !important;
  font-size: 16.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html .profile-section--social .social-card.social-story .social-card-link-text {
  margin: 3px 0 0 !important;
  color: var(--s-muted) !important;
  font: 500 11.5px/1.2 var(--design-font-body, Quicksand, sans-serif) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html .profile-section--social .social-story-stats,
html .profile-section--social .social-card.social-story .social-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  justify-content: flex-start !important;
}

html .profile-section--social .social-card.social-story .social-stats > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 22px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: rgba(250, 249, 245, 0.04) !important;
  border: 1px solid rgba(250, 249, 245, 0.07) !important;
  color: #b3aea3 !important;
  font: 600 10px/1 var(--design-font-body, Quicksand, sans-serif) !important;
}

html .profile-section--social .social-card.social-story .social-stats i {
  font-size: 10px !important;
  color: var(--s-accent) !important;
}

html .profile-section--social .social-story-actions {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  align-self: stretch !important;
  justify-content: center !important;
}

html .profile-section--social .social-card.social-story .social-share-btn {
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 11px !important;
  border: 1px solid rgba(250, 249, 245, 0.1) !important;
  background: rgba(250, 249, 245, 0.04) !important;
  color: #c5c1b7 !important;
  transition: background 180ms ease, color 180ms ease, transform 220ms ease !important;
}

html .profile-section--social .social-card.social-story .social-share-btn:hover {
  background: rgba(250, 249, 245, 0.1) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

html .profile-section--social .social-story-cta,
html .profile-section--social .social-card.social-story .social-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--s-accent) !important;
  color: #fff !important;
  text-decoration: none !important;
  font: 700 0/0 var(--design-font-body, Quicksand, sans-serif) !important;
  box-shadow: 0 6px 14px rgba(204, 120, 92, 0.28) !important;
  transition:
    transform 240ms cubic-bezier(0.22, 1.25, 0.36, 1),
    background 180ms ease,
    box-shadow 200ms ease !important;
}

html .profile-section--social .social-story-cta span {
  display: none !important;
}

html .profile-section--social .social-story-cta i,
html .profile-section--social .social-card.social-story .social-btn i {
  font-size: 15px !important;
  transform: none !important;
  transition: transform 240ms cubic-bezier(0.22, 1.25, 0.36, 1) !important;
}

/* Hover / active */
html .profile-section--social .social-card.social-story:hover .social-story-inner,
html .profile-section--social .social-card.social-story:focus-within .social-story-inner,
html .profile-section--social .social-card.social-story.is-activating .social-story-inner {
  transform: translate3d(0, -4px, 0) !important;
  border-color: rgba(204, 120, 92, 0.38) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(204, 120, 92, 0.08) !important;
  background: #1c1b18 !important;
}

html .profile-section--social .social-card.social-story:hover .social-story-rail,
html .profile-section--social .social-card.social-story:focus-within .social-story-rail,
html .profile-section--social .social-card.social-story.is-activating .social-story-rail {
  opacity: 1 !important;
  transform: scaleY(1) !important;
}

html .profile-section--social .social-card.social-story:hover .social-story-wash img,
html .profile-section--social .social-card.social-story:focus-within .social-story-wash img {
  transform: scale(1.14) translateX(-4%) !important;
}

html .profile-section--social .social-card.social-story:hover .social-story-logo,
html .profile-section--social .social-card.social-story:focus-within .social-story-logo,
html .profile-section--social .social-card.social-story.is-activating .social-story-logo {
  transform: scale(1.06) rotate(-4deg) !important;
  border-color: rgba(204, 120, 92, 0.4) !important;
  box-shadow: 0 10px 22px rgba(204, 120, 92, 0.18) !important;
}

html .profile-section--social .social-card.social-story:hover .social-story-logo img,
html .profile-section--social .social-card.social-story:focus-within .social-story-logo img {
  transform: scale(1.08) !important;
}

html .profile-section--social .social-card.social-story:hover .social-story-cta,
html .profile-section--social .social-card.social-story:focus-within .social-story-cta,
html .profile-section--social .social-card.social-story .social-btn:hover {
  background: #d8896a !important;
  transform: translateY(-1px) scale(1.04) !important;
  box-shadow: 0 8px 18px rgba(204, 120, 92, 0.36) !important;
}

html .profile-section--social .social-card.social-story:hover .social-story-cta i,
html .profile-section--social .social-card.social-story:focus-within .social-story-cta i {
  transform: translate3d(1px, -1px, 0) !important;
}

html .profile-section--social .social-bento,
html .profile-section--social .social-spotlight,
html .profile-section--social .social-cloud,
html .profile-section--social .social-dock,
html .profile-section--social .social-board,
html .profile-section--social .social-compact-grid,
html .profile-section--social .social-story-glow,
html .profile-section--social .social-story-shine,
html .profile-section--social .social-story-orbit,
html .profile-section--social .social-story-bg {
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  html .profile-section--social .social-reveal {
    opacity: 0 !important;
    transform: translate3d(20px, 10px, 0) !important;
    transition:
      opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 560ms cubic-bezier(0.22, 1.1, 0.36, 1) !important;
    transition-delay: var(--delay, 0ms) !important;
  }

  html .profile-section--social.is-social-ready .social-reveal,
  html .profile-section--social .social-reveal.is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
  }

  html .profile-section--social .social-card.social-story.is-activating .social-story-logo {
    animation: socialSignalPop 480ms cubic-bezier(0.22, 1.4, 0.36, 1) !important;
  }
}

@keyframes socialSignalPop {
  0% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(1.12) rotate(-8deg); }
  100% { transform: scale(1.06) rotate(-4deg); }
}

@media (max-width: 767px) {
  html .profile-section--social .social-reel-wrap::before,
  html .profile-section--social .social-reel-wrap::after {
    width: 16px !important;
  }

  html .profile-section--social .social-reel {
    grid-auto-columns: minmax(78%, 280px) !important;
    gap: 12px !important;
    padding: 12px max(10px, calc(50% - 140px)) 16px !important;
    scroll-padding-inline: max(10px, calc(50% - 140px)) !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-x: contain !important;
  }

  html .profile-section--social .social-reel .profile-social-cell {
    transform: scale(0.95) !important;
    opacity: 0.6 !important;
  }

  html .profile-section--social .social-reel .profile-social-cell.is-snap-active {
    transform: scale(1) !important;
    opacity: 1 !important;
  }

  html .profile-section--social .social-reel-nav {
    display: none !important;
  }

  html .profile-section--social .social-story-inner,
  html .profile-section--social .social-card.social-story .social-card-inner,
  html .profile-section--social .social-card.social-story .social-story-inner {
    min-height: 112px !important;
    gap: 12px !important;
    padding: 12px 12px 12px 14px !important;
    border-radius: 18px !important;
  }

  html .profile-section--social .social-story-logo,
  html .profile-section--social .social-card.social-story .social-logo {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border-radius: 14px !important;
  }

  html .profile-section--social .social-story-logo img,
  html .profile-section--social .social-card.social-story .social-logo img {
    width: 24px !important;
    height: 24px !important;
  }

  html .profile-section--social .social-card.social-story .social-name {
    font-size: 15.5px !important;
  }

  html .profile-section--social .social-story-wash img {
    filter: blur(16px) saturate(1.2) brightness(0.75) !important;
  }

  html .profile-section--social .social-card.social-story:hover .social-story-inner {
    transform: none !important;
  }

  html .profile-section--social .social-card.social-story.is-activating .social-story-inner {
    transform: translate3d(0, -2px, 0) !important;
    border-color: rgba(204, 120, 92, 0.38) !important;
  }

  html .profile-section--social .social-card.social-story:hover .social-story-logo {
    transform: none !important;
  }
}

@media (max-width: 767px) and (hover: none) {
  html .profile-section--social .social-card.social-story:hover .social-story-logo,
  html .profile-section--social .social-card.social-story:hover .social-story-logo img,
  html .profile-section--social .social-card.social-story:hover .social-story-cta {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html .profile-section--social .social-reveal,
  html .profile-section--social .social-story-inner,
  html .profile-section--social .social-story-logo,
  html .profile-section--social .social-story-rail,
  html .profile-section--social .social-story-cta,
  html .profile-section--social .social-reel-nav {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  html .profile-section--social .social-reveal {
    opacity: 1 !important;
  }
}