/* VKG Specials: the prominent corner and carousel on the main page, and the nav group (VKG 2026-10-18). */
.specials { background: linear-gradient(135deg, var(--band) 0%, var(--band-2) 100%); color: var(--band-ink); padding: 40px 0 44px; }
.sp-head { display: grid; gap: 6px; margin-bottom: 18px; }
.specials .eyebrow { color: var(--gold-hi); }
.sp-head h2 { font-family: var(--f-display); font-size: clamp(1.6rem, 3.4vw, 2.3rem); color: var(--band-ink); margin: 0; }
.sp-carousel { border: 1px solid rgba(212, 160, 23, .35); border-radius: 18px; background: rgba(245, 230, 200, .04); padding: 26px 30px 16px; }
.sp-slide { display: grid; gap: 12px; max-width: 780px; min-height: 210px; align-content: start; }
.sp-kicker { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); }
.sp-slide h3 { margin: 0; font-family: var(--f-display); font-size: clamp(1.35rem, 2.8vw, 1.9rem); line-height: 1.2; color: var(--band-ink); }
.sp-slide p { margin: 0; color: var(--band-muted); font-size: 1rem; line-height: 1.6; }
.sp-slide > a, .sp-actions { justify-self: start; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-ghost-dark { background: transparent; color: var(--band-ink); border: 1px solid rgba(245, 230, 200, .4); }
.btn-ghost-dark:hover { border-color: var(--gold-hi); color: var(--gold-hi); }
.sp-controls { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.sp-btn { min-width: 40px; min-height: 40px; border-radius: 999px; border: 1px solid rgba(245, 230, 200, .35); background: transparent; color: var(--band-ink); font-size: 1.1rem; cursor: pointer; padding: 0 12px; }
.sp-btn:hover { border-color: var(--gold-hi); color: var(--gold-hi); }
.sp-pause { font-size: .9rem; margin-left: auto; }
.sp-dots { display: flex; gap: 6px; }
.sp-dot { width: 24px; height: 24px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; padding: 0; position: relative; }
.sp-dot::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: rgba(245, 230, 200, .45); }
.sp-dot[aria-pressed="true"]::after { background: var(--gold-hi); inset: 5px; }
.sp-dot:focus-visible, .sp-btn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.sp-tiles { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sp-tiles a { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; text-decoration: none; background: rgba(245, 230, 200, .06); border: 1px solid rgba(245, 230, 200, .14); }
.sp-tiles a:hover, .sp-tiles a:focus-visible { border-color: var(--gold-hi); }
.sp-tiles b { color: var(--band-ink); font-size: 1rem; }
.sp-tiles span { color: var(--band-muted); font-size: .9rem; }
.specials .dev { font-family: var(--f-dev); }
@media (max-width: 860px) { .sp-tiles { grid-template-columns: 1fr 1fr; } .sp-carousel { padding: 20px 18px 14px; } .sp-slide { min-height: 0; } }
@media (max-width: 420px) { .sp-tiles { grid-template-columns: 1fr; } }

/* nav: VKG Specials stands out from the department groups */
.navgroup-special > summary { color: var(--gold-hi); }