/* The architecture figures: hand-placed inline SVG, drawn on a 1000-unit-wide canvas. */
.arch-index { padding-block: 16px 40px; }
.arch-index > .eyebrow { margin-bottom: 16px; }
.arch-index ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.arch-index ol a { display: block; height: 100%; padding: 12px 14px; border-top: 3px solid var(--c); background: var(--k2); font-size: 14px; }
.arch-index ol span { display: block; margin-bottom: 6px; color: var(--dim); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.arch-index .arch-key { margin-top: 24px; }
.arch-sec .lede { max-width: 76ch; }
.arch-sec .lede strong { color: var(--paper); }
.arch-sec .sec-head .eyebrow code { text-transform: none; letter-spacing: 0; color: var(--y); }
.arch-fig { margin: 30px 0 0; padding: clamp(12px, 2.5vw, 26px); border: 1px solid var(--rule); background: var(--k); }
.arch-fig figcaption { margin-top: 14px; color: var(--dim); font-size: 13px; }
.arch-fig figcaption b { margin-right: 6px; color: var(--paper); letter-spacing: .04em; }
.arch-scroll { overflow-x: auto; }
.arch-svg { display: block; width: 100%; height: auto; }

/* The key, shared by the page and each figure. */
.arch-key { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 14px 0 0; padding: 0; font-size: 12px; color: var(--dim); }
.arch-key li::before { content: ""; display: inline-block; width: 22px; height: 12px; margin-right: 8px; vertical-align: -1px; border: 1.5px solid var(--sw, var(--dim)); background: var(--sf, transparent); }
.arch-key .k-tool { --sw: var(--c); }
.arch-key .k-agent { --sw: var(--m); }
.arch-key .k-state { --sw: #5d5b56; --sf: var(--k2); }
.arch-key .k-out { --sw: var(--paper); --sf: var(--paper); }
.arch-key .k-new { --sw: #5d5b56; --sf: #2b2a27; }
.arch-key .k-machine::before { border: 1.5px dashed var(--paper); }
.arch-key .k-user { --sw: #8d8a83; }
.arch-key .k-soft::before { border: 1.5px dashed #5d5b56; }
.arch-key .k-prop::before { border: 2px dotted var(--y); }

/* Figure 1's stages, and Figure 6's layers, in words. */
.arch-stages { counter-reset: stage; list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px 28px; font-size: 13.5px; color: var(--dim); }
.arch-stages li { counter-increment: stage; position: relative; padding-left: 32px; }
.arch-stages li::before { content: counter(stage); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--c); color: var(--k); font: 700 11px/20px var(--f-mono); text-align: center; }
.arch-stages b { color: var(--paper); }
.arch-layers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 28px 0 0; }
.arch-layers > div { border-left: 3px solid var(--rule); padding-left: 16px; }
.arch-layers dt { font-weight: 700; }
.arch-layers dd { margin: 6px 0 0; color: var(--dim); font-size: 13.5px; }
.arch-layers em { display: block; margin-bottom: 4px; font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.arch-layers .st-hold { color: var(--paper); }
.arch-layers .st-part { color: #b9b6ae; }
.arch-layers .st-none { color: var(--m-text); }
.arch-layers .st-prop { color: var(--y); }
.arch-next { margin: 32px 0 0; font-size: 13px; color: var(--dim); }

/* Inside the SVG. */
.arch-svg text { font-family: var(--f-mono); }
.arch-svg .lbg { fill: var(--k); }
.arch-svg .zone { fill: none; stroke: #3d3c38; stroke-dasharray: 4 3; }
.arch-svg .zl { font-size: 11px; font-weight: 700; letter-spacing: .1em; fill: var(--paper); }
.arch-svg .zs, .arch-svg .note { font-size: 11px; fill: var(--dim); }
.arch-svg .box { fill: var(--k2); stroke: #5d5b56; stroke-width: 1.3; }
.arch-svg .box.tool { stroke: var(--c); stroke-width: 1.6; }
.arch-svg .box.agent { stroke: var(--m); stroke-width: 1.6; }
.arch-svg .box.new { fill: #2b2a27; }
.arch-svg .box.big { fill: none; stroke: var(--c); stroke-width: 2; }
.arch-svg .box.out { fill: var(--paper); stroke: var(--paper); }
.arch-svg .bt { font-size: 12.5px; font-weight: 700; fill: var(--paper); }
.arch-svg .bt.code { fill: var(--y); }
.arch-svg .bl { font-size: 11px; fill: #b9b6ae; }
.arch-svg .bt.o, .arch-svg .bl.o { fill: var(--k); }
.arch-svg .badge { fill: var(--c); }
.arch-svg .badge-n { font-size: 11px; font-weight: 700; fill: var(--k); }
.arch-svg .tagbg { fill: var(--paper); }
.arch-svg .proptag { fill: var(--y); }
.arch-svg .tag { font-size: 10px; font-weight: 700; fill: var(--k); }
.arch-svg .ar { fill: none; stroke-width: 1.5; }
.arch-svg .ar.ink { stroke: #8d8a83; }
.arch-svg .ar.acc { stroke: var(--c); stroke-width: 1.75; }
.arch-svg .ar.agent { stroke: var(--m); }
.arch-svg .ar.faint { stroke: #5d5b56; stroke-dasharray: 4 3; stroke-width: 1.2; }
.arch-svg .mk.ink { fill: #8d8a83; }
.arch-svg .mk.acc { fill: var(--c); }
.arch-svg .mk.agent { fill: var(--m); }
.arch-svg .mk.faint { fill: #5d5b56; }
.arch-svg .al { font-size: 11px; fill: var(--dim); }
.arch-svg .vm { fill: none; stroke: var(--paper); stroke-width: 1.3; stroke-dasharray: 10 5; }
.arch-svg .ring { fill: none; }
.arch-svg .ring.vmr { stroke: var(--paper); stroke-width: 1.5; stroke-dasharray: 10 5; }
.arch-svg .ring.user { stroke: #8d8a83; stroke-width: 1.3; }
.arch-svg .ring.soft { stroke: #5d5b56; stroke-width: 1.2; stroke-dasharray: 4 3; }
.arch-svg .ring.prop { stroke: var(--y); stroke-width: 2; stroke-dasharray: 2 3; fill: rgba(255, 242, 0, .04); }

/* On narrow screens a figure keeps a legible size and scrolls sideways inside its frame. */
@media (max-width: 760px) {
  .arch-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arch-svg { width: 720px; max-width: none; }
  .arch-scroll::after { content: "Scroll the figure sideways →"; display: block; position: sticky; left: 0; margin-top: 10px; color: var(--dim); font-size: 12px; }
  .arch-layers { grid-template-columns: 1fr; }
}