/* Shared tokens, brand, full navigation, and breadcrumbs for every Teaching3D page. */
:root {
  color-scheme: light;
  --tint: #eef5f7;
  /* ink & paper */
  --ink: #0a0e13;
  --ink-2: #26313b;
  --muted: #5a6876;
  --line: rgba(10, 14, 19, .09);
  --paper: #ffffff;
  --bg: #f5f8f9;
  --steel: #8fb1bc;        /* from the original Teaching3D logo */
  --steel-d: #4d6870;

  /* aurora */
  --azure: #155cb8;
  --cyan: #0fa7c4;
  --teal: #13b39f;
  --green: #35cf86;
  --aurora: linear-gradient(105deg, var(--azure) 0%, var(--cyan) 38%, var(--teal) 64%, var(--green) 100%);

  /* night (viewport bands) */
  --night: #06090c;
  --night-2: #0d1217;
  --night-3: #151c23;
  --night-line: rgba(255, 255, 255, .07);
  --night-text: #dfe7ec;
  --night-muted: #8a9aa6;
  --axis-x: #e25c5c;
  --axis-y: #7fd35b;
  --axis-z: #4f8dff;
  --hud: #f0a33a;          /* EzWings status-line orange */

  /* glass */
  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .82);
  --glass-brd: rgba(255, 255, 255, .85);
  --glass-dark: rgba(16, 24, 31, .55);
  --glass-dark-brd: rgba(255, 255, 255, .12);

  --r-s: 10px;
  --r: 18px;
  --r-l: 28px;
  --shadow: 0 1px 2px rgba(10, 30, 45, .06), 0 12px 32px -14px rgba(10, 40, 60, .28);
  --shadow-lift: 0 2px 4px rgba(10, 30, 45, .06), 0 24px 48px -18px rgba(10, 40, 60, .38);

  --f-head: "Sora", "Segoe UI", system-ui, sans-serif;
  --f-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
}

.mark { display: inline-block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.mark-icon { --m: url(../assets/icon.svg); aspect-ratio: 1; }
.mark-word { --m: url(../assets/wordmark-mixed-medium.svg); aspect-ratio: 9.71 / 1.3; }
.mark-word-semi { --m: url(../assets/wordmark-mixed-semibold.svg); aspect-ratio: 9.33 / 1.3; }
.mark-word-heavy { --m: url(../assets/wordmark-heavy.svg); aspect-ratio: 10.84 / 1; }
.mark.aurora { background: var(--aurora); }

.nav { position: sticky; top: 0; z-index: 50; padding: 12px 0; }
.nav-in { display: flex; align-items: center; gap: 18px; padding: 10px 12px 10px 18px; border-radius: 99px; background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--shadow); }
.nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.nav .brand .mark-icon { width: 34px; }
.nav .brand .mark-word { height: 19px; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { text-decoration: none; font-size: .93rem; font-weight: 500; color: var(--ink-2); padding: .45em .6em; border-radius: 99px; }   /* .6em: all eight fit beside the button on wide screens */
.nav-links a:hover { background: rgba(10, 14, 19, .05); }
.nav-burger { margin-left: 10px; }   /* the main menu button, at every width; its look: css/menu.css */
.nav { font-family: var(--f-body); font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.nav .wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.nav .brand { flex: none; }
.nav .btn { display: inline-flex; align-items: center; gap: .55em; height: 38px; padding: 0 1em; border-radius: 99px; font-weight: 600; font-size: .9rem; text-decoration: none; border: 1px solid transparent; white-space: nowrap; background: var(--ink); color: #fff; box-shadow: 0 10px 24px -12px rgba(10, 14, 19, .7); }
.nav .btn:hover { color: #fff; transform: translateY(-1px); }
.nav a:focus-visible, .breadcrumbs a:focus-visible { outline: 3px solid var(--azure); outline-offset: 3px; }
.breadcrumbs { width: min(var(--wrap), 100% - 2 * var(--gut)); margin: 8px auto 0; font: .88rem/1.5 var(--f-body); color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li { display: inline-flex; align-items: baseline; gap: 10px; }
.breadcrumbs li + li::before { content: "›"; color: var(--muted); }
.breadcrumbs a { color: var(--azure); text-underline-offset: .18em; }
.breadcrumbs [aria-current] { color: var(--ink-2); }
.nav-btn-down + .breadcrumbs { padding-top: 38px; }
.skip-link { position: fixed; left: 16px; top: -120px; z-index: 2000; padding: 12px 18px; background: #fff; color: #0a0e13; border: 2px solid #155cb8; border-radius: 8px; }
.skip-link:focus { top: 12px; }
@media (max-width: 760px) {
  .nav-links, .nav .btn { display: none; }
  .nav-in { padding: 8px 8px 8px 14px; }
  .nav-burger { margin-left: auto; }
}
/* The inline links show only while they fit (js/menu.js measures): at the top of the page the
   button nudges down below the bar to make room (.nav-btn-down, Joe 2026-10-05); otherwise the
   links tuck into the menu (.nav-compact) — they're all in it anyway. Without JS they clip
   instead of running under the button. */
.nav-links { overflow: hidden; }
.nav-in { position: relative; }
/* at the top of the page, if the links only fit without it, the button nudges down below the bar */
.nav-btn-down .nav-in > .btn { position: absolute; right: 12px; top: calc(100% + 8px); box-shadow: var(--shadow); }
.nav-compact .nav-links { display: none; }
.nav-compact .btn { margin-left: auto; }
.nav-compact .nav-burger { margin-left: 12px; }
@media (max-width: 760px) { .nav .btn { display: none; } .nav-burger { margin-left: auto; } }

/* nav at in-between widths (Joe, 2026-10-04): never wrap, never push the button out of the pill */
.nav-in { min-width: 0; }
.nav-links { flex-wrap: nowrap; min-width: 0; }
.nav-links a { white-space: nowrap; }
.nav-in > .btn { flex: none; }
@media (max-width: 1340px) { .nav-links a { padding: .45em .6em; } }
@media (max-width: 1220px) { .nav-links { gap: 0; } .nav-links a { padding: .45em .5em; font-size: .9rem; } }


@media print { .nav, .breadcrumbs, .menu-panel, .skip-link { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .nav * { transition: none !important; } }