.home-highlights { color: #f5f5f5; background: radial-gradient(ellipse at 0 50%, #3a1d0f60, transparent 65%), #101113; scroll-margin-top: 100px; }
.highlights-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 28px; }
.highlights-heading > p { max-width: 400px; color: #c4c4c4; }
.highlights-controls, .highlights-navigation, .highlights-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.highlights-controls { margin-bottom: 16px; }
.home-highlights [hidden] { display: none !important; }
.home-highlights button { min-height: 44px; min-width: 44px; padding: 8px 14px; border: 1px solid #68615c; border-radius: 6px; background: #1c1d20; color: #fff; cursor: pointer; font-size: 13px; font-weight: 700; }
.home-highlights button:hover { background: #3a2214; border-color: #ff9a43; }
.home-highlights :is(a, button):focus-visible { outline: 3px solid #ffae6b; outline-offset: 5px; }
.highlights-navigation { gap: 12px; }
.highlights-navigation > span { min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; color: #ddd; font-size: 13px; }
.highlight-slides { border: 1px solid #78513a; border-radius: 14px; overflow: hidden; background: linear-gradient(140deg, #1d1d1f, #0d0e10); }
.highlight-slide { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 4vw, 60px); padding: 22px; animation: highlight-reveal .35s ease-out; }
.highlight-art { display: block; min-width: 0; text-align: center; }
.highlight-art img { display: block; width: 100%; height: auto; aspect-ratio: 1122 / 1402; object-fit: contain; background: #0b0b0c; border-radius: 7px; }
.highlight-art > span { display: inline-block; margin-top: 10px; font-size: 12px; color: #ddd; text-decoration: underline; text-underline-offset: 4px; }
.highlight-copy { padding: 18px 20px 18px 0; min-width: 0; }
.highlight-copy h3 { font: 600 clamp(28px, 3.4vw, 43px)/1.12 "Space Grotesk", sans-serif; letter-spacing: -.035em; margin: 0 0 24px; }
.highlight-description { color: #e1e1e1; font-size: 17px; margin-bottom: 22px; }
.highlight-note { color: #b8b8bc; font-size: 13px; margin: 0 0 28px; }
.highlight-copy .button { text-align: center; font-size: 12px; }
.highlight-tagline { font-size: 15px; color: #ff9a43; margin: 32px 0 0; }
.highlights-footer { flex-wrap: wrap; margin-top: 12px; }
.highlight-dots { display: flex; gap: 2px; }
.highlight-dots button { display: grid; place-items: center; background: transparent; border-color: transparent; padding: 8px; }
.highlight-dots button span { width: 9px; height: 9px; border-radius: 50%; background: #777; }
.highlight-dots button[aria-current="true"] span { width: 22px; border-radius: 5px; background: #ff8b31; }
@keyframes highlight-reveal { from { opacity: .2; } to { opacity: 1; } }
@media (max-width: 760px) {
  .highlights-heading { display: block; }
  .highlights-heading > p { max-width: none; }
  .highlight-slide { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
  .highlight-art { width: 100%; max-width: 490px; margin: auto; }
  .highlight-copy { padding: 20px 10px 24px; }
  .highlight-copy h3 { font-size: 30px; }
  .highlight-description { font-size: 16px; }
  .highlights-footer { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .highlight-slide { animation: none; } }