/* Deliberately scoped to the supplementary homepage section. */
.homepage-social {
  padding-block: clamp(56px, 6vw, 96px);
  border-block: 1px solid var(--secret-line);
  background: #000;
  color: var(--secret-ivory);
  font-family: var(--font-utility);
}
.homepage-social [hidden] { display: none !important; }
.homepage-social__heading { margin-bottom: 36px; text-align: center; }
.homepage-social__rule { display: block; width: 64px; height: 1px; margin: 0 auto 24px; background: var(--secret-crimson); }
.homepage-social__heading h2 { margin: 0 0 14px; font-family: var(--font-editorial); font-size: clamp(30px, 3.2vw, 48px); font-weight: 500; letter-spacing: .06em; line-height: 1.15; }
.homepage-social__heading p { margin: 0; color: var(--secret-ivory-muted); font-size: 16px; line-height: 1.6; }
.homepage-social__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.homepage-social__panel { display: flex; height: 580px; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--secret-line); border-radius: var(--radius-media); background: #000; }
.homepage-social__panel-header { display: flex; min-height: 72px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 14px; padding: 13px 22px; border-bottom: 1px solid var(--secret-line); }
.homepage-social__panel-header h3 { margin: 0; font-family: var(--font-utility); font-size: 17px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.homepage-social__platform { display: flex; width: 44px; height: 44px; flex: 0 0 44px; align-items: center; justify-content: center; border-radius: 2px; }
.homepage-social__platform .secret-social-icon { width: 34px; height: 34px; }
.homepage-social__platform:hover { background: var(--secret-oxblood); }
.homepage-social__platform-identity { display: grid; min-width: 0; }
.homepage-social__platform-identity > a { display: inline-block; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; }
.homepage-social a { color: #e3a0aa; text-decoration: none; text-underline-offset: 4px; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); }
.homepage-social a:hover { color: var(--secret-ivory); text-decoration: underline; }
.homepage-social__scroll { position: relative; min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #74313d #000; scrollbar-gutter: stable; }
.homepage-social__scroll::-webkit-scrollbar { width: 6px; }
.homepage-social__scroll::-webkit-scrollbar-track { background: #000; }
.homepage-social__scroll::-webkit-scrollbar-thumb { border-radius: 4px; background: #74313d; }
.homepage-social__panel-footer { display: flex; min-height: 56px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--secret-line); font-size: 12px; line-height: 1.5; }
.homepage-social__panel-footer > span { color: var(--secret-muted); }
.homepage-social__panel-footer > a { flex-shrink: 0; }
.homepage-social__state { display: flex; min-height: 100%; flex-direction: column; justify-content: center; align-items: center; padding: 32px; text-align: center; }
.homepage-social__state-mark { color: #e3a0aa; font-size: 36px; line-height: 1; margin-bottom: 26px; }
.homepage-social__state p { max-width: 320px; margin: 0 0 24px; font-size: 15px; line-height: 1.7; color: var(--secret-ivory-muted); }
.homepage-social__state .homepage-social__state-title { margin-bottom: 12px; font-family: var(--font-editorial); font-size: 30px; line-height: 1.2; color: var(--secret-ivory); }
.homepage-social .homepage-social__button, .homepage-social__more { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 14px; padding: 10px 18px; border: 1px solid #74313d; border-radius: 2px; background: #000; color: #e3a0aa; font: 500 14px/1.5 var(--font-utility); cursor: pointer; }
.homepage-social .homepage-social__button:hover, .homepage-social__more:hover { border-color: #e3a0aa; background: var(--secret-black-soft); text-decoration: none; }
.homepage-social__more { display: flex; width: calc(100% - 44px); margin: 20px 22px; }
.homepage-social__more:disabled { cursor: wait; opacity: .65; }
.homepage-social__status { margin: 0; padding: 20px 22px; color: var(--secret-muted); font-size: 14px; line-height: 1.6; }
.homepage-social__status:empty { display: none; }
.homepage-social__post { padding: 24px 22px; border-bottom: 1px solid var(--secret-line-soft); overflow-wrap: anywhere; }
.homepage-social__repost { margin: 0 0 14px; color: #e3a0aa; font-size: 12px; line-height: 1.5; }
.homepage-social__author { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.homepage-social__avatar { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; object-fit: cover; }
.homepage-social__identity { min-width: 0; }
.homepage-social__identity a { display: block; color: var(--secret-ivory); font-size: 15px; font-weight: 500; line-height: 1.45; }
.homepage-social__identity span { display: block; color: var(--secret-muted); font-size: 12px; line-height: 1.5; }
.homepage-social__text { margin: 0 0 18px; color: var(--secret-ivory-muted); font-size: 16px; line-height: 1.65; white-space: pre-wrap; }
.homepage-social__media { display: grid; gap: 8px; margin: 16px 0; }
.homepage-social__media--multiple { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.homepage-social__media a { display: block; min-width: 0; }
.homepage-social__media img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; background: #000; border-radius: 2px; }
.homepage-social__card { display: block; padding: 16px; margin: 16px 0; border: 1px solid var(--secret-line); border-radius: 2px; font-size: 14px; line-height: 1.6; }
.homepage-social__card strong, .homepage-social__card span { display: block; }
.homepage-social__card span { color: var(--secret-ivory-muted); }
.homepage-social__card img { display: block; width: 100%; height: 160px; object-fit: contain; margin-bottom: 12px; }
.homepage-social__post-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 1.5; }
.homepage-social__post-footer time { color: var(--secret-muted); }
.homepage-social__restricted { padding: 14px; border-left: 1px solid #74313d; margin: 16px 0; color: var(--secret-muted); font-size: 14px; line-height: 1.6; }
.homepage-social__x-widget { position: absolute; inset: 0; visibility: hidden; }
.homepage-social__x-scroll[data-ready] { overflow: hidden; scrollbar-gutter: auto; }
.homepage-social__x-scroll[data-ready] .homepage-social__x-widget { visibility: visible; }
.homepage-social :is(a, button, [tabindex]):focus-visible { outline: 2px solid #e3a0aa; outline-offset: 3px; }
.homepage-social__scroll:focus-visible { outline-offset: -3px; }
.homepage-social__tabs { display: none; }
@media (max-width: 900px) {
  .homepage-social__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .homepage-social__heading { margin-bottom: 26px; }
  .homepage-social__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 20px; padding: 4px; border: 1px solid var(--secret-line); border-radius: 3px; }
  .homepage-social__tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 14px; border: 1px solid transparent; border-radius: 2px; background: #000; color: var(--secret-ivory-muted); font: 500 14px/1.5 var(--font-utility); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); }
  .homepage-social__tabs .secret-social-icon { width: 18px; height: 18px; }
  .homepage-social__tabs [aria-selected="true"] { border-color: #74313d; background: var(--secret-oxblood); color: var(--secret-ivory); }
  .homepage-social__panel { height: 560px; height: clamp(420px, 76svh, 580px); }
  .homepage-social__panel-header { min-height: 66px; padding: 10px 16px; }
  .homepage-social__panel-header h3 { font-size: 16px; }
  .homepage-social__platform .secret-social-icon { width: 30px; height: 30px; }
  .homepage-social__platform-identity > a { font-size: 12px; }
  .homepage-social__panel-footer { padding: 12px 16px; font-size: 11px; }
  .homepage-social__post { padding: 22px 16px; }
  .homepage-social__state { padding: 24px 18px; }
  .homepage-social__state .homepage-social__state-title { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .homepage-social *, .homepage-social *::before, .homepage-social *::after { transition: none !important; }
}