/* ============================================================
   Crypto King anas afridi — profile page
   Re-implements the original Linktree theme with hand-written
   CSS (values mirrored from the snapshot's theme variables).
   ============================================================ */

:root {
  /* button style */
  --btn-text: #1334C3;
  --btn-bg: #ffffff;
  --btn-bg-hover: color-mix(in srgb, var(--btn-bg) 93%, #000000 7%);
  /* CTA sits on the warm brown profile background, so the pure brand blue
     reads far too bright here. Keep the brand hue (229deg) but drop the
     saturation and lightness to match the muted brown theme. */
  --cta-bg: #39436A;
  --cta-bg-hover: color-mix(in srgb, var(--cta-bg) 88%, black 12%);
  --btn-radius: 8px;
  --btn-inner-radius: min(var(--btn-radius), max(4px, calc(var(--btn-radius) - 8px)));
  --btn-shadow: 0.3px 0.5px 0.7px hsl(0deg 0% 6.7% / 0.021),
                0.9px 1.8px 2.5px -0.6px hsl(0deg 0% 6.7% / 0.026),
                2px 4px 5.5px -1.2px hsl(0deg 0% 6.7% / 0.031),
                4.6px 9.3px 12.8px -1.7px hsl(0deg 0% 6.7% / 0.035);
  --btn-shadow-color: #000000;

  /* colors */
  --body-text: #040406;
  --profile-bg: #705543;
  --desktop-frame-color: color-mix(in srgb, #705543 88%, black 12%);
  --header-text-color: #1B0707;
  --profile-title-text: #040406;
  --social-fill: #040406;

  /* geometry */
  --container-width: 580px;
  --link-gap: 14px;
  --topbar-gap: var(--link-gap);
  --inner-padding: var(--link-gap);
  --link-header-size: 14px;
  --topbar-bg: color-mix(in srgb, rgba(255, 255, 255, 0.50), #625953 12%);

  /* loading overlay */
  --loader-bg: rgba(20, 14, 10, 0.62);
  --gold: #E8D9B8;
  --loader-text: #F2F1F5;
  --loader-panel-bg: #4A3B30;
}

@media screen and (min-width: 576px) {
  :root {
    --profile-bg: var(--desktop-frame-color);
    --link-header-size: 16px;
  }
}

@media screen and (min-width: 640px) {
  :root {
    --topbar-gap: calc(var(--link-gap) * 2);
  }
}

* {
  box-sizing: border-box;
}

html {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--profile-bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--body-text);
  background-color: var(--profile-bg);
  overflow-x: hidden;
}

.page-root {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

/* ---------------------------------------------------------- top bar */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  pointer-events: none;
}

@media screen and (min-width: 640px) {
  .topbar {
    position: absolute;
    top: calc(40px + var(--topbar-gap) - var(--link-gap));
  }
}

.topbar-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap-x: 6px;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--link-gap) var(--topbar-gap);
}

.topbar-actions {
  display: flex;
  gap-x: 6px;
  margin-left: auto;
  pointer-events: auto;
}

.topbar-icon,
.topbar-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #000000;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: default;
  pointer-events: auto;
  outline: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: opacity 0.3s ease;
}

.topbar-icon::before,
.topbar-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--topbar-bg);
}

.topbar-btn {
  padding: 0 10px;
  white-space: nowrap;
}

/* ------------------------------------------------------- background */
.bg-blur {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.bg-blur img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.30;
  transform: scale(1.1);
  transform-origin: center;
}

/* ---------------------------------------------------- profile card */
.profile-frame {
  position: relative;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--profile-bg);
  border-radius: 0;
  box-shadow: 0 24px 32px 0px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

@media screen and (min-width: 640px) {
  .profile-frame {
    margin-top: 40px;
    min-height: calc(100vh - 40px);
    border-radius: 24px 24px 0 0;
  }
}

/* hero banner — the original blends the photo into the background with a
   radial mask: crisp in the centre, fading to the profile colour at the rim. */
.profile-hero {
  position: relative;
  width: 100%;
  height: calc(100vw - 80px);
  overflow: hidden;
}

@media screen and (min-width: 640px) {
  .profile-hero {
    height: calc(var(--container-width) - 80px);
  }
}

.hero-picture {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-color: var(--profile-bg);
  overflow: hidden;
  -webkit-mask: radial-gradient(110.26% 96% at 50% 0%, #000 50%, rgba(0, 0, 0, 0.99) 54.68%, rgba(0, 0, 0, 0.97) 58.79%, rgba(0, 0, 0, 0.94) 62.4%, rgba(0, 0, 0, 0.90) 65.61%, rgba(0, 0, 0, 0.85) 68.52%, rgba(0, 0, 0, 0.79) 71.2%, rgba(0, 0, 0, 0.72) 73.75%, rgba(0, 0, 0, 0.65) 76.25%, rgba(0, 0, 0, 0.57) 78.8%, rgba(0, 0, 0, 0.48) 81.48%, rgba(0, 0, 0, 0.39) 84.39%, rgba(0, 0, 0, 0.30) 87.6%, rgba(0, 0, 0, 0.20) 91.21%, rgba(0, 0, 0, 0.10) 95.32%, rgba(0, 0, 0, 0.00) 100%);
  mask: radial-gradient(110.26% 96% at 50% 0%, #000 50%, rgba(0, 0, 0, 0.99) 54.68%, rgba(0, 0, 0, 0.97) 58.79%, rgba(0, 0, 0, 0.94) 62.4%, rgba(0, 0, 0, 0.90) 65.61%, rgba(0, 0, 0, 0.85) 68.52%, rgba(0, 0, 0, 0.79) 71.2%, rgba(0, 0, 0, 0.72) 73.75%, rgba(0, 0, 0, 0.65) 76.25%, rgba(0, 0, 0, 0.57) 78.8%, rgba(0, 0, 0, 0.48) 81.48%, rgba(0, 0, 0, 0.39) 84.39%, rgba(0, 0, 0, 0.30) 87.6%, rgba(0, 0, 0, 0.20) 91.21%, rgba(0, 0, 0, 0.10) 95.32%, rgba(0, 0, 0, 0.00) 100%);
}

.hero-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-mask: radial-gradient(110.26% 96% at 50% 0%, rgba(0, 0, 0, 0.00) 60%, rgba(0, 0, 0, 0.01) 64.72%, rgba(0, 0, 0, 0.03) 68.55%, rgba(0, 0, 0, 0.07) 71.65%, rgba(0, 0, 0, 0.12) 74.13%, rgba(0, 0, 0, 0.18) 76.15%, rgba(0, 0, 0, 0.25) 77.82%, rgba(0, 0, 0, 0.33) 79.3%, rgba(0, 0, 0, 0.41) 80.7%, rgba(0, 0, 0, 0.50) 82.18%, rgba(0, 0, 0, 0.59) 83.85%, rgba(0, 0, 0, 0.67) 85.87%, rgba(0, 0, 0, 0.76) 88.35%, rgba(0, 0, 0, 0.85) 91.45%, rgba(0, 0, 0, 0.93) 95.28%, #000 100%);
  mask: radial-gradient(110.26% 96% at 50% 0%, rgba(0, 0, 0, 0.00) 60%, rgba(0, 0, 0, 0.01) 64.72%, rgba(0, 0, 0, 0.03) 68.55%, rgba(0, 0, 0, 0.07) 71.65%, rgba(0, 0, 0, 0.12) 74.13%, rgba(0, 0, 0, 0.18) 76.15%, rgba(0, 0, 0, 0.25) 77.82%, rgba(0, 0, 0, 0.33) 79.3%, rgba(0, 0, 0, 0.41) 80.7%, rgba(0, 0, 0, 0.50) 82.18%, rgba(0, 0, 0, 0.59) 83.85%, rgba(0, 0, 0, 0.67) 85.87%, rgba(0, 0, 0, 0.76) 88.35%, rgba(0, 0, 0, 0.85) 91.45%, rgba(0, 0, 0, 0.93) 95.28%, #000 100%);
}

/* profile head */
.profile-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 24px;
  text-align: center;
}

.profile-title {
  margin: 0;
  width: 100%;
  color: var(--header-text-color);
  font-size: 40px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.5px;
  text-wrap: balance;
}

.profile-bio {
  margin: 4px 0 0;
  padding: 0 calc(var(--link-gap) * 3);
  color: var(--profile-title-text);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  text-wrap: balance;
}

/* social icons */
.social-row {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
}

.social-btn {
  display: block;
  padding: 8px;
  color: var(--social-fill);
  border-radius: 8px;
  cursor: default;
}

.social-btn svg {
  display: block;
  width: 32px;
  height: 32px;
}

  /* call-to-action button, sits right under the social icons */
.cta-row {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--btn-radius);
  background: var(--cta-bg);
  color: #F2F1F5;
  box-shadow: var(--btn-shadow);
  cursor: default;
  transition: background-color 0.2s ease;
}

.cta-btn:hover {
  background: var(--cta-bg-hover);
}

.cta-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  line-height: 1.2;
}

/* ------------------------------------------------------ links area */
.links-area {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--link-gap);
  padding: 24px var(--link-gap) 16px;
}

@media screen and (min-width: 640px) {
  .links-area {
    padding: 32px calc(var(--link-gap) * 2) 16px;
  }
}

.link-group-title {
  margin: 0;
  padding-top: var(--link-gap);
  color: var(--body-text);
  font-size: var(--link-header-size);
  font-weight: 700;
  line-height: normal;
  text-align: center;
}

.link-col {
  display: flex;
  flex-direction: column;
  gap: var(--link-gap);
}

/* classic link button */
.link-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  color: var(--btn-text);
  text-decoration: none;
  cursor: default;
  transition: background-color 0.2s ease;
}

.link-btn:hover {
  background: var(--btn-bg-hover);
}

.link-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--btn-inner-radius);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}

.link-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.link-title {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--btn-text);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* grid tiles (Telegram group) */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--link-gap);
  align-content: start;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  color: var(--btn-text);
  text-decoration: none;
  overflow: hidden;
  cursor: default;
  transition: background-color 0.2s ease;
}

.tile:hover {
  background: var(--btn-bg-hover);
}

.tile-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}

.tile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile-title {
  display: block;
  padding: 12px 12px 14px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--btn-text);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* featured video card */
.video-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  color: #ffffff;
  text-decoration: none;
  overflow: hidden;
  cursor: default;
}

.video-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-pad {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: calc(var(--inner-padding) + 16px) var(--inner-padding) 0;
}

.video-frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.video-layer {
  position: absolute;
  overflow: hidden;
  border-radius: 6px;
  transition: transform 0.5s cubic-bezier(0.2, 0, 0, 1);
}

.video-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* back layer: pulled up, dimmed and blurred */
.video-back {
  left: 8%;
  right: 8%;
  top: 0;
  height: 80%;
  transform: translateY(-16px);
}

.video-back img {
  filter: blur(2px);
  transform: scale(1.05);
}

.video-back::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

/* middle layer: pulled up slightly, dimmed and blurred */
.video-mid {
  left: 4%;
  right: 4%;
  top: 0;
  height: 80%;
  transform: translateY(-8px);
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.15);
}

.video-mid img {
  filter: blur(2px);
  transform: scale(1.05);
}

.video-mid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

/* front layer: crisp, fully in place */
.video-front {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.15);
}

.video-front img {
  filter: none;
  transform: none;
}

.video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.video-play > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding-left: 3px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: background-color 0.2s ease;
}

.video-title {
  display: block;
  padding: 12px 16px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--btn-text);
  text-align: left;
}

@media (hover: hover) {
  .video-card:hover .video-back {
    transform: translateY(-20px);
  }
  .video-card:hover .video-mid {
    transform: translateY(-10px);
  }
  .video-card:hover .video-play svg {
    background: rgba(0, 0, 0, 0.6);
  }
}

/* --------------------------------------------------------- a11y */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Loading overlay
   Mimics a real "content is still arriving" state: the page behind
   is blurred out while a gold-lettered identity card, a progress
   bar and status copy take over.
   ============================================================ */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--loader-bg);
  backdrop-filter: blur(6px) saturate(0.85);
  -webkit-backdrop-filter: blur(6px) saturate(0.85);
  opacity: 0;
  visibility: hidden;
  /* Must not intercept clicks while hidden — opacity/visibility alone can
     still leave the overlay on the hit-test path in some engines. */
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.loader.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s ease, visibility 0s linear 0s;
}

.loader-panel {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 30px 26px 26px;
  border-radius: 20px;
  background: var(--loader-panel-bg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transform: translateY(12px) scale(0.97);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.2, 0, 0, 1), opacity 0.32s ease;
}

.loader.is-open .loader-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ---------------------------------------------- profile identity */
.loader-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.loader-avatar {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(232, 217, 184, 0.55),
    0 0 0 4px rgba(232, 217, 184, 0.12),
    0 6px 20px rgba(0, 0, 0, 0.38),
    0 0 24px rgba(232, 217, 184, 0.18);
}

.loader-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

/* champagne-gold gradient text, the metallic "art lettering" look */
.gold-text {
  background: linear-gradient(180deg,
    #FBF3DF 0%,
    var(--gold) 42%,
    #A98A4E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.loader-name {
  margin: 2px 0 0;
  font-family: "Belanosima", "Times New Roman", Georgia, serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 1.2px;
  line-height: 1.2;
  background-image: linear-gradient(95deg,
    #D4B87A 0%,
    #E2CDA0 18%,
    #FDF7E7 32%,
    #FFFDF6 38%,
    #E8D9B8 44%,
    #D4B87A 56%,
    #DCC08A 72%,
    #F2E4C0 88%,
    #D4B87A 100%);
  background-size: 260% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.40));
  animation: badge-shimmer 6.2s linear infinite;
}

.loader-role {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: rgba(232, 217, 184, 0.62);
}

/* --------------------------------------------- Chinese feature badges */
.loader-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.loader-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px 12px 30px;
  border-radius: var(--btn-radius);
  background: linear-gradient(180deg,
    rgba(232, 217, 184, 0.13),
    rgba(232, 217, 184, 0.05));
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 235, 0.14),
    inset 0 0 0 1px rgba(232, 217, 184, 0.22),
    0 2px 10px rgba(0, 0, 0, 0.20);
}

/* small diamond ornament on the leading edge */
.loader-badge::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 6px;
  height: 6px;
  transform: translateY(-50%) rotate(45deg);
  background: linear-gradient(135deg, #FBF3DF, var(--gold) 55%, #A98A4E);
  box-shadow: 0 0 10px rgba(232, 217, 184, 0.55);
}

/* The light lives inside the letters, not across the box: a travelling
   metallic highlight clipped to the text. Reads as foil, not as a bar. */
.badge-text {
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
    "SimSun", "STSong", serif;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 4px;
  text-indent: 4px;
  line-height: 1.3;
  background-image: linear-gradient(95deg,
    #D4B87A 0%,
    #E2CDA0 17%,
    #FDF7E7 31%,
    #FFFDF6 37%,
    #E8D9B8 43%,
    #D4B87A 55%,
    #DCC08A 71%,
    #F2E4C0 87%,
    #D4B87A 100%);
  background-size: 280% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
  animation: badge-shimmer 4.6s linear infinite;
}

/* staggered so the highlight ripples down the list */
.loader-badge:nth-child(2) .badge-text { animation-delay: 0.55s; }
.loader-badge:nth-child(3) .badge-text { animation-delay: 1.10s; }

@keyframes badge-shimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

/* the badge box itself stays still — only the lettering catches the light */

/* ------------------------------------------------------- status */
.loader-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--loader-text);
}

.loader-spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--loader-text);
  animation: loader-spin 0.75s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

.loader-text {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* -------------------------------------------------- progress bar */
.loader-bar {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(232, 217, 184, 0.14);
}

.loader-bar-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,
    #B08D4E 0%,
    var(--gold) 55%,
    #FFFDF6 100%);
  box-shadow: 0 0 10px rgba(232, 217, 184, 0.45);
  transition: width 0.35s linear;
}

/* the page underneath is inert while loading */
.is-loading {
  overflow: hidden;
}

/* -------------------------------------------------- focus ring */
/* The clickable parts are <div>s, so they need an explicit focus style
   to stay reachable by keyboard. */
[tabindex]:focus-visible {
  outline: 2px solid var(--loader-text);
  outline-offset: 3px;
  border-radius: var(--btn-radius);
}

.social-btn:focus-visible {
  border-radius: 8px;
}