/* From brief to result — a rail of chapters that follows the reading, four chapters, and the phases on a time axis. */
.wrk-arc__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--bdh-gap)}
.wrk-arc__rail{grid-column:1 / span 3}
.wrk-arc__rail ol{position:sticky;top:var(--bdh-sticky);list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.wrk-arc__rail a{position:relative;display:flex;align-items:baseline;gap:14px;min-height:44px;padding:11px 0 11px 18px;font-size:var(--t-sm);font-weight:500;line-height:1.4;color:var(--muted);text-decoration:none;
  transition:color var(--d1) var(--e-io)}
.wrk-arc__rail a::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:2px;background:var(--ink);transform:scaleY(0);transform-origin:top;transition:transform var(--d2) var(--e)}
.wrk-arc__rail a:hover{color:var(--ink)}
.wrk-arc__rail a.is-on{color:var(--ink)}
.wrk-arc__rail a.is-on::before{transform:none}
.wrk-arc__rn{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.1em;color:var(--blue)}
.wrk-arc__body{grid-column:5 / -1;display:flex;flex-direction:column;gap:clamp(56px,6vw,96px)}

.wrk-ch{scroll-margin-top:calc(var(--nav-h) + 32px);padding-top:24px;border-top:1px solid var(--line)}
.wrk-ch__head{display:flex;align-items:baseline;gap:16px;margin-bottom:22px}
.wrk-ch__t{margin:0;font-family:var(--f-h);font-size:clamp(1.3rem,2vw,1.75rem);font-weight:500;letter-spacing:-.018em;line-height:1.2;color:var(--ink)}
.wrk-ch__n{font-family:var(--f);font-size:var(--t-xs);font-weight:500;letter-spacing:.1em;color:var(--blue)}
.wrk-ch__md.xb{max-width:64ch;margin-inline:0}
.wrk-ch__md.xb > .xb-p:first-child{font-family:var(--f-h);font-size:clamp(1.12rem,1.5vw,1.32rem);line-height:1.5;letter-spacing:-.006em;color:var(--ink)}
.wrk-ch > .tl{margin-top:16px}
.wrk-ch__sys{max-width:34ch;font-family:var(--f-h);font-size:clamp(1.35rem,2.4vw,2.05rem);font-weight:500;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
/* chapter 3: what it left behind — the deliverables as a numbered ledger, two to a row */
.wrk-ch__left{margin-top:34px}
.wrk-left{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--bdh-gap);border-top:1px solid var(--ink)}
.wrk-left li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-h);font-size:clamp(1rem,1.25vw,1.12rem);font-weight:500;line-height:1.4;letter-spacing:-.006em;color:var(--ink)}
.wrk-left__n{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.1em;color:var(--blue)}

/* how it ran: a phase list, drawn on one axis when the timing reads */
.wrk-tl{margin-top:36px}
.wrk-tl__axis{position:relative;height:22px;margin-left:calc(min(220px,34%) + 20px);border-bottom:1px solid var(--line-3)}
.wrk-tl__axis span{position:absolute;bottom:6px;left:calc(var(--p) * 100%);transform:translateX(-50%);font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.06em;color:var(--faint)}
.wrk-tl__axis span::after{content:"";position:absolute;left:50%;bottom:-7px;width:1px;height:6px;background:var(--line-3)}
.wrk-tl__rows{list-style:none;margin:0;padding:0}
.wrk-tl__row{display:grid;grid-template-columns:min(220px,34%) minmax(0,1fr);column-gap:20px;row-gap:6px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-2)}
.wrk-tl__lbl{display:flex;flex-direction:column;gap:3px;min-width:0}
.wrk-tl__lbl b{font-family:var(--f-h);font-size:var(--t-h4);font-weight:500;color:var(--ink)}
.wrk-tl__w{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.08em;color:var(--muted)}
.wrk-tl__track{position:relative;height:12px;border-radius:6px;background:var(--paper-3)}
.band--alt .wrk-tl__track{background:var(--paper-4)}
.wrk-tl__track i{position:absolute;top:0;bottom:0;left:calc(var(--s) * 100%);width:calc(var(--w) * 100%);border-radius:6px;background:var(--ink)}
.wrk-tl__track i.is-open{-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
.wrk-tl__txt{grid-column:2;font-size:var(--t-sm);line-height:1.55;color:var(--txt)}
.wrk-tl:not(.wrk-tl--chart) .wrk-tl__row{grid-template-columns:min(220px,34%) minmax(0,1fr);align-items:baseline}
.wrk-tl:not(.wrk-tl--chart) .wrk-tl__txt{grid-column:2;grid-row:1}

@media (max-width:1023px){
  .wrk-arc__rail{grid-column:1 / -1;margin-bottom:36px}
  .wrk-arc__rail ol{position:static;display:flex;flex-wrap:wrap;gap:6px 8px;border-left:0}
  .wrk-arc__rail a{padding:0 14px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line-3);align-items:center}
  .wrk-arc__rail a::before{display:none}
  .wrk-arc__rail a.is-on{background:var(--ink);color:var(--on-ink);box-shadow:none}
  .wrk-arc__rail a.is-on .wrk-arc__rn{color:var(--on-ink-3)}
  .wrk-arc__body{grid-column:1 / -1}
}
@media (max-width:640px){
  .wrk-left{grid-template-columns:minmax(0,1fr)}
  .wrk-tl__axis{margin-left:0}
  .wrk-tl__row,.wrk-tl:not(.wrk-tl--chart) .wrk-tl__row{grid-template-columns:minmax(0,1fr)}
  .wrk-tl__txt,.wrk-tl:not(.wrk-tl--chart) .wrk-tl__txt{grid-column:1;grid-row:auto}
  .wrk-arc__rail a{min-height:44px}
}