/* Mrbarber — extras
 * Small additions that supplement shared/tokens.css.
 * Everything here is safe to merge into tokens.css later.
 */

/* Title accents — used inside .mrb-display headlines across blocks.
 * .mrb-display is italic by default; .roman flips the accent line
 * back to upright 300-weight, and .italic stays italic but is
 * declared explicitly for clarity and future-proofing.
 */
.mrb-display .roman  { font-style: normal; font-weight: 300; }
.mrb-display .italic { font-style: italic; font-weight: 400; }
.mrb-display .italic.gold { color: var(--mrb-gold); }

/* Display size scale (fluid, mobile-first) */
.mrb-display.h-1 { font-size: clamp(36px, 8vw, 72px); }
.mrb-display.h-2 { font-size: clamp(28px, 5vw, 44px); }
.mrb-display.h-3 { font-size: clamp(22px, 3vw, 28px); }

/* Generic .mrb-section utility — every section block can wrap in this */
.mrb-section { padding: 60px 0; }
@media (min-width: 768px) { .mrb-section { padding: 100px 0; } }
@media (min-width: 1200px) { .mrb-section { padding: 140px 0; } }

/* .mrb-section-head — count + eyebrow atom consistency */
.mrb-section-head .mrb-eyebrow { margin-top: 0; }
.mrb-section-head h2 { margin: 0; }

/* .mrb-display fallback margin reset */
h1.mrb-display, h2.mrb-display, h3.mrb-display { margin: 0; }