:root {
  --ground: #050607;
  --raised: #0d0f12;
  --line: #1d2026;
  --ink: #e8e8ee;
  --ink-2: #bcbcc6;
  --faint: #8a8a96;
  --accent: #19f0d8;
  --accent-ink: #021412;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 6.5rem;
  --radius: 10px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
code { font-family: var(--mono); font-size: .92em; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.015em; }
p { margin: 0; }

.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;
}
.skip {
  position: absolute; left: var(--s2); top: -3rem; z-index: 10;
  background: var(--accent); color: var(--accent-ink); padding: .5rem .9rem;
  border-radius: 6px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--s2); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* header */
.site-header { border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; }
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: .02em;
}
.brand-mark { width: 1.6rem; height: 1.6rem; color: var(--accent); }
.nav-link { color: var(--ink-2); text-decoration: none; font-size: .95rem; padding: .6rem 0; }
.nav-link:hover { color: var(--ink); text-decoration: underline; }

/* hero */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--s5); align-items: center;
  padding-top: var(--s6); padding-bottom: var(--s6);
}
.eyebrow {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); margin-bottom: var(--s3);
}
h1 { font-size: clamp(2.5rem, 6.2vw, 4.6rem); line-height: 1.03; letter-spacing: -.03em; }
.lede { margin-top: var(--s3); font-size: clamp(1.08rem, 1.6vw, 1.22rem); color: var(--ink-2); max-width: 36rem; }
.cta-row { margin-top: var(--s4); }
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 3rem; padding: 0 1.4rem; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; text-decoration: none;
  transition: transform .12s ease, background-color .12s ease;
}
.btn:hover { background: #6af7e6; }
.btn:active { transform: translateY(1px); }

figure { margin: 0; }
figcaption { margin-top: var(--s2); font-size: .85rem; color: var(--faint); max-width: 34rem; }
.fig-n { font-family: var(--mono); color: var(--ink-2); margin-right: .4rem; }
.hero-fig { justify-self: center; width: 100%; max-width: 30rem; }
.graph { display: block; width: 100%; height: auto; overflow: visible; }

/* breathing: 4 s in, 6 s out. Disabled under reduced motion. */
.breath { transform-origin: 0 0; animation: breathe 10s cubic-bezier(.45, 0, .55, 1) infinite; }
.e-out { animation: assoc 10s cubic-bezier(.45, 0, .55, 1) infinite; }
.core-halo { transform-origin: 0 0; animation: halo 10s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.955); } 40% { transform: scale(1.03); } }
@keyframes assoc { 0%, 100% { stroke-opacity: .35; } 40% { stroke-opacity: .85; } }
@keyframes halo { 0%, 100% { transform: scale(.85); stroke-opacity: .2; } 40% { transform: scale(1.25); stroke-opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
  .breath, .e-out, .core-halo { animation: none; }
  .btn { transition: none; }
}

/* section: what persists */
.band { background: var(--raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s6) 0; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; max-width: 40rem; }
.grid4 {
  list-style: none; margin: var(--s4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5);
}
.grid4 li { border-top: 1px solid var(--line); padding-top: var(--s3); }
.idx { display: block; font-family: var(--mono); font-size: .8rem; color: var(--faint); margin-bottom: var(--s1); }
.grid4 h3 { font-size: 1.2rem; margin-bottom: var(--s1); }
.grid4 p { color: var(--ink-2); max-width: 34rem; }
.sig { color: var(--ink); white-space: nowrap; }
.sig::before {
  content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%;
  background: var(--c); margin-right: .3em; vertical-align: .05em;
}

/* channel colours (fixed across therobot.is figures) */
.c-semantic { --c: #19f0d8; } .c-lexical { --c: #ffb000; } .c-contextual { --c: #a3ff5c; }
.c-affective { --c: #ff4d6d; } .c-structural { --c: #a78bff; } .c-fused { --c: var(--ink); }

/* section: fusion */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s5); align-items: start; padding-top: var(--s6); padding-bottom: var(--s6);
}
.split-copy > * + * { margin-top: var(--s2); }
.split-copy p { color: var(--ink-2); max-width: 36rem; }
.split-copy .sub { margin-top: var(--s4); font-size: 1.2rem; color: var(--ink); }
.formula {
  font-size: 1.02rem; color: var(--ink) !important; background: var(--raised);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) var(--s3);
  overflow-x: auto;
}
.formula code { font-size: 1em; }
.nw { white-space: nowrap; }

.rrf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 8.5rem);
  gap: var(--s2); align-items: center;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s3);
}
.lanes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.lane-h {
  font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .04em;
  color: var(--c); padding-bottom: .35rem; margin-bottom: .45rem;
  border-bottom: 2px solid var(--c); overflow: hidden; text-overflow: ellipsis;
}
.lane-h abbr { text-decoration: none; }
.lane-l { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: .78rem; color: var(--ink-2); }
.lane-l li { padding: .2rem 0; }
.arrow { color: var(--faint); font-size: 1.3rem; }
.fused .lane-l li { display: flex; justify-content: space-between; gap: .5rem; color: var(--ink); }
.fused .sc { color: var(--faint); }
.fused .lane-l li:first-child span:first-child { color: var(--accent); }

/* closing */
.closing { border-top: 1px solid var(--line); padding: var(--s6) 0; }
.closing-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.closing h2 { max-width: 38rem; font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 500; color: var(--ink-2); }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding: var(--s4) 0; color: var(--faint); font-size: .9rem; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); }
.site-footer a { color: var(--ink-2); }

@media (max-width: 60rem) {
  .hero, .split { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .hero { padding-top: var(--s5); padding-bottom: var(--s5); }
  .hero-fig { max-width: 24rem; }
  .split { padding-top: var(--s5); padding-bottom: var(--s5); }
}
@media (max-width: 40rem) {
  .grid4 { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .band, .closing { padding: var(--s5) 0; }
  .closing-inner { flex-direction: column; align-items: flex-start; }
  .rrf { grid-template-columns: minmax(0, 1fr); padding: var(--s2); }
  .arrow { transform: rotate(90deg); justify-self: center; }
  .lanes { gap: .4rem; }
  .lane-l { font-size: .7rem; }
}

.notfound { padding-top: var(--s6); padding-bottom: var(--s6); }