:root { --ink: #1d1d1b; --soft: #5b5b57; --line: #e3e0d8; --accent: #8a5a2b; --bg: #fbfaf7; --panel: #f3f1ec; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 17px/1.6 "Helvetica Neue", Arial, system-ui, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
h1 { font-size: 2.3rem; line-height: 1.15; margin: 0 0 6px; }
h2 { font-size: 1.35rem; margin: 64px 0 8px; padding-top: 24px; border-top: 1px solid var(--line); }
h3 { font-size: 1.15rem; margin: 40px 0 4px; }
h4 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); margin: 22px 0 6px; }
p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 20px; }
li { margin-bottom: 6px; }
a { color: var(--accent); }
.lang { float: right; margin: 4px 0 0 16px; padding: 9px 20px; border: 2px solid var(--ink); border-radius: 6px;
        color: var(--ink); font-size: 1rem; font-weight: 600; text-decoration: none; }
.lang:hover { background: var(--ink); color: #fff; }
.role { font-size: 1.15rem; color: var(--soft); margin: 0 0 18px; }
.contact { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .95rem; margin-bottom: 8px; }
.button { display: inline-block; margin-top: 18px; padding: 10px 18px; border-radius: 6px;
          background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; }
.when { display: block; font-weight: 400; font-size: .85rem; color: var(--soft); margin-top: 2px; }
.method { background: var(--panel); border-radius: 8px; padding: 4px 20px 8px; margin: 18px 0; }
.method p, .method li { font-size: .95rem; }
figure { margin: 20px 0; }
figure img { width: 100%; border: 1px solid var(--line); border-radius: 6px; }
figcaption { font-size: .88rem; color: var(--soft); margin-top: 6px; }
.job { margin-top: 26px; }
.job b { display: block; }
nav { font-size: .95rem; margin-top: 28px; }
nav a { margin-right: 18px; }
footer { margin-top: 64px; font-size: .85rem; color: var(--soft); }
/* Red Cat walkthrough. Series slots 1-3 of the validated reference palette,
   all-pairs safe; slot 3 is below 3:1, so its line is direct-labelled. */
:root { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-theme: #4a3aa7; --viz-muted: #d3d0c8; }
.walk { margin: 28px 0; }
.step { margin: 34px 0; }
.card.now { border: 2px solid var(--series-1); margin-top: 4px; }
.arrow { text-align: center; font-size: 1.4rem; color: var(--soft); margin: 2px 0; }
ul.does { list-style: none; padding-left: 0; }
ul.does li { margin-bottom: 4px; color: var(--soft); }
ul.does b { display: inline; color: var(--ink); font-weight: 600; margin-right: 6px; }
ol.timeline { list-style: none; padding: 0; margin: 10px 0; font-size: .9rem; }
ol.timeline li { display: grid; grid-template-columns: 52px 92px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
ol.timeline .t { font-variant-numeric: tabular-nums; font-weight: 600; }
figure.shot { margin: 14px 0 18px; }
figure.shot img { border: 0; border-radius: 6px; box-shadow: 0 1px 6px rgba(0,0,0,.18); }
article.project { margin-top: 88px; }
.project-head { border-top: 4px solid var(--ink); padding-top: 18px; margin-bottom: 18px; }
.project-n { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.project-head h3 { font-size: 1.7rem; line-height: 1.2; margin: 4px 0 4px; }
.project-head .when { font-size: .9rem; }
.step.wrap { border-left: 3px solid var(--series-1); padding-left: 16px; }
.step-n { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.step h4 { font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 2px 0 8px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; }
.card h5 { margin: 0; font-size: .8rem; color: var(--soft); font-weight: 600; }
.card-label { font-weight: 600; margin: 2px 0 8px; }
.card-sub { font-size: .85rem; color: var(--soft); margin: 0 0 4px; }
.card ul { margin: 0; padding-left: 18px; font-size: .92rem; }
.chunk { border-radius: 8px; padding: 10px 14px; margin: 10px 0; font: 14px/1.55 Georgia, serif; }
.chunk p { margin: 4px 0 0; }
.chunk-tag { font: 600 .75rem "Helvetica Neue", Arial, sans-serif; color: var(--soft); }
.chunk.vetoed { background: #f0efec; color: #8d8b85; }
.chunk.vetoed p { text-decoration: line-through; text-decoration-color: #b9b6ae; }
.chunk.kept { background: #fff; border: 1px solid var(--line); }
mark { background: #fbe3a6; padding: 0 2px; }
table.peers { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 10px 0; }
.peers th { text-align: left; font-weight: 600; color: var(--soft); font-size: .78rem; border-bottom: 1px solid var(--line); padding: 4px 6px; }
.peers td { border-bottom: 1px solid var(--line); padding: 5px 6px; vertical-align: top; }
.peers .num { text-align: right; font-variant-numeric: tabular-nums; }
.peers .terms { color: var(--soft); font-size: .82rem; }
.chip { white-space: nowrap; font-size: .82rem; }
.chip i, .viz-tip i, .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
canvas.map { width: 100%; aspect-ratio: 4 / 3; display: block; background: #fcfcfb; border: 1px solid var(--line); border-radius: 8px; cursor: crosshair; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .85rem; margin: 8px 0 4px; }
.viz { width: 100%; }
.viz svg { width: 100%; height: auto; display: block; }
.ax-lab { font: 11px "Helvetica Neue", Arial, sans-serif; fill: var(--soft); }
.ax-lab.ink { fill: var(--ink); font-size: 12px; }
.viz-tip { position: fixed; display: none; pointer-events: none; z-index: 10; background: #fff; border: 1px solid var(--line);
           border-radius: 6px; padding: 6px 10px; font-size: .82rem; line-height: 1.45; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.viz-tip span { color: var(--soft); }
.note { font-size: .88rem; color: var(--soft); }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; font-size: .85rem; }
.flow span { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; line-height: 1.35; }
.flow b { color: var(--soft); }
.peers .w { font-weight: 400; font-size: .72rem; }
.peers td .terms { display: block; margin-top: 2px; }
.bar { display: inline-block; height: 10px; border-radius: 0 4px 4px 0; background: var(--soft); vertical-align: middle; }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } .peers .terms { display: none; } }