/* ======================================================================
   10. Theme Mapping And Shared Components
   ====================================================================== */
.page-block {
  background: var(--bg);
}

#hero {
  --bg: var(--sp-pattern-hero);
  --bg-next: var(--sp-pattern-section-1);
  --page-gap: var(--sp-space-page-hero);
}

#news {
  --bg: var(--sp-pattern-section-1);
  --bg-next: var(--sp-pattern-section-2);
  --detail-title: var(--sp-type-detail-md);
}

#works {
  --bg: var(--sp-pattern-section-2);
  --bg-next: var(--sp-pattern-section-3);
  --detail-title: var(--sp-type-detail-lg);
}

#about {
  --bg: var(--sp-pattern-section-3);
  --bg-next: var(--sp-pattern-section-4);
  --detail-title: var(--sp-type-detail-sm);
}

#equipments {
  --bg: var(--sp-pattern-section-4);
  --bg-next: var(--sp-pattern-section-5);
  --detail-title: var(--sp-type-detail-sm);
}

#services-rates {
  --bg: var(--sp-pattern-section-5);
  --bg-next: var(--sp-pattern-footer);
  --accent: var(--sp-theme-accent-warm);
}

#footer {
  --bg: var(--sp-pattern-footer);
  --bg-next: var(--sp-pattern-footer);
  --accent: var(--sp-theme-accent-cool);
  --page-gap: var(--sp-space-page-compact);
}

:is(.sec-head__title, .news-header h1, .works-header h1, .about-header h1, .equip-header h1, .services-rates-header h1) {
  margin: 0;
  font-size: var(--sp-type-section-title);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text);
}

:is(.sec-rule, .news-header .rule, .works-header .rule, .about-header .rule, .equip-header .rule, .services-rates-header .rule, .footer-rule) {
  height: var(--sp-rule-hairline);
  background: var(--line);
}

:is(.nav-panel__lede, .nav-panel__note, .news-copy p, .detail-section p, .detail-section li, .about-copy p, .equipment-copy p, .band-copy) {
  font-size: var(--sp-type-body);
  line-height: 1.7;
}

:is(.nav-panel__eyebrow, .nav-group__label, .footer-note-label, .footer-copy, .news-meta, .detail-page__meta) {
  font-size: var(--sp-type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-trigger {
  border-color: var(--line-strong);
  background: var(--sp-surface-glass-strong);
  color: var(--text);
}

.nav-panel {
  background: var(--sp-surface-glass-strong);
  box-shadow: none;
}

.nav-shell.is-open .nav-panel {
  box-shadow:
    -1px 0 0 color-mix(in srgb, var(--sp-theme-text-heading) 5%, transparent),
    -24px 0 48px color-mix(in srgb, var(--sp-theme-text-heading) 10%, transparent);
}

.nav-panel__header,
.nav-panel__footer {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 68%, transparent),
      color-mix(in srgb, var(--surface-2) 44%, transparent));
}

.nav-close,
.nav-item,
.theme-toggle,
#news .tag-cloud__button,
#news .news-item,
.page-nav,
#works .filter-tabs,
#services-rates .cta-button {
  border-color: var(--line);
  color: var(--text);
}

.nav-item:hover,
.nav-item:focus-visible,
.theme-toggle:hover,
.theme-toggle:focus-visible,
#news .tag-cloud__button:hover,
#news .tag-cloud__button:focus-visible,
#news .news-item:hover,
#news .news-item:focus-visible,
#works .filter-tabs__button:hover,
#works .filter-tabs__button:focus-visible,
#services-rates .cta-button:hover,
#services-rates .cta-button:focus-visible {
  border-color: var(--line-strong);
}

.nav-item__thumb::after {
  border-color: color-mix(in srgb, var(--text) 28%, transparent);
  background: color-mix(in srgb, var(--surface) 42%, transparent);
}

.nav-cta,
#services-rates .cta-button--primary {
  background: var(--sp-theme-primary);
  border-color: var(--sp-theme-primary);
  color: var(--sp-theme-button-text);
}

.nav-cta:hover,
.nav-cta:focus-visible,
#services-rates .cta-button--primary:hover,
#services-rates .cta-button--primary:focus-visible {
  background: var(--sp-theme-primary-hover);
  border-color: var(--sp-theme-primary-hover);
  color: var(--sp-theme-button-text);
}

.nav-panel__lede-group {
  display: grid;
  gap: 0.85rem;
}

.theme-toggle {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.15rem 0 0;
  text-align: left;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.theme-toggle__copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.theme-toggle__eyebrow {
  font-size: var(--sp-type-caption-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.theme-toggle__value {
  font-size: var(--sp-type-body-sm);
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 84%, var(--muted) 16%);
}

.theme-toggle__switch {
  position: relative;
  width: 3.45rem;
  height: 2rem;
  border-radius: var(--sp-radius-pill);
  border: 0;
  background: color-mix(in srgb, var(--surface-2) 58%, transparent);
  flex: 0 0 auto;
}

.theme-toggle__switch-track {
  position: absolute;
  inset: 0.28rem;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sp-theme-accent-warm), var(--sp-theme-accent-cool));
  opacity: 0.18;
}

.theme-toggle__switch-thumb {
  position: absolute;
  top: 0.18rem;
  left: 0.18rem;
  width: 1.52rem;
  height: 1.52rem;
  border-radius: 50%;
  background: var(--sp-theme-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent);
  transition: transform 220ms ease, background-color 220ms ease;
}

.theme-toggle[aria-pressed="true"] .theme-toggle__switch-thumb {
  transform: translateX(1.42rem);
  background: var(--sp-theme-accent-cool);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.theme-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--active) 72%, transparent);
  outline-offset: 4px;
  border-radius: 0.6rem;
}

#hero {
  --overlay: linear-gradient(180deg,
      color-mix(in srgb, var(--sp-theme-media-ink) 3%, transparent) 0%,
      color-mix(in srgb, var(--sp-theme-media-ink) 20%, transparent) 55%,
      color-mix(in srgb, var(--sp-theme-media-ink) 50%, transparent) 100%);
  --overlay-strong: linear-gradient(180deg,
      color-mix(in srgb, var(--sp-theme-media-ink) 6%, transparent) 0%,
      color-mix(in srgb, var(--sp-theme-media-ink) 22%, transparent) 48%,
      color-mix(in srgb, var(--sp-theme-media-ink) 56%, transparent) 100%);
}

.hero-slide__content,
.hero-card__content,
#works .work-card--album .work-card__content,
#works .player-bar {
  color: var(--sp-theme-on-media);
}

.hero-kicker,
.hero-card__meta {
  color: var(--sp-layer-on-media-88);
}

.hero-lead,
.hero-card__text {
  color: var(--sp-layer-on-media-92);
}

.hero-arrow {
  border-color: var(--sp-layer-on-media-24);
  background: color-mix(in srgb, var(--sp-theme-on-media) 9%, transparent);
  color: var(--sp-theme-on-media);
}

.hero-arrow:hover,
.hero-arrow:focus-visible {
  background: var(--sp-layer-surface-16);
  border-color: var(--sp-layer-on-media-42);
}

.hero-dots {
  background: var(--sp-layer-on-media-18);
  border-color: var(--sp-layer-on-media-18);
}

.hero-dot {
  background: var(--sp-layer-on-media-42);
}

.hero-card:focus-visible,
.hero-arrow:focus-visible,
.hero-dot:focus-visible {
  outline-color: var(--sp-layer-on-media-85);
}

#news .tag,
#news .tag-cloud__button {
  background: var(--sp-layer-surface-42);
}

#news .tag-cloud__button:hover,
#news .tag-cloud__button:focus-visible {
  color: var(--text);
  background: var(--sp-layer-text-05);
}

#news .tag-cloud__button[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--active);
  background: var(--sp-layer-text-06);
}

#news .news-item {
  border-bottom-color: var(--sp-layer-text-05);
}

#news .news-item:hover,
#news .news-item:focus-visible {
  background: var(--sp-layer-text-04);
}

#news .news-item.is-active {
  background: var(--sp-layer-text-05);
}

#about .carousel-dot {
  background: var(--sp-layer-primary-18);
  box-shadow: inset 0 0 0 1px var(--sp-layer-primary-16);
}

#about .carousel-dot[aria-selected="true"] {
  box-shadow: inset 0 0 0 1px var(--sp-layer-primary-55);
}

#about .carousel-dot:focus-visible {
  outline-color: var(--sp-focus-ring);
}

#about .carousel-slide::before {
  background:
    linear-gradient(to top, var(--sp-layer-media-26), transparent 38%),
    linear-gradient(to bottom right, var(--sp-layer-on-media-18), transparent);
}

#about .carousel-slide::after {
  color: var(--sp-layer-on-media-88);
  border-color: var(--sp-layer-on-media-24);
  background: var(--sp-layer-media-18);
}

#works .work-card:hover,
#works .work-card:focus-visible {
  border-color: var(--line-strong);
}

#works .work-card.is-active {
  box-shadow: 0 0 0 1px var(--sp-layer-primary-08);
}

#works .work-card__art,
#about .carousel-slide {
  background-color: var(--sp-theme-card-fallback);
}

#works .work-card--album::before {
  background:
    linear-gradient(to top, var(--sp-layer-media-70), var(--sp-layer-media-25) 55%, var(--sp-layer-media-04)),
    linear-gradient(to right, var(--sp-layer-media-18), transparent 42%);
}

#works .work-card--single .work-card__copy {
  background: linear-gradient(to right, var(--sp-layer-surface-68), var(--sp-layer-surface-42));
}

#works .work-card--single .work-card__art {
  border-left-color: var(--sp-layer-text-06);
}

#works .work-card--single .work-card__meta-top,
#works .work-card--single .work-card__author,
#works .work-card--single .work-card__role {
  color: var(--muted);
}

#works .video-shell {
  background: var(--sp-theme-media-ink);
  border-color: var(--sp-layer-text-12);
}

#works .video-shell::before {
  background: linear-gradient(to top, var(--sp-layer-media-28), var(--sp-layer-media-08) 35%, var(--sp-layer-media-02));
}

#works .play-button {
  background: var(--sp-layer-media-50);
}

#works .play-button::before {
  border-left-color: var(--sp-layer-on-media-90);
}

#works .player-bar {
  background: linear-gradient(to top, var(--sp-layer-media-72), var(--sp-layer-media-45));
}

#services-rates .rates-table thead th {
  background: var(--sp-layer-surface-46);
}

#services-rates .rates-table tbody td,
#services-rates .rates-table tbody th {
  border-bottom-color: color-mix(in srgb, var(--line-strong) 58%, transparent);
}

#services-rates .support-item {
  background: linear-gradient(180deg, var(--sp-layer-surface-34), var(--sp-layer-surface-14));
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
  background: var(--sp-layer-surface-36);
}

.content-scroll,
#about .right-scroll,
#equipments .right-scroll,
#services-rates .page-scroll {
  scrollbar-color: var(--line-strong) transparent;
}

.content-scroll::-webkit-scrollbar-thumb,
#about .right-scroll::-webkit-scrollbar-thumb,
#equipments .right-scroll::-webkit-scrollbar-thumb,
#services-rates .page-scroll::-webkit-scrollbar-thumb {
  background: var(--line-strong);
}

.hero-dot[aria-current="true"] {
  background: var(--surface);
}

.hero-dot:hover,
.hero-dot:focus-visible {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

@media (max-width: 48rem) {
  .theme-toggle {
    padding-inline: 0.85rem;
  }
}