/* OSk3y site base — reconstructs the shared component scaffolding that the
   design handoff's external design-system bundle provided (nav layout, card
   frame, lighten image treatment). Loaded BEFORE theme.css, which wins ties. */

/* — nav scaffold (colors come from theme.css) — */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 26px;
  padding-block: 14px;
}
.nav .nav-brand { margin-right: auto; }
.nav a { text-decoration: none; font-size: 14.5px; font-weight: var(--weight-medium, 500); }

/* — card frame (surface, border, tones come from theme.css) — */
.card { padding: 24px 26px; box-sizing: border-box; }
.card-kicker { margin: 0 0 8px; }
.card-title { margin: 0 0 8px; font: var(--weight-heading, 600) var(--text-lg, 18px)/1.3 var(--font-heading, inherit); letter-spacing: -0.01em; }
.card-body { margin: 0; font-size: 14.5px; line-height: 1.55; }

/* — blended photograph (the lighten wrapper: dark grounds sink into the page) — */
.lighten { position: relative; }
.lighten img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: lighten;
}