/* Maximal overrides: richer surfaces, bigger type, stronger hierarchy. */

.section-head {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  position: relative;
}

.section-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: min(240px, 55%);
  height: 2px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 85%, #ffffff),
    color-mix(in srgb, var(--accent-3) 70%, #ffffff),
    transparent
  );
  opacity: 0.55;
}

.page-title {
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
}

.lede {
  font-size: var(--text-xl);
  line-height: 1.55;
}

.kicker {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
}

.paper {
  background:
    radial-gradient(900px 600px at 10% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%),
    radial-gradient(900px 600px at 90% 10%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--panel-2), var(--panel-1));
}