/* The existing type, blue accents and spacing, with the films kept in 9:16. */
.highlights-section { padding-top: 80px; }
.highlights-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.highlights-head .label { margin-bottom: 12px; color: var(--secondary); }
.highlights-head > p { max-width: 350px; margin: 0 0 4px; }
.highlights-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 32px 0 16px; }
.highlights-tools p { margin: 0; }
.highlights-arrows { display: flex; gap: 8px; }
.highlights-arrows[hidden] { display: none; }
.highlights-arrows button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #fff; font-size: 23px; cursor: pointer; }
.highlights-arrows button:hover { background: var(--accent-wash); }
.highlights-arrows button:disabled { opacity: .35; cursor: default; }
.highlight-list { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 4); gap: 20px; margin: 0; padding: 4px 4px 20px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: thin; scrollbar-color: #9bb9ca #edf3f6; }
.highlight-card { min-width: 0; scroll-snap-align: start; }
.highlight-watch { display: block; text-decoration: none; }
.highlight-art { display: block; position: relative; aspect-ratio: 9 / 16; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #edf3f6; }
.highlight-art img { width: 100%; height: 100%; object-fit: contain; }
.highlight-play { position: absolute; left: 16px; bottom: 16px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-size: 13px; padding-left: 2px; }
.highlight-duration { position: absolute; right: 16px; bottom: 25px; border-radius: 6px; padding: 2px 7px; background: var(--ink); color: white; font-size: 12px; font-variant-numeric: tabular-nums; }
.highlight-watch:is(:hover, :focus-visible) .highlight-play { background: var(--accent-hover); color: var(--ink); }
.highlight-watch:is(:hover, :focus-visible) .highlight-art { border-color: var(--accent-blue); }
.highlight-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -.035em; }
.highlight-number { font-size: 12px; font-weight: 400; color: var(--secondary); letter-spacing: 0; }
.highlight-card p { margin: 8px 0 0; }
.highlight-note { margin: 16px 0 0; font-size: 12px; }
.highlight-dialog { width: min(520px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 20px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: #fff; overflow: auto; }
.highlight-dialog::backdrop { background: rgba(11, 11, 11, .76); }
.highlight-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.highlight-dialog-head h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.highlight-close { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; }
.highlight-close span { font-size: 22px; }
.highlight-player { display: block; width: auto; max-width: 100%; height: min(640px, calc(100dvh - 230px)); aspect-ratio: 9 / 16; margin: auto; background: #0b0b0b; border-radius: 8px; object-fit: contain; }
.highlight-dialog-description { margin: 12px 0 0; font-size: 14px; }
.highlight-direct { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; text-underline-offset: 3px; }
.highlight-error { margin: 8px 0 0; }
@media (max-width: 1000px) { .highlight-list { grid-auto-columns: calc((100% - 40px) / 3); } }
@media (max-width: 640px) {
  .highlights-section { padding-top: 56px; }
  .highlights-head { display: block; }
  .highlights-head > p { margin-top: 18px; }
  .highlights-tools { margin-top: 24px; }
  .highlights-tools p { max-width: 190px; font-size: 13px; }
  .highlight-list { grid-auto-columns: 78%; gap: 16px; }
  .highlight-title { font-size: 24px; }
  .highlight-dialog { padding: 16px; }
}