/* ============================================================
   Link in bio — mobile landing for @thechristiemoreira
   Christie's PERSONAL / WELLNESS brand (Health & Amare):
   Montserrat + Lato, warm-greige base, a single SAGE accent,
   calm circular/halo motifs — modern, friendly, unfussy.
   This is deliberately a DIFFERENT brand from Avenna (which is
   Playfair + brass + arches). The one Avenna link carries a small
   brass "portal" cue hinting at that separate, elegant world.
   Tokens come from the .brand-health scope on <main>.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');

body { background: var(--surface-page); margin: 0; }

.lb {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 26px 44px;
  background: var(--surface-page);
  box-sizing: border-box;
  overflow: hidden;
}

/* ---- calm wellness halo behind the avatar (not an arch — that's Avenna) ---- */
.lb-halo {
  position: absolute;
  top: -110px; left: 50%; transform: translateX(-50%);
  width: 460px; height: 360px;
  background: radial-gradient(60% 70% at 50% 60%, var(--accent-soft) 0%, rgba(223,227,212,0.45) 42%, transparent 72%);
  pointer-events: none;
}

.lb-head { position: relative; text-align: center; padding-top: 56px; }
.lb-avatar {
  width: 128px; height: 128px; margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--surface-card), 0 0 0 6px var(--accent), var(--shadow-md);
}
.lb-name {
  font-family: var(--font-display); font-weight: 700; font-size: 33px;
  letter-spacing: -0.015em; line-height: 1.06; margin: 22px 0 12px; color: var(--text-primary);
}
.lb-roles {
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px;
}
.lb-bio {
  font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.62;
  color: var(--text-secondary); max-width: 33ch; margin: 0 auto; text-wrap: pretty;
}

/* worlds — tracked labels with small dots, sage for hers, brass for Avenna */
.lb-tags {
  display: flex; gap: 12px; align-items: center; justify-content: center;
  margin: 22px 0 4px;
}
.lb-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-weight: 700; font-size: 10.5px; white-space: nowrap;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary);
}
.lb-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--accent)); flex: none; }
.lb-tag.avenna { --dot: var(--brass); }
.lb-tags .lb-tag + .lb-tag { padding-left: 12px; border-left: 1px solid var(--border-strong); }

/* ---- link stack ---- */
.lb-links { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; }

.lb-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg); padding: 20px 22px;
  text-decoration: none; box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft);
}
.lb-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--dot, var(--accent)); }
.lb-link-title {
  font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
  color: var(--text-primary); display: flex; align-items: center; gap: 13px;
}
.lb-link:not(.feature) .lb-link-title::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--accent)); flex: none;
}
.lb-arrow {
  font-family: var(--font-body); color: var(--dot, var(--accent)); font-size: 18px; flex: none;
  transition: transform var(--dur-base) var(--ease-soft);
}
.lb-link:hover .lb-arrow { transform: translateX(3px); }
.lb-link.s-health { --dot: var(--accent); }

/* standard links carry a short description, not just a title */
.lb-link-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lb-link:not(.feature) .lb-link-sub {
  font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--text-secondary); padding-left: 21px;
}

/* Avenna link — a small "portal" to her separate, elegant brand */
.lb-link.s-avenna { --dot: var(--brass); }
.lb-link.s-avenna .lb-link-info { display: flex; flex-direction: column; gap: 3px; }
.lb-link.s-avenna .lb-link-kicker {
  font-family: var(--font-body); font-weight: 700; font-size: 9.5px; letter-spacing: 0.18em; white-space: nowrap;
  text-transform: uppercase; color: var(--brass-600); padding-left: 21px;
}
.lb-link.s-avenna .lb-link-title { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 20px; font-style: italic; }
.lb-link.s-avenna .lb-link-title::before { background: var(--brass); }

/* feature link — the wellness "headline" card, deep charcoal + sage */
.lb-link.feature {
  position: relative;
  flex-direction: column; align-items: flex-start; gap: 7px;
  background: var(--surface-invert); border-color: transparent; padding: 26px 26px;
  box-shadow: var(--shadow-md);
}
.lb-link.feature:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: transparent; }
.lb-link.feature .lb-link-eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: 10.5px; white-space: nowrap;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--highlight);
}
.lb-link.feature .lb-link-title {
  color: var(--text-on-dark); font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1.12; letter-spacing: -0.01em;
}
.lb-link.feature .lb-link-sub {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: rgba(232,232,220,0.72); margin-top: 4px;
}
.lb-link.feature .lb-feature-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 13px; white-space: nowrap;
  font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--surface-invert); background: var(--highlight-soft); border-radius: var(--radius-pill); padding: 9px 16px;
}

/* Avenna feature — the main button, dressed in her design brand (brass + Playfair) */
.lb-link.feature.avenna { padding: 30px 28px; }
.lb-link.feature.avenna::after {
  content: ""; position: absolute; inset: 10px; border: 1px solid rgba(217,198,161,0.32);
  border-radius: var(--radius-md); pointer-events: none;
}
.lb-link.feature.avenna .lb-link-eyebrow { color: var(--brass-200); }
.lb-link.feature.avenna .lb-link-title {
  font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 31px; letter-spacing: -0.005em; line-height: 1.04;
}
.lb-link.feature.avenna .lb-link-title em { font-style: italic; color: var(--brass-200); }
.lb-link.feature.avenna .lb-feature-go { color: var(--surface-invert); background: var(--brass-200); }

/* medical as a standard link (now third) */
.lb-link.s-medical { --dot: var(--brown); }

/* ---- newsletter ---- */
.lb-news {
  margin-top: 30px; background: var(--surface-tint);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 28px 26px;
  text-align: center;
}
.lb-news-eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.lb-news-title {
  font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.01em;
  color: var(--text-primary); margin: 0 0 8px; line-height: 1.18;
}
.lb-news-copy { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--clove); margin: 0 auto 18px; max-width: 30ch; }
.lb-form { display: flex; gap: 8px; }
.lb-input {
  flex: 1; min-width: 0; font-family: var(--font-body); font-size: 14px;
  padding: 13px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-primary); outline: none;
  transition: border-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
.lb-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.lb-btn {
  font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.03em; color: var(--surface-card);
  background: var(--button-bg); border: none; border-radius: var(--radius-pill);
  padding: 13px 26px; cursor: pointer; transition: background var(--dur-base) var(--ease-soft);
}
.lb-btn:hover { background: var(--button-hover); }
.lb-thanks { display: none; font-family: var(--font-body); font-size: 14px; color: var(--text-secondary); margin: 4px 0 0; }
.lb-form.done { display: none; }
.lb-form.done + .lb-thanks { display: block; }
.lb-script { font-family: "Caveat", cursive; font-weight: 600; color: var(--accent); font-size: 22px; }

/* ---- footer ---- */
.lb-foot {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; margin-top: 34px;
}
.lb-foot::before { content: ""; width: 36px; height: 1px; background: var(--accent); opacity: 0.55; }
.lb-foot-handle {
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; color: var(--text-muted);
}
.lb-foot-link {
  font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-muted); text-decoration: none; opacity: 0.8;
}
.lb-foot-link:hover { color: var(--accent); opacity: 1; }