/* Dan Koe–style typography — system fonts first for China network compatibility */
:root {
  --font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Menlo", ui-monospace, monospace;

  /* Scale */
  --type-2xs: 11px;   /* labels, lang switch, pill tags */
  --type-xs: 12px;    /* meta, captions, card dates */
  --type-sm: 13px;    /* buttons, filter chips, card "read" links */
  --type-ui: 14px;    /* nav, small UI copy */
  --type-base: 16px;  /* body */
  --type-md: clamp(17px, 1.55vw, 19px); /* lead / intro paragraphs */
  --type-lg: clamp(18px, 1.8vw, 21px);  /* card titles, h3 */
  --type-xl: clamp(22px, 2.5vw, 30px);  /* about headline (.big) */
  --type-2xl: clamp(32px, 4.8vw, 52px); /* section h2 */
  --type-3xl: clamp(44px, 7.2vw, 80px); /* page h1 */
  --type-hero: clamp(48px, 8.2vw, 92px); /* hero h1 */

  /* Tracking */
  --track-label: 0.26em;
  --track-ui: 0.02em;
  --track-body: -0.011em;
  --track-display: -0.038em;

  --nav-link-size: var(--type-ui);
}

body {
  font-family: var(--font-body);
  font-size: var(--type-base);
  font-weight: 400;
  letter-spacing: var(--track-body);
}

/* ─── Labels — smallest, widest (DAN KOE / RESOURCES style) ─── */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-2xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  gap: 0;
}

.eyebrow::before {
  display: none;
}

/* ─── Display headings — largest, tight, heavy ─── */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1.02;
}

h1.display { font-size: var(--type-3xl); font-weight: 900; }
h2.display { font-size: var(--type-2xl); font-weight: 800; letter-spacing: -0.032em; line-height: 1.06; }

.hero h1.display {
  font-size: var(--type-hero);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.042em;
}

.manifesto-inner h2.display {
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 900;
  line-height: 0.98;
}

/* ─── Sub-headlines ─── */
.about-body .big,
.page-head h1.display {
  font-family: var(--font-display);
  font-size: var(--type-xl);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.22;
}

.page-head h1.display {
  font-size: var(--type-3xl);
  font-weight: 900;
  letter-spacing: var(--track-display);
  line-height: 1.02;
}

h3 {
  font-size: var(--type-lg);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.25;
}

/* ─── Body / lead — medium, regular weight ─── */
.lead {
  font-size: var(--type-md);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -0.008em;
  color: color-mix(in oklab, var(--fg) 72%, transparent);
}

.hero .lead { max-width: 46ch; }

p:not(.lead):not(.eyebrow):not(.meta):not(.big) {
  font-size: var(--type-base);
  font-weight: 400;
  line-height: 1.6;
}

/* ─── Buttons — smallest interactive text, semi-bold ─── */
.btn {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: 600;
  letter-spacing: var(--track-ui);
  padding: 11px 20px;
}

.btn-ghost {
  font-size: var(--type-sm);
  font-weight: 500;
}

/* ─── Nav ─── */
.topnav .brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.brand-logo {
  /* Match nav CTA pill visual weight (~12px padding × 2 + 14px text) */
  height: 48px;
  width: auto;
  display: block;
  mix-blend-mode: screen;
}

.topnav nav a {
  font-family: var(--font-body);
  font-size: var(--nav-link-size);
  font-weight: 500;
  letter-spacing: 0;
}

/* ─── Meta / captions ─── */
.meta {
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.num { font-variant-numeric: tabular-nums; }

/* ─── Pills & tags ─── */
.pill {
  font-family: var(--font-body);
  font-size: var(--type-2xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-scroll {
  font-family: var(--font-body);
  font-size: var(--type-2xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
}

/* ─── Cards ─── */
.post-card h3 {
  font-size: var(--type-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.24;
}

.post-card .post-dek {
  font-size: var(--type-ui);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.006em;
}

.post-card-read {
  font-size: var(--type-sm);
  font-weight: 600;
  letter-spacing: var(--track-ui);
}

.post-card-meta {
  font-size: var(--type-xs);
  font-weight: 400;
}

/* ─── Topic cards ─── */
.topic-card h3 { font-size: var(--type-lg); font-weight: 700; }
.topic-card p { font-size: var(--type-ui); font-weight: 400; line-height: 1.58; }
.topic-card .more {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: 600;
  letter-spacing: var(--track-ui);
}

/* ─── Filter bar ─── */
.filter-btn {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: 500;
  letter-spacing: 0;
}

.filter-btn .count {
  font-size: var(--type-2xs);
  font-weight: 500;
}

/* ─── Social / footer ─── */
.social-row .link { font-size: var(--type-ui); font-weight: 500; }
.social-row .s-handle { font-size: var(--type-xs); font-weight: 400; }
.foot-links a { font-size: var(--type-ui); font-weight: 400; }
.pagefoot .meta { font-size: var(--type-xs); }

.lang-opt {
  font-family: var(--font-body);
  font-size: var(--type-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.nav-link-external {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-link-external::after {
  content: "↗";
  font-size: 0.78em;
  opacity: 0.5;
}

/* Upsello — standout nav CTA */
.topnav nav a.nav-link-upsello {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #c084fc;
  padding: 7px 16px;
  margin-left: 2px;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklab, #a855f7 55%, transparent);
  background: color-mix(in oklab, #9333ea 14%, transparent);
  box-shadow: 0 0 0 0 color-mix(in oklab, #a855f7 0%, transparent);
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.topnav nav a.nav-link-upsello::after {
  opacity: 0.85;
  font-size: 0.72em;
  transition: transform 180ms ease;
}

.topnav nav a.nav-link-upsello:hover,
.topnav nav a.nav-link-upsello:focus-visible {
  color: #faf5ff;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 55%, #c084fc 100%);
  border-color: color-mix(in oklab, #c084fc 70%, transparent);
  box-shadow: 0 0 22px color-mix(in oklab, #a855f7 42%, transparent);
  transform: translateY(-1px);
}

.topnav nav a.nav-link-upsello:hover::after {
  transform: translate(2px, -2px);
  opacity: 1;
}

.about-photo {
  margin-bottom: var(--space-6, 24px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-soft, #1f1f23);
}

.about-photo img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hero-bg.is-custom {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}