/* Nine homepage highlights, using the shared site and fansite-kit tokens. */
.home-highlights .container { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
.hl-heading { max-width: 720px; margin-bottom: 32px; }
.hl-heading .section-heading { margin-bottom: 14px; }
.hl-heading .section-paragraph { margin-bottom: 0; }
.hl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.home-highlights [hidden] { display: none; }
.hl-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--bg-main); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.hl-picture { aspect-ratio: 16 / 8; overflow: hidden; background: var(--bg-dark); }
.hl-picture img { width: 100%; height: 100%; object-fit: cover; }
.hl-card.art .hl-picture { background: #fff; }
.hl-card.art img { object-fit: contain; }
.hl-card.figure .hl-picture { background: var(--fun-cream); }
.hl-card.figure.peach .hl-picture { background: var(--fun-peach); }
.hl-card.figure.leaf .hl-picture { background: var(--fun-leaf); }
.hl-card.figure.sky .hl-picture { background: var(--fun-sky); }
.hl-card.figure img { object-fit: contain; padding: 12px 12px 0; }
.hl-copy { padding: 20px; }
.hl-copy h3 { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.02em; margin-bottom: 8px; }
.hl-copy p { color: var(--text-muted); font-size: 0.94rem; line-height: 1.5; }
.hl-card:hover { border-color: var(--text-main); }
.hl-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.hl-card:focus-visible { outline: 3px solid var(--text-main); outline-offset: 5px; }
.hl-more { margin: 32px 0 0; text-align: center; }
.hl-more .btn { max-width: 100%; white-space: normal; }
@media (min-width: 600px) { .hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }