/* Podium — pieces shared by every page.
   Loaded after design-system.css and before the page-specific stylesheet.
   Anything used by both the landing pages and the brand sheet lives here; page
   layout does not. */

:root {
  --rule: 2px solid var(--color-text);
  --hairline: 2px solid var(--color-divider);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* — the podium mark —
   Two colours, both overridable per instance via custom properties. */
.mark { display: block; width: 100%; height: 100%; }
.mark .mark-side { fill: var(--mark-side, #201e1d); }
.mark .mark-center { fill: var(--mark-center, #ec3013); }

/* — muted text roles, as a share of the ink colour — */
.muted-80 { color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.muted-70 { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.muted-65 { color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.muted-60 { color: color-mix(in srgb, var(--color-text) 60%, transparent); }

/* — skip link — */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  padding: 12px 20px; background: var(--color-text); color: var(--color-bg);
  font-family: var(--font-heading); font-weight: 800; text-decoration: none;
}
.skip-link:focus-visible { left: 0; }

/* — language switcher —
   The current language renders as plain text, not a link back to this page. */
.lang ul {
  display: flex; align-items: center; gap: 0;
  list-style: none; margin: 0; padding: 0;
}
.lang li + li::before {
  content: ""; display: inline-block; width: 1px; height: 11px;
  margin: 0 9px; vertical-align: middle;
  background: color-mix(in srgb, var(--color-text) 35%, transparent);
}
.lang-link, .lang-current {
  font-family: var(--font-heading); font-weight: 600; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}
.lang-link { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.lang-link:hover { color: var(--color-accent); }
.lang-current { color: var(--color-text); }

/* — motion —
   One global opt-out. Page stylesheets add motion freely; this switches it off. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}