@layer base {
/* =============================================================================
   @elements/style — typography (inside @layer base)
============================================================================= */

.display {
  font-size:      var(--text-6xl);
  font-weight:    var(--weight-semibold);

  line-height:    1.05;
  letter-spacing: var(--tracking-tighter);
  color:          var(--ink);
}

.display.is-celebrate {
  font-size: var(--text-7xl);
}

.lede {
  font-size:   var(--text-lg);
  line-height: var(--leading-relaxed);
  color:       var(--ink-soft);
}

.eyebrow {
  font-size:       var(--text-2xs);
  font-weight:     var(--weight-semibold);
  letter-spacing:  var(--tracking-widest);
  text-transform:  uppercase;
  color:           var(--ink-dim);
}

.prose {
  font-size:   var(--text-md);
  line-height: var(--leading-relaxed);
  color:       var(--ink);
}
.prose > * + *  { margin-top: var(--space-4); }
.prose > h1 + *,
.prose > h2 + *,
.prose > h3 + * { margin-top: var(--space-3); }
.prose > * + h2 { margin-top: var(--space-10); }
.prose > * + h3 { margin-top: var(--space-8); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ul li + li,
.prose ol li + li { margin-top: var(--space-1); }

.link-prose {
  color:                 var(--accent-deep);
  text-decoration:       underline;
  text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
  text-underline-offset: 0.25em;
}
.link-prose:hover { text-decoration-color: currentColor; }

.link-action {
  color:           var(--accent-deep);
  font-weight:     var(--weight-medium);
  text-decoration: none;
}
.link-action:hover { text-decoration: underline; text-underline-offset: 0.25em; }

.link-muted {
  color:           var(--ink-soft);
  text-decoration: none;
}
.link-muted:hover { color: var(--ink); }

.line-clamp-1,
.line-clamp-2,
.line-clamp-3,
.line-clamp-4,
.line-clamp-5,
.line-clamp-6 {
  display:           -webkit-box;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.line-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }
.line-clamp-5 { -webkit-line-clamp: 5; line-clamp: 5; }
.line-clamp-6 { -webkit-line-clamp: 6; line-clamp: 6; }

.truncate {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

}