:root {
  --el-blue-abysse: #16273d;
  --el-blue-regence: #304764;
  --el-marble-beige: #d8cabb;
  --el-ivory-smoke: #f1ebe2;
  --el-gold-patine: #a57b41;
  --el-onyx-smoke: #141519;
  --el-taupe-ash: #7a6e67;
  --el-copper-ember: #99604a;
  --el-sapphire: #1f2d4d;
  --el-antique-gold: #c9a961;
  --el-marble-ivory: #ede4d3;
  --el-velvet-black: #0f0e0c;
}

.el-glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgb(var(--el-glass-border, 241 235 226) / var(--el-glass-border-alpha, 0.14));
  background:
    linear-gradient(145deg, rgb(var(--el-glass-tint, 48 71 100) / var(--el-glass-alpha, 0.2)), rgb(255 255 255 / 0.045) 44%, rgb(var(--el-glass-glow, 165 123 65) / 0.1));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    inset 0 -1px 0 rgb(255 255 255 / 0.035),
    0 22px 70px rgb(0 0 0 / var(--el-glass-shadow, 0.24));
  -webkit-backdrop-filter: blur(22px) saturate(168%);
  backdrop-filter: blur(22px) saturate(168%);
}

.el-glass::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.12), transparent 32%),
    radial-gradient(circle at var(--spot-x, 18%) var(--spot-y, 0%), rgb(255 255 255 / 0.14), transparent 34%),
    radial-gradient(circle at 88% 10%, rgb(var(--el-glass-glow, 165 123 65) / 0.12), transparent 30%);
  opacity: 0.72;
}

.el-glass--neutral {
  --el-glass-tint: 216 202 187;
  --el-glass-border: 241 235 226;
  --el-glass-glow: 165 123 65;
  --el-glass-alpha: 0.18;
  --el-glass-shadow: 0.18;
}

.el-glass--blue {
  --el-glass-tint: 48 71 100;
  --el-glass-border: 241 235 226;
  --el-glass-glow: 201 169 97;
  --el-glass-alpha: 0.24;
  --el-glass-shadow: 0.3;
}

.el-glass--gold {
  --el-glass-tint: 165 123 65;
  --el-glass-border: 201 169 97;
  --el-glass-glow: 201 169 97;
  --el-glass-alpha: 0.25;
  --el-glass-border-alpha: 0.24;
}

.el-glass--card {
  border-radius: 1.35rem;
}

.el-glass--cta,
.el-glass--badge {
  border-radius: 999px;
}

.el-glass--photo {
  border-radius: 1.8rem;
}

.public-stage-title {
  max-width: 11ch;
}

.swiper-test--home .swiper-test-slide[data-preview-state="locked"] .swiper-test-image {
  filter: blur(12px) saturate(0.82) brightness(0.78);
  transform: scale(1.035);
}

.swiper-test--home .swiper-test-slide[data-preview-state="locked"] .swiper-test-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(20 21 25 / 0.18), rgb(20 21 25 / 0.56)),
    radial-gradient(circle at 50% 18%, rgb(165 123 65 / 0.2), transparent 46%);
}

.public-official {
  padding: 0 0 5rem;
}

.public-official-shell {
  display: grid;
  gap: 1.4rem;
  align-items: center;
  padding: clamp(1.25rem, 4vw, 2.1rem);
}

.public-official-copy {
  display: grid;
  gap: 0.75rem;
}

.public-official-copy h2 {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 0.95;
  color: var(--el-ivory-smoke);
}

.public-official-copy p {
  max-width: 42rem;
  color: rgb(241 235 226 / 0.72);
  line-height: 1.75;
}

.private-links-page {
  background:
    radial-gradient(circle at 18% 12%, rgb(165 123 65 / 0.15), transparent 28%),
    radial-gradient(circle at 78% 18%, rgb(48 71 100 / 0.28), transparent 36%),
    linear-gradient(135deg, var(--el-onyx-smoke), var(--el-blue-abysse) 54%, var(--el-velvet-black));
}

.private-links-page .stellar-header {
  position: relative;
  inset: auto;
}

.links-hub {
  min-height: calc(100vh - 5rem);
  padding: clamp(1rem, 2vw, 1.5rem) 0 4rem;
}

.links-hub-shell {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: stretch;
}

.links-visual {
  min-height: 28rem;
  background: var(--el-blue-abysse);
}

.links-visual img {
  width: 100%;
  height: 100%;
  min-height: 28rem;
  object-fit: cover;
  transform: scale(1.01);
  transition:
    opacity 180ms ease,
    filter 180ms ease,
    transform 520ms ease;
}

.links-visual img.is-switching {
  opacity: 0.42;
  filter: blur(10px) saturate(0.9);
  transform: scale(1.04);
}

.links-visual-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(20 21 25 / 0.62), transparent 36%),
    linear-gradient(0deg, rgb(20 21 25 / 0.7), transparent 46%);
}

.links-visual-caption {
  position: absolute;
  inset: auto 1rem 1rem 1rem;
  display: grid;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
}

.links-visual-caption span {
  color: rgb(241 235 226 / 0.68);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.links-visual-caption strong {
  color: var(--el-ivory-smoke);
  font-weight: 650;
}

.links-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.links-head {
  display: grid;
  gap: 0.8rem;
  padding-top: 0.3rem;
}

.links-head h1 {
  font-size: clamp(4.6rem, 16vw, 8rem);
  line-height: 0.82;
  color: var(--el-ivory-smoke);
}

.links-head p {
  max-width: 38rem;
  color: rgb(241 235 226 / 0.72);
  line-height: 1.75;
}

.links-private-cta {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.15rem;
  border-color: rgb(201 169 97 / 0.34);
  color: var(--el-onyx-smoke);
  background:
    linear-gradient(135deg, rgb(241 235 226 / 0.93), rgb(216 202 187 / 0.82) 54%, rgb(201 169 97 / 0.5)),
    rgb(241 235 226 / 0.78);
  text-decoration: none;
  transition:
    transform 160ms ease,
    border-color 160ms ease;
}

.links-private-cta:hover {
  transform: translateY(-2px);
}

.links-private-cta span {
  font-size: 1rem;
  font-weight: 800;
}

.links-private-cta small {
  color: rgb(20 21 25 / 0.74);
  line-height: 1.5;
}

.links-list {
  display: grid;
  gap: 0.9rem;
}

.links-list-head {
  display: grid;
  gap: 0.3rem;
}

.links-list-head h2 {
  font-size: 1.25rem;
  color: var(--el-ivory-smoke);
}

.links-list-head p {
  color: rgb(241 235 226 / 0.58);
  line-height: 1.55;
}

.links-grid {
  display: grid;
  gap: 0.72rem;
}

.links-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  padding: 0.85rem;
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease;
}

.links-card:hover,
.links-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--platform-accent) 52%, transparent);
}

.links-card.is-disabled {
  border-color: rgb(241 235 226 / 0.12);
}

.links-card-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  color: var(--el-ivory-smoke);
  background:
    radial-gradient(circle at 35% 20%, rgb(255 255 255 / 0.18), transparent 44%),
    linear-gradient(135deg, color-mix(in srgb, var(--platform-accent) 62%, #16273d), rgb(20 21 25 / 0.78));
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.links-card-copy {
  min-width: 0;
}

.links-card-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}

.links-card h3 {
  color: var(--el-ivory-smoke);
  font-family: Inter, "Avenir Next", "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
}

.links-card-category,
.links-card-status {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  color: rgb(241 235 226 / 0.76);
  background: rgb(255 255 255 / 0.07);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.links-card-category {
  padding: 0.3rem 0.5rem;
}

.links-card-status {
  margin-top: 0.5rem;
  padding: 0.28rem 0.48rem;
}

.links-card p {
  margin-top: 0.32rem;
  color: rgb(241 235 226 / 0.6);
  font-size: 0.84rem;
  line-height: 1.5;
}

.links-card-action {
  grid-column: 1 / -1;
  justify-self: start;
  border: 1px solid rgb(201 169 97 / 0.22);
  border-radius: 999px;
  padding: 0.45rem 0.72rem;
  color: rgb(241 235 226 / 0.82);
  background:
    linear-gradient(135deg, rgb(165 123 65 / 0.18), rgb(48 71 100 / 0.2)),
    rgb(20 21 25 / 0.34);
  font-size: 0.72rem;
  font-weight: 750;
  cursor: not-allowed;
  text-decoration: none;
}

.links-card-action[disabled] {
  opacity: 0.86;
}

.links-card-action.is-active {
  cursor: pointer;
  color: var(--el-onyx-smoke);
  background:
    linear-gradient(135deg, rgb(241 235 226 / 0.92), rgb(201 169 97 / 0.48)),
    rgb(241 235 226 / 0.8);
}

html[dir="rtl"] .links-head,
html[dir="rtl"] .links-list-head,
html[dir="rtl"] .links-card-copy {
  text-align: right;
}

html[dir="rtl"] .links-visual-caption strong,
html[dir="rtl"] .links-head p,
html[dir="rtl"] .links-list-head p,
html[dir="rtl"] .links-card p {
  unicode-bidi: plaintext;
}

.links-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  padding: 0.5rem 0 0;
  color: rgb(241 235 226 / 0.54);
  font-size: 0.8rem;
}

.links-footer a {
  color: inherit;
  text-decoration: none;
}

.links-footer a:hover {
  color: var(--el-ivory-smoke);
}

.links-private-cta:focus-visible,
.links-card:focus-visible,
.public-official .stellar-button:focus-visible {
  outline: 2px solid var(--el-antique-gold);
  outline-offset: 4px;
}

@media (prefers-color-scheme: light) {
  .private-links-page {
    background:
      radial-gradient(circle at 18% 12%, rgb(165 123 65 / 0.15), transparent 30%),
      linear-gradient(135deg, var(--el-ivory-smoke), var(--el-marble-ivory) 58%, var(--el-marble-beige));
  }

  .private-links-page .stellar-brand-mark,
  .private-links-page .links-head h1,
  .private-links-page .links-list-head h2,
  .private-links-page .links-card h3 {
    color: var(--el-blue-abysse);
  }

  .private-links-page .stellar-brand-sub,
  .private-links-page .links-head p,
  .private-links-page .links-list-head p,
  .private-links-page .links-card p,
  .private-links-page .links-footer {
    color: rgb(22 39 61 / 0.68);
  }

  .private-links-page .links-card-category,
  .private-links-page .links-card-status {
    color: rgb(22 39 61 / 0.72);
    background: rgb(22 39 61 / 0.08);
  }

  .private-links-page .links-card-action {
    color: rgb(22 39 61 / 0.76);
    background:
      linear-gradient(135deg, rgb(22 39 61 / 0.08), rgb(165 123 65 / 0.12)),
      rgb(241 235 226 / 0.38);
  }

  .private-links-page .el-glass {
    --el-glass-border: 22 39 61;
    --el-glass-shadow: 0.12;
    color: var(--el-blue-abysse);
  }
}

@media (min-width: 52rem) {
  .public-official-shell {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .links-hub-shell {
    grid-template-columns: minmax(18rem, 0.9fr) minmax(26rem, 1fr);
  }

  .links-visual {
    position: sticky;
    top: 1rem;
    height: calc(100vh - 7rem);
    min-height: 42rem;
  }

  .links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 51.99rem) {
  .links-hub {
    padding-top: 0.25rem;
  }

  .links-visual,
  .links-visual img {
    min-height: 19rem;
  }

  .links-card-line {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .el-glass,
  .links-card,
  .links-private-cta,
  .links-visual img {
    transition: none;
  }
}