.case-visual{margin:44px 0 55px;color:#292925;--visual-rule:#c7c7be}.visual-heading{margin-bottom:28px;max-width:840px}.visual-index{font-size:10px;letter-spacing:1.5px;font-weight:600;color:#6b6b61}.study-chapter .visual-heading h3,.visual-heading h3{font-family:'Space Grotesk',Arial,sans-serif;font-size:clamp(23px,3vw,30px);letter-spacing:-.8px;line-height:1.25;font-weight:500;margin:14px 0 12px}.case-visual .visual-heading p{font-size:15px;line-height:1.65;color:#626259;margin:0;max-width:780px}.case-visual h4{font-family:'Space Grotesk',Arial,sans-serif;font-size:19px;letter-spacing:-.4px;font-weight:500;line-height:1.35;margin:0 0 12px}.case-visual p{font-size:14px;line-height:1.65;color:#55554e}.case-visual button{font:inherit;font-size:13px;line-height:1.5;cursor:pointer;border:1px solid #97978e;background:#fff;color:#33332e;padding:11px 15px;border-radius:3px;min-height:44px;transition:background .2s,box-shadow .2s}.case-visual button[aria-pressed=true],#play-route{background:#292925;color:white;border-color:#292925}.case-visual button:hover{box-shadow:2px 3px 0 #00000018}.case-visual button:focus-visible{outline:2px solid #292925;outline-offset:4px}.case-visual .handwritten-note{font-size:23px;color:#626259}
/* A timeline: all three phases can be understood together. */
.scope-timeline{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:26px;align-items:start;border-top:1px solid var(--visual-rule);padding-top:24px}.scope-phase{display:flex;gap:14px;padding:12px 0}.phase-number{font-family:'Caveat',cursive;font-size:32px;color:#626262;line-height:1}.scope-focus{background:#fff;padding:22px 20px;border:1px solid #292925;box-shadow:3px 4px 0 #00000009;transform:rotate(-.5deg);margin-top:-12px}.scope-focus .phase-number{color:#292925}.scope-caption{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#626262;margin-bottom:12px}.scope-focus .scope-caption{font-weight:600;color:#292925}.scope-phase h4{font-size:22px;margin-bottom:5px}.visual-date{font-size:12px;color:#626262}.scope-phase h5{font-size:15px;font-weight:500;line-height:1.5;margin:22px 0 8px}.scope-phase p{margin:0}.scope-thread{display:flex;gap:10px;align-items:baseline;font-family:'Caveat',cursive;font-size:25px;line-height:1.2;color:#5c5c53;margin:23px 0 0 22px}.scope-thread>span{font-size:38px}
/* A single switch compares the whole organisation. */
.visual-teams{padding:28px;background:#eaeae4;border:1px solid #d8d8ce}.comparison-controls{display:flex;justify-content:space-between;gap:15px;align-items:center}.comparison-controls>div,.route-toolbar>div{display:flex;gap:8px;flex-wrap:wrap}.record-cast{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-top:28px}.record-person{position:relative;min-width:0}.role-sketch{display:block;width:140px;max-width:100%;aspect-ratio:3/4;background-image:url('lamproom/team-sketches-corrected.png');background-size:400% 100%;background-position:calc(var(--person) * 100% / 3) 0;background-repeat:no-repeat;pointer-events:none}.record-person .role-sketch{margin:auto auto 20px}.record-person h4{font-size:17px;margin-bottom:12px}.record-format{display:inline-block;font-family:'Caveat',cursive;font-size:23px;line-height:1.2;border-bottom:1px dashed #999991;margin-bottom:8px}.record-person p{margin:8px 0 0;font-size:13px;line-height:1.65}.shared-thread{height:50px;margin-top:20px}.shared-thread svg{width:100%;height:100%;overflow:visible}.shared-thread path{fill:none;stroke:#292925;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}.visual-teams[data-record-view=after] .shared-thread path{opacity:1;animation:record-connect .65s ease forwards}.visual-teams[data-record-view=after] .record-format{border-bottom-style:solid}.case-visual .comparison-result{font-family:'Caveat',cursive;font-size:26px;line-height:1.3;text-align:center;color:#393931;max-width:720px;margin:5px auto 0}.record-updated{animation:record-update .35s ease}
/* Field notes: the problems stay visible, without a four-click selector. */
.field-notes{display:grid;grid-template-columns:1fr 1fr;gap:26px 42px}.field-note{display:flex;gap:20px;align-items:center;border-top:1px solid var(--visual-rule);padding-top:20px}.field-note .role-sketch{width:90px;flex:0 0 90px}.field-note h4{font-size:18px;margin-bottom:12px}.field-note ul{list-style:none;padding:0;margin:0}.field-note li{font-size:14px;line-height:1.6;color:#55554e;margin:7px 0;padding-left:16px;position:relative}.field-note li:before{content:'–';position:absolute;left:0;color:#73736a}.field-note li:first-child{color:#292925}
/* A research map: five complete relationships, no hidden excerpts. */
.opportunity-map{border-top:1px solid #292925}.opportunity-head,.opportunity-row{display:grid;grid-template-columns:1fr 1.15fr 1.1fr;gap:30px}.opportunity-head{padding:15px 0;border-bottom:1px solid #292925;font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:#5b5b52}.opportunity-row{padding:22px 0;border-bottom:1px solid var(--visual-rule);align-items:center;transition:background .2s}.opportunity-row:hover{background:#eeeee7}.opportunity-row>div:first-child{display:flex;align-items:baseline;gap:15px}.finding-number{font-family:'Caveat',cursive;font-size:25px;color:#626262}.opportunity-row p{margin:0;font-size:14px}.opportunity-idea{position:relative}.opportunity-idea p{color:#292925;font-weight:500}.draw-arrow{position:absolute;left:-23px;top:0;font-family:'Caveat',cursive;font-size:26px;color:#626259}.case-visual .visual-footnote{font-size:12px;line-height:1.7;color:#626262;margin:20px 0 0;max-width:800px}
/* A complete branching flow; animation traces it without hiding the map. */
.visual-inspection-flow{padding:30px 25px;background:#fff;border:1px solid #c7c7be}.route-toolbar{display:flex;gap:16px;justify-content:space-between;align-items:center}.case-visual .route-instruction{font-size:12px;color:#626262;margin:16px 0 25px}.inspection-map{display:grid;grid-template-columns:1fr 1.1fr 1fr;column-gap:25px;row-gap:16px;align-items:center}.route-node{position:relative;border:1px solid #b5b5ac;padding:20px 17px;background:#fafaf7;transition:border-color .3s,background .3s,box-shadow .3s}.route-node h4{font-size:18px;margin:12px 0 8px}.route-node p,.branch p{font-size:13px;margin:0;line-height:1.65}.node-number{font-size:11px;letter-spacing:1px;color:#626262}.route-scan:after,.device-decision:after{content:'→';font-family:'Caveat',cursive;font-size:27px;position:absolute;right:-22px;top:50%;color:#76766d}.device-decision{position:relative;border-left:1px solid #aaa99e;padding-left:16px}.decision-title{display:block;font-size:14px;font-weight:500;margin-bottom:12px}.branch{position:relative;padding:12px 12px 12px 40px;border:1px dashed #b5b5ac;margin:8px 0;background:#fafaf7;transition:background .3s,border-color .3s}.branch-label{position:absolute;left:9px;top:15px;font-size:10px;font-weight:600;color:#626262}.branch h4{font-size:15px;margin:0 0 5px}.next-device{grid-column:1/-1;display:flex;gap:13px;align-items:center;border-bottom:1px dashed #aaa99e;padding:3px 14px 16px}.next-device>span{font-family:'Caveat',cursive;font-size:42px;line-height:1;color:#626262}.next-device strong{font-size:12px;font-weight:500}.next-device p{margin:3px 0 0;font-size:12px;color:#626262}.signoff-label{grid-column:1/-1;text-align:center;font-family:'Caveat',cursive;font-size:24px;color:#55554e;margin:0 0 5px}.signoff-path{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:25px;align-items:stretch}.signoff-path>.route-node:not(:last-child):after{content:'→';font-family:'Caveat',cursive;font-size:27px;position:absolute;right:-22px;top:50%;color:#76766d}.route-selected{border-color:#393931;border-style:solid;background:#eeeee7}.route-visited{border-color:#55554b;background:#f1f1e9}.route-current{border-color:#292925;background:#eeeee5;box-shadow:inset 0 0 0 1px #292925}.route-current .node-number,.route-current .branch-label{color:#292925}.case-visual .route-status{font-size:13px;border-top:1px solid #ccc;padding-top:17px;margin:24px 0 0;line-height:1.65;color:#55554e}.route-playing:after{content:' · Playing';font-size:11px;opacity:.8}
@keyframes record-connect{to{stroke-dashoffset:0}}@keyframes record-update{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:850px){.scope-timeline{gap:18px}.scope-focus{padding:18px 12px}.record-cast{gap:18px}.record-person h4{font-size:15px}.comparison-controls .handwritten-note{display:none}.opportunity-head,.opportunity-row{gap:24px}.field-notes{gap:24px}.field-note{gap:12px}.field-note .role-sketch{width:65px;flex-basis:65px}.visual-teams{padding:24px 20px}.visual-inspection-flow{padding:25px 18px}.route-toolbar{align-items:start}.route-toolbar>div{flex:1}.route-toolbar>button{max-width:160px}}
@media(max-width:650px){.case-visual{margin:35px 0 40px}.visual-heading{margin-bottom:22px}.scope-timeline{grid-template-columns:1fr;gap:8px;padding-top:12px}.scope-phase{padding:20px 15px;border-left:1px solid #b5b5ac}.scope-focus{margin:0;border:1px solid #292925;transform:none}.scope-phase h5{margin-top:12px}.scope-thread{font-size:23px;margin-left:10px}.visual-teams{padding:22px 15px}.comparison-controls>div{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:8px}.case-visual button{font-size:12px;padding:10px 11px}.record-cast{grid-template-columns:1fr 1fr;gap:25px 20px}.record-person .role-sketch{width:115px;margin-bottom:14px}.record-person h4{font-size:16px}.record-format{font-size:22px}.shared-thread{display:none}.case-visual .comparison-result{font-size:24px;margin-top:28px}.field-notes{grid-template-columns:1fr;gap:20px}.field-note .role-sketch{width:85px;flex-basis:85px}.field-note{gap:18px}.opportunity-head{display:none}.opportunity-row{grid-template-columns:1fr;gap:16px;padding:22px 0}.opportunity-row>div:first-child{gap:12px}.opportunity-row>div:not(:first-child){padding-left:39px;position:relative}.opportunity-idea .draw-arrow{left:10px;top:18px}.opportunity-row>div:nth-child(2):before{content:'Design opportunity';display:block;text-transform:uppercase;letter-spacing:.8px;font-size:9px;color:#77776d;margin-bottom:6px}.opportunity-row>div:nth-child(3):before{content:'Who does what';display:block;text-transform:uppercase;letter-spacing:.8px;font-size:9px;color:#77776d;margin-bottom:6px}.visual-inspection-flow{padding:22px 14px}.route-toolbar{flex-direction:column;gap:12px;align-items:stretch}.route-toolbar>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.route-toolbar>button{max-width:none;width:fit-content}.inspection-map{grid-template-columns:1fr;gap:24px}.route-scan:after,.device-decision:after{content:'↓';right:50%;top:auto;bottom:-28px}.device-decision{padding-left:12px}.next-device{padding:0 4px 15px}.next-device>span{font-size:35px}.signoff-label{margin-bottom:-5px}.signoff-path{grid-template-columns:1fr;gap:25px}.signoff-path>.route-node:not(:last-child):after{content:'↓';right:50%;top:auto;bottom:-29px}.route-node{padding:17px}.route-node h4{margin-top:10px}}
@media(prefers-reduced-motion:reduce){.case-visual button,.opportunity-row,.route-node,.branch{transition:none}.record-updated{animation:none}.visual-teams[data-record-view=after] .shared-thread path{animation:none;stroke-dashoffset:0}}
/* The phase story is one framed paper study, ending with its shared foundation. */
.visual-phases{padding:clamp(22px,3vw,34px);border:1px solid #77776d;background:#eeeee8;box-shadow:4px 5px 0 #00000007;border-radius:3px;overflow:hidden}.visual-phases .visual-heading{margin-bottom:30px}.visual-phases .scope-timeline{gap:22px}.visual-phases .scope-focus .scope-caption{display:inline-block;background:#292925;color:#fff;font-size:11px;letter-spacing:.8px;padding:7px 10px;margin-bottom:14px;line-height:1.3;box-shadow:2px 2px 0 #bcbcb0}.visual-phases .scope-thread{border-top:1px solid #c7c7be;padding-top:20px;margin:25px 0 0}.visual-phases .scope-focus{--phase-angle:-.5deg}.phase-motion-ready .scope-phase,.phase-motion-ready .scope-thread{opacity:0}.phase-motion-active .scope-phase{animation:phase-roll-in .8s cubic-bezier(.2,.75,.25,1) both}.phase-motion-active .scope-phase:nth-child(2){animation-delay:.24s}.phase-motion-active .scope-phase:nth-child(3){animation-delay:.48s}.phase-motion-active .scope-thread{animation:phase-foundation-in .65s ease-out 1.3s both}@keyframes phase-roll-in{0%{opacity:0;transform:translate(-32px,16px) rotate(-7deg);transform-origin:20% 100%}65%{opacity:1}100%{opacity:1;transform:translate(0,0) rotate(var(--phase-angle,0deg));transform-origin:20% 100%}}@keyframes phase-foundation-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:650px){.visual-phases{padding:22px 16px}.visual-phases .scope-focus{--phase-angle:0deg}.visual-phases .scope-timeline{gap:10px}.visual-phases .scope-thread{font-size:23px;padding-top:16px;margin-top:20px}.visual-phases .scope-thread>span{font-size:30px}}@media(prefers-reduced-motion:reduce){.phase-motion-ready .scope-phase,.phase-motion-ready .scope-thread{opacity:1}.phase-motion-active .scope-phase,.phase-motion-active .scope-thread{animation:none}}
/* People are introduced in the story rather than hidden behind a comparison. */
.role-player-story{margin:36px 0 40px;position:relative}.role-player{display:grid;grid-template-columns:250px minmax(0,560px);gap:clamp(30px,6vw,75px);align-items:center;padding:15px 0 28px;max-width:920px;margin:0 0 16px;position:relative}.role-player:nth-child(even){grid-template-columns:minmax(0,560px) 250px;margin-left:auto}.role-player:nth-child(even) .role-cutout{grid-column:2;grid-row:1}.role-player:nth-child(even) .role-player-copy{grid-column:1;grid-row:1}.role-cutout{margin:0;position:relative;text-align:center;transform:rotate(-2deg)}.role-player:nth-child(even) .role-cutout{transform:rotate(2deg)}.role-cutout img{display:block;width:100%;height:auto;filter:drop-shadow(2px 4px 2px #00000012)}.role-cutout figcaption{display:inline-block;position:relative;max-width:90%;font-family:'Caveat',cursive;font-size:23px;line-height:1.3;color:#333;background:#fff;padding:3px 15px;margin-top:-11px;box-shadow:1px 2px 0 #00000008}.role-player-number{font-size:10px;letter-spacing:1.3px;font-weight:500;color:#626262}.role-player-copy h4{font-family:'Space Grotesk',Arial,sans-serif;font-size:25px;font-weight:500;letter-spacing:-.6px;margin:12px 0 16px;color:#292925;line-height:1.2}.study-chapter .role-player-copy p{font-size:16px;line-height:1.8;margin:0 0 12px;max-width:560px}.role-player-copy:before{content:'';display:block;width:42px;height:1px;background:#a3a396;position:absolute;top:0}.role-player:nth-child(1) .role-player-copy:before{display:none}.role-player:last-child{padding-bottom:0;margin-bottom:0}@media(max-width:850px){.role-player{grid-template-columns:200px minmax(0,1fr);gap:28px}.role-player:nth-child(even){grid-template-columns:minmax(0,1fr) 200px}}@media(max-width:650px){.role-player,.role-player:nth-child(even){grid-template-columns:1fr;gap:18px;margin:0 0 35px;padding:0 0 25px}.role-player:nth-child(even) .role-cutout,.role-player:nth-child(even) .role-player-copy{grid-column:1;grid-row:auto}.role-cutout{max-width:225px;margin:auto}.role-player-copy h4{font-size:24px;margin-top:10px}.role-player-copy:before{display:none}.role-player-story{margin-top:30px}.role-player-copy{border-top:1px solid #d1d1c6;padding-top:18px}.study-chapter .role-player-copy p{font-size:15px;line-height:1.8}}
/* Repeat the same people in the later research notes for visual continuity. */
.field-note .role-sketch{aspect-ratio:1;background-size:contain;background-position:center}.field-note:nth-child(1) .role-sketch{background-image:url('lamproom/role-operator-cutout.png')}.field-note:nth-child(2) .role-sketch{background-image:url('lamproom/role-supervisor-cutout.png')}.field-note:nth-child(3) .role-sketch{background-image:url('lamproom/role-technician-cutout.png')}.field-note:nth-child(4) .role-sketch{background-image:url('lamproom/role-admin-cutout.png')}
/* Registered paper-cutout poses: gaze and hands move while the scene stays fixed. */
.role-motion{position:relative;width:100%;aspect-ratio:var(--frame-ratio,1);overflow:hidden;isolation:isolate}.role-cutout .role-motion-sheet{display:block;width:300%;max-width:none;height:auto;transform:translateX(calc(var(--pose,0) * -100% / 3));filter:none;pointer-events:none}.clock-thought{position:absolute;top:1%;left:0;width:31%;height:auto;fill:#f5f5f3;stroke:#4e4e45;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .25s;pointer-events:none}.clock-thought>path,.clock-thought>circle{vector-effect:non-scaling-stroke}.clock-thought>path:not(:first-child){fill:none}.role-motion[data-pose="1"] .clock-thought,.role-motion[data-pose="2"] .clock-thought{opacity:1}.thought-minute{transform-origin:46px 37px}.is-acting .thought-minute{animation:waiting-clock 4.8s ease-in-out both}@keyframes waiting-clock{from{transform:rotate(0deg)}to{transform:rotate(260deg)}}@media(prefers-reduced-motion:reduce){.clock-thought{transition:none;display:none}.thought-minute{animation:none!important}.role-cutout .role-motion-sheet{transform:translateX(0)}}
.field-note:nth-child(1) .role-sketch{background-image:url('lamproom/role-operator-sequence.png');background-size:300% 100%;background-position:0 0}.role-motion[data-pose="2"] .thought-minute{transform:rotate(260deg)}
.role-player-admin .clock-thought{left:auto;right:0;top:0}
/* Hover-only motion and alternating pencil strokes reveal real colour. */
.role-motion>.role-motion-sheet{filter:grayscale(1)}.role-colour-pass{position:absolute;inset:0;z-index:1;pointer-events:none;clip-path:polygon(0 var(--pass-top),0 var(--pass-top),0 var(--pass-bottom),0 var(--pass-bottom));transition:clip-path .28s ease;transition-delay:0s}.role-colour-pass.pass-reverse{clip-path:polygon(100% var(--pass-top),100% var(--pass-top),100% var(--pass-bottom),100% var(--pass-bottom))}.person-hovered .role-colour-pass{clip-path:polygon(0 var(--pass-top),100% var(--pass-top),100% var(--pass-bottom),0 var(--pass-bottom));transition-duration:.42s;transition-delay:var(--pass-delay)}.role-colour-pass>.role-motion-sheet{filter:none}.clock-thought{z-index:2}.field-note:nth-child(1) .role-sketch{filter:grayscale(1)}@media(prefers-reduced-motion:reduce){.role-colour-pass{transition:none!important}}
/* Four tools, four concise sets of findings; no repeated portraits. */
.visual-pain-points{padding:25px 22px 22px;background:#edede6;border:1px solid #d6d6cc;border-radius:3px}.study-chapter .visual-pain-points .visual-heading h3{font-size:18px;letter-spacing:-.25px;margin:0 0 8px;font-weight:500}.visual-pain-points .visual-heading{margin-bottom:22px}.visual-pain-points .visual-heading p{font-size:14px;line-height:1.6}.visual-pain-points .field-notes{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.visual-pain-points .field-note{display:flex;flex-direction:column;gap:12px;align-items:flex-start;background:#fafaf7;padding:17px 15px 19px;border:1px solid #d2d2c8;box-shadow:2px 3px 0 #00000004;min-width:0}.work-tool{width:86px;height:86px;color:#626256;align-self:center;flex:0 0 auto}.visual-pain-points .field-note h4{font-size:16px;margin:0 0 12px;letter-spacing:-.3px}.visual-pain-points .field-note li{font-size:13px;line-height:1.55;margin:0 0 10px;padding-left:12px}.visual-pain-points .field-note li:last-child{margin-bottom:0}.visual-pain-points .field-note li:first-child{font-weight:500;color:#292925}.visual-pain-points .field-note li:before{font-weight:400}.visual-pain-points .field-note>div{width:100%}@media(max-width:850px){.visual-pain-points .field-notes{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.visual-pain-points .field-note{padding:18px}.visual-pain-points{padding:22px 18px}}@media(max-width:480px){.visual-pain-points .field-notes{grid-template-columns:1fr}.visual-pain-points .field-note{display:grid;grid-template-columns:65px minmax(0,1fr);gap:16px;align-items:start}.work-tool{width:65px;height:65px}.visual-pain-points .field-note li{font-size:13px}}
/* Canvas frames never translate through neighbouring poses. */
.role-frame-base,.role-frame-colour{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.role-frame-base{filter:grayscale(1);z-index:0}.role-frame-colour{filter:none}.frames-ready>.role-motion-sheet{visibility:hidden}.role-cutout .role-motion-sheet{transition:none!important;transform:none!important}.role-colour-pass{overflow:hidden}
/* Field notes become separate torn scraps rather than illustrated cards. */
.visual-pain-points{padding:0;border:0;background:transparent}.visual-pain-points .field-notes{gap:17px;align-items:stretch;filter:drop-shadow(1px 3px 2px #00000009)}.visual-pain-points .field-note{display:block;position:relative;border:0;padding:24px 20px 25px;box-shadow:none;background-color:#fffefa;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 28px,#e6e4d975 29px,transparent 30px);background-position:0 38px;clip-path:polygon(0 3%,5% 1%,11% 3%,17% 0,23% 2%,30% 1%,37% 3%,43% 0,51% 2%,58% 1%,66% 3%,72% 0,80% 2%,88% 1%,95% 3%,100% 1%,99% 32%,100% 57%,99% 81%,100% 98%,94% 100%,87% 98%,81% 100%,74% 98%,68% 99%,61% 97%,54% 100%,47% 98%,40% 100%,33% 98%,26% 100%,19% 98%,12% 100%,5% 98%,0 100%,1% 77%,0 55%,1% 30%);transform:rotate(-.8deg)}.visual-pain-points .field-note:nth-child(2){transform:rotate(.8deg);background-color:#fff}.visual-pain-points .field-note:nth-child(3){transform:rotate(-.4deg)}.visual-pain-points .field-note:nth-child(4){transform:rotate(1deg);background-color:#fff}.visual-pain-points .field-note h4{font-family:'Caveat',cursive;font-size:27px;font-weight:600;letter-spacing:0;margin:0 0 17px;line-height:1.15}.visual-pain-points .field-note ul{margin:0}.visual-pain-points .field-note li{font-family:'Caveat',cursive;font-size:23px;font-weight:400;line-height:1.28;color:#4c4c43;padding-left:12px;margin-bottom:15px}.visual-pain-points .field-note li:first-child{font-weight:500;color:#292925}.note-word{display:inline-block}.is-writing .note-word{animation:write-note-word .22s steps(var(--letters),end) var(--word-delay) both}@keyframes write-note-word{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
/* A question-led journal replaces the repeated three-column table. */
.thinking-visual{border-top:1px solid #b8b8ae;padding-top:27px}.study-chapter .thinking-visual .visual-heading h3{font-size:21px;margin:0 0 10px;letter-spacing:-.4px}.thinking-visual .visual-heading p{font-size:14px}.thinking-journal{border-left:1px solid #c7c6b8;padding-left:24px}.thinking-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);gap:45px;align-items:start;padding:25px 0 30px;border-bottom:1px solid #dddcd1}.thinking-step:last-child{border-bottom:0;padding-bottom:5px}.thinking-question{position:sticky;top:105px;display:flex;gap:14px;align-items:start}.thought-number{border:1px solid #939386;border-radius:47% 53% 48% 51%;font-family:'Caveat',cursive;font-size:20px;line-height:1;min-width:34px;height:32px;display:grid;place-items:center;transform:rotate(-5deg);color:#6a6a5c}.case-visual .thinking-question h4{font-family:'Caveat',cursive;font-size:32px;font-weight:500;letter-spacing:-.3px;line-height:1.15;margin:0;position:relative}.thinking-question h4:after{content:'';display:block;width:72px;height:2px;background:#7d7d6d;margin-top:14px;transform:rotate(-1deg);transform-origin:left;transition:transform .5s}.thinking-step:hover .thinking-question h4:after{transform:rotate(-1deg) scaleX(1.5)}.thinking-answers{display:grid;gap:26px}.thinking-connection{padding:0 0 4px}.case-visual .thinking-observation{font-size:13px;line-height:1.6;color:#626262;margin:0 0 10px;max-width:500px}.thinking-proposal{display:flex;gap:10px;align-items:start}.idea-arrow{width:27px;height:38px;flex:0 0 27px;fill:none;stroke:#626254;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.idea-arrow path{stroke-dasharray:1;stroke-dashoffset:0}.thinking-connection:hover .idea-arrow path{animation:thinking-arrow .5s ease both}.case-visual .thinking-proposal p{font-family:'Space Grotesk',Arial,sans-serif;font-size:19px;line-height:1.45;color:#33332c;font-weight:500;letter-spacing:-.3px;margin:0}.case-visual .thinking-responsibility{font-size:14px;color:#636357;line-height:1.65;margin:11px 0 0 37px;padding-left:12px;border-left:1px solid #bfbfaf}.thinking-visual .visual-footnote{padding-top:22px;margin-top:25px;border-top:1px dashed #c8c7ba;font-size:12px;color:#626262;line-height:1.65;max-width:100%}@keyframes thinking-arrow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@media(max-width:850px){.thinking-step{gap:25px;grid-template-columns:1fr 1.4fr}.case-visual .thinking-question h4{font-size:29px}.visual-pain-points{padding:0}.visual-pain-points .field-note{padding:23px 20px}}@media(max-width:650px){.thinking-journal{padding-left:15px}.thinking-step{grid-template-columns:1fr;gap:23px;padding:23px 0 26px}.thinking-question{position:static}.case-visual .thinking-question h4{font-size:30px}.thinking-answers{padding-left:12px;gap:24px}.case-visual .thinking-proposal p{font-size:18px}.thinking-visual .visual-heading{margin-bottom:5px}.visual-pain-points .field-note li{font-size:24px}}@media(max-width:480px){.visual-pain-points .field-note{display:block}.visual-pain-points .field-notes{gap:17px}.visual-pain-points .field-note li{font-size:24px;margin-bottom:13px}}@media(prefers-reduced-motion:reduce){.is-writing .note-word{animation:none;clip-path:none}.thinking-connection:hover .idea-arrow path{animation:none}.thinking-question h4:after{transition:none}}
/* One static before/after view of information, with no scenario controls. */
.information-flow{margin:40px 0 48px;background:#fff;border:1px solid #cacac0;padding:25px 25px 28px;border-radius:3px}.study-chapter .information-heading h3{font-size:22px;line-height:1.3;letter-spacing:-.5px;margin:0 0 24px;font-weight:500}.information-label{display:flex;align-items:center;gap:13px;margin-bottom:19px}.information-label strong{font-size:13px;line-height:1.2;border:1px solid #79796d;padding:6px 12px;font-weight:500;border-radius:2px}.information-label>span{font-size:13px;color:#626262;line-height:1.4}.information-after .information-label strong{background:#292925;border-color:#292925;color:#fff}.information-before{padding-bottom:25px;border-bottom:1px solid #dcdcd1;margin-bottom:26px}.information-network{display:grid;grid-template-columns:minmax(0,1fr) 38px minmax(0,1.3fr) 38px minmax(0,1.15fr);gap:11px;align-items:center}.information-node{padding:17px 16px;border:1px dashed #b8b8aa;background:#fafaf7;min-width:0}.information-node h4{font-family:'Space Grotesk',Arial,sans-serif;font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.25px;margin:0 0 8px}.study-chapter .information-node p{font-size:13px;line-height:1.5;margin:0;color:#59594f}.information-node>span{display:block;margin-top:8px;font-size:11px;color:#626262;line-height:1.5}.information-stack{display:grid;gap:12px}.information-before .information-stack .information-node{min-height:94px}.information-arrow{height:100%;width:100%;min-height:90px;align-self:stretch;fill:none;stroke:#8c8c7c;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}.information-after .information-node{border-style:solid;border-color:#b5b5a7}.information-after .shared-information{background:#292925;color:#fff;padding:23px 18px;border-color:#292925}.study-chapter .shared-information p{color:#626262}.information-after .information-arrow{stroke:#3f3f35}.information-recipients .information-node{padding:13px 15px}.information-recipients .information-node h4{font-size:15px;margin-bottom:4px}.information-recipients .information-node p{font-size:12px}.information-recipients .information-node{min-height:71px}@media(max-width:850px){.information-flow{padding:23px 18px}.information-network{grid-template-columns:minmax(0,1fr) 24px minmax(0,1.25fr) 24px minmax(0,1.1fr);gap:8px}.information-node{padding:14px 12px}.information-node h4{font-size:16px}.information-after .shared-information{padding:20px 13px}}@media(max-width:650px){.information-flow{padding:22px 15px}.information-network{grid-template-columns:1fr;gap:14px}.information-arrow{display:none}.information-network>.information-node:not(:last-child),.information-network>.information-stack:not(:last-child){position:relative;margin-bottom:13px}.information-network>.information-node:not(:last-child):after,.information-network>.information-stack:not(:last-child):after{content:'↓';position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);font-size:22px;color:#7d7d6c;line-height:1}.information-before .information-stack{grid-template-columns:1fr 1fr;gap:10px}.information-node{padding:15px}.information-node h4{font-size:16px}.information-before .information-stack .information-node{min-height:128px}.information-label{gap:10px;margin-bottom:20px}.information-label>span{font-size:12px}.information-recipients{grid-template-columns:1fr;gap:10px;border-left:1px solid #b8b8a7;padding-left:14px}.information-recipients .information-node{min-height:0}.information-before{padding-bottom:24px;margin-bottom:24px}}
/* Tear only the paper layer; handwriting must never be clipped by the edge. */
.visual-pain-points .field-note{clip-path:none;background:none;isolation:isolate;overflow:visible;--scrap-paper:#fffefa}.visual-pain-points .field-note:nth-child(2),.visual-pain-points .field-note:nth-child(4){background:none;--scrap-paper:#fff}.visual-pain-points .field-note:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-color:var(--scrap-paper);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 28px,#e6e4d975 29px,transparent 30px);background-position:0 38px;clip-path:polygon(0 3%,5% 1%,11% 3%,17% 0,23% 2%,30% 1%,37% 3%,43% 0,51% 2%,58% 1%,66% 3%,72% 0,80% 2%,88% 1%,95% 3%,100% 1%,99% 32%,100% 57%,99% 81%,100% 98%,94% 100%,87% 98%,81% 100%,74% 98%,68% 99%,61% 97%,54% 100%,47% 98%,40% 100%,33% 98%,26% 100%,19% 98%,12% 100%,5% 98%,0 100%,1% 77%,0 55%,1% 30%)}.visual-pain-points .field-note li{line-height:1.42}.note-word{padding:.12em .14em;margin:-.12em -.14em;overflow:visible;clip-path:none}@keyframes write-note-word{from{clip-path:inset(-.2em 100% -.2em -.2em)}to{clip-path:inset(-.2em -.2em -.2em -.2em)}}
/* One stable diagram frame; the shared-record view opens first. */
.information-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.study-chapter .information-heading h3{margin:0;flex:1}.information-switch{display:flex;gap:6px;flex:0 0 auto;padding:4px;border:1px solid #c3c3b7;background:#f4f4ef;border-radius:3px}.information-switch button{font:inherit;font-size:13px;color:#626254;background:transparent;border:1px solid transparent;padding:8px 16px;min-height:40px;cursor:pointer;border-radius:2px}.information-switch button[aria-pressed=true]{color:white;background:#292925;border-color:#292925}.information-switch button:focus-visible{outline:2px solid #292925;outline-offset:3px}.information-switch button:hover{border-color:#8c8c7d}.information-comparison{display:grid}.information-comparison>section{grid-area:1/1;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .18s ease}.information-comparison>section.is-current{visibility:visible;opacity:1;pointer-events:auto}.information-comparison .information-before{border:0;margin:0;padding:0}.information-comparison>section{align-self:start}@media(max-width:650px){.information-heading{align-items:flex-start;flex-direction:column;gap:17px}.information-switch button{padding:8px 20px}.information-comparison .information-before{padding:0;margin:0}}@media(prefers-reduced-motion:reduce){.information-comparison>section{transition:none}.is-writing .note-word{clip-path:none!important}}

/* One confident ink weight for the native drawn objects and connectors. */
.idea-arrow,.information-arrow,.clock-thought{stroke:#222;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.idea-arrow path,.information-arrow path{vector-effect:non-scaling-stroke}.role-motion[data-sprite-rows]>.role-motion-sheet{visibility:hidden}.role-motion[data-sprite-rows]{background:none}

/* Continuous colour reveal prevents seams between independently clipped bands. */
.role-colour-pass{transition:clip-path .75s ease}.person-hovered .role-colour-pass{transition-duration:.75s;transition-delay:0ms}.idea-arrow,.information-arrow,.clock-thought{stroke-width:var(--illustration-stroke,2.8px)}.award-trophy g>*{stroke-width:var(--illustration-stroke,2.8px);vector-effect:non-scaling-stroke}.role-frame-base,.role-frame-colour{image-rendering:auto}.interview-art>img{image-rendering:auto}

/* Place the question on paper, then sketch its connection to each solution. */
.thinking-journal{border-left:0;padding-left:0}
.thinking-step{position:relative;gap:80px;padding:35px 10px 40px;isolation:isolate}
.thinking-question{position:relative;top:auto;display:block;padding:25px 27px 32px;background:#ece8cd;box-shadow:1px 5px 9px #29281f14;transform:rotate(-2deg);transform-origin:50% 15%;z-index:1;border-radius:1px 1px 14px 2px}
.thinking-step:nth-child(2) .thinking-question{--note-angle:1.5deg;transform:rotate(1.5deg);background:#eeeade}
.thinking-step:nth-child(3) .thinking-question{--note-angle:-1deg;transform:rotate(-1deg)}
.thought-number{border:0;display:block;min-width:0;height:auto;margin-bottom:14px;font-size:17px;transform:none;color:#656153}
.case-visual .thinking-question h4{font-size:30px;line-height:1.18;color:#292820}
.thinking-question h4:after{display:none}
.thinking-answers{position:relative;z-index:1;gap:32px;padding-top:10px}
.thinking-proposal .idea-arrow{display:none}
.case-visual .thinking-responsibility{margin-left:0}
.hmw-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;fill:none;stroke:#444238;stroke-width:var(--illustration-stroke,2.8px);stroke-linecap:round;stroke-linejoin:round}
.hmw-links path{vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.hmw-ready:not(.hmw-active) .thinking-question{opacity:0;transform:translate(-15px,-22px) rotate(-7deg) scale(1.04)}
.hmw-ready:not(.hmw-active) .hmw-links path{stroke-dashoffset:1}
.hmw-active .thinking-question{animation:place-question .65s cubic-bezier(.2,.75,.25,1) both}
.hmw-active .hmw-links path{animation:draw-question-link .8s ease both;animation-delay:calc(.65s + var(--link-index,0) * .25s)}
@keyframes place-question{0%{opacity:0;transform:translate(-15px,-22px) rotate(-7deg) scale(1.04)}65%{opacity:1;transform:translate(0,2px) rotate(var(--note-angle,-2deg)) scale(.99)}100%{opacity:1;transform:translate(0,0) rotate(var(--note-angle,-2deg)) scale(1)}}
@keyframes draw-question-link{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(max-width:850px){.thinking-step{gap:60px}.case-visual .thinking-question h4{font-size:27px}.thinking-question{padding:23px}}
@media(max-width:650px){.thinking-step{gap:32px;padding:30px 4px 35px}.thinking-question{margin:0 12px 0 28px;padding:23px 25px;max-width:360px}.thinking-answers{padding-left:40px}.case-visual .thinking-question h4{font-size:29px}.thinking-answers{gap:30px}}
@media(prefers-reduced-motion:reduce){.hmw-ready:not(.hmw-active) .thinking-question{opacity:1;transform:rotate(var(--note-angle,-2deg))}.hmw-ready:not(.hmw-active) .hmw-links path{stroke-dashoffset:0}.hmw-active .thinking-question,.hmw-active .hmw-links path{animation:none}}

/* Never expose the raw atlas while its isolated canvas frame loads. */
.role-cutout .role-motion-sheet{visibility:hidden!important}
.role-motion{overflow:visible;aspect-ratio:1}
.role-colour-pass{overflow:hidden}