:root {
  --black: var(--color-charcoal, #151512);
  --ink: var(--color-ink, #1c1c18);
  --ivory: var(--color-ivory, #f1efe9);
  --muted: #aaa69b;
  --quiet: #6f6c63;
  --orange: var(--color-action, #bd4525);
  --evidence: var(--color-evidence, #5c584f);
  --line: rgba(241, 239, 233, .16);
  --outer: 48px;
  --sans: "Instrument Sans", Arial, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  background: var(--black);
  color: var(--ivory);
  font-family: var(--sans);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-width: 0; scroll-behavior: smooth; background: var(--black); }
body { min-width: 0; margin: 0; background: var(--black); }
button { border: 0; color: inherit; font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 200; top: 12px; left: 12px; display: inline-flex; min-height: 32px; align-items: center; padding: 8px 10px; color: var(--black); background: var(--ivory); font: 10px var(--mono); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.stage { position: fixed; z-index: 2; inset: 0; min-width: 0; overflow: hidden; isolation: isolate; background: var(--black); }
.paper { position: absolute; z-index: -4; inset: 0; background: var(--black); }
.grid { position: absolute; z-index: 1; inset: 0 var(--outer); pointer-events: none; opacity: .035; border-right: 1px solid var(--ivory); border-left: 1px solid var(--ivory); }
.site-nav { position: absolute; z-index: 60; top: 24px; right: var(--outer); left: var(--outer); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; color: var(--ivory); font: 10px/1.2 var(--mono); }
.site-nav p { margin: 0; text-align: center; }
.site-nav .nav-status { justify-self: end; }
.wordmark { display: flex; min-height: 32px; gap: 18px; align-items: center; color: var(--ivory); text-decoration: none; }
.wordmark b { font: 650 13px var(--sans); }
.wordmark a, .public-route-nav a { color: inherit; text-decoration: none; }
.site-nav span { color: var(--orange); }
.public-route-nav { display: none; }
body[data-public="true"] .public-route-nav { position: absolute; top: 22px; right: 0; display: flex; gap: 18px; }
body[data-public="true"] .site-nav .nav-status { margin-right: 250px; }
body[data-public="true"] .site-nav .evidence-status span,
body[data-public="true"] .representative { color: var(--muted); }
body[data-public="true"] .site-nav .evidence-status span { border-bottom: 1px solid currentColor; }
body[data-public="true"] .public-route-nav a,
body[data-public="true"] .project-entry,
body[data-public="true"] .wordmark a,
body[data-public="true"] .skip-link { display: inline-flex; min-height: 32px; align-items: center; }
body[data-public="true"] .review-controller,
body[data-public="true"] .review-reveal { display: none !important; }
.xray { position: absolute; inset: 0; }
.chapter-context, .map-head, .operating-map, .workflow-selector, .workflow-canvas, .responsibility, .system-entry { position: absolute; transition: opacity .72s var(--ease), transform .9s var(--ease), visibility .72s; }
.chapter-context, .map-head, .operating-map, .workflow-selector, .workflow-canvas, .responsibility, .system-entry { opacity: 0; pointer-events: none; transform: translateY(30px); }
.chapter-context > :not(.scene-media), .operating-map > :not(.scene-media), .workflow-selector > :not(.scene-media), .workflow-canvas > :not(.scene-media), .responsibility > :not(.scene-media), .system-entry > :not(.scene-media) { position: relative; z-index: 2; }
.scene-media { position: absolute; z-index: 0; margin: 0; overflow: hidden; background: #0d0d0b; opacity: 0; pointer-events: none; transition: opacity .75s ease, transform 1.1s var(--ease), filter .8s ease; }
.scene-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5) contrast(1.05) brightness(.52); transform: scale(1.08); transition: transform 1.35s var(--ease), filter .8s ease; }
.scene-media[data-ready="true"] { opacity: 1; }
.chapter-context > p:first-child, .eyebrow, .chapter-chain, .representative, .selector-annotation, .system-stamp, .system-preview p, .state-readout { font: 10px/1.3 var(--mono); letter-spacing: 0; }
.chapter-context { top: 124px; left: var(--outer); width: 43%; }
.chapter-context h1 { max-width: 640px; margin: 8px 0 18px; font-size: clamp(82px, 7.2vw, 128px); font-weight: 560; line-height: .76; letter-spacing: 0; }
.chapter-context > p:first-of-type { margin: 0; color: var(--orange); }
.chapter-thesis { max-width: 390px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.16; }
.chapter-chain { display: flex; max-width: 750px; gap: 9px; align-items: center; margin: 32px 0 0; padding: 0; color: var(--muted); white-space: nowrap; }
.chapter-chain span:nth-of-type(-n+5) { color: var(--ivory); }
.chapter-chain i, .workflow i { color: var(--orange); font-style: normal; }
.chapter-media { position: fixed; top: 96px; right: var(--outer); width: 44vw; height: calc(100vh - 164px); transform: translateX(8vw); }
.chapter-media::after, .operating-media::after, .workflow-media::after, .responsibility-media::after, .system-media::after { position: absolute; inset: 0; background: rgba(0, 0, 0, .32); content: ""; }
.chapter-media img { object-position: 62% center; }
.map-head { top: 145px; right: var(--outer); width: 43%; transform: translateX(50px); }
.map-head h2, .selector-title h2, .workflow-heading h2, .responsibility h2, .system-entry h2 { margin: 14px 0 0; color: var(--ivory); font-size: clamp(58px, 5.25vw, 90px); font-weight: 540; line-height: .84; letter-spacing: 0; }
.eyebrow { margin: 0; color: var(--orange); }
.map-proof { margin: 26px 0 0; color: var(--muted); font: 14px/1.2 var(--mono); }
.map-proof strong { color: var(--ivory); font-weight: 500; }
.map-legend { display: none; }
.mode-strip { display: flex; gap: 18px; margin-top: 28px; color: var(--quiet); }
.mode-strip span { max-width: 170px; }.mode-strip b { display: block; color: var(--ivory); font: 8px var(--mono); font-weight: 500; }.mode-strip small { display: block; margin-top: 5px; font: 8px/1.3 var(--mono); }
.operating-map { inset: 400px var(--outer) 56px; transform: translateY(46px); }
.operating-map::before { position: absolute; z-index: 1; top: 44%; right: 13%; left: 2%; border-top: 1px solid rgba(241, 239, 233, .28); content: ""; }
.operating-map::after { position: absolute; z-index: 1; top: calc(44% - 3px); left: 42%; width: 7px; height: 7px; border: 1px solid var(--orange); background: var(--black); content: ""; }
.map-lines { display: none; }
.operating-media { right: 0; bottom: 0; width: 28%; height: 84%; transform: translateX(28px); }.operating-media img { object-position: 68% center; filter: grayscale(.6) contrast(1.1) brightness(.4); }
.actor, .system, .map-note { position: absolute; }.actor { display: grid; grid-template-columns: 23px 1fr; gap: 2px 8px; width: 155px; padding: 0; }.actor span, .actor small, .system, .map-note { font: 8px/1.2 var(--mono); }.actor span { color: var(--orange); }.actor b { font-size: 14px; font-weight: 560; line-height: .95; }.actor small { grid-column: 2; color: var(--muted); }
.actor-customer { top: 12%; left: 1%; }.actor-sales { top: 38%; left: 15%; }.actor-warehouse { top: 65%; left: 27%; }.actor-procurement { top: 26%; left: 40%; }.actor-supplier { top: 7%; left: 53%; }.actor-owner { top: 60%; left: 65%; }.actor-finance { top: 31%; left: 77%; }.actor-logistics { top: 68%; left: 88%; }
.system { padding: 0; color: var(--quiet); background: transparent; }.sys-wechat { top: 6%; left: 22%; }.sys-phone { top: 78%; left: 11%; }.sys-excel { top: 84%; left: 42%; }.sys-erp { top: 8%; left: 43%; }.sys-files { top: 78%; left: 70%; }.sys-finance { top: 9%; left: 86%; }.map-note { display: none; }
.workflow-selector { inset: 130px var(--outer) 56px; display: grid; grid-template-columns: minmax(280px, .85fr) minmax(440px, 1.15fr); gap: 11vw; transform: translateY(44px); }.selector-title { align-self: start; }.selector-title h2 { font-size: clamp(64px, 6.2vw, 106px); }
.selector-media { top: 0; left: 32%; width: 29%; height: 100%; transform: translateY(50px); }.selector-media img { object-position: 52% center; filter: grayscale(.7) contrast(1.15) brightness(.32); }.workflow-list { position: relative; z-index: 2; align-self: center; display: grid; gap: 9px; }
.workflow { display: grid; grid-template-columns: 48px 1fr auto; width: 100%; min-height: 48px; align-items: center; gap: 12px; padding: 0; color: var(--muted); background: transparent; text-align: left; transition: color .35s ease, opacity .35s ease, transform .45s var(--ease); }.workflow span, .workflow em { font: 9px var(--mono); font-style: normal; }.workflow em { color: var(--quiet); }.workflow b { font-size: clamp(20px, 2vw, 30px); font-weight: 520; line-height: .9; }.workflow.active { color: var(--ivory); transform: translateX(-22px); }.workflow.active span, .workflow.active em { color: var(--orange); }.workflow:not(.active) { opacity: .42; }.workflow:hover, .workflow:focus-visible { opacity: 1; transform: translateX(-7px); }.workflow-enter { display: none; }.selector-annotation { position: absolute; right: 0; bottom: 0; margin: 0; color: var(--quiet); }
.workflow-canvas { inset: 108px var(--outer) 44px; transform: translateY(38px); }.workflow-heading { display: grid; grid-template-columns: 1fr auto; align-items: end; }.workflow-heading h2 { grid-column: 1; max-width: 700px; font-size: clamp(82px, 7.6vw, 132px); }.representative { grid-column: 2; grid-row: 1 / 3; max-width: 245px; margin: 0; text-align: right; }.state-only { display: none; }.current-state { display: inline; }
.workflow-rail-label { position: absolute; top: 270px; left: 0; margin: 0; color: var(--orange); font: 9px var(--mono); }.rail-redesign { opacity: 0; }.workflow-media { top: 42px; right: 0; width: 25%; height: calc(100% - 76px); transform: translateX(55px); }.workflow-media img { object-position: 52% center; }.workflow-media-current img { filter: grayscale(.72) contrast(1.2) brightness(.24); }.workflow-media-redesign { opacity: 0; transform: translateX(35px) scale(1.04); }.workflow-media-redesign img { filter: grayscale(.3) contrast(1.03) brightness(.56); }
.workflow-nodes { position: absolute; top: 308px; left: 0; width: 70%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 16px; margin: 0; padding: 0; list-style: none; transition: gap .7s var(--ease), width .7s var(--ease), transform .7s var(--ease); }.q { position: relative; min-height: 122px; padding: 0 10px 0 15px; border-left: 1px solid rgba(241, 239, 233, .28); background: transparent; transition: min-height .7s var(--ease), transform .7s var(--ease), border-color .45s ease, opacity .45s ease; }.q::before { position: absolute; top: 0; left: -1px; width: 28px; border-top: 2px solid var(--ivory); content: ""; transition: border-color .45s ease, width .55s var(--ease); }.q span { color: var(--orange); font: 8px var(--mono); }.q b { display: block; margin-top: 18px; color: var(--ivory); font-size: 16px; font-weight: 560; line-height: .94; }.q small { display: block; margin-top: 8px; color: var(--muted); font: 8px/1.3 var(--mono); }.q:nth-child(2), .q:nth-child(7) { transform: translateY(28px); }.q:nth-child(3), .q:nth-child(8) { transform: translateY(-12px); }.q:nth-child(5), .q:nth-child(10) { transform: translateY(17px); }
.current-traces { position: absolute; right: 8px; bottom: 0; display: flex; max-width: 90%; flex-wrap: wrap; justify-content: flex-end; gap: 4px; transition: opacity .35s ease; }.current-traces i { color: var(--quiet); font: 7px/1 var(--mono); font-style: normal; }.friction-tags { position: absolute; right: 8px; bottom: 0; display: flex; max-width: 105%; flex-wrap: wrap; justify-content: flex-end; gap: 5px; opacity: 0; transition: opacity .45s ease; }.friction-tags i { color: var(--orange); font: 8px/1 var(--mono); font-style: normal; }.redesign-copy { position: absolute; inset: auto 8px 0 15px; display: grid; gap: 4px; color: var(--ivory); opacity: 0; font: 9px/1.1 var(--mono); transition: opacity .45s ease; }.redesign-copy strong { color: var(--orange); font-weight: 500; }
.parallel-context, .system-rail, .human-intervention { position: absolute; opacity: 0; pointer-events: none; transition: opacity .5s ease, transform .7s var(--ease); }.parallel-context { top: 250px; right: 0; width: 21%; display: grid; gap: 9px; color: var(--quiet); font: 7px/1.25 var(--mono); }.parallel-context > div { display: flex; flex-wrap: wrap; gap: 4px; }.time-state b { color: var(--orange); font-weight: 500; }.time-state span, .layer-strip span, .flow-strip span, .mode-context span { color: var(--muted); }.system-rail { top: 275px; left: 0; width: 70%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); transform: translateY(12px); }.system-rail::before { position: absolute; top: 0; right: 3%; left: 0; border-top: 1px solid rgba(241, 239, 233, .45); content: ""; }.system-rail span { position: relative; min-width: 0; min-height: 38px; padding: 10px 7px 0; color: var(--muted); font: 8px/1.15 var(--mono); }.system-rail span::before { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border: 1px solid var(--orange); background: var(--black); content: ""; }.human-intervention { top: 250px; right: 0; width: 21%; display: grid; gap: 7px; transform: translateX(14px); }.human-intervention i { color: var(--ivory); font: 8px/1.2 var(--mono); font-style: normal; }
.workflow-canvas .workflow-nodes,
.workflow-canvas .workflow-rail-label,
.workflow-canvas .parallel-context,
.workflow-canvas .system-rail,
.workflow-canvas .human-intervention { position: absolute; }
.operating-map .actor,
.operating-map .system,
.operating-map .map-note,
.system-entry .system-stamp,
.system-entry .system-preview,
.system-entry .project-entry { position: absolute; }
.responsibility { inset: 112px var(--outer) 48px; display: grid; grid-template-columns: .95fr 1.15fr; gap: 8vw; transform: translateY(38px); }.responsibility h2 { position: relative; z-index: 3; font-size: clamp(74px, 7vw, 124px); }.responsibility h2 strong { color: var(--orange); font-weight: inherit; }.responsibility-media { top: 0; right: 0; width: 46%; height: 100%; transform: translateX(70px); }.responsibility-media img { object-position: 50% center; filter: grayscale(.55) contrast(1.16) brightness(.32); }.responsibility-matrix { position: relative; z-index: 3; align-self: end; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: 62%; }.responsibility-cell { display: flex; min-width: 0; flex-direction: column; justify-content: flex-end; padding: 14px 12px; color: var(--muted); }.responsibility-cell p { margin: 0 0 auto; color: var(--orange); font: 9px var(--mono); }.responsibility-cell b { font-size: 20px; font-weight: 560; line-height: .9; }.responsibility-cell span { margin-top: 16px; font: 9px/1.25 var(--mono); }.responsibility-cell.human { padding-left: 20px; color: var(--black); background: var(--ivory); }.responsibility-cell.human p { color: var(--orange); }
.system-entry { inset: 112px var(--outer) 48px; transform: translateY(38px); }.system-stamp { position: absolute; z-index: 3; top: 0; right: 0; display: flex; gap: 22px; color: var(--muted); }.system-entry h2 { position: relative; z-index: 3; max-width: 840px; margin-top: 34px; font-size: clamp(92px, 9vw, 158px); }.system-media { top: 0; right: 0; width: 36%; height: 100%; transform: translateX(40px); }.system-media img { object-position: 55% center; filter: grayscale(.45) contrast(1.1) brightness(.38); }.system-preview { position: absolute; z-index: 3; right: 0; bottom: 58px; width: 58%; min-height: 320px; padding: 0; color: var(--ivory); }.system-preview p { margin: 0; color: var(--orange); }.system-preview p:last-child { position: absolute; right: 0; bottom: 0; left: 0; color: var(--muted); }.system-preview ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 26px; margin: 62px 0 0; padding: 0; list-style: none; }.system-preview li { display: grid; gap: 9px; min-height: 62px; padding: 0; font: 11px/1.08 var(--mono); }.system-preview li:nth-child(2), .system-preview li:nth-child(6) { transform: translateY(24px); }.system-preview li:nth-child(5) { grid-column: 2; }.system-preview li span { color: var(--orange); font: 8px var(--mono); }.system-preview li b { font-weight: 400; }.project-entry { position: absolute; z-index: 4; bottom: 0; left: 0; display: inline-flex; min-height: 32px; align-items: center; padding: 0 0 6px; color: var(--ivory); border-bottom: 1px solid rgba(241, 239, 233, .56); background: transparent; font: 11px var(--mono); }.project-entry span { color: var(--orange); }
.state-readout { position: absolute; z-index: 80; bottom: 24px; left: var(--outer); display: flex; gap: 12px; margin: 0; color: var(--muted); }.state-number { color: var(--orange); }
.review-controller { position: fixed; z-index: 100; top: 16px; right: 16px; width: 205px; padding: 12px; color: var(--ivory); background: rgba(21, 21, 18, .95); border: 1px solid rgba(241, 239, 233, .22); font: 9px var(--mono); transition: transform .3s ease, opacity .3s ease; }.review-controller > div { display: flex; justify-content: space-between; align-items: center; }.review-controller > div button { color: var(--ivory); background: transparent; font-size: 17px; }.review-controller > p { margin: 8px 0; color: var(--muted); }.review-controller > button { display: grid; grid-template-columns: 34px 1fr; width: 100%; padding: 7px 0; border-top: 1px solid rgba(241, 239, 233, .16); color: inherit; background: transparent; text-align: left; }.review-controller > button[aria-pressed="true"] { color: var(--orange); }.review-controller.is-hidden { transform: translateX(230px); opacity: 0; pointer-events: none; }.review-reveal { position: fixed; z-index: 100; right: 16px; bottom: 16px; display: none; padding: 8px; color: var(--ivory); background: var(--black); border: 1px solid rgba(241, 239, 233, .25); font: 9px var(--mono); }.review-reveal.is-visible { display: block; }
body[data-state="1"] .chapter-context { opacity: 1; transform: none; pointer-events: auto; } body[data-state="1"] .chapter-media { opacity: 1; transform: none; } body[data-state="1"] .chapter-media img { transform: scale(1.03); } body[data-state="1"] .map-head, body[data-state="1"] .operating-map { opacity: 1; transform: none; pointer-events: auto; } body[data-state="1"] .operating-media { opacity: .82; transform: none; }
body[data-state="2"] .chapter-context { opacity: .2; transform: translateX(-80px); } body[data-state="2"] .chapter-media { opacity: .2; transform: translateX(2vw); } body[data-state="2"] .map-head, body[data-state="2"] .operating-map { opacity: .24; transform: none; } body[data-state="2"] .workflow-selector { opacity: 1; transform: none; pointer-events: auto; } body[data-state="2"] .selector-media { opacity: .75; transform: none; }
body[data-state="3"] .workflow-canvas, body[data-state="4"] .workflow-canvas, body[data-state="5"] .workflow-canvas { opacity: 1; transform: none; pointer-events: auto; } body[data-state="3"] .workflow-media-current { opacity: .8; transform: none; } body[data-state="3"] .parallel-context { opacity: .72; }
body[data-state="4"] .current-state { display: none; } body[data-state="4"] .friction-state { display: inline; } body[data-state="4"] .workflow-media-current { opacity: .18; transform: translateX(18px) scale(1.08); } body[data-state="4"] .workflow-media-redesign { opacity: .38; transform: translateX(25px) scale(1.08); } body[data-state="4"] .workflow-nodes { gap: 48px 11px; transform: translateY(9px); } body[data-state="4"] .q { min-height: 138px; border-color: rgba(189, 69, 37, .7); } body[data-state="4"] .q::before { width: 43px; border-color: var(--orange); } body[data-state="4"] .q:nth-child(2n) { transform: translateY(44px) rotate(.5deg); } body[data-state="4"] .q:nth-child(3n) { transform: translateY(-20px) rotate(-.5deg); } body[data-state="4"] .current-traces { opacity: .18; } body[data-state="4"] .q:nth-child(1) .friction-tags, body[data-state="4"] .q:nth-child(3) .friction-tags, body[data-state="4"] .q:nth-child(4) .friction-tags, body[data-state="4"] .q:nth-child(7) .friction-tags, body[data-state="4"] .q:nth-child(9) .friction-tags { opacity: 1; }
body[data-state="5"] .current-state { display: none; } body[data-state="5"] .redesign-state { display: inline; } body[data-state="5"] .workflow-media-current { opacity: 0; transform: translateX(70px); } body[data-state="5"] .workflow-media-redesign { opacity: .72; transform: none; } body[data-state="5"] .workflow-media-redesign img { transform: scale(1.02); } body[data-state="5"] .parallel-context { opacity: 0; } body[data-state="5"] .workflow-nodes { top: 332px; width: 70%; gap: 18px 30px; transform: none; } body[data-state="5"] .q { min-height: 88px; padding-top: 0; border-color: rgba(241, 239, 233, .44); transform: none !important; } body[data-state="5"] .q::before { width: 14px; border-color: var(--orange); } body[data-state="5"] .q b, body[data-state="5"] .q small, body[data-state="5"] .current-traces, body[data-state="5"] .friction-tags { opacity: 0; } body[data-state="5"] .q span { color: var(--muted); } body[data-state="5"] .redesign-copy { opacity: 1; } body[data-state="5"] .rail-current { opacity: 0; } body[data-state="5"] .rail-redesign { opacity: 1; } body[data-state="5"] .system-rail, body[data-state="5"] .human-intervention { opacity: 1; transform: none; }
body[data-state="6"] .responsibility { opacity: 1; transform: none; pointer-events: auto; } body[data-state="6"] .responsibility-media { opacity: .8; transform: none; } body[data-state="6"] .responsibility-media img { transform: scale(1.02); } body[data-state="7"] .system-entry { opacity: 1; transform: none; pointer-events: auto; } body[data-state="7"] .system-media { opacity: .78; transform: none; } body[data-state="7"] .system-media img { transform: scale(1.02); }
@media (max-width: 1023px) { :root { --outer: 30px; } .site-nav { grid-template-columns: 1fr 1fr; }.site-nav > p { display: none; } body[data-public="true"] .site-nav .nav-status { display: block; margin-right: 0; text-align: right; } body[data-public="true"] .public-route-nav { top: 35px; } .chapter-context { width: 48%; }.chapter-media { width: 43vw; }.map-head { width: 45%; }.actor { width: 118px; }.actor b { font-size: 11px; }.actor small { font-size: 7px; } .workflow-selector { grid-template-columns: .8fr 1.2fr; gap: 48px; }.workflow-nodes { width: 74%; gap: 20px 10px; }.workflow-media { width: 21%; }.parallel-context, .human-intervention { width: 19%; }.system-rail { width: 74%; }.responsibility { gap: 38px; }.responsibility-cell b { font-size: 16px; }.system-preview { width: 62%; } }
@media (max-width: 767px) {
  :root { --outer: 20px; } html, body { min-width: 0; width: 100%; } .stage { min-width: 0; width: 100%; }.grid { opacity: .025; border-right: 0; border-left: 0; }.site-nav { top: 14px; display: flex; justify-content: space-between; font-size: 7px; }.wordmark { min-height: 32px; gap: 8px; }.wordmark b { font-size: 10px; }.wordmark span { font-size: 6px; }.site-nav > p { display: none; } body[data-public="true"] .public-route-nav { top: 32px; gap: 12px; }.public-route-nav a { font-size: 7px; }
  .chapter-context, .map-head, .operating-map, .workflow-selector, .workflow-canvas, .responsibility, .system-entry { right: var(--outer); left: var(--outer); width: auto; } .chapter-context { top: 86px; }.chapter-context h1 { max-width: 330px; font-size: clamp(58px, 18vw, 78px); }.chapter-thesis { max-width: 252px; font-size: 13px; }.chapter-chain { max-width: 300px; flex-wrap: wrap; margin-top: 22px; color: var(--muted); font-size: 6px; white-space: normal; }.chapter-chain i { display: none; }.chapter-media { top: 210px; right: 0; width: 58vw; height: 46vh; opacity: 0 !important; transform: translateX(8vw) !important; }.map-head { top: 372px; }.map-head h2, .selector-title h2, .workflow-heading h2, .responsibility h2, .system-entry h2 { font-size: clamp(34px, 9.2vw, 42px); }.map-head h2 { max-width: 265px; line-height: .82; }.map-proof { max-width: 260px; margin-top: 13px; font-size: 8px; }.mode-strip { display: none; }.operating-map { top: 575px; bottom: 18px; overflow: hidden; }.operating-map::before { top: 6%; right: auto; bottom: 4%; left: 9px; border-top: 0; border-left: 1px solid rgba(241, 239, 233, .3); }.operating-map::after { top: 48%; left: 6px; }.operating-media { right: 0; width: 38%; height: 48%; opacity: .45 !important; }.actor { left: 24px !important; width: 170px; }.actor span { position: absolute; left: -24px; }.actor b { font-size: 10px; }.actor small { font-size: 6.5px; }.actor-customer { top: 2%; }.actor-sales { top: 14%; }.actor-warehouse { top: 26%; }.actor-procurement { top: 38%; }.actor-supplier { top: 50%; }.actor-owner { top: 62%; }.actor-finance { top: 74%; }.actor-logistics { top: 86%; }.system { display: none; }
  .workflow-selector { top: 94px; bottom: 42px; display: block; overflow: hidden; }.selector-title h2 { max-width: 270px; font-size: clamp(51px, 15vw, 68px); }.selector-media { top: 0; left: auto; right: -20px; width: 48%; height: 100%; opacity: .48 !important; }.workflow-list { position: absolute; right: 0; bottom: 62px; left: 0; gap: 10px; }.workflow { grid-template-columns: 26px 1fr; min-height: 42px; gap: 8px; }.workflow b { font-size: 16px; }.workflow em { display: none; }.workflow.active { transform: translateX(0); }.workflow:hover, .workflow:focus-visible { transform: translateX(0); }.workflow-enter { position: absolute; right: 0; bottom: 26px; display: inline-flex; min-height: 32px; align-items: center; padding: 0; color: var(--ivory); border-bottom: 1px solid rgba(241, 239, 233, .5); background: transparent; font: 8px var(--mono); }.workflow-enter span { color: var(--orange); }.selector-annotation { left: 0; bottom: 0; font-size: 6px; }
  .workflow-canvas { top: 88px; bottom: 28px; overflow: auto; }.workflow-heading { display: block; }.workflow-heading h2 { max-width: 290px; font-size: clamp(52px, 15vw, 70px); }.representative { max-width: 210px; margin-top: 14px; color: var(--muted); font-size: 7px; text-align: left; }.workflow-rail-label { top: 220px; font-size: 7px; }.workflow-media { top: 230px; right: -20px; width: 44%; height: 38%; }.workflow-nodes { top: 260px; width: 100%; display: block; padding: 0 0 28px 20px; }.q { min-height: 78px; margin-bottom: 14px; padding-left: 12px; }.q::before { width: 18px; }.q b { margin-top: 12px; font-size: 15px; }.q small { margin-top: 6px; font-size: 7px; }.q:nth-child(n) { transform: none; }.parallel-context { display: none; }.system-rail { top: 245px; width: 100%; display: block; padding-left: 18px; }.system-rail::before { top: 0; bottom: 0; left: 2px; width: 0; border-top: 0; border-left: 1px solid rgba(241, 239, 233, .4); }.system-rail span { min-height: 28px; padding: 6px 0 0 10px; font-size: 7px; }.system-rail span::before { top: 7px; left: -1px; width: 5px; height: 5px; }.human-intervention { top: 247px; right: 0; width: 43%; gap: 10px; }.human-intervention i { font-size: 6px; }.redesign-copy { left: 12px; font-size: 8px; } body[data-state="4"] .workflow-nodes { gap: 0; transform: none; } body[data-state="4"] .q { min-height: 86px; } body[data-state="4"] .q:nth-child(2n), body[data-state="4"] .q:nth-child(3n) { transform: none; } body[data-state="5"] .workflow-nodes { top: 310px; width: 100%; padding-left: 18px; } body[data-state="5"] .q { min-height: 64px; margin-bottom: 8px; }
  .responsibility { top: 88px; bottom: 32px; display: block; overflow: hidden; }.responsibility h2 { max-width: 310px; font-size: clamp(48px, 14vw, 63px); }.responsibility-media { top: 0; right: -20px; width: 53%; height: 48%; opacity: .55 !important; }.responsibility-matrix { position: absolute; right: 0; bottom: 0; left: 0; display: block; min-height: 0; }.responsibility-cell { display: grid; grid-template-columns: 73px 1fr; min-height: 62px; padding: 8px 0; }.responsibility-cell p { font-size: 7px; }.responsibility-cell b { font-size: 14px; }.responsibility-cell span { margin-top: 5px; font-size: 7px; }.responsibility-cell.human { padding-left: 10px; }
  .system-entry { top: 88px; bottom: 30px; overflow: hidden; }.system-stamp { right: 0; display: grid; gap: 3px; font-size: 7px; text-align: right; }.system-entry h2 { max-width: 315px; margin-top: 42px; font-size: clamp(55px, 16vw, 73px); }.system-media { right: -20px; width: 51%; height: 55%; opacity: .55 !important; }.system-entry > .system-preview { position: absolute; top: 410px; right: 0; bottom: auto; left: 0; width: auto; min-height: 0; }.system-preview p { font-size: 7px; }.system-preview ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; margin-top: 26px; }.system-preview li { min-height: 30px; font-size: 8px; }.system-preview li:nth-child(2), .system-preview li:nth-child(6), .system-preview li:nth-child(5) { transform: none; }.system-preview p:last-child { display: none; }.project-entry { font-size: 8px; }
  .state-readout { bottom: 10px; left: var(--outer); font-size: 7px; }.scroll-space { height: 700vh; }
}

/* Reduction + mobile recomposition pass: each state keeps one readable idea. */
body[data-state="1"] .map-head { opacity: .08; }
body[data-state="1"] .operating-map { opacity: .38; }
body[data-state="1"] .operating-media { opacity: 0; }
body[data-state="2"] .chapter-context,
body[data-state="2"] .map-head,
body[data-state="2"] .operating-map { opacity: 0 !important; }
body[data-state="2"] .chapter-media,
body[data-state="2"] .operating-media { opacity: 0 !important; }
body[data-state="3"] .chapter-context,
body[data-state="3"] .map-head,
body[data-state="3"] .operating-map,
body[data-state="3"] .workflow-selector { opacity: 0 !important; }
body[data-state="3"] .workflow-media-current { opacity: .78; }
body[data-state="3"] .workflow-media-redesign { opacity: 0 !important; }
body[data-state="4"] .chapter-context,
body[data-state="4"] .map-head,
body[data-state="4"] .operating-map,
body[data-state="4"] .workflow-selector { opacity: 0 !important; }
body[data-state="4"] .workflow-media-current { opacity: .28; }
body[data-state="4"] .workflow-media-redesign { opacity: 0 !important; }
body[data-state="5"] .chapter-context,
body[data-state="5"] .map-head,
body[data-state="5"] .operating-map,
body[data-state="5"] .workflow-selector { opacity: 0 !important; }
body[data-state="5"] .workflow-media-current { opacity: 0 !important; }
body[data-state="5"] .workflow-media-redesign { opacity: .72; }
body[data-state="6"] .chapter-context,
body[data-state="6"] .map-head,
body[data-state="6"] .operating-map,
body[data-state="6"] .workflow-selector,
body[data-state="6"] .workflow-canvas { opacity: 0 !important; }
body[data-state="6"] .responsibility-media { opacity: .72; }
body[data-state="7"] .chapter-context,
body[data-state="7"] .map-head,
body[data-state="7"] .operating-map,
body[data-state="7"] .workflow-selector,
body[data-state="7"] .workflow-canvas,
body[data-state="7"] .responsibility { opacity: 0 !important; }
body[data-state="7"] .system-media { opacity: .72; }

@media (max-width: 767px) {
  body[data-state="1"] .operating-media { opacity: 0 !important; }
  .workflow-selector .selector-media { opacity: .34 !important; }
  .workflow-selector .workflow-list { position: absolute; top: 250px; bottom: auto; z-index: 3; }
  .workflow-selector .workflow-enter { position: absolute; top: 570px; bottom: auto; }
  .workflow-selector .selector-annotation { position: absolute; right: 0; bottom: 0; }
  .workflow-canvas { overflow-x: hidden; overflow-y: auto; }
  .workflow-canvas .workflow-media { right: 0; width: 42%; transform: none; overflow: hidden; }
  .workflow-canvas .workflow-nodes { position: absolute; top: 260px; left: 0; width: 100%; overflow-x: hidden; }
  .workflow-canvas .workflow-rail-label { position: absolute; }
  body[data-state="3"] .workflow-canvas .q:nth-child(even) { transform: translateX(7px); }
  body[data-state="4"] .workflow-canvas .q:nth-child(2),
  body[data-state="4"] .workflow-canvas .q:nth-child(4),
  body[data-state="4"] .workflow-canvas .q:nth-child(7) { transform: translateX(10px) !important; border-color: var(--orange); }
  body[data-state="4"] .workflow-canvas .q:nth-child(4)::before { width: 34px; border-color: var(--orange); }
  body[data-state="5"] .workflow-canvas .q { transform: none !important; }
  body[data-state="4"] .workflow-canvas .workflow-media-current,
  body[data-state="4"] .workflow-canvas .workflow-media-redesign,
  body[data-state="5"] .workflow-canvas .workflow-media-current { transform: none !important; }
  body[data-state="5"] .workflow-canvas .system-rail { top: 1400px; }
  body[data-state="5"] .workflow-canvas .human-intervention { top: 1620px; right: auto; left: 18px; width: calc(100% - 18px); }
  .responsibility { overflow: hidden; }
  .responsibility-heading { position: relative; z-index: 3; }
  .responsibility-matrix {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 14px;
  }
  .responsibility-cell {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.05fr);
    min-height: 64px;
    align-items: start;
    padding: 8px 0;
    border-top: 1px solid rgba(241, 239, 233, .16);
  }
  .responsibility-cell p,
  .responsibility-cell b,
  .responsibility-cell span { grid-column: auto; margin: 0; }
  .responsibility-cell p { padding-top: 2px; font-size: 8px; }
  .responsibility-cell b { font-size: 15px; line-height: 1.02; }
  .responsibility-cell span { padding-left: 8px; color: var(--muted); font-size: 9px; line-height: 1.2; }
  .responsibility-cell.human {
    min-height: 76px;
    padding: 8px 10px;
    border-top: 0;
    background: var(--ivory);
    color: var(--black);
  }
  .responsibility-cell.human span { color: var(--black); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; } }

/* Typography Contract V1: five semantic levels keep the editorial system
   consistent while state-specific composition remains owned by the rules above. */
:root {
  --type-display: clamp(72px, 10vw, 158px);
  --type-statement: clamp(44px, 5.8vw, 92px);
  --type-step: clamp(17px, 1.45vw, 24px);
  --type-body: clamp(15px, 1.2vw, 18px);
  --type-meta: 10px;
}
.chapter-context h1, .workflow-heading h2, .system-entry h2 { font-size: var(--type-display); line-height: .86; letter-spacing: 0; font-weight: 540; }
.map-head h2, .selector-title h2 { font-size: var(--type-statement); line-height: .92; letter-spacing: 0; font-weight: 540; }
.chapter-thesis { font-size: var(--type-body); line-height: 1.5; }
.map-proof { font-size: var(--type-body); line-height: 1.5; max-width: 40ch; }
.workflow b, .q b, .responsibility-cell b { font-size: var(--type-step); line-height: .98; letter-spacing: 0; font-weight: 540; }
.q small, .responsibility-cell span { font-size: 11px; line-height: 1.5; }
.chapter-context > p:first-child, .eyebrow, .chapter-chain, .representative, .selector-annotation, .system-stamp, .system-preview p, .state-readout, .q span, .responsibility-cell p, .system-preview li, .system-preview li span, .project-entry { font-size: var(--type-meta); line-height: 1.45; letter-spacing: .1em; }
.responsibility h2 strong { color: var(--ivory); }
.responsibility h2 em { color: var(--orange); font-style: normal; }
.representative { color: var(--muted); }
.friction-tags i { color: var(--orange); background: transparent; font-size: var(--type-meta); letter-spacing: .08em; }
.current-traces i { color: var(--quiet); font-size: var(--type-meta); letter-spacing: .06em; }
.workflow-media-current img { filter: grayscale(.78) contrast(1.18) brightness(.22); }
.workflow-media-redesign img { filter: grayscale(.25) contrast(1.02) brightness(.6); }

@media (max-width: 767px) {
  .chapter-context h1 { font-size: clamp(58px, 18vw, 78px); line-height: .86; letter-spacing: 0; }
  .map-head h2, .selector-title h2 { font-size: clamp(42px, 11vw, 58px); line-height: .9; }
  .workflow-heading h2, .system-entry h2 { font-size: clamp(52px, 15vw, 73px); line-height: .88; }
  .chapter-thesis, .map-proof { font-size: 14px; line-height: 1.45; }
  .workflow b, .q b, .responsibility-cell b { font-size: 16px; line-height: 1; }
  .q small, .responsibility-cell span { font-size: 9px; line-height: 1.4; }
  .chapter-context > p:first-child, .eyebrow, .chapter-chain, .representative, .selector-annotation, .system-stamp, .system-preview p, .state-readout, .q span, .responsibility-cell p, .system-preview li, .system-preview li span, .project-entry { font-size: 8px; line-height: 1.45; letter-spacing: .08em; }
}

/* Final UX cleanup: mobile workflow content uses the document scroll only. */
@media (max-width: 767px) {
  body {
    --mobile-workflow-step: 1800px;
    --mobile-page-height: calc(4 * 100vh + 3 * var(--mobile-workflow-step));
  }
  body[data-state="1"] { --mobile-state-offset: 0px; }
  body[data-state="2"] { --mobile-state-offset: 100vh; }
  body[data-state="3"] { --mobile-state-offset: calc(2 * 100vh); }
  body[data-state="4"] { --mobile-state-offset: calc(2 * 100vh + var(--mobile-workflow-step)); }
  body[data-state="5"] { --mobile-state-offset: calc(2 * 100vh + 2 * var(--mobile-workflow-step)); }
  body[data-state="6"] { --mobile-state-offset: calc(2 * 100vh + 3 * var(--mobile-workflow-step)); }
  body[data-state="7"] { --mobile-state-offset: calc(3 * 100vh + 3 * var(--mobile-workflow-step)); }
  .stage {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: var(--mobile-page-height);
    min-height: var(--mobile-page-height);
    overflow: visible;
  }
  .site-nav { position: sticky; top: 14px; }
  .xray {
    position: relative;
    inset: auto;
    min-height: var(--mobile-page-height);
  }
  .scroll-space { height: var(--mobile-page-height); }
  .chapter-context, .map-head, .operating-map, .workflow-selector, .workflow-canvas, .responsibility, .system-entry {
    right: var(--outer);
    bottom: auto;
    left: var(--outer);
    width: auto;
  }
  .chapter-context { top: calc(var(--mobile-state-offset) + 86px); }
  .map-head { top: calc(var(--mobile-state-offset) + 372px); }
  .operating-map { top: calc(var(--mobile-state-offset) + 575px); height: calc(100vh - 593px); }
  .workflow-selector { top: calc(var(--mobile-state-offset) + 94px); height: calc(100vh - 136px); overflow: visible; }
  .workflow-canvas {
    top: calc(var(--mobile-state-offset) + 88px);
    height: var(--mobile-workflow-step);
    min-height: var(--mobile-workflow-step);
    overflow: visible;
  }
  .workflow-canvas .workflow-media { overflow: hidden; }
  .workflow-canvas .workflow-nodes {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 150px;
    padding-left: 20px;
    overflow: visible;
  }
  body[data-state="5"] .workflow-canvas .workflow-nodes {
    top: auto;
    width: 100%;
    margin-top: 170px;
    padding-left: 18px;
  }
  body[data-state="5"] .workflow-canvas .system-rail {
    position: absolute;
    top: 1400px;
    left: 18px;
    width: calc(100% - 18px);
    margin: 0;
  }
  body[data-state="5"] .workflow-canvas .human-intervention {
    position: absolute;
    top: 1620px;
    right: auto;
    left: 18px;
    width: calc(100% - 18px);
    margin: 0;
  }
  .responsibility {
    top: calc(var(--mobile-state-offset) + 88px);
    height: calc(100vh - 120px);
    overflow: visible;
  }
  .system-entry {
    top: calc(var(--mobile-state-offset) + 88px);
    height: calc(100vh - 118px);
    overflow: visible;
  }
  /* Keep long industry identities within the chapter column on mobile. */
  body[data-industry-slug]:not([data-industry-slug="steel-trading"]) .chapter-context h1 {
    max-width: 100%;
    font-size: clamp(38px, 9.5vw, 46px);
  }
  /* Mobile scenes are in the document flow; desktop entrance transforms must
     not enlarge the root scrollable area when a scene is inactive. */
  .chapter-context, .map-head, .operating-map, .workflow-selector, .workflow-canvas, .responsibility, .system-entry {
    transform: none !important;
  }
  .chapter-media, .selector-media, .operating-media, .responsibility-media, .system-media {
    right: 0;
    transform: none !important;
  }
  .scene-media img { transform-origin: right center; }
  body[data-state="4"] .friction-tags { opacity: .82; }
  body[data-state="4"] .q:nth-child(3) .friction-tags,
  body[data-state="4"] .q:nth-child(9) .friction-tags { opacity: .68; }
  .responsibility-matrix { margin-top: 18px; }
  .responsibility-cell.human { min-height: 80px; padding-top: 10px; padding-bottom: 10px; }
}

@media (max-width: 390px) {
  .responsibility h2 { margin-top: 0; }
  .responsibility-matrix { margin-top: 4px; }
  .responsibility-cell.human { min-height: 76px; padding-top: 6px; padding-bottom: 6px; }
}