/* chnlsync.com redesign: shared pieces (fonts, lockup). Copied from the redesign lab's shared/base.css for
   /privacy, which ships in the new look before the relaunch; the lab bar rules below aren't used here. */

@font-face { font-family: "D-DIN"; src: url("fonts/d-din-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "D-DIN"; src: url("fonts/d-din-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --inter: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ddin: "D-DIN", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --blue: #3D8BFF;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
/* The lab's typeface switch. Each direction sets its own default on <html data-font>. */
html[data-font="inter"] { --sans: var(--inter); --display: var(--inter); }
html[data-font="ddin"]  { --sans: var(--ddin);  --display: var(--ddin); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #000; color: #f4f4f2; font-family: var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 3px; }

/* The lockup: wave-mark + CHNLSYNC in Switzer Bold caps, +0.14em (Brand Lock v2, compact proportions). */
.lockup { display: inline-flex; align-items: center; gap: 11px; }
.lockup svg { width: 20px; height: auto; flex: none; }
.lockup b { font-family: "Switzer", var(--inter); font-weight: 700; font-size: 14px; letter-spacing: .14em; line-height: 1; }

/* ---------- Lab bar ---------- */
.labbar { position: fixed; z-index: 1000; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(18,18,20,.82); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 40px rgba(0,0,0,.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font: 500 12px/1 var(--inter); color: #d9d9de; max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
.labbar::-webkit-scrollbar { display: none; }
.labbar .tag { padding: 0 8px 0 10px; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8b8b93; white-space: nowrap; }
.labbar a, .labbar button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; white-space: nowrap; color: #c9c9cf; transition: background .2s, color .2s; }
.labbar a:hover, .labbar button:hover { background: rgba(255,255,255,.08); color: #fff; }
.labbar a[aria-current="page"] { background: #f4f4f2; color: #000; }
.labbar .sep { width: 1px; height: 18px; background: rgba(255,255,255,.14); margin: 0 4px; flex: none; }
.labbar .seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.06); }
.labbar .seg button { height: 26px; padding: 0 10px; }
.labbar .seg button[aria-pressed="true"] { background: rgba(255,255,255,.16); color: #fff; }
.labbar .seg .swatch { width: 20px; height: 20px; padding: 0; margin: 3px 2px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.labbar .seg .swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #121214, 0 0 0 3.5px #f4f4f2; }
.labbar .hide { width: 30px; padding: 0; justify-content: center; color: #8b8b93; }
html.bare .labbar { display: none; }
@media (max-width: 720px) { .labbar { left: 12px; right: 12px; bottom: 12px; } }
@media print { .labbar { display: none; } }