:root {
  /* Brand palette, sampled from the Perseon Labs mark */
  --pl-white: #ffffff;
  --pl-paper: #f7f6f3;
  --pl-line: #e5e2db;
  --pl-blue-900: #12194d;
  --pl-blue-800: #1b2676;
  --pl-blue-600: #2b3a95;
  --pl-blue-100: #e7e9f5;
  --pl-gold: #c9a13c;
  --pl-gold-deep: #8a6b20;
  --pl-gold-soft: #e2b83e;
  --pl-muted: #5a5f6e;
}

html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

/* Editorial serif display face for headlines */
.font-display {
  font-family: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
}

/* Thin gold rule used to separate sections and label groups */
.rule-gold {
  background-image: linear-gradient(
    to right,
    var(--pl-gold) 0,
    var(--pl-gold) 2.5rem,
    var(--pl-line) 2.5rem,
    var(--pl-line) 100%
  );
}

/* Subtle paper grid, replaces the previous glow blobs */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(27, 38, 118, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 38, 118, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
}

.link-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.25s ease;
}

.link-underline:hover {
  background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .link-underline {
    transition: none;
  }
}