/* WOS101 brand foundation: locked mark and raw tokens only.
   Individual pages own their layouts and component styling. */
:root {
  --wos-void: #1B201F;
  --wos-panel: #232A27;
  --wos-card: #2D3531;
  --wos-raised: #36413C;
  --wos-ivory: #FFF1C7;
  --wos-mist: #C1BBA1;
  --wos-mint: #D3ECE1;
  --wos-coral: #F07C5F;
  --wos-twin: #B08A4A;
  --wos-amber: #C77A27;
  --wos-line: rgba(255, 241, 199, .16);
  --wos-line-strong: rgba(211, 236, 225, .34);
  --wos-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --wos-sans: "IBM Plex Sans", Arial, sans-serif;
  --wos-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

.wos-mark {
  color: var(--wos-ivory);
  display: inline-flex;
  align-items: center;
  height: 44px;
  justify-content: center;
  letter-spacing: -.07em;
  position: relative;
  width: 82px;
  font: 700 28px/1 var(--wos-mono);
}
.wos-mark::before {
  border: 7px solid var(--wos-mint);
  border-radius: 50%;
  content: "";
  height: 36px;
  left: 23px;
  position: absolute;
  top: 2px;
  width: 36px;
}
.wos-mark::after {
  background: var(--wos-coral);
  border-radius: 50%;
  content: "";
  height: 14px;
  left: 41px;
  position: absolute;
  top: 13px;
  width: 14px;
}
.wos-mark > span { position: relative; z-index: 1; }
.wos-mark > .wos-mark__one { margin-right: 36px; }
.wos-mark > .wos-mark__last { color: var(--wos-twin); }

@media (max-width: 900px) {
  header a, nav a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}