/* ==========================================================================
   Work — iteration 01
   Inherits the approved shell in ../../shared.css: paper #FAFAF8, ink #12141A,
   hairlines #E4E4DE, #0066FF as the only signal, IBM Plex Sans / Serif / Mono,
   the masthead, the focus ring, the responsive frame and the footer.

   This file adds only what Work needs and Home does not:
     1  the opening spread, with the portrait
     2  the instrument band — the graph and the chat that reads it, on the
        dark canvas Home's methodology already establishes
     3  the paper bands under it — what I would not build, the arc,
        and the ledger of what the work taught
     4  the review chrome: the open-decision flags, which a production build
        deletes along with .review-*

   Colour rules kept: one signal colour on paper. The dark canvas may carry the
   blue / mint / violet relationship cues the brand system allows it, and that
   is where the technology families get their colour — nowhere else.
   ========================================================================== */

:root {
  /* the four technology families, from work/content/graph/families.md.
     Colour is the page's decision; the family itself is content. */
  --fam-agentic: #b9b5ff;
  --fam-agentic-edge: #4d4788;
  --fam-agentic-bg: #1b1930;
  --fam-understanding: #a8e8d0;
  --fam-understanding-edge: #2f6b57;
  --fam-understanding-bg: #12241f;
  --fam-platform: #8db8ff;
  --fam-platform-edge: #2b4a80;
  --fam-platform-bg: #111d30;
  --fam-governance: #e6eaf3;
  --fam-governance-edge: #4b5568;
  --fam-governance-bg: #1a1f2b;
}

/* ---------- shared page furniture ---------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0 }
.ruled { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 54px; align-items: start }
.margin-note { padding-top: 10px }
.margin-note p { font: 15px/1.55 var(--serif); color: var(--muted); margin: 18px 0 0 }
.margin-note p + p { margin-top: 14px }
.band { padding-block: 92px; border-top: 1px solid var(--rule) }
.band h2, .dark h2 { font: 600 clamp(32px, 3.7vw, 50px)/1.1 var(--sans); letter-spacing: -.04em; max-width: 22ch; margin: 0 0 44px }
.band .lede, .dark .lede { font: 20px/1.6 var(--serif); color: var(--muted); max-width: 62ch; margin: 0 0 44px }

/* an open decision or a missing asset, marked where it lands. Review chrome. */
.flag { display: inline-flex; align-items: center; gap: 7px; font: 400 10px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); border: 1px dashed #b9b9b0; padding: 5px 8px; white-space: nowrap; vertical-align: middle }
.flag b { font-weight: 500; color: var(--ink) }
.margin-note .flag { white-space: normal; align-items: baseline; text-align: left; line-height: 1.5 }
.dark .flag { border-color: #3d4658; color: var(--canvas-muted) }
.dark .flag b { color: #e6eaf3 }

/* ---------- 1 · the opening spread --------------------------------------- */
.work-open { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(300px, 400px); gap: 54px; padding-block: 76px 84px; align-items: start }
.work-open h1 { font: 600 clamp(40px, 5vw, 68px)/1.06 var(--sans); letter-spacing: -.055em; margin: 0; max-width: 18ch }
.work-open .deck { font: 21px/1.6 var(--serif); margin: 34px 0 0; max-width: 60ch; color: #3a4152 }
.portrait { margin: 0 }
.portrait img { display: block; width: 100%; height: auto; border-radius: 0; background: #ededea }
.portrait figcaption { font: 11px/1.7 var(--mono); letter-spacing: .06em; color: var(--muted); margin-top: 14px; text-transform: uppercase }
.portrait figcaption b { display: block; font-weight: 500; color: var(--ink); letter-spacing: .04em }
.portrait-bio { font: 14px/1.6 var(--sans); color: #3a4152; margin: 14px 0 0 }

/* ---------- 2 · the instrument band -------------------------------------- */
/* The band's header lost its margin note (Imran, 20 Sep), so it is no longer a ruled
   two-column spread: the heading and its lede run the measure, set off by one hairline. */
.record-head { padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid var(--canvas-rule) }
.record-head > div > :last-child { margin-bottom: 0 }
.dark { background: var(--canvas); color: #e6eaf3; padding-block: 88px 92px; border: 0 }
.dark .eyebrow { color: var(--canvas-signal) }
.dark h2 { color: #f2f5fa; margin-bottom: 20px }
.dark .lede { color: var(--canvas-muted); margin: 0 0 44px }
.dark .margin-note p { color: var(--canvas-muted) }
.dark a { color: var(--canvas-signal) }

/* the two sides: the band's first choice, a card each */
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 40px }
.side { display: block; text-align: left; padding: 16px 20px 20px; background: transparent; color: var(--canvas-muted); border: 1px solid var(--canvas-rule); cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease }
.side .side-label { display: block; font: 400 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase }
.side .side-title { display: block; font: 500 21px/1.3 var(--sans); letter-spacing: -.02em; margin-top: 8px }
.side:hover { border-color: #4b5568; color: #cdd4e2 }
.side[aria-pressed="true"] { color: #f2f5fa; border-color: #55617a; background: var(--canvas-panel); box-shadow: inset 0 -2px 0 var(--blue); cursor: default }
.side[aria-pressed="true"] .side-label { color: var(--canvas-signal) }

.side-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 40px; margin-bottom: 24px }
.side-head h3 { font: 500 22px/1.35 var(--sans); letter-spacing: -.02em; margin: 0; max-width: 40ch; color: #f2f5fa }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.controls .seg-label { font: 400 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--canvas-muted); margin-right: 4px }
.controls button { font: 14px var(--sans); color: #cdd4e2; background: transparent; border: 1px solid var(--canvas-rule); padding: 7px 13px }
.controls button:hover { border-color: #55617a; color: #f2f5fa }
.controls button[aria-pressed="true"] { color: #f2f5fa; border-color: #55617a; box-shadow: inset 0 -2px 0 var(--blue) }

/* the drawing beside the chat that reads it */
.instrument { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); gap: 40px; align-items: start }
.graph-figure { margin: 0; border: 1px solid var(--canvas-rule); background: #0b0b12 }
#graph { display: block; width: 100%; height: auto; min-height: 21rem; touch-action: pan-y }
.graph-foot { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--canvas-rule); font: 400 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--canvas-muted) }
.graph-foot span { display: inline-flex; align-items: center; gap: 7px }
.graph-foot span[hidden] { display: none }
.key { width: 10px; height: 10px; flex: 0 0 auto }
.key-line, .key-part { background: #e6eaf3; border-radius: 50% }
.key-stage { background: #e6eaf3; transform: rotate(45deg) scale(.82) }
.key-constraint { border: 1.5px solid #9aa4b8; border-radius: 50% }
.key-work { width: 7px; height: 7px; background: #79839a; border-radius: 50% }

/* the anchor list: how the drawing is operated below 640px, where its labels
   stop being readable. Above that it is redundant and hidden. */
.anchor-list { display: none }
.anchor-list > .eyebrow { display: block; color: var(--canvas-muted); margin: 26px 0 0 }
.anchor-list ul { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--canvas-rule) }
.anchor-list li { border-bottom: 1px solid var(--canvas-rule) }
.anchor-list li.group { padding: 16px 4px 6px; font: 400 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--canvas-signal); border-bottom: 0 }
.anchor-list button { display: flex; width: 100%; gap: 14px; align-items: baseline; justify-content: space-between; text-align: left; padding: 13px 4px; background: none; border: 0; color: #cdd4e2; font: 15px/1.4 var(--sans) }
.anchor-list button span { font: 400 10px/1.4 var(--mono); letter-spacing: .08em; color: var(--canvas-muted); flex: 0 0 auto; text-transform: uppercase }
.anchor-list button[aria-pressed="true"] { color: var(--canvas-signal) }

/* links and nodes */
.link { stroke: #47506a; stroke-opacity: .55; stroke-width: 1; fill: none; transition: stroke .15s ease, stroke-opacity .15s ease }
.link.is-live { stroke: var(--canvas-signal); stroke-opacity: 1; stroke-width: 1.5 }
.has-focus .link:not(.is-live) { stroke-opacity: .2 }
.node { cursor: pointer; outline: none }
.node .hit { fill: transparent; stroke: none }
.node .dot { transition: fill .15s ease, stroke .15s ease }
.node-line .dot, .node-part .dot, .node-stage .dot { fill: #e6eaf3; stroke: #e6eaf3; stroke-width: 1 }
.node-constraint .dot { fill: #0b0b12; stroke: #9aa4b8; stroke-width: 1.5 }
.node-work .dot { fill: #79839a; stroke: #0b0b12; stroke-width: 1 }
/* A piece of work is drawn in the family of the technology it leans on, which is what the
   legend under the drawing names. Selection still overrides it: the signal colour wins. */
.node-work[data-family="agentic"] .dot { fill: var(--fam-agentic) }
.node-work[data-family="understanding"] .dot { fill: var(--fam-understanding) }
.node-work[data-family="platform"] .dot { fill: var(--fam-platform) }
.node-work[data-family="governance"] .dot { fill: var(--fam-governance) }
/* holding a legend entry holds its family up out of the drawing */
.graph-figure.fam-agentic .node-work:not([data-family="agentic"]) .dot,
.graph-figure.fam-understanding .node-work:not([data-family="understanding"]) .dot,
.graph-figure.fam-platform .node-work:not([data-family="platform"]) .dot,
.graph-figure.fam-governance .node-work:not([data-family="governance"]) .dot { fill: #3b4254 }
.node .label { font: 400 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; fill: #cdd4e2; pointer-events: none; paint-order: stroke; stroke: #0b0b12; stroke-width: 3px; stroke-linejoin: round }
.node .label-constraint { font: 400 12.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none }
.node.is-live .dot { fill: var(--canvas-signal); stroke: var(--canvas-signal) }
.node.is-near .dot { stroke: var(--canvas-signal) }
.node-work.is-near .dot { fill: var(--canvas-signal) }
.node-constraint.is-near .dot { stroke-width: 2 }
.node.is-live .label { fill: #dce7ff }
.has-focus .node:not(.is-live):not(.is-near) { opacity: .3 }
.node:focus-visible .dot { stroke: var(--canvas-signal); stroke-width: 2; stroke-dasharray: 2 2 }
.node.is-pinned .hit { stroke: var(--canvas-signal); stroke-width: 1; stroke-dasharray: 2 3 }

/* ---------- the chat that reads the graph -------------------------------- */
/* The chat is a fixed frame that scrolls inside itself and follows the reader down the
   drawing, so neither column ever ends in dead space. */
.chat { display: flex; flex-direction: column; min-height: 34rem; max-height: calc(100vh - 40px); border: 1px solid var(--canvas-rule); background: var(--canvas-panel); position: sticky; top: 20px }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--canvas-rule) }
.chat-id { display: flex; align-items: center; gap: 11px; min-width: 0 }
.chat-mark { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; background: var(--blue); color: #fff; font: 600 17px/1 var(--sans) }
.chat-id b { display: block; font: 500 14px/1.3 var(--sans); color: #f2f5fa }
.chat-state { display: flex; align-items: center; gap: 7px; margin-top: 4px; font: 400 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--canvas-muted) }
.chat-state em { font-style: normal }
.chat-state i { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: #55617a }
.chat-state[data-state="reading"] { color: var(--canvas-signal) }
.chat-state[data-state="reading"] i { background: var(--blue); animation: chat-pulse 1.1s ease-in-out infinite }
@keyframes chat-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .2 } }
.chat-clear { font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--canvas-muted); background: none; border: 1px solid var(--canvas-rule); padding: 7px 9px }
.chat-clear:hover { color: #f2f5fa; border-color: #55617a }
.chat-clear[disabled] { opacity: .4; cursor: default }

.chat-log { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 20px 16px; display: flex; flex-direction: column; gap: 18px; scrollbar-width: thin; scrollbar-color: #3d4658 transparent }
.chat-log::-webkit-scrollbar { width: 8px }
.chat-log::-webkit-scrollbar-thumb { background: #3d4658 }

.turn { margin: 0 }
.turn-ask { align-self: flex-end; max-width: 88%; background: #1e2637; border: 1px solid #33405a; border-radius: 10px 10px 2px 10px; padding: 10px 13px; font: 14px/1.5 var(--sans); color: #dfe6f3 }
.turn-answer { align-self: stretch }
.turn-body { border-left: 2px solid #33405a; padding-left: 15px }
.turn-answer.is-live .turn-body { border-left-color: var(--blue) }
.turn-reading .turn-body { border-left-color: var(--blue) }
.dots { display: inline-flex; align-items: center; gap: 5px; height: 15px }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: #6b7690; animation: chat-dot 1.05s ease-in-out infinite }
.dots i:nth-child(2) { animation-delay: .15s }
.dots i:nth-child(3) { animation-delay: .3s }
@keyframes chat-dot { 0%, 75%, 100% { opacity: .22; transform: none } 38% { opacity: 1; transform: translateY(-3px) } }
/* The newest answer arrives in order, top block first, the way a reader reads it. */
.turn-answer.is-fresh .turn-body > * { animation: turn-rise .3s cubic-bezier(.2, .7, .3, 1) both }
.turn-answer.is-fresh .turn-body > :nth-child(2) { animation-delay: .06s }
.turn-answer.is-fresh .turn-body > :nth-child(3) { animation-delay: .12s }
.turn-answer.is-fresh .turn-body > :nth-child(4) { animation-delay: .18s }
.turn-answer.is-fresh .turn-body > :nth-child(5) { animation-delay: .24s }
.turn-answer.is-fresh .turn-body > :nth-child(n+6) { animation-delay: .3s }
@keyframes turn-rise { from { opacity: 0; transform: translateY(7px) } to { opacity: 1; transform: none } }
.turn-body > * + * { margin-top: 12px }
.turn-body .eyebrow { color: var(--canvas-signal); display: block }
.turn-body h4 { font: 500 17px/1.35 var(--sans); letter-spacing: -.015em; color: #f2f5fa; margin: 6px 0 0 }
.turn-body .eyebrow + h4 { margin-top: 6px }
.turn-body p { font: 15px/1.65 var(--serif); color: #cdd4e2; margin: 0 }
.turn-body .k { font: 400 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--canvas-muted); margin-top: 18px }
.turn-body .k + ul, .turn-body .k + p, .turn-body .k + ol, .turn-body .k + .chips { margin-top: 8px }
.turn-body ul.did { list-style: none; padding: 0; margin: 0 }
.turn-body ul.did li { font: 14px/1.55 var(--sans); color: #cdd4e2; padding-left: 15px; position: relative }
.turn-body ul.did li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 1px; background: #6b7690 }
.turn-body ul.did li + li { margin-top: 7px }

/* technology tags. The only place on the page where a family's colour is used. */
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 }
.tags li { display: inline-flex; align-items: center; gap: 6px; font: 400 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; padding: 6px 9px; border: 1px solid; cursor: help }
.tags li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto }
.tags li[data-family="agentic"] { color: var(--fam-agentic); border-color: var(--fam-agentic-edge); background: var(--fam-agentic-bg) }
.tags li[data-family="understanding"] { color: var(--fam-understanding); border-color: var(--fam-understanding-edge); background: var(--fam-understanding-bg) }
.tags li[data-family="platform"] { color: var(--fam-platform); border-color: var(--fam-platform-edge); background: var(--fam-platform-bg) }
.tags li[data-family="governance"] { color: var(--fam-governance); border-color: var(--fam-governance-edge); background: var(--fam-governance-bg) }

/* the family legend, under the drawing: what a tag's colour means */
.families { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--canvas-rule); list-style: none }
.families li { display: flex; cursor: default; align-items: baseline; gap: 9px; font: 400 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--canvas-muted) }
.families i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; position: relative; top: -1px }
.families li[data-family="agentic"] i { background: var(--fam-agentic) }
.families li[data-family="understanding"] i { background: var(--fam-understanding) }
.families li[data-family="platform"] i { background: var(--fam-platform) }
.families li[data-family="governance"] i { background: var(--fam-governance) }
.families li { cursor: pointer; transition: color .15s ease }
.families li:hover, .families li:focus-visible { color: #e6eaf3; outline: 0 }

/* the six-stage strip: which of Home's stages this work covered */
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; list-style: none; padding: 0; margin: 0 }
.strip li { font: 400 9.5px/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 7px 6px; border-top: 2px solid #333d52; color: #79839a; overflow-wrap: anywhere }
.strip li.on { border-top-color: var(--canvas-signal); color: #cdd4e2 }
.strip li b { font-weight: 400; color: inherit; margin-right: 3px }

/* follow-ups: the nodes this one connects to, as the next thing to ask */
.chips { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 0 }
.chips button { font: 13px/1.35 var(--sans); text-align: left; color: #cdd4e2; background: #171d2a; border: 1px solid #333d52; padding: 7px 11px }
.chips button:hover { color: #f2f5fa; border-color: var(--canvas-signal) }
.starters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.starters button { display: flex; width: 100%; gap: 12px; align-items: center; justify-content: space-between; text-align: left; font: 13.5px/1.45 var(--sans); color: #cdd4e2; background: #171d2a; border: 1px solid #333d52; padding: 9px 12px }
.starters button::after { content: "\2192"; flex: 0 0 auto; color: #6b7690 }
.starters button:hover, .starters button:focus-visible { color: #f2f5fa; border-color: var(--canvas-signal); outline: 0 }
.starters button:hover::after, .starters button:focus-visible::after { color: var(--canvas-signal) }

/* the composer: a real search over the drawing, not a model */
.chat-foot { border-top: 1px solid var(--canvas-rule); padding: 12px 16px 14px }
.chat-peek { font: 400 11px/1.5 var(--mono); color: var(--canvas-muted); margin: 0 0 9px; min-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.chat-peek b { color: #cdd4e2; font-weight: 400 }
.chat-form { display: flex; align-items: center; gap: 8px; position: relative }
.chat-form input { flex: 1 1 auto; min-width: 0; font: 14px var(--sans); color: #f2f5fa; background: #0e131d; border: 1px solid #33405a; border-radius: 20px; padding: 10px 16px }
.chat-form input::placeholder { color: #6b7690 }
.chat-form input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent }
.chat-form > button { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; color: #fff; background: var(--blue); border: 1px solid var(--blue) }
.chat-form > button:hover { background: #2a7cff; border-color: #2a7cff }
.chat-form > button:focus-visible { outline: 2px solid #fff; outline-offset: 2px }
.chat-note { font: 400 10px/1.5 var(--mono); color: #5c6680; text-align: center; margin: 10px 0 0 }
.chat-suggest { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 4; list-style: none; margin: 0; padding: 0; background: #0e131d; border: 1px solid #33405a; max-height: 15rem; overflow-y: auto }
.chat-suggest li + li { border-top: 1px solid #1e2637 }
.chat-suggest button { display: flex; width: 100%; gap: 10px; align-items: baseline; text-align: left; background: none; border: 0; padding: 9px 12px; font: 13.5px/1.4 var(--sans); color: #cdd4e2 }
.chat-suggest button span { font: 400 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6b7690; flex: 0 0 auto }
.chat-suggest button:hover, .chat-suggest [aria-selected="true"] button { background: #1e2637; color: #f2f5fa }

/* the same work, as a list — what renders with JavaScript off */
.no-js { margin-top: 44px; border-top: 1px solid var(--canvas-rule) }
.no-js summary { cursor: pointer; padding-block: 16px; font: 400 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--canvas-muted); list-style: none }
.no-js summary::-webkit-details-marker { display: none }
.no-js summary::before { content: "+ " }
.no-js details[open] > summary::before { content: "– " }
.no-js h3 { font: 500 19px/1.3 var(--sans); color: #f2f5fa; margin: 26px 0 0 }
.no-js .record-list { list-style: none; padding: 0; margin: 10px 0 0 }
.no-js .record-list li { padding-block: 13px; border-top: 1px solid var(--canvas-rule) }
.no-js .item-title { font: 500 15px/1.4 var(--sans); color: #e6eaf3; margin: 0 0 5px }
.no-js .record-list p { font: 14px/1.6 var(--serif); color: var(--canvas-muted); margin: 0 }
.no-js .record-list p + p { margin-top: 4px }
.js .no-js { display: none }

/* ---------- 3 · what I would not build ----------------------------------- */

/* ---------- 3b · the arc: employers, roles, and what each ran on ----------
   Each firm collapses. What stays up is the identity of the row — the mark, the name, the
   dates, the roles and the technologies — because that is the part a reader scans. What the
   work actually was opens underneath. <details name> makes the four exclusive, so the
   section never grows past a screen; without that support they simply open independently. */
.arc { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule) }
.arc > li { border-bottom: 1px solid var(--rule) }
.arc-row > summary {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 330px) 12px;
  column-gap: 26px;
  padding: 30px 0;
  cursor: pointer;
  list-style: none;
}
.arc-row > summary::-webkit-details-marker { display: none }
.arc-row > summary::marker { content: "" }
.arc-row > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px }
/* the mark, the technologies and the caret run the full height of the header */
.arc-row > summary > .co-mark,
.arc-row > summary > .stack,
.arc-row > summary > .arc-open { grid-row: 1 / span 6; align-self: start }
.arc-row > summary > .co-mark { grid-column: 1 }
.arc-row > summary > .stack { grid-column: 3 }
.arc-row > summary > .arc-open { grid-column: 4; justify-self: start }
.arc-row > summary > .entity,
.arc-row > summary > .years,
.arc-row > summary > .acquired,
.arc-row > summary > .roles { grid-column: 2 }

/* The employer's own mark, in its own colour, once per row. The technology marks below
   stay in the page's ink: they are typographic tags, not identities. */
.co-mark { width: 44px; height: 44px; object-fit: contain; object-position: center }
.co-mark.wide { width: 52px; height: 44px }
.monogram { width: 44px; height: 44px; display: grid; place-items: center; border: 1px dashed #b9b9b0; font: 500 20px/1 var(--sans); color: var(--muted); background: var(--paper) }
.arc .entity { font: 500 22px/1.25 var(--sans); letter-spacing: -.02em; margin: 0 }
.arc .years { display: block; font: 11px/1.5 var(--mono); letter-spacing: .08em; color: var(--muted); margin: 7px 0 0 }
.arc .roles { display: block; margin: 15px 0 0 }
.arc .roles > span { display: block; font: 15px/1.5 var(--sans); padding-left: 15px; position: relative; color: var(--ink) }
.arc .roles > span + span { margin-top: 5px }
.arc .roles > span::before { content: ""; position: absolute; left: 0; top: .64em; width: 7px; height: 1px; background: #b6b6ae }
.arc .roles em { font: italic 14px/1.5 var(--serif); color: var(--muted); font-style: italic }
/* The acquisition is part of the record, so the acquirer's mark sits in the line that
   states it rather than beside the company's own. One mark per company, still. */
.arc .acquired { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 9px 0 0; font: 13px/1.5 var(--sans); color: var(--muted) }
.arc .acquired img { width: 88px; height: 19px; object-fit: contain }

/* the caret: a hairline chevron, turned a quarter when the row is open */
.arc-open { width: 9px; height: 9px; margin-top: 15px; border-right: 1px solid #9c9c93; border-bottom: 1px solid #9c9c93; transform: rotate(45deg); transition: transform .18s ease, border-color .18s ease }
.arc-row[open] > summary > .arc-open { transform: rotate(-135deg); border-color: var(--blue) }
.arc-row > summary:hover > .arc-open { border-color: var(--ink) }
.arc-row > summary:hover .entity { color: var(--blue-text) }

/* what opens: the sentence that places the firm, then the LinkedIn bullets */
.arc-body { padding: 0 0 30px 78px; max-width: 74ch }
.arc .note { font: 15px/1.65 var(--serif); color: var(--muted); margin: 0; max-width: 56ch }
/* Set tighter and shorter than the roles above them, so the role line stays the
   thing the eye lands on. */
.arc .points { list-style: none; padding: 0; margin: 13px 0 0; max-width: 62ch }
.arc .points li { position: relative; padding-left: 15px; font: 14.5px/1.6 var(--sans); color: var(--ink) }
.arc .points li + li { margin-top: 7px }
.arc .points li::before { content: ""; position: absolute; left: 1px; top: .66em; width: 4px; height: 4px; background: #b6b6ae }

.stack { margin: 0 }
.stack > .eyebrow { display: block; color: var(--muted); margin-bottom: 11px }
.stack .marks { display: flex; flex-wrap: wrap; gap: 7px }
.stack .marks > span { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rule); padding: 7px 11px 7px 8px; font: 12.5px/1 var(--sans); color: var(--ink) }
.stack img { width: 16px; height: 16px; object-fit: contain; flex: 0 0 auto }

/* ---------- 4 · what the work taught: a ledger, not a list ----------------
   Eight clauses down one spine. Each is a claim in serif and the consequence
   that follows from it in sans — the shape of an annotated record, which is
   what the rest of the page already is. The only moving part is the spine
   segment beside a clause, which takes the signal colour while you are on it;
   at rest the section carries no blue at all. */
.ledger { list-style: none; padding: 0; margin: 0; counter-reset: lesson; border-top: 1px solid var(--rule) }
.ledger > li { counter-increment: lesson; position: relative; padding: 25px 0 26px 62px; border-bottom: 1px solid var(--rule) }
.ledger > li::before { content: ""; position: absolute; left: 36px; top: 0; bottom: -1px; width: 1px; background: var(--rule); transition: background .22s ease }
.ledger > li::after { content: counter(lesson, decimal-leading-zero); position: absolute; left: 0; top: 27px; font: 11px/1 var(--mono); letter-spacing: .08em; color: var(--muted); transition: color .22s ease }
.ledger > li:hover::before, .ledger > li:focus-within::before { background: var(--blue) }
.ledger > li:hover::after, .ledger > li:focus-within::after { color: var(--blue-text) }
.ledger .claim { margin: 0; font: 400 20px/1.45 var(--serif); letter-spacing: -.004em; max-width: 64ch }
.ledger .gloss { margin: 8px 0 0; font: 15px/1.65 var(--sans); color: var(--muted); max-width: 60ch }
.ledger-cta { margin: 32px 0 0; font: 17px/1.65 var(--serif); max-width: 54ch }
.ledger-cta a { color: var(--blue-text); text-decoration: none; border-bottom: 1px solid var(--blue) }
.ledger-cta a:hover { background: rgba(0, 102, 255, .07) }
.band p.small { font: 15px/1.7 var(--serif); color: var(--muted); max-width: 66ch; margin: 0 }

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 1100px) {
  .work-open { grid-template-columns: 150px minmax(0, 1fr) minmax(240px, 320px); gap: 34px }
  .ruled { grid-template-columns: 150px minmax(0, 1fr); gap: 34px }
  .instrument { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); gap: 28px }
  .arc-row > summary { grid-template-columns: 52px minmax(0, 1fr) 12px; row-gap: 20px }
  .arc-row > summary > .stack { grid-column: 2; grid-row: auto }
  .arc-row > summary > .arc-open { grid-column: 3 }
}
@media (max-width: 860px) {
  .work-open { grid-template-columns: 150px minmax(0, 1fr); row-gap: 40px }
  .portrait { grid-column: 2; max-width: 380px }
  .instrument { grid-template-columns: minmax(0, 1fr) }
  .chat { position: static; max-height: none; min-height: 24rem }
  .chat-log { max-height: 30rem }
  .ledger > li { padding-left: 52px }
  .ledger > li::before { left: 30px }
}
@media (max-width: 650px) {
  .band { padding-block: 62px }
  .band h2, .dark h2 { font-size: 31px; margin-bottom: 32px }
  .band .lede, .dark .lede { font-size: 18px; margin: 0 0 32px }
  .ruled, .work-open { grid-template-columns: minmax(0, 1fr); gap: 26px }
  .work-open { padding-block: 44px 52px }
  .work-open h1 { font-size: clamp(34px, 9vw, 46px) }
  .work-open .deck { font-size: 18px; margin-top: 24px }
  .portrait { grid-column: 1; max-width: none }
  .margin-note p { max-width: 42ch }
  .dark { padding-block: 62px }
  .sides { grid-template-columns: 1fr; gap: 10px }
  .side .side-title { font-size: 19px }
  .arc-row > summary { grid-template-columns: minmax(0, 1fr) 12px; row-gap: 14px; padding: 24px 0 }
  .arc-row > summary > .co-mark { grid-column: 1; grid-row: auto }
  .arc-row > summary > .entity, .arc-row > summary > .years,
  .arc-row > summary > .acquired, .arc-row > summary > .roles { grid-column: 1 }
  .arc-row > summary > .stack { grid-column: 1; grid-row: auto }
  .arc-row > summary > .arc-open { grid-column: 2; grid-row: 1 }
  .arc-body { padding-left: 0; padding-bottom: 24px }
  .ledger > li { padding: 21px 0 22px 40px }
  .ledger > li::before { left: 22px }
  .ledger .claim { font-size: 18px }
  /* the drawing keeps only the labels that still read; the list operates it */
  .anchor-list { display: block }
  #graph { min-height: 15rem }
  .node .label-constraint { display: none }
}

/* ---------- reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .chat-log { scroll-behavior: auto }
  .link, .node .dot, .side, .turn-body, .arc-open { transition: none !important }
  .chat-state i, .dots i, .turn-answer.is-fresh .turn-body > * { animation: none !important }
}

/* ---------- revision 4 (Imran's review, 2026-09-29) ---------------------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 4px; font: 500 14px var(--sans); text-decoration: none; border: 1px solid transparent; white-space: nowrap }
.btn-primary { background: var(--blue); color: #fff }
.btn-primary:hover { background: var(--blue-text) }
.masthead nav { align-items: center }
.masthead nav a.btn { text-decoration: none }
/* Phones: keep every destination visible on a second row, as the other pages. */
@media (max-width: 40rem) { .masthead { height: auto; min-height: 68px; flex-wrap: wrap; gap: 12px; padding-block: 12px } .masthead nav { width: 100%; justify-content: space-between; gap: 10px; padding-left: 0 } .masthead nav .btn { padding: 8px 10px; font-size: 13px } .masthead nav a:not(.btn) { padding-block: 8px } }
/* crop the lower edge of the portrait, where the generator's sparkle sits */
.portrait img { aspect-ratio: 4 / 4.3; object-fit: cover; object-position: 50% 10% }
/* experience: outcomes open, the rest one click away */
.arc .more { margin: 10px 0 0 }
.arc .more > summary { cursor: pointer; font: 500 12px/1.5 var(--mono); letter-spacing: .04em; color: var(--blue-text); width: max-content }
.arc .more > .points { margin-top: 8px }
/* close */
#close { padding-bottom: 72px }
.close-box { border: 1px solid var(--ink); border-radius: 4px; padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; background: #fff }
.close-box h2 { font: 600 clamp(24px, 2.6vw, 30px)/1.2 var(--sans); letter-spacing: -.02em; margin: 0 }
.close-box p { margin: 8px 0 0; color: var(--muted) }
.close-box .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.li { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--rule); border-radius: 4px; background: #fff }
.li:hover { border-color: #0A66C2 }
@media (max-width: 52rem) { .close-box { grid-template-columns: 1fr } }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-block: 28px; border-top: 1px solid var(--rule); font: 12px/1.6 var(--mono); color: var(--muted) }