/* Ito components. Reads tokens.css custom properties. Motion values from the Motion section. */
.itos-nav {
  --itos-dur-quick: 240ms;
  --itos-ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed; top: var(--space-4); left: 0; right: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  pointer-events: none; font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.itos-nav--absolute { position: absolute; }
.itos-nav--static { position: relative; top: auto; }

.itos-nav__bar {
  pointer-events: auto; box-sizing: border-box;
  display: flex; align-items: center; gap: var(--space-2);
  max-width: calc(100% - 2 * var(--space-4));
  padding: 5px; border-radius: var(--radius-pill);
  background: var(--card); background: color-mix(in srgb, var(--card) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: var(--shadow-float, 0 1px 2px rgba(11, 13, 18, 0.05), 0 8px 24px -12px rgba(11, 13, 18, 0.12));
  border: var(--stroke-hairline) solid var(--line); color: var(--ink);
  transition: background-color var(--itos-dur-quick) var(--itos-ease-settle),
              border-color var(--itos-dur-quick) var(--itos-ease-settle),
              color var(--itos-dur-quick) var(--itos-ease-settle);
}

.itos-nav__brand {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-3) 0 0; color: inherit; text-decoration: none; white-space: nowrap;
  border-radius: var(--radius-pill);
}
.itos-nav__brand { padding-left: 8px; gap: 10px; }
.itos-nav__mark { display: grid; place-items: center; width: 28px; height: 28px; }
.itos-nav__mark .itos-mark { display: block; }
.itos-nav__name { display: flex; flex-direction: column; justify-content: center; gap: 5px; line-height: 1; }
.itos-nav__word { font-family: var(--font-wordmark, "Inter Tight", Inter, system-ui, sans-serif); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 0.9; }
.itos-nav__sub { font-family: var(--font-wordmark, "Inter Tight", Inter, system-ui, sans-serif); font-size: 8px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; color: var(--muted); }

.itos-nav__links { display: block; }
.itos-nav__track { position: relative; display: flex; align-items: center; gap: 2px; }
.itos-nav__thumb {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; opacity: 0;
  border-radius: var(--radius-pill); background: var(--accent-tint);
  transition: transform var(--itos-dur-quick) var(--itos-ease-settle),
              width var(--itos-dur-quick) var(--itos-ease-settle),
              opacity var(--itos-dur-quick) var(--itos-ease-settle),
              background-color var(--itos-dur-quick) var(--itos-ease-settle);
}
.itos-nav__link {
  position: relative; display: block; padding: 9px 14px; border-radius: var(--radius-pill);
  font-size: 13px; line-height: 1; font-weight: 500; white-space: nowrap;
  color: var(--muted); text-decoration: none;
  transition: color var(--itos-dur-quick) var(--itos-ease-settle);
}
.itos-nav__link:hover { color: var(--ink); }
.itos-nav__link[aria-current="location"] { color: var(--accent); font-weight: 600; }

.itos-nav__cta {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--on-primary);
  font-size: 13px; line-height: 1; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color var(--itos-dur-quick) var(--itos-ease-settle), color var(--itos-dur-quick) var(--itos-ease-settle);
}
.itos-nav__cta:hover { background: var(--primary-hover); }

.itos-nav__menu {
  display: none; align-items: center; gap: var(--space-2);
  padding: 8px 12px; border-radius: var(--radius-pill);
  background: transparent; border: var(--stroke-hairline) solid var(--line); color: inherit;
  font: 600 13px/1 var(--font-sans); cursor: pointer;
}
.itos-nav__chev { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--itos-dur-quick) var(--itos-ease-settle); }
.itos-nav.is-open .itos-nav__chev { transform: translateY(1px) rotate(-135deg); }

.itos-nav__sheet {
  pointer-events: auto; box-sizing: border-box;
  width: calc(100% - 2 * var(--space-4)); max-width: 420px; padding: var(--space-2);
  background: var(--card); border: var(--stroke-hairline) solid var(--line);
  display: flex; flex-direction: column;
}
.itos-nav__link--sheet { padding: 14px var(--space-3); border-radius: 0; font-size: 15px; }
.itos-nav__link--sheet[aria-current="location"] { background: var(--accent-tint); }

.itos-nav a:focus-visible, .itos-nav button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Inverse tone: over an inverse (near-black) band. Rare in the light system. */
.itos-nav--inverse .itos-nav__bar, .itos-nav--inverse .itos-nav__sheet { background: var(--inverse); border-color: var(--inverse-line); color: var(--on-inverse); }
.itos-nav--inverse .itos-nav__mark { --itos-mark-ink: var(--on-inverse); --itos-mark-brass: var(--accent-on-inverse); }
.itos-nav--inverse .itos-nav__thumb { background: var(--inverse-line); }
.itos-nav--inverse .itos-nav__link { color: var(--on-inverse-muted); }
.itos-nav--inverse .itos-nav__sub { color: var(--on-inverse-muted); }
.itos-nav--inverse .itos-nav__link:hover, .itos-nav--inverse .itos-nav__link[aria-current="location"] { color: var(--on-inverse); }
.itos-nav--inverse .itos-nav__link--sheet[aria-current="location"] { background: var(--inverse-line); }
.itos-nav--inverse .itos-nav__cta { background: var(--on-inverse); color: var(--inverse); }
.itos-nav--inverse .itos-nav__cta:hover { background: var(--accent-on-inverse); }
.itos-nav--inverse .itos-nav__menu { border-color: var(--inverse-line); }
.itos-nav--inverse a:focus-visible, .itos-nav--inverse button:focus-visible { outline-color: var(--on-inverse); }

/* Mark: Overlap, held and linked. Ink blocks, accent overlap by default. Ink and brass follow the ground; override with --itos-mark-ink / --itos-mark-brass. */
.itos-mark { overflow: visible; }
.itos-mark__b { fill: var(--itos-mark-ink, var(--ink)); }
.itos-mark__line { fill: none; stroke: var(--itos-mark-ink, var(--ink)); stroke-width: 7; }
.itos-mark__br { fill: var(--itos-mark-brass, var(--accent)); }
.itos-mark rect { transition: fill 700ms cubic-bezier(0.22, 1, 0.36, 1), stroke 700ms cubic-bezier(0.22, 1, 0.36, 1); }

/* Preloader: white ground, the mark assembles in four stages, a counter in corner brackets. */
.itos-preloader {
  --itos-mark-ink: var(--ink); --itos-mark-brass: var(--accent);
  position: fixed; inset: 0; z-index: 100; background: var(--ground);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
  transition: background-color 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.itos-preloader--absolute { position: absolute; }
.itos-preloader__stage { position: absolute; inset: 0; display: grid; place-items: center; }
.itos-preloader__mark { transform-origin: center; will-change: transform;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.itos-preloader__mark .itos-mark { display: block; }
.itos-preloader__count {
  position: absolute; left: 50%; bottom: var(--space-12); transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 2px; padding: 10px 16px;
  color: var(--muted); font: 500 12px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  letter-spacing: 0.08em; font-variant-numeric: tabular-nums;
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.itos-preloader__num { color: var(--ink); }
.itos-preloader__stage-label { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line); color: var(--ink); text-transform: uppercase; letter-spacing: 0.16em; min-width: 6.5em; }
.itos-preloader__br { position: absolute; width: 7px; height: 7px; border: 0 solid var(--line-strong); }
.itos-preloader__br--tl { left: 0; top: 0; border-left-width: var(--stroke-bracket); border-top-width: var(--stroke-bracket); }
.itos-preloader__br--tr { right: 0; top: 0; border-right-width: var(--stroke-bracket); border-top-width: var(--stroke-bracket); }
.itos-preloader__br--bl { left: 0; bottom: 0; border-left-width: var(--stroke-bracket); border-bottom-width: var(--stroke-bracket); }
.itos-preloader__br--br { right: 0; bottom: 0; border-right-width: var(--stroke-bracket); border-bottom-width: var(--stroke-bracket); }
.itos-preloader.is-relay { background-color: transparent; pointer-events: none; }
.itos-preloader.is-relay .itos-preloader__count { opacity: 0; }

/* When the full bar does not fit, the links collapse into a menu that names the current section. */
.itos-nav.is-compact .itos-nav__links { display: none; }
.itos-nav.is-compact .itos-nav__menu { display: inline-flex; }
@media (max-width: 420px) {
  .itos-nav__name { display: none; }
  .itos-nav__brand { padding: 0 0 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .itos-nav *, .itos-nav *::before, .itos-nav *::after { transition: none !important; }
}