/* =========================================================
   links-hub.css — /links "The Hub"
   Hick's-Law layout: one dominant decision.
   - Tier 1: Fansly hero CTA (full width, ≥48px, thumb zone).
   - Tier 2: OnlyFans, ~70% visual weight of tier 1.
   - Tier 3: quiet neutral list (X, Reddit, Throne, email, website).
   - Accent follows mode: pink #FF4D8D / dark #D70022.
   - CTAs (tier 1 + tier 2) are the ONLY accent-colored elements;
     everything else (incl. the nav toggle orb) is neutral here.
   ========================================================= */

body[data-page="links"] {
  --hub-accent: #ff4d8d;
  --hub-accent-rgb: 255, 77, 141;
}
body[data-page="links"].dark {
  --hub-accent: #d70022;
  --hub-accent-rgb: 215, 0, 34;
}

/* Neutralize the only other accent user on the page: the toggle orb. */
body[data-page="links"] .toggle-orb {
  background: var(--text-muted);
  box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.25);
}

.hub-head {
  text-align: center;
  padding: 10px 0 4px;
}
.hub-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  color: var(--text);
}
.hub-handle {
  font-size: 13px;
  color: var(--text-soft);
  margin-top: 2px;
}

.hub-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 8px;
}

/* ---- TIER 1 — dominant ---- */
.hub-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  border-radius: 18px;
  font-family: var(--font-body);
  font-weight: 700;
  transition: transform 0.2s var(--ease), filter 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.hub-cta:active { transform: scale(0.985); }

.hub-cta--primary {
  min-height: 64px;
  padding: 16px 20px;
  font-size: 19px;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--hub-accent);
  box-shadow: 0 14px 34px -10px rgba(var(--hub-accent-rgb), 0.6);
}
.hub-cta--primary:hover { filter: brightness(1.07); transform: translateY(-2px); }
.hub-cta--primary .hub-cta-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.92;
  margin-top: 3px;
}

/* ---- TIER 2 — secondary (~70% weight) ---- */
.hub-cta--secondary {
  min-height: 52px;
  padding: 13px 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--hub-accent);
  background: transparent;
  border: 1.5px solid var(--hub-accent);
}
.hub-cta--secondary:hover {
  background: rgba(var(--hub-accent-rgb), 0.08);
  transform: translateY(-1px);
}

/* ---- divider ---- */
.hub-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 6px;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hub-divider::before,
.hub-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

/* ---- TIER 3 — quiet neutral list ---- */
.hub-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hub-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 0.5px solid var(--border);
  transition: transform 0.2s var(--ease), background 0.25s var(--ease);
}
.hub-link:hover { transform: translateY(-1px); background: var(--surface-strong); }
.hub-link i {
  font-size: 19px;
  color: var(--text-soft);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.hub-link-label { font-size: 14px; font-weight: 500; flex: 1; }
.hub-link-sub { font-size: 11px; color: var(--text-muted); }

/* email signup inline in the quiet list */
.hub-email {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.hub-email input {
  flex: 1;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  outline: none;
}
.hub-email input:focus { border-color: var(--text-soft); }
.hub-email button {
  height: 46px;
  padding: 0 18px;
  border: 0.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}