/* ============================================================================
   content.css — PLW CONTENT PRIMITIVES (Foundation 04)
   Loads AFTER primitives.css (doc chrome) and may sit alongside layout.css.
   Typographic primitives: eyebrow, heading cluster, h1-h6, lede, body,
   blockquote, callout, and lists. Every rule reads tokens.
   ============================================================================ */

/* ============================================================================
   PRIMITIVE: EYEBROW  — small uppercase label above a heading
   ============================================================================ */
.c-eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted);
  margin: 0; display: inline-flex; align-items: center; gap: var(--space-2);
}
.c-eyebrow--accent { color: var(--color-accent); }
.c-eyebrow--rule { gap: var(--space-3); }
.c-eyebrow--rule::before { content: ""; width: var(--space-8); height: var(--border-default); background: currentColor; display: inline-block; }

/* ============================================================================
   PRIMITIVE: HEADING SCALE  h1-h6  (display font, fixed ramp, fluid h1/h2)
   Use the .c-h* classes anywhere; the bare tags get the same in prose blocks.
   ============================================================================ */
.c-h1, .c-h2, .c-h3, .c-h4, .c-h5, .c-h6 {
  font-family: var(--font-display); color: var(--color-fg); margin: 0;
  line-height: var(--leading-tight); letter-spacing: -0.015em; font-weight: 700;
  text-wrap: balance; overflow-wrap: break-word;
}
.c-h1 { font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl)); }
.c-h2 { font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl)); }
.c-h3 { font-size: var(--text-3xl); line-height: var(--leading-snug); }
.c-h4 { font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: -0.01em; }
.c-h5 { font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: 0; }
.c-h6 { font-size: var(--text-base); line-height: var(--leading-normal); letter-spacing: .02em; text-transform: uppercase; font-family: var(--font-body); font-weight: 700; }
/* per-type display tuning */
[data-type="anton"] :is(.c-h1,.c-h2,.c-h3,.c-h4,.c-h5),
[data-type="archivo"] :is(.c-h1,.c-h2,.c-h3,.c-h4,.c-h5) { text-transform: uppercase; font-weight: 400; letter-spacing: 0.005em; }
[data-type="dmserif"] :is(.c-h1,.c-h2,.c-h3,.c-h4,.c-h5) { font-weight: 400; }
[data-type="playfair"] :is(.c-h1,.c-h2,.c-h3), [data-type="spectral"] :is(.c-h1,.c-h2,.c-h3) { font-weight: 600; }
.stagewrap[data-vp="mobile"] .c-h1 { font-size: var(--text-4xl); }
.stagewrap[data-vp="mobile"] .c-h2 { font-size: var(--text-3xl); }

/* ============================================================================
   PRIMITIVE: HEADING CLUSTER  — eyebrow + heading + lede, spaced as a unit
   ============================================================================ */
.c-cluster { display: flex; flex-direction: column; gap: var(--space-4); }
.c-cluster--sm { gap: var(--space-3); }
.c-cluster[data-align="center"] { align-items: center; text-align: center; }
.c-cluster[data-align="center"] .c-lede { margin-inline: auto; }

/* ============================================================================
   PRIMITIVE: LEDE  — the intro paragraph after a heading
   ============================================================================ */
.c-lede { font-family: var(--font-body); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--color-muted); margin: 0; max-width: 56ch; font-weight: 400; }
.stagewrap[data-vp="mobile"] .c-lede { font-size: var(--text-lg); }

/* ============================================================================
   PRIMITIVE: BODY  — long-form prose scale
   ============================================================================ */
.c-body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-fg); max-width: 68ch; }
.c-body--lg { font-size: var(--text-lg); }
.c-body--sm { font-size: var(--text-sm); line-height: var(--leading-normal); }
.c-body p { margin: 0 0 var(--space-4); }
.c-body p:last-child { margin-bottom: 0; }
.c-body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.c-body strong { font-weight: 700; color: var(--color-fg); }
.c-body :is(h2,h3,h4) { font-family: var(--font-display); color: var(--color-fg); margin: var(--space-8) 0 var(--space-3); line-height: var(--leading-snug); }
.c-body h2 { font-size: var(--text-2xl); }
.c-body h3 { font-size: var(--text-xl); }

/* ============================================================================
   PRIMITIVE: BLOCKQUOTE  — pull quote / testimonial body
   ============================================================================ */
.c-quote { margin: 0; border-left: var(--border-heavy) solid var(--color-accent); padding-left: var(--space-5); }
.c-quote p { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--color-fg); margin: 0 0 var(--space-4); letter-spacing: -0.01em; }
[data-type="anton"] .c-quote p, [data-type="archivo"] .c-quote p { text-transform: none; font-weight: 400; }
.c-quote footer { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); display: flex; align-items: center; gap: var(--space-2); }
.c-quote footer b { color: var(--color-fg); font-weight: 600; }
.c-quote--center { border-left: 0; padding-left: 0; text-align: center; }
.c-quote--center p { font-size: var(--text-3xl); }
.c-quote--center footer { justify-content: center; }
.c-quote--lg p { font-size: var(--text-4xl); }

/* ============================================================================
   PRIMITIVE: CALLOUT  — boxed aside (info / accent / success / warning / danger)
   ============================================================================ */
.c-callout { display: flex; gap: var(--space-4); padding: var(--space-5); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
[data-shape="brutalist"] .c-callout { border-width: var(--border-default); }
.c-callout__icon { flex: none; width: 28px; height: 28px; display: grid; place-items: center; color: var(--color-accent); }
.c-callout__icon svg { width: 22px; height: 22px; }
.c-callout__body { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-fg); }
.c-callout__body b { font-weight: 700; }
.c-callout__body p { margin: 0; }
.c-callout__title { font-weight: 700; margin: 0 0 var(--space-1); }
.c-callout--accent { background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg)); border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); }
.c-callout--accent .c-callout__icon { color: var(--color-accent); }
.c-callout--success { background: color-mix(in srgb, var(--color-success) 12%, var(--color-bg)); border-color: color-mix(in srgb, var(--color-success) 30%, var(--color-border)); }
.c-callout--success .c-callout__icon { color: var(--color-success); }
.c-callout--warning { background: color-mix(in srgb, var(--color-warning) 14%, var(--color-bg)); border-color: color-mix(in srgb, var(--color-warning) 32%, var(--color-border)); }
.c-callout--warning .c-callout__icon { color: var(--color-warning); }
.c-callout--danger { background: color-mix(in srgb, var(--color-danger) 12%, var(--color-bg)); border-color: color-mix(in srgb, var(--color-danger) 30%, var(--color-border)); }
.c-callout--danger .c-callout__icon { color: var(--color-danger); }

/* ============================================================================
   PRIMITIVE: LISTS  — bulleted / numbered / definition
   ============================================================================ */
.c-list { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-fg); margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); max-width: 64ch; }
.c-list--bullet li { position: relative; padding-left: var(--space-6); }
.c-list--bullet li::before { content: ""; position: absolute; left: var(--space-1); top: 0.62em; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--color-accent); }
[data-shape="brutalist"] .c-list--bullet li::before { border-radius: 0; }
.c-list--check li { position: relative; padding-left: var(--space-8); }
.c-list--check li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 20px; height: 20px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg)); }
.c-list--check li::after { content: ""; position: absolute; left: 6px; top: 0.42em; width: 8px; height: 5px; border-left: var(--border-default) solid var(--color-accent); border-bottom: var(--border-default) solid var(--color-accent); transform: rotate(-45deg); }
.c-list--number { counter-reset: li; }
.c-list--number li { position: relative; padding-left: var(--space-9); counter-increment: li; }
.c-list--number li::before { content: counter(li); position: absolute; left: 0; top: 0.05em; width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-fg); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; display: grid; place-items: center; }
[data-shape="brutalist"] .c-list--number li::before { border-radius: 0; }
.c-list li small { display: block; color: var(--color-muted); font-size: var(--text-sm); margin-top: 2px; }

.c-deflist { font-family: var(--font-body); margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; max-width: 64ch; }
.c-deflist > div { display: grid; grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-4) 0; border-bottom: var(--border-thin) solid var(--color-border); }
@media (min-width: 560px) { .c-deflist > div { grid-template-columns: 200px 1fr; gap: var(--space-5); } }
.c-deflist dt { font-weight: 700; color: var(--color-fg); font-size: var(--text-sm); }
.c-deflist dd { margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }

/* mobile-clamp helpers also affect content */
.stagewrap[data-vp="mobile"] .c-deflist > div { grid-template-columns: 1fr; gap: var(--space-1); }