/* Shared look for every page of the site: palette tokens (Blueprint default, Paper), type, header and basics. */
:root {
  --bg: #0a0f1c; --bg-2: #0f1730; --card: #111a33; --grid: rgba(120, 160, 255, .07);
  --ink: #e8edf7; --muted: #8e9bb8; --line: #29355a;
  --flow: #5ee6c8; --wip: #ffb547; --gov: #9d8cff; --defect: #ff6b7a; --idle: #53638a;
  --wipt: rgba(255, 181, 71, .16);
  --spot: rgba(94, 230, 200, .13); --char-shadow: rgba(0, 0, 0, .55);
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* process-group colours: fill, ink (text and strokes), tint (backgrounds) */
  --pg0: #6ea8ff; --pg1: #5ee6c8; --pg2: #ffb547; --pg3: #9d8cff; --pg4: #c3f07a;
  --pg0i: #6ea8ff; --pg1i: #5ee6c8; --pg2i: #ffb547; --pg3i: #9d8cff; --pg4i: #c3f07a;
  --pg0t: rgba(110, 168, 255, .12); --pg1t: rgba(94, 230, 200, .1); --pg2t: rgba(255, 181, 71, .1); --pg3t: rgba(157, 140, 255, .12); --pg4t: rgba(195, 240, 122, .1);
}
:root[data-theme="paper"] {
  --bg: #f6f3ec; --bg-2: #ede7da; --card: #fffdf8; --grid: rgba(20, 30, 60, .055);
  --ink: #131a2c; --muted: #5a6278; --line: #d3cbba;
  --flow: #0b9a7e; --wip: #d4820c; --gov: #5b4bd6; --defect: #d63c4f; --idle: #aaa392;
  --wipt: rgba(212, 130, 12, .12);
  --spot: rgba(19, 26, 44, .07); --char-shadow: rgba(19, 26, 44, .2);
  --pg0i: #2f6fd6; --pg1i: #0b8f75; --pg2i: #b86f06; --pg3i: #5b45cc; --pg4i: #4f7f12;
  --pg0t: rgba(47, 111, 214, .08); --pg1t: rgba(11, 143, 117, .08); --pg2t: rgba(184, 111, 6, .08); --pg3t: rgba(91, 69, 204, .08); --pg4t: rgba(79, 127, 18, .08);
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
html, body { margin: 0; }
body {
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--ink); font: 400 16px/1.6 var(--sans);
  transition: background-color .4s, color .4s;
}

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--line); position: relative; z-index: 3; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
/* logo: an A with a flow line through it like a conductor's baton, plus the aramflow wordmark */
.logo-mark { width: 36px; height: 36px; display: block; flex: none; }
.logo-word { font: 700 20px var(--display); letter-spacing: -.02em; color: var(--ink); }
.logo-word b { color: var(--flow); font-weight: 700; }
.logo-tip { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .brand:hover .logo-wave { stroke-dasharray: 5 3; animation: logoflow .9s linear infinite; }
  .brand:hover .logo-tip { animation: logotip .6s ease-in-out infinite alternate; }
}
@keyframes logoflow { to { stroke-dashoffset: -16; } }
@keyframes logotip { to { transform: scale(1.8); opacity: .5; } }
.mark { font: 700 14px var(--display); letter-spacing: .04em; width: 36px; height: 36px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 10px; }
.name { font: 600 15px var(--display); letter-spacing: .01em; }
nav { display: flex; gap: 28px; font: 500 13px var(--sans); color: var(--muted); }
nav a { color: inherit; text-decoration: none; transition: color .2s; }
nav a:hover, nav a[aria-current="page"] { color: var(--ink); }
.switch { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.switch button { font: 500 12px var(--mono); color: var(--muted); background: none; border: 0; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--flow); margin: 0 0 18px; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--flow); border-radius: 2px; }
h2 { font: 600 clamp(1.9rem, 3.6vw, 2.8rem)/1.1 var(--display); letter-spacing: -.015em; margin: 0 0 12px; }
.section-head { max-width: 760px; margin: 0 auto 24px; text-align: center; }
.sub { color: var(--muted); margin: 0; }
.btn { font: 500 14px var(--sans); padding: 12px 20px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; background: transparent; }
.btn.primary { background: var(--flow); border-color: var(--flow); color: var(--bg); }
.note { padding: 26px clamp(16px, 4vw, 48px) 40px; border-top: 1px solid var(--line); font: 400 12px var(--mono); color: var(--muted); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 760px) { nav { display: none; } .name { display: none; } }