/* Built AI-First — the nine-story series. Loaded AFTER mk.css, which supplies
   the palette, the base type, .nav, .hero, .board, .btn and the footer. This
   file adds only what the series needs, once, so a chapter page is content.

   The two-column compare is deliberately CODE RED / CODE GREEN — the ITMedic
   metaphor from docs/design/itmedic-style-spec.md §13, not decoration. Colour
   never carries the meaning alone: every red/green surface is also labelled. */

:root{
  --af-red:#D64545;
  --af-orange:#F96A00;
  --af-good:var(--green);
}
@media (prefers-color-scheme:light){ :root{ --af-red:#B03434; --af-orange:#C25200 } }
:root[data-theme="light"]{ --af-red:#B03434; --af-orange:#C25200 }
:root[data-theme="dark"]{ --af-red:#D64545; --af-orange:#F96A00 }

/* ---------- chapter furniture ---------- */
.chapline{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-ink); margin:0 0 14px;
}
.chapline a{color:var(--muted); text-decoration:none}
.chapline a:hover{color:var(--ink)}

.strip-chapters{
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 30px; padding:0; list-style:none;
}
.strip-chapters li{margin:0; padding:0}
.strip-chapters li::before{display:none}
.strip-chapters a{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-decoration:none; color:var(--muted); border:1px solid var(--rule);
  border-radius:999px; padding:5px 12px; background:var(--panel);
}
.strip-chapters a:hover{color:var(--ink); border-color:color-mix(in srgb, var(--gold) 55%, var(--rule))}
.strip-chapters a[aria-current="page"]{color:#1A1508; background:var(--gold); border-color:var(--gold); font-weight:700}

/* ---------- the compare: retrofitter vs AI-first builder ---------- */
.zones{width:100%; border-collapse:collapse; margin-top:28px; font-size:15.5px}
.zones caption{
  caption-side:top; text-align:left; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding-bottom:12px;
}
.zones th,.zones td{text-align:left; padding:14px 14px; border-top:1px solid var(--rule); vertical-align:top}
.zones thead th{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:400; color:var(--muted); border-top:0; padding-bottom:10px;
}
.zones thead th.red{color:var(--af-red)}
.zones thead th.good{color:var(--af-good)}
.zones tbody th{font-size:16px; font-weight:700; color:var(--ink); width:22%}
/* the two sides get equal width so neither column reads as the important one */
.zones td{color:var(--ink-dim); width:39%}
.zones td.red{border-left:2px solid color-mix(in srgb, var(--af-red) 55%, transparent)}
.zones td.good{border-left:2px solid color-mix(in srgb, var(--af-good) 55%, transparent)}
.zones .tell{
  display:block; margin-top:9px; font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  color:var(--gold-ink);
}
@media (max-width:760px){
  .zones, .zones caption, .zones thead, .zones tbody, .zones tr, .zones th, .zones td{display:block; width:auto}
  .zones thead{display:none}
  .zones tr{border-top:1px solid var(--rule); padding:6px 0 14px}
  .zones tbody th{padding:14px 0 4px; border-top:0}
  .zones td{padding:8px 0 8px 14px; border-top:0}
  .zones td::before{
    content:attr(data-side); display:block; font-family:var(--mono); font-size:11px;
    letter-spacing:.12em; text-transform:uppercase; margin-bottom:5px;
  }
  .zones td.red::before{color:var(--af-red)}
  .zones td.good::before{color:var(--af-good)}
}

/* two free-standing panels, same red/green grammar as the table */
.vs{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); margin-top:28px}
.vs .side{background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:22px 24px 6px}
.vs .side.red{border-top:3px solid var(--af-red)}
.vs .side.good{border-top:3px solid var(--af-good)}
.vs .side .who{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 10px;
}
.vs .side.red .who{color:var(--af-red)}
.vs .side.good .who{color:var(--af-good)}
.vs .side h3{margin:0 0 8px}
.vs .side p{font-size:15px; color:var(--ink-dim); max-width:none}

/* ---------- numbered structures: the three files, the rungs, the phases ---------- */
.files{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); margin-top:30px}
.file{background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:22px 24px 8px}
.file .nm{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-ink); margin:0 0 8px;
}
.file h3{margin:0 0 6px}
.file .q{font-size:15px; color:var(--ink); margin:0 0 10px; max-width:none; font-weight:600}
.file p{font-size:15px; color:var(--ink-dim); max-width:none}
.file dl{margin:12px 0 18px; font-size:14.5px}
.file dt{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:10px}
.file dd{margin:3px 0 0; color:var(--ink-dim)}

.ladder{margin:30px 0 0; padding:0; list-style:none; counter-reset:rung -1}
.ladder li{
  position:relative; margin:0; padding:20px 22px 20px 70px; color:var(--ink-dim);
  background:var(--panel); border:1px solid var(--rule); border-top-width:0; font-size:15.5px;
}
.ladder li:first-child{border-top-width:1px; border-radius:12px 12px 0 0}
.ladder li:last-child{border-radius:0 0 12px 12px}
.ladder li::before{
  counter-increment:rung; content:"R" counter(rung);
  position:absolute; left:22px; top:20px; width:30px; height:30px; border-radius:6px;
  background:var(--panel-2); border:1px solid var(--rule); color:var(--gold-ink);
  font-family:var(--mono); font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.ladder li b{display:block; color:var(--ink); font-size:17px; margin-bottom:5px}
.ladder li .earn{
  display:block; margin-top:10px; font-family:var(--mono); font-size:12px; color:var(--muted);
}
.ladder li .earn b{display:inline; color:var(--gold-ink); font-size:12px}
@media (max-width:560px){
  .ladder li{padding:18px 18px 18px 18px}
  .ladder li::before{position:static; margin-bottom:10px}
}

.phases{margin-top:30px; display:grid; gap:18px}
.phase{background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:24px 26px 10px}
.phase .when{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-ink); margin:0 0 6px;
}
.phase h3{margin:0 0 10px; font-size:21px}
.phase p{font-size:15.5px; color:var(--ink-dim); max-width:none}
.phase ol{margin:14px 0 20px; padding-left:20px}
.phase ol li{color:var(--ink-dim); font-size:15.5px; margin:8px 0; padding-left:4px}
.phase ol li::before{display:none}
.phase ol li b{color:var(--ink)}
.phase .gate{
  margin:0 0 18px; padding:12px 16px; border-left:2px solid var(--af-orange);
  background:var(--panel-2); border-radius:0 8px 8px 0; font-size:14.5px; color:var(--ink-dim);
}
.phase .gate b{color:var(--ink)}

/* ---------- buy / build / wait ---------- */
.matrix{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); margin-top:30px}
.choice{background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:22px 24px 8px}
.choice .verdict{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-ink); margin:0 0 10px;
}
.choice h3{margin:0 0 8px}
.choice p{font-size:15px; color:var(--ink-dim); max-width:none}
.choice ul{margin:12px 0 16px}
.choice li{font-size:14.5px}

.qtable{width:100%; border-collapse:collapse; margin-top:26px; font-size:15px}
.qtable th,.qtable td{text-align:left; padding:13px 14px; border-top:1px solid var(--rule); vertical-align:top}
.qtable thead th{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:400; color:var(--muted); border-top:0;
}
.qtable tbody th{font-weight:700; color:var(--ink); width:38%}
.qtable td{color:var(--ink-dim)}
@media (max-width:660px){
  .qtable, .qtable thead, .qtable tbody, .qtable tr, .qtable th, .qtable td{display:block; width:auto}
  .qtable thead{display:none}
  .qtable tr{border-top:1px solid var(--rule); padding:8px 0}
  .qtable th,.qtable td{border-top:0; padding:5px 0}
}

/* ---------- "In your world" — the four customer types ---------- */
.worlds{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); margin-top:28px}
.world{background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:20px 22px}
.world .type{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-ink); display:block; margin-bottom:9px;
}
.world h3{margin:0 0 7px; font-size:17px}
.world p{margin:0; font-size:14.5px; color:var(--ink-dim); max-width:none}

/* ---------- what we refuse to claim ---------- */
.refuse{margin:24px 0 0; padding:0; list-style:none; max-width:var(--measure)}
.refuse li{padding:14px 0; border-top:1px solid var(--rule); font-size:16px; color:var(--ink-dim)}
.refuse li::before{display:none}
.refuse li b{color:var(--ink)}
.refuse li:first-child{border-top:0}

/* ---------- hub ---------- */
.hubgrid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); margin-top:32px}
.hubcard{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:22px 24px 20px;
}
.hubcard:hover{border-color:color-mix(in srgb, var(--gold) 55%, var(--rule))}
.hubcard:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.hubcard .n{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-ink); margin-bottom:10px;
}
.hubcard h3{margin:0 0 7px}
.hubcard p{margin:0; font-size:15px; color:var(--ink-dim); max-width:none; flex:1 1 auto}
.hubcard .go{
  margin-top:15px; font-family:var(--mono); font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gold-ink);
}

/* ---------- prev / next ---------- */
.chapnav{
  display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:30px; padding-bottom:10px;
}
.chapnav a{
  display:block; text-decoration:none; color:inherit; background:var(--panel);
  border:1px solid var(--rule); border-radius:12px; padding:18px 20px;
}
.chapnav a:hover{border-color:color-mix(in srgb, var(--gold) 55%, var(--rule))}
.chapnav a:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.chapnav .dir{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:7px;
}
.chapnav b{font-size:16.5px; display:block; line-height:1.3}
.chapnav span.sum{display:block; margin-top:6px; font-size:14px; color:var(--ink-dim)}

/* ---------- small shared bits ---------- */
.quote{border-left:2px solid var(--gold); padding:4px 0 4px 20px; margin:28px 0; font-size:19px; line-height:1.5}
.note{
  margin-top:22px; padding:14px 18px; background:var(--panel-2); border:1px solid var(--rule);
  border-radius:10px; font-size:14.5px; color:var(--ink-dim); max-width:var(--measure);
}
.note b{color:var(--ink)}
.foot{padding:36px 0 60px; color:var(--muted); font-size:13.5px; font-family:var(--mono); letter-spacing:.04em; line-height:1.9}
.foot a{color:var(--muted)}