/* The Software Factory — visual vocabulary from the approved shape prototype.
   Borrowed from thariqs.github.io/html-effectiveness, with its two WCAG
   failures corrected: g500 draws lines only (3.15–3.65:1), text uses g600;
   clay as text uses clay-t (5.10–5.92:1). Clay = human, olive = agent. */
:root {
  --ivory:#FAF9F5; --paper:#FFFFFF; --slate:#141413;
  --clay:#D97757; --clay-d:#B85C3E; --oat:#E3DACC; --olive:#788C5D;
  --g100:#F0EEE6; --g200:#E6E3DA; --g300:#D1CFC5; --g500:#87867F; --g700:#3D3D3A;
  --g600:#67665F; --clay-t:#A24A28;
  --human-fill:#FBEAE3; --human-line:#E0A184; --human-ink:#A24A28;
  --agent-fill:#EDF1E5; --agent-line:#AFBE93; --agent-ink:#4C6135;
  --neutral-fill:#F0EEE6; --neutral-line:#D1CFC5; --neutral-ink:#5F5E57;
  --serif: ui-serif, Georgia, "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion:reduce){ html { scroll-behavior:auto; } }
body { margin:0; background:var(--ivory); color:var(--slate); font-family:var(--sans);
  line-height:1.55; -webkit-font-smoothing:antialiased; }
:focus-visible { outline:2px solid var(--clay); outline-offset:3px; }
.wrap { max-width:1120px; margin:0 auto; padding:0 32px 140px; }

header.masthead { padding:80px 0 40px; border-bottom:1.5px solid var(--g300); margin-bottom:12px; }
.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--g600); margin-bottom:18px; display:flex; align-items:center; gap:12px; }
.eyebrow::before { content:""; width:24px; height:1.5px; background:var(--clay); }
h1 { font-family:var(--serif); font-weight:500; font-size:clamp(38px,5.4vw,62px); line-height:1.06;
  letter-spacing:-.018em; margin:0 0 8px; max-width:17ch; text-wrap:balance; }
h1 em { font-style:italic; color:var(--clay-d); }
.intro { font-size:16.5px; color:var(--g700); margin:22px 0 0; max-width:620px; }
nav.toc { display:flex; flex-wrap:wrap; gap:8px; padding:26px 0 0; }
nav.toc a { font-size:12.5px; padding:7px 14px; border:1.5px solid var(--g300); border-radius:999px;
  text-decoration:none; color:var(--g700); background:var(--paper); display:inline-flex;
  align-items:center; gap:7px; transition:border-color 120ms,color 120ms; cursor:pointer; }
nav.toc a .n { font-family:var(--mono); font-size:10px; color:var(--g600); }
nav.toc a:hover, nav.toc a:focus-visible { border-color:var(--slate); color:var(--slate); }
nav.toc a:hover .n { color:var(--clay-t); }

/* diagram */
.legend { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; padding:0; list-style:none; }
.legend li { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--g600);
  border:1.5px solid var(--g300); border-radius:999px; padding:5px 13px 5px 9px; background:var(--paper); }
.legend i { width:11px; height:11px; border-radius:3px; display:block; }
.sw-h { background:var(--human-fill); border:1.5px solid var(--human-line); }
.sw-a { background:var(--agent-fill); border:1.5px solid var(--agent-line); }
.sw-n { background:var(--neutral-fill); border:1.5px solid var(--neutral-line); }
.canvas { background:var(--paper); border:1.5px solid var(--g300); border-radius:14px;
  padding:26px clamp(10px,2vw,26px); overflow-x:auto; }
.canvas svg { display:block; margin:0 auto; min-width:660px; max-width:800px; width:100%; height:auto; }
.nd { cursor:pointer; }
.nd rect { transition:filter 140ms; }
.nd:hover rect, .nd:focus-visible rect { filter:brightness(.965); }
.nd:focus-visible { outline:none; }
.nd:focus-visible rect { stroke:var(--slate); stroke-width:3; }
.nd.sel rect { stroke-width:3; }
.nd .t { font:600 17px var(--sans); }
.nd .s { font:400 14px var(--sans); opacity:.82; }
.human rect { fill:var(--human-fill); stroke:var(--human-line); stroke-width:1.5; }
.human .t,.human .s { fill:var(--human-ink); }
.agent rect { fill:var(--agent-fill); stroke:var(--agent-line); stroke-width:1.5; }
.agent .t,.agent .s { fill:var(--agent-ink); }
.neutral rect { fill:var(--neutral-fill); stroke:var(--neutral-line); stroke-width:1.5; }
.neutral .t,.neutral .s { fill:var(--neutral-ink); }
.entry rect { fill:var(--paper); stroke:var(--g300); stroke-width:1.5; }
.entry .t { fill:var(--slate); }
.ed { stroke:#A8A69C; stroke-width:1.6; fill:none; stroke-linejoin:round; }
.edlabel { fill:var(--g600); font:400 14px var(--sans); }
.readnote { font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--g600); display:flex; align-items:center; gap:9px; margin:0 0 18px; }
.readnote::before { content:""; width:22px; height:1.5px; background:var(--oat); }

.detail { margin:20px 0 0; background:var(--paper); border:1.5px solid var(--g300);
  border-radius:14px; padding:22px 26px; }
.detail.is-human { background:#FEFAF8; border-color:var(--human-line); }
.detail.is-agent { background:#FAFCF7; border-color:var(--agent-line); }
.detail .kicker { font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--g600); margin:0 0 8px; }
.detail h3 { font-family:var(--serif); font-weight:500; font-size:25px; letter-spacing:-.012em; margin:0 0 10px; }
.detail p { font-size:14.5px; color:var(--g700); margin:0 0 18px; max-width:64ch; }
.detail dl { display:grid; gap:0; margin:0; }
.detail dl div { display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:baseline;
  border-top:1px solid var(--g200); padding:9px 0; }
.detail dt { font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--g600); }
.detail dd { margin:0; font-size:14px; color:var(--g700); }
.pill { display:inline-block; padding:2px 10px; border-radius:999px; font-family:var(--mono);
  font-size:10px; letter-spacing:.07em; text-transform:uppercase; }
.pill.human { background:var(--human-fill); color:var(--human-ink); }
.pill.agent { background:var(--agent-fill); color:var(--agent-ink); }

/* gallery */
section { margin-top:72px; scroll-margin-top:28px; }
.sec-head { display:flex; align-items:baseline; gap:16px; margin-bottom:10px; }
.sec-head .idx { font-family:var(--mono); font-size:13px; color:var(--clay-t); font-weight:600; width:34px; flex-shrink:0; }
.sec-head h2 { font-family:var(--serif); font-weight:500; font-size:27px; margin:0; letter-spacing:-.012em; }
.sec-head .count { font-family:var(--mono); font-size:11px; color:var(--g600); background:var(--g100);
  padding:2px 8px; border-radius:999px; }
.sec-intro { font-size:14.5px; color:var(--g700); max-width:700px; margin:0 0 24px 50px; }
@media (max-width:640px){ .sec-intro{ margin-left:0; } }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(316px,1fr)); gap:20px; margin-left:50px; }
@media (max-width:640px){ .grid{ margin-left:0; } }
a.card { display:flex; flex-direction:column; background:var(--paper); border:1.5px solid var(--g300);
  border-radius:14px; text-decoration:none; color:inherit; overflow:hidden; cursor:pointer;
  transition:transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; }
a.card:hover, a.card:focus-visible { transform:translateY(-3px); box-shadow:0 10px 30px rgba(20,20,19,.10); border-color:var(--slate); }
a.card:focus-visible .thumb { background:var(--oat); }
@media (prefers-reduced-motion:reduce){ a.card, a.card:hover { transform:none; transition:none; } }
.thumb { height:132px; background:var(--g100); border-bottom:1.5px solid var(--g200); display:flex;
  align-items:center; justify-content:center; padding:16px; transition:background 150ms ease; }
a.card:hover .thumb { background:var(--oat); }
.thumb svg { width:100%; height:100%; overflow:visible; }
.thumb .fl, .fthumb .fl { fill:var(--g300); } .thumb .cl, .fthumb .cl { fill:var(--clay); } .thumb .ol, .fthumb .ol { fill:var(--olive); }
.thumb .oa, .fthumb .oa { fill:var(--oat); stroke:var(--g500); stroke-width:2.5; }
.thumb .sl, .fthumb .sl { fill:var(--slate); }
.thumb .wh, .fthumb .wh { fill:var(--paper); stroke:var(--g500); stroke-width:2.5; }
.thumb .ln, .fthumb .ln { stroke:var(--g500); stroke-width:2.5; fill:none; stroke-linecap:round; }
.thumb .lc, .fthumb .lc { stroke:var(--clay); stroke-width:2.5; fill:none; stroke-linecap:round; }
a.card:hover .thumb .fl { fill:var(--g500); }
a.card:hover .thumb .oa { fill:var(--paper); }
.cbody { padding:18px 20px 16px; display:flex; flex-direction:column; flex:1; }
.ctitle { font-family:var(--serif); font-size:19px; font-weight:500; line-height:1.22; color:var(--slate);
  margin-bottom:7px; letter-spacing:-.008em; }
.cdesc { font-size:13.5px; color:var(--g700); line-height:1.5; margin-bottom:16px; flex:1; }
.cfile { font-family:var(--mono); font-size:11px; color:var(--g600); border-top:1px solid var(--g100);
  padding-top:11px; display:flex; align-items:center; justify-content:space-between; }
.cfile .arrow { transition:transform 150ms ease; color:var(--g300); }
a.card:hover .cfile { color:var(--clay-t); }
a.card:hover .cfile .arrow { transform:translateX(3px); color:var(--clay-t); }

/* subpages */
.page-top { padding-top:56px; }
.back { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--g600); text-decoration:none;
  border:1.5px solid var(--g300); border-radius:999px; padding:7px 15px; background:var(--paper);
  cursor:pointer; margin-bottom:34px; }
.back:hover, .back:focus-visible { border-color:var(--slate); color:var(--slate); }
.page h1 { font-size:clamp(32px,4.4vw,46px); }
.page .lede { font-size:17px; color:var(--g700); margin:20px 0 0; max-width:640px; }
.page .rule { height:1.5px; background:var(--g300); margin:40px 0 34px; }
.page h2 { font-family:var(--serif); font-weight:500; font-size:24px; letter-spacing:-.012em; margin:44px 0 12px; }
.page p, .page ul, .page ol { font-size:15.5px; color:var(--g700); max-width:66ch; margin:0 0 14px; }
.page li { margin-bottom:6px; }
.page code { font-family:var(--mono); font-size:.86em; background:var(--g100); padding:2px 6px; border-radius:5px; color:var(--g700); }
.page pre { background:var(--slate); color:#EDECE6; border-radius:14px; padding:24px 26px; overflow-x:auto;
  font-family:var(--mono); font-size:13px; line-height:1.65; margin:22px 0; white-space:pre-wrap; }
.page pre code { background:none; padding:0; color:inherit; font-size:inherit; }
.tablewrap { overflow-x:auto; border:1.5px solid var(--g300); border-radius:14px; margin:22px 0; background:var(--paper); }
table { border-collapse:collapse; width:100%; font-size:14px; min-width:34rem; }
th { text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--g600); padding:13px 18px; background:var(--g100); border-bottom:1.5px solid var(--g200); }
td { padding:12px 18px; border-bottom:1px solid var(--g200); vertical-align:top; color:var(--g700); }
td b { color:var(--slate); }
tr:last-child td { border-bottom:0; }
.callout { background:var(--paper); border:1.5px solid var(--oat);
  border-radius:14px; padding:18px 22px; margin:26px 0; font-size:14.5px; color:var(--g700); max-width:70ch; }
.callout b { color:var(--clay-t); }
.prin { margin:22px 0; max-width:74ch; }
.prin > div { display:grid; grid-template-columns:38px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--g200); }
.prin .n { font-family:var(--mono); font-size:12px; color:var(--clay-t); font-weight:600; }
.prin b { font-family:var(--serif); font-weight:500; font-size:18px; display:block; margin-bottom:3px; color:var(--slate); }
.prin span.d { font-size:14.5px; color:var(--g700); }
footer { margin-top:100px; border-top:1.5px solid var(--g300); padding-top:36px; display:flex;
  justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--g600); }
footer .k { font-family:var(--serif); font-style:italic; color:var(--g700); font-size:15px; }
footer a { color:var(--g600); }

/* feature card */
.feature { margin-top:44px; }
a.feat { display:grid; grid-template-columns:300px 1fr; gap:0; background:var(--paper);
  border:1.5px solid var(--g300); border-radius:14px; overflow:hidden; text-decoration:none;
  color:inherit; cursor:pointer;
  transition:transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; }
a.feat:hover, a.feat:focus-visible { transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(20,20,19,.10); border-color:var(--slate); }
@media (prefers-reduced-motion:reduce){ a.feat, a.feat:hover, a.feat:focus-visible { transform:none; transition:none; } }
@media (max-width:720px){ a.feat { grid-template-columns:1fr; } }
.feat .fthumb { background:var(--g100); border-right:1.5px solid var(--g200); padding:26px 30px;
  display:flex; align-items:center; justify-content:center; transition:background 150ms ease; }
@media (max-width:720px){ .feat .fthumb { border-right:0; border-bottom:1.5px solid var(--g200); } }
a.feat:hover .fthumb, a.feat:focus-visible .fthumb { background:var(--oat); }
.feat .fthumb svg { width:100%; height:auto; max-height:190px; overflow:visible; }
.feat .fbody { padding:30px 34px 26px; display:flex; flex-direction:column; justify-content:center; }
.feat .ftitle { font-family:var(--serif); font-weight:500; font-size:30px; line-height:1.15;
  letter-spacing:-.014em; margin:0 0 10px; }
.feat .fdesc { font-size:15px; color:var(--g700); margin:0 0 20px; max-width:52ch; }
.feat .fgo { font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--g600); display:flex; align-items:center; gap:9px; }
a.feat:hover .fgo, a.feat:focus-visible .fgo { color:var(--clay-t); }
.feat .fgo .arrow { transition:transform 150ms ease; }
a.feat:hover .fgo .arrow { transform:translateX(3px); }