/* Architecture page — builds on styles.css (nav, container, btn, footer, eyebrow, section-title) */

.arch-hero {
  padding: 88px 0 56px;
  background:
    radial-gradient(820px 420px at 50% -140px, rgba(243,128,32,.14), transparent 60%),
    radial-gradient(640px 360px at 88% 0, rgba(106,169,255,.10), transparent 60%);
  text-align: center;
}
.arch-hero h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -.03em; margin: 14px 0 16px; font-weight: 800; }
.arch-hero .lede { max-width: 760px; margin: 0 auto; color: var(--muted); font-size: clamp(17px,2.2vw,19px); }
.arch-toc {
  display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: center; margin-top: 30px;
}
.arch-toc a {
  font-family: var(--mono); font-size: 13px; color: var(--muted);
  border: 1px solid var(--border); padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.02);
}
.arch-toc a:hover { color: var(--brand-2); border-color: var(--brand); }

.arch-section { padding: 72px 0; border-top: 1px solid var(--border); }
.arch-section:nth-of-type(even) { background: var(--bg-alt); }
.arch-kicker { font-family: var(--mono); font-size: 13px; color: var(--brand-2); margin: 0 0 10px; }
.arch-section h2 { font-size: clamp(24px,3.4vw,34px); letter-spacing: -.02em; margin: 0 0 16px; font-weight: 800; }
.arch-lead { color: var(--muted); font-size: 18px; max-width: 820px; margin: 0 0 8px; }
.arch-prose { color: var(--muted); max-width: 820px; }
.arch-prose p { margin: 16px 0 0; }
.arch-prose code { color: var(--brand-2); font-family: var(--mono); font-size: .92em; }
.arch-prose strong { color: var(--text); font-weight: 600; }

/* diagram frame */
.diagram {
  margin: 36px 0 8px; border: 1px solid var(--border); border-radius: var(--radius);
  background: #0a0d15; padding: 22px; overflow-x: auto; box-shadow: var(--shadow);
}
.diagram svg { width: 100%; height: auto; min-width: 660px; display: block; }
.diagram-cap { color: var(--faint); font-size: 13.5px; margin: 12px 2px 0; text-align: center; }

/* SVG diagram language */
.d-box { fill: #121826; stroke: #1f2940; stroke-width: 1.5; }
.d-box-soft { fill: #0e1320; stroke: #1f2940; stroke-width: 1.5; }
.d-box-accent { fill: #11151f; stroke: var(--brand); stroke-width: 2; }
.d-box-hi { fill: rgba(243,128,32,.12); stroke: var(--brand); stroke-width: 2; }
.d-box-blue { fill: rgba(106,169,255,.08); stroke: #6aa9ff; stroke-width: 1.6; }
.d-title { fill: #e9eef7; font: 600 14.5px Inter, sans-serif; }
.d-title-sm { fill: #e9eef7; font: 600 13px Inter, sans-serif; }
.d-sub { fill: #9aa6bf; font: 400 12px Inter, sans-serif; }
.d-mono { fill: #c8d3ea; font: 500 11.5px 'JetBrains Mono', monospace; }
.d-mono-accent { fill: var(--brand-2); font: 500 11.5px 'JetBrains Mono', monospace; }
.d-edge { stroke: #59657f; stroke-width: 1.6; fill: none; }
.d-edge-accent { stroke: var(--brand); stroke-width: 2; fill: none; }
.d-edge-blue { stroke: #6aa9ff; stroke-width: 1.6; fill: none; }
.d-edge-dash { stroke: #59657f; stroke-width: 1.5; fill: none; stroke-dasharray: 5 4; }
.d-elabel { fill: #9aa6bf; font: 500 11px 'JetBrains Mono', monospace; }
.d-elabel-accent { fill: var(--brand-2); font: 600 11px 'JetBrains Mono', monospace; }
.d-group { fill: rgba(255,255,255,.012); stroke: #1f2940; stroke-dasharray: 4 5; stroke-width: 1.3; }
.d-grouplabel { fill: #6b7790; font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .06em; }
.d-numc { fill: var(--brand); }
.d-num { fill: #1a1206; font: 800 12px 'JetBrains Mono', monospace; }

/* back-to-home link in nav */
.nav-back { color: var(--muted); font-size: 15px; font-weight: 500; }
.nav-back:hover { color: var(--text); }

/* arch CTA */
.arch-cta { padding: 84px 0; text-align: center; border-top: 1px solid var(--border);
  background: radial-gradient(640px 320px at 50% 0, rgba(243,128,32,.12), transparent 65%); }
.arch-cta h2 { font-size: clamp(26px,3.6vw,36px); margin: 0 0 14px; letter-spacing: -.02em; }
.arch-cta p { color: var(--muted); font-size: 18px; margin: 0 0 26px; }

@media (max-width: 720px) {
  .arch-section { padding: 52px 0; }
}