/* Shared content, four material systems. Variables are inherited by the stories. */
:root{--direction-space:.5rem;--direction-white:#fff;--direction-radius:.6rem;--direction-shadow:0 .35rem 0 var(--identity-line);--direction-display:Georgia,serif;--direction-border:1px solid var(--identity-line)}
body[data-direction]{color:var(--identity-ink);background:var(--identity-paper)}
[data-direction] section{scroll-margin-top:6rem}
[data-direction] work-story{display:block;width:100%;min-width:0;scroll-margin-top:1.5rem}
[data-direction] #throughput>work-story{margin-top:calc(var(--direction-space)*5)}
.direction-photo{position:absolute;inset:0;margin:0;overflow:hidden}
.direction-photo>img{display:block;width:100%;height:100%;object-fit:cover}
.direction-guide>div:last-child{border:var(--direction-border)!important;border-radius:var(--direction-radius)!important;box-shadow:var(--direction-shadow)}
[data-direction] :is(h1,h2,h3){letter-spacing:-.035em!important;text-wrap:balance}
[data-direction] h1{font-size:clamp(2.9rem,5.2vw,4.75rem)!important;line-height:1.04!important}
[data-direction] h2{line-height:1.1!important}
[data-direction] header{background:var(--identity-paper)!important;border-bottom:var(--direction-border)!important}
[data-direction] a,[data-direction] button{transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
[data-direction] :is(a,button,input,select):focus-visible{outline:3px solid var(--identity-deep)!important;outline-offset:4px}
[data-direction] button,[data-direction] a[style*="border-radius"]{min-height:2.75rem}
/* These section rules restyle the boxed card surfaces only. They used to match
   buttons as well, because a control's inline style also starts with border:,
   and the !important background wiped out a selected control's own colour: the
   picked industry in #cases kept its paper text on a background the rule had
   forced back to transparent, so the label vanished (QA 2026-09-23, RQA-04).
   The same applied to the trust tabs in #fears and the step tabs in #how, which
   lost every trace of which one was open. Controls keep their own colours. */
[data-direction] #top{gap:calc(var(--direction-space)*8)!important;padding-top:calc(var(--direction-space)*10)!important;padding-bottom:calc(var(--direction-space)*10)!important}
[data-direction] #top>div:last-child{align-self:center}
/* Original cream paper; open rules and stamped, slightly squared controls. */
[data-direction=v8] :is(h1,h2){font-family:var(--direction-display)!important;font-weight:500!important}
[data-direction=v8] :is(#cases,#calc,#fears,#how,#council,#letter) :not(button)[style*="border:"]{border:1px solid var(--identity-line)!important;border-radius:var(--direction-radius)!important;box-shadow:var(--direction-shadow)}
[data-direction=v8] :is(button,a)[style*="border-radius"]{border-radius:var(--direction-radius)!important}
[data-direction=v8] #calc{border-top:1px solid var(--identity-ink)}
[data-direction=v8] #letter>div{border-radius:var(--direction-radius)!important}
/* Champagne glass: translucent architecture, solid readable content surfaces. */
[data-direction=v9]{--direction-radius:1.7rem;--direction-shadow:0 1.1rem 3rem color-mix(in srgb,var(--identity-deep) 8%,transparent);--direction-border:1px solid color-mix(in srgb,var(--identity-deep) 18%,var(--direction-white));background:radial-gradient(ellipse at 90% 10%,var(--identity-soft),transparent 28rem),var(--identity-paper)!important}
[data-direction=v9] header{background:color-mix(in srgb,var(--identity-paper) 90%,transparent)!important;backdrop-filter:blur(1rem)}
[data-direction=v9] :is(#cases,#calc,#fears,#how,#council,#letter) :not(button)[style*="border:"]{border:var(--direction-border)!important;border-radius:var(--direction-radius)!important;background:color-mix(in srgb,var(--direction-white) 88%,var(--identity-soft))!important;box-shadow:inset 0 .1rem .15rem var(--direction-white),var(--direction-shadow)}
[data-direction=v9] :is(#how,#fears) svg{filter:drop-shadow(0 .2rem .15rem color-mix(in srgb,var(--identity-deep) 12%,transparent))}
[data-direction=v9] :is(button,a)[style*="border-radius"]{box-shadow:inset 0 1px 1px color-mix(in srgb,var(--direction-white) 50%,transparent),0 .4rem .8rem color-mix(in srgb,var(--identity-deep) 8%,transparent)}
[data-direction=v9] #letter>div{border-radius:var(--direction-radius)!important;border:var(--direction-border)!important;box-shadow:var(--direction-shadow)}
/* Soft objects: rounded typography, low-relief controls and a clay colleague. */
[data-direction=v10]{--direction-radius:2rem;--direction-shadow:inset .2rem .2rem .4rem var(--direction-white),0 .8rem 1.5rem color-mix(in srgb,var(--identity-deep) 8%,transparent)}
[data-direction=v10] :is(h1,h2,h3){font-family:'Bricolage Grotesque',sans-serif!important;font-weight:600!important;letter-spacing:-.045em!important}
[data-direction=v10] :is(#cases,#calc,#fears,#how,#council,#letter) :not(button)[style*="border:"]{border:1px solid var(--identity-line)!important;border-radius:var(--direction-radius)!important;box-shadow:var(--direction-shadow)}
[data-direction=v10] :is(button,a)[style*="border-radius"]{border:1px solid var(--identity-line)!important;box-shadow:inset 0 .15rem .2rem color-mix(in srgb,var(--direction-white) 65%,transparent),0 .3rem .5rem color-mix(in srgb,var(--identity-deep) 12%,transparent)}
[data-direction=v10] #letter>div{border-radius:var(--direction-radius)!important}
[data-direction=v10] #cases h3{font-weight:550!important}
/* Editorial: ruled layouts and large type; quiet, financially literate confidence. */
[data-direction=v13]{--direction-radius:0;--direction-shadow:none}
[data-direction=v13] :is(h1,h2){font-family:Georgia,'Times New Roman',serif!important;font-weight:400!important;letter-spacing:-.045em!important}
[data-direction=v13] h1{font-size:clamp(3rem,5.4vw,5rem)!important}
[data-direction=v13] :is(#cases,#calc,#fears,#how,#council,#letter) :not(button):not(input)[style*="border:"]{border:0!important;border-top:1px solid var(--identity-ink)!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
[data-direction=v13] :is(button,a)[style*="border-radius"]{border-radius:0!important;border-width:1px!important}
[data-direction=v13] :is(#calc,#throughput,#how,#letter){border-top:1px solid var(--identity-line)}
[data-direction=v13] #letter>div{border-radius:0!important}
[data-direction=v13] :is(#cases,#how) svg{stroke-width:1.3}
/* Maintain a light reading environment even in the technical/closing chapters. */
[data-direction] :is(#tech,#ask){background:var(--identity-soft)!important;color:var(--identity-ink)!important}
[data-direction] :is(#tech,#ask) :is(h2,h3,p,span,li){color:var(--identity-ink)!important}
[data-direction] #tech a{color:var(--identity-deep)!important}
[data-direction] #tech [style*="background:"]:not(.cyan-waterfall-bar){background:var(--identity-paper)!important;border-color:var(--identity-line)!important}
[data-direction] #ask a{color:var(--identity-ink)!important;border-color:var(--identity-ink)!important}
[data-direction=v13] :is(#tech,#ask){background:var(--identity-paper)!important;border-block:1px solid var(--identity-ink)}
@media(max-width:60rem){[data-direction] #top{gap:calc(var(--direction-space)*5)!important;padding-top:calc(var(--direction-space)*6)!important}[data-direction] h1{font-size:clamp(2.6rem,6vw,3.8rem)!important}}
@media(max-width:40rem){[data-direction] #top{grid-template-columns:minmax(0,1fr)!important}[data-direction] section{scroll-margin-top:5rem}[data-direction] #top>div:last-child{width:100%}.direction-guide{flex-direction:column;gap:calc(var(--direction-space)*2)!important}.direction-guide>div:first-child{width:3.5rem!important;height:3.5rem!important}.direction-guide>div:last-child{width:100%;padding:calc(var(--direction-space)*3)!important}}
@media(prefers-reduced-motion:reduce){[data-direction] *,[data-direction] *::before,[data-direction] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(prefers-reduced-transparency:reduce){[data-direction=v9] header{background:var(--identity-paper)!important;backdrop-filter:none}}