/* dataslice.info — minimal, dark-first. Tokens come from tokens.css (generated from brand/tokens.json). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background-color: var(--ink); color: var(--paper);
  font: 400 17px/1.55 var(--font-sans); -webkit-font-smoothing: antialiased;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 40px 40px; background-position: -1px -1px;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; }
.muted { color: var(--mute); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); color: var(--ink); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 16px; }
:focus-visible { outline: 2px solid var(--slice); outline-offset: 3px; border-radius: 6px; }

/* ── top bar ───────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 24px;
  max-width: 1160px; margin: 0 auto; padding: 28px 40px;
  background: linear-gradient(var(--ink) 60%, transparent);
}
.logo img { height: 28px; width: auto; }
.meta { color: var(--mute); text-transform: uppercase; }
.meta b { color: var(--paper); font-weight: 500; }
.nav { margin-left: auto; display: flex; gap: 34px; font-size: 18px; font-weight: 500; }
.nav a { position: relative; transition: color .15s; }
.nav a:hover { color: var(--slice); }

main { max-width: 1160px; margin: 0 auto; padding: 0 40px; }

/* ── hero ──────────────────────────────────────────── */
.hero { position: relative; padding: 120px 0 40px; }
.headline {
  margin: 0; overflow-wrap: break-word; font-weight: 720; letter-spacing: -0.045em; line-height: 0.98;
  font-size: clamp(56px, 10.5vw, 132px); max-width: 10ch;
}
.hue > span { display: inline-block; white-space: nowrap; }
.hue i { display: inline-block; font-style: normal; transition: color .35s, transform .35s cubic-bezier(.2,.8,.2,1); }
.hue i:hover { transform: translateY(-6px); }
.lede { max-width: 540px; margin: 28px 0 0; font-size: 20px; color: var(--paper-2); }
.lede b { color: var(--paper); font-weight: 600; }
.hint { margin-top: 18px; color: var(--mute); }

.dia { position: relative; margin-top: 64px; }
.diagram { display: block; width: 100%; height: auto; color: rgba(245,244,240,0.5); overflow: visible; }
.wires path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s cubic-bezier(.6,0,.2,1) forwards; }
.wires path:nth-child(2) { animation-delay: .15s; } .wires path:nth-child(3) { animation-delay: .3s; }
.wires path:nth-child(4) { animation-delay: .45s; } .wires path:nth-child(5) { animation-delay: .6s; }
.dots circle { opacity: 0; animation: pop .3s ease-out forwards; animation-delay: 1.5s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { opacity: 1; } }
.tags { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.tags li {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  padding: 7px 16px; border-radius: 999px; border: 1.5px solid rgba(245,244,240,0.6); background: var(--ink);
  font: 600 12px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  pointer-events: auto; cursor: default; transition: background .2s, color .2s, border-color .2s;
}
.tags li:hover { background: var(--c); border-color: var(--c); color: var(--ink); }

h2 {
  margin: 0; padding-top: 22px; border-top: 1px solid var(--line);
  font: 600 15px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
}

/* ── about ─────────────────────────────────────────── */
.about { padding: 60px 0 100px; }
.about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; margin-top: 32px; }
.about-grid p { margin: 0; font-size: 22px; line-height: 1.5; color: var(--paper-2); }
.about-grid p b { color: var(--paper); }
.facts { margin: 0; display: grid; gap: 0; font-size: 13px; }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--mute); text-transform: uppercase; }
.facts dd { margin: 0; text-align: right; }

/* ── footer ────────────────────────────────────────── */
.foot { max-width: 1160px; margin: 0 auto; padding: 40px 40px 56px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.pill { padding: 12px 20px; border-radius: 999px; background: var(--ink-3); font-size: 14px; transition: background .2s, color .2s; }
.pill:hover { background: var(--slice); color: var(--ink); }
.social { display: flex; gap: 12px; flex-wrap: wrap; }
.foot > .muted { margin-left: auto; }
.by { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); font-size: 12px; color: var(--mute); transition: color .2s, border-color .2s; }
.by b { color: var(--paper); font-weight: 600; }
.by:hover { color: var(--paper); border-color: var(--slice); }

/* ── mobile ────────────────────────────────────────── */
@media (max-width: 720px) {
  .bar { padding: 18px 16px; gap: 14px; }
  .meta { display: none; }
  .nav { gap: 18px; font-size: 16px; }
  main { padding: 0 16px; }
  .hero { padding: 64px 0 24px; }
  .lede { font-size: 18px; }
  .diagram { display: none; }
  .dia { margin-top: 36px; }
  .tags { position: static; display: flex; flex-wrap: wrap; gap: 10px; }
  .tags li { position: static; transform: none; background: var(--c); border-color: var(--c); color: var(--ink); padding: 11px 18px; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-grid p { font-size: 19px; }
  .foot { padding: 32px 16px 40px; gap: 18px; }
  .foot > .muted { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wires path { animation: none; stroke-dashoffset: 0; } .dots circle { animation: none; opacity: 1; }
  .hue i { transition: none; }
}