/* Shared chrome for public pages (landing header and footer). Layout only.
   Colors, type and motion come from /ui/tokens.css. */

.lp-top {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--c-bg) 90%, transparent);
  border-bottom: var(--border-hairline) solid var(--c-line);
  backdrop-filter: blur(12px);
}

.lp-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-width: 0;
  min-height: var(--topbar-height);
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  color: var(--c-ink);
  text-decoration: none;
}

.lp-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-16);
  min-width: 0;
}

.lp-nav-links {
  display: none;
  align-items: center;
  gap: var(--space-16);
}

.lp-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-xs);
  color: var(--c-ink-2);
  font-size: var(--text-s);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.lp-nav__link[aria-current="page"] {
  color: var(--c-ink);
  font-weight: var(--weight-semibold);
}

.lp-nav__account {
  --cluster-gap: var(--space-8);
}

.lp-foot {
  border-top: var(--border-hairline) solid var(--c-line);
  padding-block: var(--space-32) var(--space-48);
}

.lp-foot .l-stack {
  --stack-gap: var(--space-8);
}

@media (min-width: 960px) {
  .lp-nav-links {
    display: flex;
  }
}

/* Reading pages (learn, coin guides). Type roles come from base.css. */
.lp-prose {
  padding-block: var(--space-32) var(--space-48);
  overflow-wrap: anywhere;
}

.lp-prose h2,
.lp-prose h3,
.lp-prose p,
.lp-prose ul,
.lp-prose ol {
  margin-top: var(--space-16);
}

.lp-prose h2,
.lp-prose h3 {
  margin-top: var(--space-32);
}

.lp-prose ul,
.lp-prose ol {
  padding-left: 1.25rem;
}

.lp-prose li + li {
  margin-top: var(--space-8);
}

.lp-prose code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Reading pages (methodology). Type and color stay on the shared tokens. */
.lp-doc {
  padding-block: var(--space-32) var(--space-48);
}

.lp-doc > ul:not(.u-plain):not(.l-stack),
.lp-doc > ol {
  margin: 0;
  padding-left: var(--space-20);
}

.lp-doc > ul:not(.u-plain):not(.l-stack) li + li,
.lp-doc > ol li + li {
  margin-top: var(--space-8);
}

.lp-doc .note {
  padding: var(--space-12);
  border: var(--border-hairline) solid var(--c-line);
  border-radius: var(--radius-m);
}

@media (prefers-reduced-motion: reduce) {
  .lp-top {
    backdrop-filter: none;
  }
}