/* Accepted homepage R8 feature. Shared by production and historical review, scoped to the third screen. */
.home-r8-feature { --gallery-body: #bac1d1; padding-block: 80px 88px; scroll-margin-top: 100px; }
.home-r8-feature__body { max-width: 1180px; margin-inline: auto; }
.home-r8-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; }
.home-r8-heading h2 { margin: 12px 0 16px; font: 400 clamp(40px, 4.2vw, 60px)/1.18 var(--headline-font); letter-spacing: 0; }
.home-r8-intro { margin: 0; color: var(--gallery-body); font-size: 17px; line-height: 1.8; }
.home-r8-all { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 48px; flex-shrink: 0; padding-block: 8px; border-bottom: 1px solid var(--cyan); font-size: 14px; }
.home-r8-all .ui-icon { color: var(--cyan); }
.home-r8-feature .r8-work { min-width: 0; }
.home-r8-feature .project-work-meta { display: flex; align-items: center; font-size: 12px; line-height: 1.7; color: var(--muted); }
.home-r8-feature .project-work-status { display: inline-flex; align-items: center; gap: 8px; color: var(--gallery-body); }
.home-r8-feature .project-work-status::before { content: ""; width: 12px; height: 1px; background: var(--r8-accent); }
.home-r8-feature .r8-media-link { border-color: color-mix(in srgb, var(--r8-accent) 35%, var(--line)); }
.home-r8-feature .r8-media-link:hover { border-color: var(--r8-accent); }
.home-r8-feature .r8-copy { padding-top: 4px; }
.home-r8-feature .r8-description { text-wrap: pretty; }
@media(max-width:800px) {
  .home-r8-feature { padding-block: 56px 64px; }
  .home-r8-heading { gap: 20px; margin-bottom: 28px; }
}
@media(max-width:600px) {
  .home-r8-feature { padding-block: 40px 48px; }
  .home-r8-heading { align-items: flex-start; flex-wrap: wrap; gap: 12px 24px; }
  .home-r8-heading h2 { margin-bottom: 12px; }
  .home-r8-intro { font-size: 16px; }
  .home-r8-all { gap: 36px; }
}
@media(prefers-reduced-motion:reduce) {
  .home-r8-feature *, .home-r8-feature *::before, .home-r8-feature *::after { animation: none !important; transition: none !important; }
}