/* Warm frosted-glass web treatment inspired by physical material principles. */
body {
  background:
    radial-gradient(circle at 10% 16%, rgba(255, 255, 255, 0.7), transparent 34%),
    radial-gradient(circle at 92% 68%, rgba(198, 79, 11, 0.1), transparent 38%),
    linear-gradient(155deg, #f8f1e9 0%, #f5ece2 52%, #f2e6da 100%);
  background-attachment: fixed;
}

.logo-link:focus-visible,
.language:focus-visible,
.link:focus-visible,
.icon-links a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.link,
.icon-links a,
.language {
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  border-color: rgba(255, 255, 255, 0.66);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 253, 249, 0.48));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(109, 64, 35, 0.035),
    0 9px 24px rgba(102, 62, 36, 0.07),
    0 2px 5px rgba(102, 62, 36, 0.035);
}

.link {
  border-radius: 14px;
  transition:
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.link.primary {
  border-color: rgba(255, 255, 255, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(198, 79, 11, 0.055),
    0 10px 26px rgba(135, 70, 28, 0.085),
    0 2px 5px rgba(102, 62, 36, 0.035);
}

.icon-links a {
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 253, 249, 0.38));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 6px 18px rgba(102, 62, 36, 0.055);
  transition:
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.language {
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 4px 14px rgba(102, 62, 36, 0.045);
}

.link:hover,
.icon-links a:hover,
.language:hover {
  border-color: rgba(255, 255, 255, 0.88);
  background-color: rgba(255, 255, 255, 0.66);
}

.link:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(198, 79, 11, 0.055),
    0 12px 30px rgba(119, 65, 31, 0.1);
}

.link:active,
.icon-links a:active,
.language:active {
  transform: scale(0.985);
  transition-duration: 100ms;
  box-shadow:
    inset 0 1px 3px rgba(102, 62, 36, 0.08),
    0 2px 6px rgba(102, 62, 36, 0.04);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .link,
  .icon-links a,
  .language {
    background: rgba(255, 253, 249, 0.94);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .link,
  .icon-links a,
  .language {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 253, 249, 0.96);
  }
}

@media (prefers-contrast: more) {
  .link,
  .icon-links a,
  .language {
    border-color: rgba(48, 39, 33, 0.34);
    background: rgba(255, 253, 249, 0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .link,
  .icon-links a,
  .language {
    transition: color 10ms linear, border-color 10ms linear;
  }

  .link:hover,
  .link:active,
  .icon-links a:hover,
  .icon-links a:active,
  .language:hover,
  .language:active {
    transform: none;
  }
}

.link.channel-link {
  min-height: 94px;
}

.link-copy,
.link-description {
  min-width: 0;
  display: grid;
}

.link-copy {
  gap: 5px;
}

.link-title {
  line-height: 1.35;
}

.link-description {
  gap: 2px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.link-description > span {
  white-space: nowrap;
}

html[lang="en"] .channel-link {
  grid-template-columns: 26px minmax(0, 1fr) 14px;
  gap: 8px;
  padding-inline: 12px;
}

html[lang="en"] .link-description {
  font-size: 0.57rem;
  letter-spacing: -0.035em;
}

@media (max-width: 359px) {
  .channel-link {
    grid-template-columns: 26px minmax(0, 1fr) 14px;
    gap: 8px;
    padding-inline: 10px;
  }

  .link-description {
    font-size: 0.57rem;
    letter-spacing: -0.035em;
  }

  html[lang="en"] .link-description {
    font-size: 0.51rem;
  }
}