/* =============================================================
   STRAIT SOUNDS - base.css
   Self-hosted fonts + base resets + accessibility primitives
   ============================================================= */

/* Fraunces — 4-axis variable (opsz, wght, SOFT, WONK) */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/Fraunces-VF.woff2") format("woff2-variations"),
       url("../fonts/Fraunces-VF.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/Fraunces-Italic-VF.woff2") format("woff2-variations"),
       url("../fonts/Fraunces-Italic-VF.woff2") format("woff2");
}

/* Lora — wght axis */
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Lora-VF.woff2") format("woff2-variations"),
       url("../fonts/Lora-VF.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Lora-Italic-VF.woff2") format("woff2-variations"),
       url("../fonts/Lora-Italic-VF.woff2") format("woff2");
}

/* IBM Plex Mono — static weights */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-Italic.woff2") format("woff2");
}

/* --- Skip link --------------------------------------------- */
.ss-skip {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  background: var(--indigo-700);
  color: var(--cream-50);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--duration-base) var(--ease-out);
  z-index: var(--z-toast);
}
.ss-skip:focus {
  transform: translateY(0);
  color: var(--cream-50);
}

/* --- Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ss-marquee__track { animation: none !important; }
}

/* --- Selection -------------------------------------------- */
::selection {
  background: var(--indigo-200);
  color: var(--indigo-900);
}

/* --- Visually hidden -------------------------------------- */
.ss-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- List resets for semantic nav -------------------------- */
.ss-nav ul { list-style: none; padding: 0; margin: 0; display: contents; }