/* Links-page surfaces; load after the shared liquid theme and existing styles. */
:root {
  --links-ink: #100c18;
  --links-surface: color-mix(in srgb, var(--links-ink) 87%, transparent);
  --links-surface-hover: color-mix(in srgb, #1c152b 93%, transparent);
  --links-blue: color-mix(in srgb, var(--accent2) 72%, var(--paper));
  --panel: var(--links-surface);
  --panel2: var(--links-surface-hover);
  --paper: #f1eff7;
  --muted: #c4c4d0;
  --magenta: var(--accent, #ff3d9a);
  --cyan: var(--links-blue);
  --line: color-mix(in srgb, var(--paper) 20%, transparent);
}

/* The shared canvas and its fallback supply the page's liquid backdrop. */
body::before {
  content: none;
  background: none;
}

body {
  color: var(--paper);
}

.bar {
  background: color-mix(in srgb, var(--links-ink) 55%, transparent);
  border-color: var(--line);
}

.lang,
.social {
  background: color-mix(in srgb, var(--links-ink) 76%, transparent);
  border-color: var(--line);
  color: var(--paper);
}

.lang:hover,
.social:hover {
  background: var(--links-surface-hover);
  border-color: color-mix(in srgb, var(--accent, #ff3d9a) 74%, transparent);
  color: var(--paper);
}

.emblem::before {
  border-color: color-mix(in srgb, var(--links-blue) 48%, transparent);
  border-right-color: transparent;
}

.emblem::after,
.brandlink .dot {
  background: var(--accent, #ff3d9a);
}

.brandlink.void .dot {
  background: var(--paper);
}

.identity h1 .point {
  color: var(--accent, #ff3d9a);
}

.location,
.link .symbol {
  color: color-mix(in srgb, var(--links-blue) 78%, white);
}

.link {
  background: var(--links-surface);
  border-color: var(--line);
  color: var(--paper);
}

.link:hover {
  background: var(--links-surface-hover);
  border-color: color-mix(in srgb, var(--accent, #ff3d9a) 65%, transparent);
}

.link .desc,
.link .external,
.identity p,
.back,
.divider,
.brandlink,
.hours,
footer {
  color: var(--muted);
}

.link.primary,
.skip {
  background: var(--accent, #ff3d9a);
  border-color: var(--accent, #ff3d9a);
  color: var(--surface);
}

.link.primary:hover {
  background: color-mix(in srgb, var(--accent, #ff3d9a) 80%, white);
  border-color: color-mix(in srgb, var(--accent, #ff3d9a) 80%, white);
}

.link.primary .symbol,
.link.primary .external,
.link.primary .title,
.link.primary .desc {
  color: var(--surface);
}

.photo::after,
.photo.store::after {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--links-ink) 96%, transparent) 0%,
    color-mix(in srgb, var(--links-ink) 92%, transparent) 46%,
    color-mix(in srgb, var(--links-ink) 68%, transparent) 100%
  );
}

[dir="rtl"] .photo::after,
[dir="rtl"] .photo.store::after {
  background: linear-gradient(
    270deg,
    color-mix(in srgb, var(--links-ink) 96%, transparent) 0%,
    color-mix(in srgb, var(--links-ink) 92%, transparent) 46%,
    color-mix(in srgb, var(--links-ink) 68%, transparent) 100%
  );
}

.photo .external,
.link.void .symbol,
.back:hover,
.brandlink:hover {
  color: var(--paper);
}

.business:hover,
footer a:hover {
  color: var(--accent, #ff3d9a);
}

:focus-visible {
  outline-color: var(--accent, #ff3d9a);
}

footer p {
  opacity: 1;
}

@media (min-width: 950px) {
  body::after {
    color: var(--muted);
  }
}