.section-header { display: grid; gap: var(--space-5); max-width: var(--container-reading); margin-bottom: var(--space-8); }
.section-header--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-header--split { max-width: none; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); align-items: end; gap: var(--space-7); }
.section-header__meta { display: flex; align-items: center; gap: var(--space-3); }
.section-index { color: var(--color-primary-strong); font: 700 var(--text-sm)/1 var(--font-en); letter-spacing: .08em; }
.section-kicker { color: var(--color-muted); font: 700 var(--text-xs)/1.2 var(--font-en); letter-spacing: .14em; }
.section-title { max-width: 22ch; font-size: var(--text-3xl); line-height: 1.35; letter-spacing: -.035em; }
.section-title--large { max-width: 18ch; font-size: var(--text-4xl); line-height: 1.2; }
.section-lead { max-width: 64ch; font-size: var(--text-lg); line-height: 1.85; color: var(--color-ink-soft); }
.handwritten-underline { position: relative; display: inline; background: linear-gradient(transparent 76%, rgba(255,179,26,.72) 0); }

.button { min-height: 58px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); border-radius: var(--radius-pill); transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard); }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button--primary { color: var(--color-ink); background: var(--color-primary); }
.button--secondary { color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-line-strong); }
.button--dark { color: #fff; background: var(--color-navy); }
.button--text { min-height: auto; padding: var(--space-2) 0; border-radius: 0; background: transparent; }
.button--large { min-height: 76px; padding: var(--space-5) var(--space-7); }
.button--small { min-height: 48px; padding: var(--space-3) var(--space-5); font-size: var(--text-sm); }

.card--plain { background: transparent; border: 0; box-shadow: none; }
.card--bordered { background: var(--color-surface); border: 1px solid var(--color-line); box-shadow: none; }
.card--soft { background: var(--color-cream); border: 1px solid transparent; box-shadow: none; }
.card--floating { background: var(--color-surface); border: 1px solid rgba(232,227,217,.82); box-shadow: var(--shadow-card); }
.card--editorial { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.card--dark { color: #fff; background: var(--color-navy); border: 0; box-shadow: none; }

.icon--sm { width: 18px; height: 18px; }
.icon--md { width: 24px; height: 24px; }
.icon--lg { width: 36px; height: 36px; }
.icon-badge { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--color-primary-strong); background: var(--color-primary-soft); }

.media-frame { overflow: hidden; background: var(--color-cream-deep); }
.media-frame > img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--portrait { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); }
.media-frame--landscape { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); }
.media-frame--editorial { aspect-ratio: 3 / 2; border-radius: 0 var(--radius-xl) var(--radius-xl) 0; }

.section-surface { position: relative; isolation: isolate; }
.section-surface--white { background: var(--color-surface); }
.section-surface--cream { background: var(--color-cream); }
.section-surface--warm { background: var(--color-cream-deep); }
.section-surface--navy { color: #fff; background: var(--color-navy); }
.section-surface--grid { background-color: var(--color-surface); background-image: linear-gradient(var(--color-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-line) 1px, transparent 1px); background-size: 40px 40px; }
.section-surface--editorial { background: linear-gradient(90deg, var(--color-surface) 0 58%, var(--color-cream) 58%); }

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard); }
.js .reveal--up { transform: translateY(20px); }
.js .reveal--fade { transform: none; }
.js .reveal--scale { transform: scale(.98); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}