/* RAEngineered - architecture reframe. Tokens match the live site
   (raengineered.github.io) so these pages can drop in beside it. */
:root {
  color-scheme: light dark;
  --bg:#fbfaf9; --fg:#171414; --muted:#68635f; --line:#e2dedb;
  --card:#ffffff; --accent:#45101B; --gold:#8a6718; --rule:#45101B;
  --accent-soft:#f4efee; --code-bg:#f6f1f0;
  --good:#2f6b3a; --good-soft:#e6f0e7; --warn:#8a6718; --warn-soft:#f5eedc;
  --bad:#9b2c25; --bad-soft:#f7e4e2; --flow:#8a6718; --tok2:#45101B;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#120F10; --fg:#F4EFEE; --muted:#98918e; --line:#2b2527;
    --card:#1A1517; --accent:#C9A24A; --gold:#C9A24A; --rule:#5A1322;
    --accent-soft:#3C0B16; --code-bg:#1a1016;
    --good:#7CAA6E; --good-soft:#1d2a1e; --warn:#C9A24A; --warn-soft:#2d2514;
    --bad:#d27a70; --bad-soft:#331715; --flow:#C9A24A; --tok2:#e0877b;
  }
}
:root[data-theme="dark"] {
  --bg:#120F10; --fg:#F4EFEE; --muted:#98918e; --line:#2b2527;
  --card:#1A1517; --accent:#C9A24A; --gold:#C9A24A; --rule:#5A1322;
  --accent-soft:#3C0B16; --code-bg:#1a1016;
  --good:#7CAA6E; --good-soft:#1d2a1e; --warn:#C9A24A; --warn-soft:#2d2514;
  --bad:#d27a70; --bad-soft:#331715; --flow:#C9A24A; --tok2:#e0877b;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  border-top:4px solid var(--rule);
  font:16px/1.6 var(--sans);
}
.wrap { max-width:60rem; margin:0 auto; padding:0 1rem; }
a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px; }
code { font-family:var(--mono); font-size:.88em; background:var(--code-bg); padding:.05rem .3rem; border-radius:.25rem; }
hr { border:0; border-top:1px solid var(--line); margin:3rem 0; }

/* ---- top nav (case-study pages) ---- */
.topnav { border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:5; }
.topnav .wrap { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; padding-top:.6rem; padding-bottom:.6rem; font-size:.85rem; }
.topnav a { color:var(--muted); text-decoration:none; }
.topnav a:hover, .topnav a[aria-current] { color:var(--fg); }
.topnav .brand { font-family:var(--mono); color:var(--accent); font-weight:600; margin-right:auto; }

/* ---- project tabs (every page) ---- */
.topnav .brand { text-decoration:none; }
.ptabs { display:flex; gap:.4rem; flex-wrap:wrap; }
.ptab { font-size:.82rem; font-weight:500; color:var(--muted); text-decoration:none; border:1px solid var(--line);
  border-radius:2rem; padding:.3rem .85rem; white-space:nowrap; transition:border-color .15s, color .15s; }
.topnav a.ptab:hover { color:var(--fg); border-color:var(--accent); }
.topnav a.ptab[aria-current="page"] { color:var(--bg); background:var(--accent); border-color:var(--accent); }
.ptab .pt-k { font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; margin-right:.3rem; opacity:.8; }
.subnav { display:flex; gap:.9rem; flex-wrap:wrap; width:100%; font-size:.78rem; padding-top:.1rem; }
.subnav a { color:var(--muted); }
.subnav a[aria-current="page"] { color:var(--fg); text-decoration:underline; }
.subnav .sn-l { font-family:var(--mono); font-size:.7rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }

/* ---- home header ---- */
.home-head { padding:4rem 0 0; }
.avatar { width:72px; height:72px; border-radius:.75rem; display:block; margin:0 0 1rem; background:var(--accent); }
h1 { font-size:clamp(2rem,5vw,2.75rem); line-height:1.12; margin:0 0 .35rem; letter-spacing:-.02em; text-wrap:balance; }
.home-head h1::after { content:""; display:block; width:2.5rem; height:3px; background:var(--gold); border-radius:2px; margin:.6rem 0 .1rem; }
.tagline { color:var(--accent); font-weight:600; margin:0 0 .25rem; }
.loc { color:var(--muted); margin:0 0 1.25rem; font-size:.9rem; }
.lede { font-size:1.1rem; max-width:44rem; margin:0 0 1.5rem; }
.links { display:flex; gap:1rem; flex-wrap:wrap; }
.links a { color:var(--fg); }

/* ---- case-study hero ---- */
.hero { padding:3rem 0 1rem; }
.kicker { font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin:0 0 .5rem; }
.standfirst { font-size:1.12rem; max-width:46rem; color:var(--fg); }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0; }
.chip { font-size:.75rem; color:var(--muted); border:1px solid var(--line); border-radius:.35rem; padding:.1rem .45rem; }
.meta { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; font-size:.85rem; color:var(--muted); }
.meta b { color:var(--fg); font-weight:600; }

/* ---- sections ---- */
section.sec { padding:2.5rem 0 1rem; border-top:1px solid var(--line); margin-top:2rem; }
.sec-num { font-family:var(--mono); font-size:.75rem; color:var(--muted); margin:0 0 .25rem; letter-spacing:.05em; }
h2 { font-size:clamp(1.35rem,3vw,1.7rem); line-height:1.2; margin:0 0 .75rem; letter-spacing:-.01em; text-wrap:balance; }
h3 { font-size:1.05rem; margin:1.75rem 0 .5rem; }
p { max-width:46rem; }
.dim { color:var(--muted); font-size:.88rem; }

/* ---- tabs (home) ---- */
.tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2rem; }
.tabs .tab { font:inherit; font-size:.85rem; font-weight:500; color:var(--muted); background:transparent;
  border:1px solid var(--line); border-radius:2rem; padding:.4rem 1rem; cursor:pointer; }
.tabs .tab:hover { color:var(--fg); border-color:var(--accent); }
.tabs .tab:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.tabs .tab.active { color:var(--bg); background:var(--accent); border-color:var(--accent); }
.area-head h2 { font-size:1.35rem; margin:0 0 .2rem; color:var(--accent); }
.area-head p { color:var(--muted); margin:0 0 1.25rem; font-size:.95rem; }
.area[hidden] { display:none; }

.grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:.75rem; padding:1.25rem; display:flex; flex-direction:column; }
.card.featured { grid-column:1 / -1; }
.card h3 { margin:0 0 .5rem; font-size:1.05rem; }
.card h3 a { color:var(--fg); }
.card p { margin:0 0 .75rem; }
.card .go { margin-top:auto; font-size:.85rem; font-weight:600; }
.card-link { transition:border-color .15s, transform .15s; }
.card-link:hover { border-color:var(--accent); transform:translateY(-2px); }
.vis { font-size:.68rem; font-weight:500; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  border:1px solid var(--line); border-radius:1rem; padding:.1rem .5rem; white-space:nowrap; vertical-align:.15em; }
.vis-job, .vis-public { color:var(--accent); border-color:var(--accent); }
.vis-edu { color:var(--gold); border-color:var(--gold); }
ul.hi { margin:0 0 .9rem; padding-left:1.1rem; font-size:.92rem; color:var(--muted); }
ul.hi li { margin:.2rem 0; }
ul.stack { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 .75rem; padding:0; }
ul.stack li { font-size:.75rem; color:var(--muted); border:1px solid var(--line); border-radius:.35rem; padding:.1rem .45rem; }

/* ---- figures / animated diagrams ---- */
figure { margin:1.5rem 0; }
.anim { border:1px solid var(--line); border-radius:.75rem; background:var(--card); overflow:hidden; }
.anim-head { display:flex; justify-content:space-between; align-items:baseline; gap:.75rem; flex-wrap:wrap;
  padding:.6rem 1rem; border-bottom:1px solid var(--line); background:var(--code-bg);
  font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.anim-head b { color:var(--accent); font-weight:600; }
.anim .scroll-x { overflow-x:auto; }
.anim svg { display:block; width:100%; height:auto; min-width:560px; }
.anim svg.fit { min-width:0; }
.anim figcaption { padding:.6rem 1rem .85rem; font-size:.82rem; color:var(--muted); border-top:1px solid var(--line); }
.anim-ctrl { display:flex; gap:.5rem; flex-wrap:wrap; padding:.6rem 1rem; border-bottom:1px solid var(--line); }
.btn { font:inherit; font-size:.8rem; color:var(--fg); background:var(--card); border:1px solid var(--line);
  border-radius:2rem; padding:.3rem .85rem; cursor:pointer; }
.btn:hover { border-color:var(--accent); }
.btn[aria-pressed="true"] { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.btn:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* SVG vocabulary */
.n rect, rect.n { fill:var(--card); stroke:var(--line); stroke-width:1.5; }
.n-acc rect, rect.n-acc { fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.8; }
.n-good rect, rect.n-good { fill:var(--good-soft); stroke:var(--good); stroke-width:1.8; }
.n-bad rect, rect.n-bad { fill:var(--bad-soft); stroke:var(--bad); stroke-width:1.8; }
.n-warn rect, rect.n-warn { fill:var(--warn-soft); stroke:var(--warn); stroke-width:1.8; }
.n-ghost rect, rect.n-ghost { fill:none; stroke:var(--line); stroke-width:1.5; stroke-dasharray:5 4; }
.t { font-family:var(--sans); font-size:13px; font-weight:600; fill:var(--fg); }
.ts { font-family:var(--mono); font-size:10.5px; fill:var(--muted); }
.tl { font-family:var(--mono); font-size:10px; letter-spacing:.08em; fill:var(--muted); }
.ta { fill:var(--accent); }
.tg { fill:var(--good); }
.tb { fill:var(--bad); }
.e { stroke:var(--muted); stroke-width:1.5; fill:none; }
.e-acc { stroke:var(--accent); stroke-width:2; fill:none; }
.e-dash { stroke:var(--gold); stroke-width:1.8; fill:none; stroke-dasharray:6 5; }
.bus { stroke:var(--muted); stroke-width:4; stroke-linecap:round; fill:none; }
.bus-acc { stroke:var(--accent); stroke-width:4; stroke-linecap:round; fill:none; }
.ah { fill:var(--muted); }
.ah-acc { fill:var(--accent); }
.ah-gold { fill:var(--gold); }
.tok { fill:var(--gold); }
.tok-acc { fill:var(--tok2); }

@keyframes travel { from { offset-distance:0%; } to { offset-distance:100%; } }
@keyframes dash { to { stroke-dashoffset:-22; } }
.flowing { stroke-dasharray:6 5; animation:dash 1s linear infinite; }

/* ---- tables ---- */
.scroll { overflow-x:auto; margin:1rem 0; }
table { border-collapse:collapse; width:100%; font-size:.88rem; min-width:34rem; }
th, td { text-align:left; vertical-align:top; padding:.55rem .6rem; border-bottom:1px solid var(--line); }
th { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
td.rid { font-family:var(--mono); white-space:nowrap; color:var(--accent); }
tr.chosen td { background:var(--accent-soft); }
tr.chosen td:first-child { box-shadow:inset 3px 0 0 var(--accent); }
.fit-y { color:var(--good); font-weight:600; }
.fit-n { color:var(--bad); font-weight:600; }
.fit-m { color:var(--warn); font-weight:600; }

/* ---- callouts / ADRs ---- */
.callout { border:1px solid var(--line); border-left:3px solid var(--gold); background:var(--card); border-radius:.5rem; padding:.9rem 1.1rem; margin:1.25rem 0; }
.callout .label { font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); margin-bottom:.3rem; }
.callout p { margin:.3rem 0; }
.adr { border:1px solid var(--line); border-radius:.75rem; background:var(--card); margin:1.25rem 0; overflow:hidden; }
.adr-head { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.6rem 1rem; background:var(--code-bg); border-bottom:1px solid var(--line); font-family:var(--mono); font-size:.75rem; color:var(--muted); }
.adr-head b { color:var(--accent); }
.adr-body { padding:.4rem 1rem .9rem; display:grid; gap:0 1.25rem; grid-template-columns:8rem 1fr; }
.adr-body dt { font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding-top:.55rem; }
.adr-body dd { margin:0; padding:.4rem 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.adr-body dd:last-of-type { border-bottom:0; }
@media (max-width:560px) {
  .adr-body { grid-template-columns:1fr; }
  .adr-body dt { padding-top:.6rem; }
  .adr-body dd { border-bottom:0; padding-top:0; }
}

/* ---- small multiples of alternative architectures ---- */
.alts { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr)); margin:1.25rem 0; }
.alt { border:1px solid var(--line); border-radius:.75rem; background:var(--card); padding:.75rem; }
.alt.chosen { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.alt h4 { margin:.1rem 0 .1rem; font-size:.92rem; }
.alt .tag { font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.alt.chosen .tag { color:var(--accent); }
.alt svg { width:100%; height:auto; display:block; margin:.4rem 0; }
.alt p { font-size:.82rem; color:var(--muted); margin:.25rem 0 0; }

.stat-row { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr)); margin:1.25rem 0; }
.stat { border:1px solid var(--line); border-radius:.75rem; background:var(--card); padding:.9rem 1rem; }
.stat .v { font-size:1.7rem; font-weight:700; letter-spacing:-.02em; color:var(--accent); line-height:1.1; }
.stat .k { font-size:.8rem; color:var(--muted); }

.honest { font-size:.82rem; color:var(--muted); border:1px dashed var(--line); border-radius:.5rem; padding:.6rem .85rem; margin:1rem 0; }
.honest b { color:var(--fg); }

footer.site { color:var(--muted); font-size:.85rem; border-top:1px solid var(--line); padding:1.5rem 0 4rem; margin-top:3rem; }
.next { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:2.5rem 0 0; font-size:.9rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0s !important; animation-iteration-count:1 !important; transition:none !important; }
  .tok, .tok-acc { display:none; }
}