@font-face{font-family:"Shippori Mincho";font-weight:400;font-display:swap;src:url(../fonts/shippori-mincho-400.woff2)}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-display:swap;src:url(../fonts/instrument-sans-var.woff2)}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400 700;font-display:swap;src:url(../fonts/instrument-sans-italic-var.woff2)}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400.woff2)}







:root{
color-scheme:light dark;
--paper:light-dark(#f9f6ef,#171b26);
--paper-2:light-dark(#fcfaf3,#1d212c);
--paper-3:light-dark(#f0ebdf,#0c0f18);
--ink:light-dark(#151a28,#ece7de);
--ink-2:light-dark(#414757,#bfbaaf);
--ink-3:light-dark(#606674,#9f9b92);
--rule:light-dark(#7e8390,#6b6f78);
--rule-2:light-dark(#5d6371,#888c96);
--accent:light-dark(#e14d2c,#ee633e);
--accent-ink:light-dark(#af2e13,#f67d51);
--accent-wash:light-dark(#ffece2,#2f140e);
--focus:var(--accent-ink);
--selection-bg:light-dark(#fdd0b8,#703324);
--selection-fg:var(--ink);
--font-display:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",Georgia,serif;
--font-text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--step--2:clamp(.75rem,.73rem + .12vw,.8rem);
--step--1:clamp(.83rem,.8rem + .17vw,.9rem);
--step-0:clamp(1rem,.95rem + .25vw,1.125rem);
--step-1:clamp(1.2rem,1.12rem + .4vw,1.4rem);
--step-2:clamp(1.44rem,1.3rem + .7vw,1.78rem);
--step-3:clamp(1.73rem,1.5rem + 1.1vw,2.25rem);
--step-4:clamp(2.07rem,1.72rem + 1.75vw,2.86rem);
--step-5:clamp(2.49rem,1.95rem + 2.7vw,3.66rem);
--lh-tight:1.15;--lh-text:1.6;--lh-loose:1.8;--measure:64ch;
--tracking-display:-.01em;--tracking-caps:.08em;
--space-3xs:.25rem;--space-2xs:.5rem;--space-xs:.75rem;--space-s:1rem;
--space-m:1.5rem;--space-l:clamp(2rem,1.6rem + 2vw,3rem);
--space-xl:clamp(3rem,2.2rem + 4vw,5rem);--space-2xl:clamp(4rem,2.8rem + 6vw,7rem);
--space-3xl:clamp(6rem,4rem + 10vw,11rem);
--gutter:clamp(1rem,.5rem + 3vw,2.5rem);--page-max:74rem;
--radius-0:0;--radius-1:2px;--radius-2:4px;--rule-w:1px;
--ease-out:cubic-bezier(.2,.7,.2,1);--ease-in-out:cubic-bezier(.6,0,.2,1);
--motion:1;
--dur-1:calc(var(--motion)*140ms);--dur-2:calc(var(--motion)*260ms);--dur-3:calc(var(--motion)*480ms);
--z-nav:20;--z-receipt:30;
}





:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}
:root[data-motion=reduce]{--motion:0}
:root[data-motion=reduce] *,:root[data-motion=reduce] ::before,:root[data-motion=reduce] ::after{animation-duration:0s!important;transition-duration:0s!important}
@media (prefers-reduced-motion:reduce){:root:not([data-motion=full]){--motion:0}:root:not([data-motion=full]) *,:root:not([data-motion=full]) ::before,:root:not([data-motion=full]) ::after{animation-duration:0s!important;transition-duration:0s!important}}
@media (forced-colors:active){hr,th,td,blockquote{border-color:CanvasText}:focus-visible{outline:3px solid Highlight}}
*,::before,::after{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font:400 100%/var(--lh-text) var(--font-text);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-size:var(--step-0);overflow-wrap:break-word}
h1,h2,h3{font-family:var(--font-display);font-weight:500;font-synthesis:none;letter-spacing:var(--tracking-display)}
h1,h2,h3,h4,h5,h6{line-height:var(--lh-tight);text-wrap:balance;margin:0 0 var(--space-s)}
h1{font-size:var(--step-5);font-weight:400}h2{font-size:var(--step-3)}h3{font-size:var(--step-2)}h4,h5,h6{font-size:1em}
p,ul,ol,dl,blockquote,figure,pre,table{margin:0 0 var(--space-m)}
p,li,dd,figcaption,blockquote,caption{max-width:var(--measure)}
p{text-wrap:pretty;-webkit-hyphens:auto;hyphens:auto}
a{color:inherit;text-decoration-color:var(--rule);text-decoration-thickness:var(--rule-w);text-underline-offset:.18em}
a:hover{text-decoration-color:var(--accent-ink)}
strong,b,dt,th,h4,h5,h6{font-weight:600}
small,figcaption,caption,th{font-size:var(--step--1)}
sup,sub{line-height:0}
abbr[title]{text-decoration:underline dotted;cursor:help}
mark{background:var(--accent-wash);color:var(--ink)}
ul,ol{padding-left:1.25em}ol{list-style:decimal-leading-zero}li::marker{color:var(--ink-3)}dd{margin:0 0 var(--space-2xs)}
hr{border:0;border-top:var(--rule-w) solid var(--rule);margin:var(--space-l) 0}
blockquote{padding-left:var(--space-s);border-left:var(--rule-w) solid var(--rule-2);color:var(--ink-2);font-family:var(--font-display);font-size:var(--step-1);font-synthesis:none}
figcaption,caption{color:var(--ink-3)}caption{caption-side:bottom}
table{border-collapse:collapse;width:100%}
th,td{padding:var(--space-2xs) var(--space-xs);border-bottom:var(--rule-w) solid var(--rule);text-align:left;vertical-align:top}
th{color:var(--ink-2)}
table,time,data{font-variant-numeric:tabular-nums}
code,pre,kbd,samp,data{font-family:var(--font-mono);font-synthesis:none;font-size:.96em;-webkit-hyphens:manual;hyphens:manual}data{font-weight:500}
code,kbd,samp{background:var(--paper-3);padding:.1em .35em}
pre{background:var(--paper-3);padding:var(--space-s);overflow:auto}pre code{background:none;padding:0;font-size:1em}
img,video{display:block;max-width:100%;height:auto}svg{max-width:100%}
::selection{background:var(--selection-bg);color:var(--selection-fg)}
:focus-visible{outline:2px solid;outline-color:var(--focus);outline-offset:3px}:focus:not(:focus-visible){outline:0}
.visually-hidden:not(:focus){position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

:root{--hairline:color-mix(in oklab,var(--rule) 45%,var(--paper))}

[hidden]{display:none!important}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}main{flex:1}
.wrap{width:min(100% - 2*var(--gutter),var(--page-max));margin-inline:auto}
.skip{position:absolute;left:var(--space-s);top:var(--space-s);z-index:var(--z-receipt);background:var(--ink);color:var(--paper);padding:var(--space-2xs) var(--space-s);text-decoration:none}
.eyebrow{font:500 var(--step--2)/1.4 var(--font-mono);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--space-xs)}
.lede{font-size:var(--step-1);color:var(--ink-2);line-height:1.5;-webkit-hyphens:manual;hyphens:manual}
.link-row{display:flex;flex-wrap:wrap;gap:var(--space-xs);list-style:none;padding:0}
.btn{display:inline-flex;align-items:center;gap:var(--space-2xs);padding:.6em 1.1em;border:var(--rule-w) solid var(--ink);border-radius:var(--radius-1);font-size:var(--step--1);font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.btn-primary{background:var(--ink);color:var(--paper)}.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn-ghost:hover{color:var(--accent-ink);border-color:var(--accent-ink)}.btn-sm{padding:.45em .85em;font-size:var(--step--2)}
.site-header{border-bottom:var(--rule-w) solid var(--hairline)}
.nav{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand cta" "links links" "sw sw";align-items:center;gap:var(--space-xs) var(--space-s);padding-block:var(--space-s)}
.brand{grid-area:brand;display:inline-flex;align-items:center;gap:var(--space-xs);text-decoration:none;line-height:1.25;justify-self:start}
.brand-name{display:block;font-family:var(--font-display);font-size:var(--step-1);font-weight:500}
.brand-sub{display:block;font:400 var(--step--2)/1.3 var(--font-mono);color:var(--ink-3)}
.nav-links{grid-area:links}.nav-links ul{display:grid;grid-template-columns:repeat(3,max-content);gap:var(--space-3xs) var(--space-l);list-style:none;margin:0;padding:0}
.nav-links a{display:block;padding:var(--space-3xs) 0;border-bottom:2px solid transparent;color:var(--ink-2);font-size:var(--step--1);text-decoration:none}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--hairline)}.nav-links a[aria-current=page]{color:var(--ink);border-bottom-color:var(--accent)}
.switches{grid-area:sw;display:flex;gap:var(--space-2xs)}.nav-cta{grid-area:cta}
.switch{font:400 var(--step--2)/1.3 var(--font-mono);color:var(--ink);background:none;border:var(--rule-w) solid var(--rule);border-radius:var(--radius-2);padding:var(--space-3xs) var(--space-2xs);min-height:1.75rem;cursor:pointer}
.switch:hover{border-color:var(--ink-2)}.switch-k{color:var(--ink-3)}
@media (min-width:40rem){.nav{grid-template-columns:1fr auto auto;grid-template-areas:"brand sw cta" "links links links"}.nav-links ul{display:flex;flex-wrap:wrap;gap:var(--space-3xs) var(--space-s)}}
@media (min-width:72rem){.nav{grid-template-columns:auto 1fr auto auto;grid-template-areas:"brand links sw cta"}.nav-links{justify-self:end;padding-right:var(--space-s)}}
.seal{display:block;flex:none}.seal-ground{fill:var(--accent)}.seal-rim{fill:none;stroke:var(--paper);stroke-width:1}.seal-glyph{fill:none;stroke:var(--paper);stroke-width:3.6;stroke-linecap:square}
.site-footer{margin-top:var(--space-2xl);background:var(--paper-3);border-top:var(--rule-w) solid var(--hairline)}
.footer{display:grid;gap:var(--space-l);padding-block:var(--space-xl) var(--space-l);font-size:var(--step--1);color:var(--ink-2)}
.footer p{margin-bottom:var(--space-2xs)}.footer-id .seal{margin-bottom:var(--space-s);rotate:-4deg}.footer-name{font-family:var(--font-display);font-size:var(--step-1);color:var(--ink)}
.footer-fine{grid-column:1/-1;max-width:none;padding-top:var(--space-s);border-top:var(--rule-w) solid var(--hairline);font:400 var(--step--2)/1.5 var(--font-mono);color:var(--ink-3)}
@media (min-width:48rem){.footer{grid-template-columns:1fr 2fr}}
.error-page{padding-block:var(--space-2xl) var(--space-xl)}.error-page h1{max-width:16ch}

.hero{padding-top:var(--space-l)}
.hero-grid{display:grid;gap:var(--space-l)}
.hero-name{font-size:clamp(2.9rem,1.8rem + 5vw,5.5rem);line-height:1;margin-bottom:var(--space-s)}
.hero-focus{color:var(--ink-2);font-size:var(--step--1)}
.hero-focus-k{margin-right:var(--space-2xs);font:500 var(--step--2)/1 var(--font-mono);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2xs);list-style:none;padding:0}
.chip{padding:.3em .65em;border:var(--rule-w) solid var(--hairline);border-radius:var(--radius-1);background:var(--paper-2);font-size:var(--step--1);line-height:1.4}
.portrait{margin:0;width:min(100%,24rem);justify-self:center}
.portrait figcaption{margin-bottom:var(--space-xs);font:400 var(--step--2)/1.4 var(--font-mono);text-align:right}
.portrait-stage{overflow:hidden}
.portrait img{width:100%;margin-bottom:-3%}
.hero-table{border-top:2px solid var(--ink);padding-top:var(--space-m)}
.readouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-m) var(--space-s);list-style:none;padding:0;margin:0}
.readout-value{display:block;font:400 var(--step-4)/1 var(--font-display);font-synthesis:none}
.readout-label{display:block;margin-top:var(--space-2xs);color:var(--ink-2);font-size:var(--step--1);line-height:1.4}
@media (min-width:48rem){.readouts{grid-template-columns:repeat(4,minmax(0,1fr))}.readout{padding-right:var(--space-s);border-right:var(--rule-w) solid var(--hairline)}.readout:last-child{border:0}}
@media (min-width:56rem){.hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:var(--space-xl)}.hero-text{padding-bottom:var(--space-xl)}.portrait{width:100%;max-width:30rem;justify-self:end}}
.section{padding-top:var(--space-2xl)}.section-note{color:var(--ink-2)}
.now-list,.cred-list{list-style:none;padding:0;border-top:var(--rule-w) solid var(--hairline)}
.now-list li,.cred-list li{display:grid;gap:var(--space-3xs) var(--space-m);max-width:none;padding-block:var(--space-s);border-bottom:var(--rule-w) solid var(--hairline)}
.now-list time,.cred-meta,.path-when,.project-when{font:400 var(--step--2)/1.6 var(--font-mono);color:var(--ink-3)}
@media (min-width:40rem){.now-list li{grid-template-columns:7rem minmax(0,1fr)}}
.two-col{display:grid;gap:var(--space-l)}.two-col h3{font-size:var(--step-1)}
.cred-name{color:var(--ink)}.cred-meta::first-letter{text-transform:uppercase}.cred-note{color:var(--ink-2);font-size:var(--step--1)}
@media (min-width:48rem){.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}}
.path{list-style:none;padding:0 0 0 var(--space-m);border-left:var(--rule-w) solid var(--hairline)}
.path li{position:relative;padding-bottom:var(--space-m)}.path li::before{content:"";position:absolute;left:calc(-1*var(--space-m) - 4px);top:.55em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.path p,.path h3{margin:0}.path h3{font-size:var(--step-1)}.path-org{color:var(--ink-2)}.path li>p:last-child{margin-top:var(--space-2xs);font-size:var(--step--1)}

.projects{display:grid;gap:var(--space-m);list-style:none;padding:0;counter-reset:project}
.project{counter-increment:project;max-width:none;padding:var(--space-m);background:var(--paper-2);border:var(--rule-w) solid var(--hairline);border-radius:var(--radius-2);scroll-margin-top:var(--space-m)}
.project-when{margin-bottom:var(--space-2xs)}.project-when::before{content:counter(project,decimal-leading-zero) " · "/"";color:var(--accent-ink)}
.project h3{margin-bottom:var(--space-2xs)}.project-role{margin-bottom:var(--space-s);color:var(--ink-2);font-size:var(--step--1)}
.project-tags{margin-bottom:var(--space-s)}.project-tags .chip{background:none;font:400 var(--step--2)/1.5 var(--font-mono);color:var(--ink-2)}
.project-body{display:grid;gap:var(--space-3xs) var(--space-m);margin:0;padding-top:var(--space-s);border-top:var(--rule-w) solid var(--hairline)}
.project-body dt{font:500 var(--step--2)/1.7 var(--font-mono);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink-3)}
.project-body dd{margin:0 0 var(--space-s);color:var(--ink-2)}.project-body dd:last-child{margin:0}.project-body ul{margin:0;padding-left:1.1em}.project-body li+li{margin-top:var(--space-2xs)}
@media (min-width:48rem){.project{padding:var(--space-l)}.project-body{grid-template-columns:9rem minmax(0,1fr)}.project-body dd{margin-bottom:var(--space-xs)}}
@media (min-width:64rem){.project{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-rows:auto auto auto 1fr;column-gap:var(--space-xl)}.project>*{grid-column:1;align-self:start}.project-body{grid-column:2;grid-row:1/-1;padding:0;border:0}}
.programmes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));column-gap:var(--space-l);list-style:none;padding:0;border-top:var(--rule-w) solid var(--hairline)}
.programmes li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-s);max-width:none;padding-block:var(--space-xs);border-bottom:var(--rule-w) solid var(--hairline)}
.programme-area{flex:none;font:400 var(--step--2)/1.4 var(--font-mono);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink-3)}
.cred{grid-template-columns:4rem minmax(0,1fr);align-items:start}.cred-body{grid-column:2;display:grid;gap:var(--space-3xs)}
.cred-badge{width:4rem;padding:.2rem;border-radius:var(--radius-2);background:light-dark(transparent,#ece7de)}
.cred-verify{justify-self:start;font-size:var(--step--1)}
.contact-email{font:400 var(--step-3)/1.2 var(--font-display);font-synthesis:none;overflow-wrap:anywhere}

@keyframes decode-failsafe{to{opacity:1}}
@media (scripting:enabled){:root:not(.js):not([data-motion=reduce]) [data-decode]{opacity:0;animation:decode-failsafe 0s 2s forwards}}
@media (scripting:enabled) and (prefers-reduced-motion:reduce){:root:not(.js):not([data-motion=full]) [data-decode]{opacity:1;animation:none}}
.decoding{position:relative}.decode-src{color:transparent}.decode-fx{position:absolute;inset:0;pointer-events:none}
.decoding-bin .decode-rest{color:var(--accent-ink)}.decoding-tok .decode-rest{color:var(--hairline)}
.reveal{opacity:0;translate:0 .75rem;transition:opacity var(--dur-3) var(--ease-out),translate var(--dur-3) var(--ease-out)}.reveal.is-in{opacity:1;translate:none}
.portrait-stage img{transform-origin:50% 100%;transform:perspective(80rem) rotateY(calc(var(--tx,0)*5deg)) rotateX(calc(var(--ty,0)*-3deg));transition:transform var(--dur-3) var(--ease-out)}
@media print{.reveal{opacity:1;translate:none}.decode-fx,.switches{display:none}.decode-src{color:inherit}}

/* Calm editorial presentation. Motion belongs to the portrait, not the reading surface. */
:root,:root[data-theme]{--paper:#141212;--paper-2:#1d1919;--paper-3:#100e0e;--ink:#faf5ef;--ink-2:#ded4ce;--ink-3:#bdb0a9;--dark:#100e0e;--accent:#f66e57;--accent-ink:#ffa28f;--radius:.5rem;--page-max:76rem;--s-xl:clamp(3.5rem,6vw,6rem)}
body{background:var(--paper)}.hero::before{display:none}.hero{background:radial-gradient(ellipse at 90% 40%,#7f2b2238,transparent 65%),var(--paper)}
.site-header{background:#141212;border-bottom:1px solid #403431}.brand-sub{color:var(--ink-3)}.nav-links a{font-size:.8rem;font-weight:500}.switch{border-color:#63514a}.hero-grid{padding-top:3.5rem;padding-bottom:1.5rem;gap:2rem}.hero-index{font-size:.65rem;letter-spacing:.13em;margin-bottom:2rem}.hero-name{font-size:clamp(3.5rem,7vw,6.7rem);max-width:none;text-transform:none;text-shadow:none;letter-spacing:-.06em;line-height:1.04}.hero .eyebrow{font-size:.8rem;letter-spacing:.05em}.hero-location{margin-bottom:1.25rem}.hero-focus{font-size:.85rem;line-height:1.65;color:var(--ink-3)}.hero .lede{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.5;max-width:34ch;margin-block:1.5rem 2rem}.hero-text{padding-bottom:1rem}.hero .btn,.btn{border-radius:2rem;padding:.8rem 1.3rem;font-weight:600}.hero .btn-ghost{border-color:#a79086}.portrait{width:100%;max-width:31rem}.guardian-stage{aspect-ratio:1/1.06;background:none;border-bottom:1px solid #795044;overflow:hidden;border-radius:0 0 1rem 1rem}.guardian-face{width:100%;transform:rotateY(calc(var(--look-x)*8deg)) rotateX(calc(var(--look-y)*-5deg)) translate(calc(var(--look-x)*4px),calc(var(--look-y)*3px));transform-origin:50% 70%}.guardian-face img{filter:none;mask-image:linear-gradient(#000 85%,transparent)}.guardian-reset{margin:.7rem 0 .7rem auto;border:0;color:var(--ink-3);font-size:.65rem;min-height:2.2rem}.hero-table{background:#181414;border-block:1px solid #49372f}.readouts{gap:1.5rem}.readout-value{color:var(--ink);font-size:2.4rem}.readout-label{font-size:.8rem;color:var(--ink-3);line-height:1.5}
h2 em{font-family:var(--font-text);font-style:normal;font-weight:500;letter-spacing:-.04em;color:var(--accent-ink)}h2{font-size:clamp(2rem,3.5vw,3.6rem);line-height:1.12}.section-head{border-top:1px solid #635047;gap:1rem}.section-head h2{max-width:24ch}.section-kicker{font-size:.65rem;letter-spacing:.12em}.about-copy p{font-size:1.05rem;line-height:1.8}.professional-portrait{background:var(--paper-2);border:1px solid #5c453c}.professional-portrait strong{font-size:1.15rem}.now-list li{padding-block:1.2rem}.now-list span{font-size:.9rem;line-height:1.7}
.section-work{background:#171313;margin-top:var(--s-xl);padding-block:var(--s-xl)}.projects{gap:2rem}.project{border:1px solid #685046;background:#201919;box-shadow:none;border-radius:.5rem;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr)}.project:nth-child(even){grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr)}.project:nth-child(even) .project-visual{grid-column:1;grid-row:1}.project:nth-child(even) .project-copy{grid-column:2;grid-row:1}.project-visual{min-height:0;justify-content:flex-start;padding:2rem;background:#191414;border-right:1px solid #594137}.anime-scene{border:0;padding:0;background:none}.anime-scene h4{font-family:var(--font-text);font-size:1.3rem;font-weight:600;line-height:1.3;margin:1rem 0 1.5rem}.scene-steps{grid-template-columns:1fr;gap:0}.scene-steps li{display:flex;align-items:baseline;gap:1rem;border:0;border-top:1px solid #62483c;background:none!important;padding:1rem 0;text-align:left;font-family:var(--font-text);font-size:.9rem;animation:none!important}.scene-steps span{font-family:var(--font-mono);font-size:.65rem}.scene-gate{font-size:.75rem;line-height:1.6;text-align:left;margin-top:1.25rem}.scene-gate::before{display:none}.project-visual figcaption{font-size:.65rem;text-align:left;margin-top:auto;padding-top:2rem}.project-copy{padding:2.2rem}.project h3{font-size:clamp(1.5rem,2.3vw,2rem);max-width:30ch;line-height:1.2}.project-result{font-size:1rem;font-weight:500;line-height:1.7;border-left-width:2px}.project-role{font-size:.85rem;line-height:1.6}.project-details summary{font-size:.9rem}.project-body dd{font-size:.9rem;line-height:1.7}.chip{border-radius:.3rem}
.programmes{display:block;border-top:1px solid #70564a}.programmes li,.programmes li:hover{display:grid;grid-template-columns:2.5rem minmax(0,1fr) 8rem;align-items:start;gap:1.25rem;padding:1.35rem .5rem;background:transparent;border:0;border-bottom:1px solid #59463d;overflow:visible;transition:none;counter-increment:none}.programme-number{font:400 .75rem/1.8 var(--font-mono);color:var(--ink-3);padding-top:.15rem}.programme-content{display:grid;gap:.45rem;min-width:0}.programme-name{font-size:1.05rem;font-weight:600;line-height:1.5}.programme-flow{grid-column:auto;font-family:var(--font-text);font-size:.85rem;line-height:1.6;color:var(--ink-3)}.programme-area{font-size:.65rem;line-height:1.6;text-align:right;margin-top:.4rem;letter-spacing:.05em;color:var(--accent-ink)}
.reveal,.reveal.is-in{opacity:1;translate:none;transition:none}.path li{border-top:1px solid var(--rule);background:var(--paper-2);padding:1.5rem}.path li>p:last-child{font-size:.9rem;line-height:1.65}.next-path{grid-template-columns:1fr auto;background:#241a17;border:1px solid #94604c;padding:2rem}.next-path h3{font-size:1.7rem}.next-badge{grid-column:auto}#credentials .two-col>div{border:1px solid #6a5044}.cred-note{line-height:1.7}.contact-section{background:#261917;border-top:1px solid #8c5a49}.contact-section h2{max-width:22ch}.lab-disclosure{border:1px solid #705247;border-radius:.5rem;padding:0 1.5rem}.lab-disclosure>summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.4rem 0;cursor:pointer;font-size:1rem;font-weight:600;list-style:none}.lab-disclosure>summary::-webkit-details-marker{display:none}.lab-disclosure>summary span{font-size:1.5rem;color:var(--accent-ink)}.lab-disclosure[open]>summary{margin-bottom:1rem}.lab-card{background:var(--paper-2)}.lab-footnote{margin-bottom:1.5rem}.cyber-lab .section-head{margin-bottom:1.5rem}
@media(max-width:64rem){.project,.project:nth-child(even){grid-template-columns:1fr}.project:nth-child(even) .project-visual,.project:nth-child(even) .project-copy{grid-column:auto;grid-row:auto}.project-visual{border-right:0;border-bottom:1px solid #594137}.scene-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.scene-steps li{display:block}.project-visual figcaption{display:none}.project-copy{padding:1.5rem}.project-visual{padding:1.5rem}.scene-gate{margin-top:.5rem}}
@media(max-width:40rem){.hero-grid{padding-top:2rem}.hero-name{font-size:clamp(3.1rem,13vw,5rem)}.hero-index{margin-bottom:1.5rem}.portrait{max-width:23rem}.hero .lede{font-size:1.12rem}.programmes li,.programmes li:hover{grid-template-columns:1.5rem minmax(0,1fr);gap:.35rem .8rem;padding:1.1rem 0}.programme-area{grid-column:2;grid-row:2;text-align:left;margin:0}.programme-name{font-size:1rem}.programme-flow{font-size:.8rem}.next-path{grid-template-columns:1fr;padding:1.3rem;gap:1rem}.next-badge{grid-column:1}.scene-steps{gap:.7rem}.scene-steps li{font-size:.8rem}.professional-portrait{grid-template-columns:4rem 1fr}.readout-value{font-size:2rem}.lab-disclosure{padding:0 1rem}}
@media print{.hero,.project,.project-visual,.next-path,.contact-section{background:#fff!important}.guardian-reset{display:none}}
p,li,dd,h1,h2,h3{hyphens:none}
.original-portrait{overflow:hidden;border:1px solid #604b43;border-radius:.6rem;max-width:27rem;margin-inline:auto}.original-portrait img{display:block;width:100%;height:auto;transform:none;filter:none;mask-image:none}.cred-badge[src*="zscaler-logo"]{height:4rem;object-fit:contain;background:#fff;padding:.25rem;border-radius:.4rem}
/* Two portrait directions share one persistent, deliberately broad brush. */
body:has(.reveal-hero) .site-header{background:#f8f7f2;color:#242d2e;border-bottom:1px solid #dbdcd6}
body:has(.reveal-hero) .brand-sub,body:has(.reveal-hero) .nav-links a{color:#454f4f}
body:has(.reveal-hero) .switches{display:none}
.reveal-hero{background:#f4f3ee;color:#243131}
.paint-stage{position:relative;isolation:isolate;min-height:650px;height:calc(100svh - 92px);max-height:1050px;overflow:hidden;background:#f5f4ef}
.paint-back,.paint-front,.paint-canvas,.paint-wash,.cyber-grid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center}
.paint-back{z-index:0}.paint-front{z-index:1}.paint-canvas{z-index:2}.paint-wash{z-index:3;pointer-events:none;background:linear-gradient(90deg,var(--wash) 0%,color-mix(in srgb,var(--wash) 94%,transparent) 15%,color-mix(in srgb,var(--wash) 62%,transparent) 25%,transparent 38%);transition:background var(--dur-cross) ease}
.paint-topline{position:absolute;z-index:5;top:32px;left:5%;right:5%;display:flex;justify-content:space-between;font:10px var(--font-mono);letter-spacing:.15em;color:#334141}
.paint-topline span:last-child{background:#f7f6f0bf;padding:6px 10px;border-radius:20px}
.paint-copy{position:absolute;z-index:5;left:6%;top:50%;transform:translateY(-48%);pointer-events:none;width:38%;max-width:520px}
.paint-kicker{display:flex;align-items:center;gap:8px;font:10px var(--font-mono);letter-spacing:.16em;margin-bottom:35px}.paint-kicker span{width:6px;height:6px;background:#557b63;border-radius:50%}
.paint-intro{font:italic 28px var(--font-display);margin:0 0 3px}
.paint-copy h1{font:400 clamp(64px,7.8vw,120px)/1.12 var(--font-display);letter-spacing:-.065em;margin:0 0 24px;color:#243131}.paint-copy h1 span{color:#c54b33}
.paint-tagline{font:500 clamp(20px,2.1vw,32px)/1.3 var(--font-text);letter-spacing:-.04em;margin-bottom:20px}
.paint-description{font:14px/1.7 var(--font-text);color:#4d5856;margin-bottom:30px}
.paint-links{display:flex;gap:10px;flex-wrap:wrap;pointer-events:auto}.paint-links a{border-radius:30px;padding:13px 20px;border:1px solid #89928b;font-size:12px;font-weight:600;text-decoration:none;background:#f6f5efc9;color:#263532}.paint-links a:first-child{background:#283d35;color:white;border-color:#283d35}.paint-links a:hover{transform:translateY(-2px)}
.paint-bottom{position:absolute;z-index:6;bottom:25px;left:5%;right:5%;display:flex;justify-content:space-between;align-items:end;gap:20px}.paint-hint{font:10px/1.5 var(--font-mono);letter-spacing:.03em;max-width:230px;margin:0;background:#f7f6f0e8;padding:9px 12px;border-radius:20px;color:#33413d}
.paint-controls{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.paint-controls[hidden]{display:none}.paint-controls button{font:10px var(--font-mono);border:1px solid #bac0b7;background:#f7f6f0f2;color:#33413d;padding:11px 13px;cursor:pointer;border-radius:22px;min-height:38px}.look-switch{display:flex;border:1px solid #bac0b7;background:#f7f6f0f2;border-radius:25px;padding:3px}.look-switch button{border:0;background:transparent;min-height:30px;padding:7px 12px}.look-switch button[aria-pressed=true]{background:#293d35;color:#fff}
.paint-cursor{position:absolute;left:0;top:0;z-index:7;pointer-events:none;width:220px;height:220px;border:1px solid #ffffffa6;box-shadow:0 0 0 1px #283d352a;border-radius:50%;display:none;align-items:center;justify-content:center;transform:translate(-50%,-50%)}.paint-cursor span{font:9px var(--font-mono);letter-spacing:.15em;color:white;text-shadow:0 1px 4px #000}.paint-stage.is-painting{cursor:none}.paint-stage.is-painting .paint-cursor{display:flex}
.cyber-grid,.cyber-detail{display:none}.reveal-hero[data-look=cyber] .cyber-grid{display:block;z-index:4;pointer-events:none;opacity:.2;background-image:linear-gradient(#42685944 1px,transparent 1px),linear-gradient(90deg,#42685944 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,#000,transparent 48%,#000)}
.reveal-hero[data-look=cyber] .paint-copy h1{font-family:var(--font-text);font-weight:650;letter-spacing:-.075em}.reveal-hero[data-look=cyber] .paint-intro{font:12px var(--font-mono);text-transform:uppercase;letter-spacing:.2em;margin-bottom:18px}.reveal-hero[data-look=cyber] .cyber-detail{display:flex;position:absolute;z-index:5;right:4%;top:22%;flex-direction:column;gap:14px;font:9px var(--font-mono);letter-spacing:.1em;color:#243d33;background:#f7f6f0d9;padding:18px;border:1px solid #9aa99c}.cyber-detail b{font-weight:400;max-width:130px;border-top:1px solid #9aa99c;padding-top:16px}
@media(max-width:760px){.paint-stage{height:900px;min-height:820px;max-height:none}.paint-back,.paint-front,.paint-canvas{object-position:60% center}.paint-wash{background:linear-gradient(0deg,var(--wash) 0%,color-mix(in srgb,var(--wash) 98%,transparent) 28%,transparent 64%)}.paint-topline{top:20px;font-size:8px}.paint-copy{top:auto;bottom:150px;transform:none;left:7%;width:86%;max-width:none}.paint-copy h1{font-size:70px;margin-bottom:14px}.paint-kicker{margin-bottom:15px}.paint-intro{font-size:22px}.paint-tagline{font-size:23px;margin-bottom:12px}.paint-description{font-size:13px;margin-bottom:18px}.paint-bottom{bottom:20px;align-items:start;flex-direction:column;gap:12px}.paint-controls{justify-content:flex-start}.paint-controls button{font-size:9px}.paint-cursor{display:none!important}.reveal-hero[data-look=cyber] .cyber-detail{top:65px;right:5%;font-size:8px;padding:10px;gap:8px}.cyber-detail b{display:none}}
@media print{.paint-stage{height:550px;min-height:0}.paint-controls,.paint-cursor,.paint-hint{display:none}.paint-copy{top:80px;bottom:auto;transform:none}.paint-back{display:none}}
@media(max-width:760px){.paint-back,.paint-front,.paint-canvas{height:510px}.paint-wash{background:linear-gradient(0deg,var(--wash) 0%,var(--wash) 42%,transparent 67%)}.paint-copy{bottom:145px}.paint-stage{min-height:900px}}
/* Completion gently clears the remaining white layer and introduces live motifs. */
.paint-stage.is-revealed .paint-canvas{opacity:0;transition:opacity .9s ease}
.cyber-floaters{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .8s ease}
.is-revealed .cyber-floaters{opacity:1;visibility:visible;transition-delay:.35s}
.cyber-token{position:absolute;display:flex;align-items:center;gap:10px;padding:14px 17px;border:1px solid #fff8;border-radius:15px;background:#20352dde;box-shadow:0 12px 35px #35201420;color:#fff9e9;font:10px/1.6 var(--font-mono);letter-spacing:.06em;animation:cyber-wave 5s ease-in-out infinite;animation-play-state:paused}
.is-revealed .cyber-token{animation-play-state:running}.cyber-token svg{width:34px;height:34px;stroke:#d4e8ba;stroke-width:1.7}.cyber-token small{font-size:9px;letter-spacing:0;color:#d3decf}.cyber-token b{font-size:26px;font-weight:400;color:#d4e8ba}.token-shield{right:5%;top:16%}.token-code{right:3%;top:48%;animation-delay:-1.6s}.token-lock{right:21%;bottom:13%;animation-delay:-3.2s}
@keyframes cyber-wave{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}
.is-revealed .cyber-detail{display:none!important}
@media(max-width:760px){.cyber-token{padding:9px 11px;font-size:8px;gap:6px}.cyber-token svg{width:25px;height:25px}.cyber-token small{font-size:8px}.token-shield{right:3%;top:65px}.token-code{right:3%;top:340px}.token-lock{left:3%;right:auto;top:300px;bottom:auto}.cyber-token b{font-size:20px}}
@media(prefers-reduced-motion:reduce){.cyber-token{animation:none}.paint-stage.is-revealed .paint-canvas,.cyber-floaters{transition:none}}
:root[data-motion=reduce] .cyber-token{animation:none}
@media print{.cyber-floaters{display:none}}
.paint-stage{user-select:none;-webkit-user-select:none}.paint-back,.paint-front{-webkit-user-drag:none}
/* A quieter opening: three navigation pills, one signature, two actions. */
@font-face{font-family:Caveat;src:url('../fonts/caveat-500.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
body:has(.reveal-hero) .portrait-header{position:absolute;top:0;left:0;width:100%;background:transparent;border:0;pointer-events:none}
.portrait-header .brand,.portrait-header .nav-cta{display:none}.portrait-header .nav{display:flex;justify-content:center;padding:25px 0;pointer-events:none}.portrait-header .nav-links{overflow:visible;pointer-events:auto}.portrait-header .nav-links ul{gap:9px}.portrait-header .nav-links a{padding:13px 28px;border:1px solid #ffffffb0;background:#faf9f1d9;border-radius:30px;font-size:12px;font-weight:600;color:#293b33;box-shadow:0 5px 20px #18372b0b}.portrait-header .nav-links a:hover{background:#293d35;color:#fff}
.paint-stage{height:100svh;min-height:650px}.paint-copy{top:55%;transform:translateY(-50%)}.paint-intro{font:400 14px var(--font-text);letter-spacing:.16em;text-transform:uppercase;margin-bottom:0}
.paint-copy h1,.reveal-hero[data-look=cyber] .paint-copy h1{font:500 clamp(85px,10vw,155px)/1.3 Caveat,cursive;letter-spacing:-.045em;transform:rotate(-7deg);transform-origin:0 50%;margin:0 0 25px -7px;overflow:visible}.paint-links a{padding:14px 25px;font-size:13px}.paint-bottom{align-items:center}.paint-hint{background:transparent;padding-left:0;font-size:9px}.paint-controls button{font-size:9px;padding:9px 12px;min-height:34px}
.about-achievements{font-size:14px;color:var(--accent-ink);text-underline-offset:5px}#about .hero-table{margin:0 0 40px;padding:25px 0;background:transparent;border-top:0}#about .hero-table .wrap{width:100%;padding:0}
/* Custom characters represent real areas of Joshuva's work. Badge art stays intact. */
.cyber-mascot{position:absolute;width:130px;text-align:center;color:#24392f;text-decoration:none;pointer-events:auto;animation:mascot-bob 5s ease-in-out infinite;animation-play-state:paused;filter:drop-shadow(0 8px 12px #361b1918)}
.cyber-mascot svg{display:block;width:100%;height:auto;overflow:visible}.cyber-mascot>span{display:inline-block;font:10px/1.4 var(--font-mono);padding:6px 10px;background:#fffaf0ed;border:1px solid #fff8;border-radius:20px;white-space:nowrap}.mascot-body{fill:#f9f3de;stroke:#304d3d;stroke-width:2.5}.mascot-wave,.mascot-left-arm,.mascot-shackle,.mascot-antenna{fill:none;stroke:#304d3d;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}.mascot-wave{transform-origin:90px 73px;animation:mascot-wave 2.8s ease-in-out infinite;animation-play-state:paused}.mascot-eyes{fill:#304d3d;transform-origin:58px 51px;animation:mascot-blink 5.3s infinite;animation-play-state:paused}.mascot-smile{fill:none;stroke:#304d3d;stroke-width:2.5;stroke-linecap:round}.mascot-cheek{fill:#f0ab91;opacity:.65}.mascot-ai .mascot-body{fill:#dcecd6}.mascot-identity .mascot-body{fill:#ffe4a5}.mascot-security{right:5%;top:13%}.mascot-identity{right:4%;top:47%;animation-delay:-1.8s}.mascot-ai{right:24%;bottom:12%;animation-delay:-3.2s}.mascot-ai .mascot-wave{animation-delay:-1.4s}.mascot-identity .mascot-wave{animation-delay:-.7s}.mascot-badge{position:relative;display:block;width:63px;height:63px;margin:-17px auto 3px;object-fit:contain}.is-revealed .cyber-mascot,.is-revealed .mascot-wave,.is-revealed .mascot-eyes{animation-play-state:running}.cyber-mascot:hover .mascot-wave{animation-duration:.65s}.cyber-mascot:focus-visible{outline:3px solid #304d3d;outline-offset:6px;border-radius:20px}
@keyframes mascot-wave{0%,45%,100%{transform:rotate(0)}10%,30%{transform:rotate(-24deg)}20%,40%{transform:rotate(14deg)}}
@keyframes mascot-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}
@keyframes mascot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:760px){.portrait-header .nav{padding:18px 0}.portrait-header .nav-links a{font-size:11px;padding:11px 23px}.paint-stage{height:100svh;min-height:730px}.paint-back,.paint-front,.paint-canvas{height:65%;object-position:60% center}.paint-copy{top:auto;bottom:105px;transform:none;width:86%}.paint-copy h1{font-size:92px;margin-bottom:12px}.paint-intro{font-size:11px}.paint-links a{font-size:12px;padding:12px 24px}.paint-wash{background:linear-gradient(0deg,var(--wash) 0%,var(--wash) 30%,transparent 58%)}.paint-bottom{flex-direction:row;align-items:center;gap:12px;bottom:22px}.paint-hint{max-width:145px}.paint-controls{flex-wrap:nowrap}.cyber-mascot{width:91px}.cyber-mascot>span{font-size:8px;padding:5px 7px}.mascot-security{right:3%;top:15%}.mascot-identity{left:3%;right:auto;top:37%}.mascot-ai{right:3%;bottom:auto;top:47%}.mascot-badge{width:46px;height:46px;margin-top:-12px}}
@media(prefers-reduced-motion:reduce){.cyber-mascot,.mascot-wave,.mascot-eyes{animation:none}}
:root[data-motion=reduce] .cyber-mascot,:root[data-motion=reduce] .mascot-wave,:root[data-motion=reduce] .mascot-eyes{animation:none}

/* One reading palette, from the person to the work. */
:root{--reading-bg:#f7f6f2;--reading-card:#fffefa;--reading-ink:#29272a;--reading-muted:#625d60;--reading-line:#d4cfd0;--reading-accent:#9d3e32}
body:has(.reveal-hero, .portfolio-page){background:var(--reading-bg);color:var(--reading-ink);--ink:var(--reading-ink);--ink-2:var(--reading-muted);--ink-3:var(--reading-muted);--accent-ink:var(--reading-accent);--rule:var(--reading-line);--paper:var(--reading-bg);--paper-2:var(--reading-card)}
body:has(.reveal-hero, .portfolio-page) #main>.section,body:has(.reveal-hero, .portfolio-page) .site-footer{background:var(--reading-bg);color:var(--reading-ink);--ink:var(--reading-ink);--ink-2:var(--reading-muted);--ink-3:var(--reading-muted);--accent-ink:var(--reading-accent);--rule:var(--reading-line);--paper-2:var(--reading-card);transition:background-color .8s,color .8s}
body:has(.reveal-hero, .portfolio-page) #main>.section{margin-top:0;padding-block:clamp(60px,8vw,110px)}
body:has(.reveal-hero, .portfolio-page) .project,body:has(.reveal-hero, .portfolio-page) .project-visual,body:has(.reveal-hero, .portfolio-page) .path li,body:has(.reveal-hero, .portfolio-page) .next-path,body:has(.reveal-hero, .portfolio-page) .lab-disclosure,body:has(.reveal-hero, .portfolio-page) .lab-card{background:var(--reading-card);color:var(--reading-ink);border-color:var(--reading-line);--card-ink:var(--reading-ink);--card-muted:var(--reading-muted)}
body:has(.reveal-hero, .portfolio-page) .section h2,body:has(.reveal-hero, .portfolio-page) .readout-value{color:var(--reading-ink)}
body:has(.reveal-hero, .portfolio-page) .section h2 em,body:has(.reveal-hero, .portfolio-page) .cred-verify{color:var(--reading-accent)}
body:has(.reveal-hero, .portfolio-page) .section-kicker,body:has(.reveal-hero, .portfolio-page) .section-note,body:has(.reveal-hero, .portfolio-page) .cred-meta,body:has(.reveal-hero, .portfolio-page) .cred-note,body:has(.reveal-hero, .portfolio-page) .programme-flow,body:has(.reveal-hero, .portfolio-page) .path-when,body:has(.reveal-hero, .portfolio-page) .path-org,body:has(.reveal-hero, .portfolio-page) .footer-note,body:has(.reveal-hero, .portfolio-page) .footer-fine{color:var(--reading-muted)}
.paint-stage{touch-action:pan-y}.paint-copy{width:44%;max-width:640px}.paint-copy h1{position:relative;white-space:nowrap;font-size:clamp(70px,8.3vw,132px);padding-bottom:30px}.name-decode{display:inline-block;white-space:nowrap}.name-variants{position:absolute;left:12px;bottom:0;font:400 15px/1.7 var(--font-text);letter-spacing:.08em;opacity:0;transform:translateY(5px);transition:opacity .6s,transform .6s}.name-variants.is-visible{opacity:.75;transform:translateY(0)}
.name-stroke{position:absolute;bottom:24px;left:0;width:90%;height:20px;fill:none;stroke:#b46754;stroke-width:1.5;stroke-linecap:round;pointer-events:none}.name-stroke path{stroke-dasharray:310;stroke-dashoffset:310;animation:signature-stroke 1.8s .2s ease forwards}@keyframes signature-stroke{to{stroke-dashoffset:0}}
.cyber-floaters{opacity:1;visibility:visible;inset:20px 5% auto auto;display:flex;gap:15px;align-items:start;width:auto;height:auto}.cyber-mascot{position:relative!important;inset:auto!important;width:95px;animation-play-state:running}.mascot-expression{fill:none;stroke:#493a3b;stroke-width:3;stroke-linecap:round}.mascot-body{fill:#fff7ed;stroke:#493a3b}.mascot-wave,.mascot-smile,.mascot-shackle{stroke:#493a3b}.mascot-about .mascot-body{fill:#f2e6df}.mascot-contact .mascot-body{fill:#f8d3c5}.mascot-contact .mascot-wave{animation-play-state:running}.mascot-work .mascot-wave{animation:none}.cyber-mascot:hover,.cyber-mascot:focus-visible{filter:drop-shadow(0 5px 10px #9d3e3250)}
.hero-tones{position:absolute;z-index:8;top:26px;left:6%;display:flex;gap:2px;padding:3px;border:1px solid #d6c9c3;border-radius:20px;background:#fff9f2ed}.hero-tones button{border:0;background:transparent;color:#483a3b;border-radius:16px;padding:5px 9px;cursor:pointer;font:500 10px/1.4 var(--font-text);letter-spacing:.04em}.hero-tones button[aria-pressed=true]{background:#483a3b;color:#fff}.hero-tones button:focus-visible{outline:2px solid #9d3e32;outline-offset:2px}
#about .professional-portrait{background:var(--reading-card);border:1px solid var(--reading-line);border-radius:18px;overflow:hidden}#about .professional-portrait img{width:100%;height:auto;max-height:none;aspect-ratio:16/10;object-fit:cover;object-position:60% center}#about .professional-portrait figcaption{background:var(--reading-card);color:var(--reading-ink)}
#contact .defender-finale{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,80px);align-items:center}.defender-note{color:var(--reading-muted);line-height:1.8;max-width:40ch}#contact .contact-email{font-size:clamp(18px,2vw,28px);color:var(--reading-ink)}#contact .btn{color:var(--reading-ink);border-color:var(--reading-line)}
.defender-portrait{position:relative;aspect-ratio:4/3;border:1px solid var(--reading-line);border-radius:20px;overflow:hidden;background:var(--reading-card)}.defender-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center}.defender-human{opacity:1;transition:opacity var(--dur-cross) ease}.defender-portrait:hover .defender-human,.defender-portrait:focus-within .defender-human{opacity:0}.defender-shield{display:none}.defender-portrait::after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#21151bcc)}.defender-portrait figcaption{position:absolute;z-index:2;bottom:18px;left:20px;right:20px;color:#fff5ed;font:11px/1.6 var(--font-mono)}
.journey-track{display:none}
@media(max-width:760px){.cyber-floaters{top:78px;left:5%;right:auto;gap:8px}.cyber-mascot{width:72px}.hero-tones{top:18px}.paint-copy{width:88%;bottom:110px}.paint-copy h1{font-size:clamp(62px,13vw,94px);margin-bottom:14px}.name-variants{font-size:12px}.paint-stage{background:var(--reading-bg)}.paint-wash{background:linear-gradient(0deg,var(--wash) 0%,var(--wash) 30%,transparent 66%)}#contact .defender-finale{grid-template-columns:1fr}.defender-portrait{max-width:520px;width:100%;margin-inline:auto}.paint-hint{background:#fff9f2de;border-radius:12px;padding:8px}}
@media(prefers-reduced-motion:reduce){.name-stroke path{animation:none;stroke-dashoffset:0}*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
:root[data-motion=reduce] .name-stroke path{animation:none;stroke-dashoffset:0}
@media print{.hero-tones,.cyber-floaters,.name-variants{display:none}}
body:has(.reveal-hero, .portfolio-page) .paint-links a:first-child{background:#493a3b;border-color:#493a3b}
.paint-hint{background:#fff9f2de;border-radius:12px;padding:8px 12px}
.name-variants{max-width:100%;white-space:normal;overflow-wrap:anywhere;font-size:clamp(9px,1.1vw,14px)}
#about .professional-portrait{display:block}#about .professional-portrait figcaption{padding:24px}body:has(.reveal-hero, .portfolio-page) .reveal-hero{margin-top:0;padding-top:0}
/* Shared editorial scale: open spacing, sentence case, and a single type family. */
body:has(.reveal-hero, .portfolio-page) .section :is(h2,h3,h4){font-family:var(--font-text);text-transform:none;letter-spacing:0;word-spacing:.035em;text-wrap:balance;color:var(--reading-ink)}
body:has(.reveal-hero, .portfolio-page) .section h2{font-size:clamp(2rem,3.9vw,3.8rem);font-weight:500;line-height:1.24;max-width:25ch;margin-block:0 1.25rem}
body:has(.reveal-hero, .portfolio-page) .section h2 em{font:inherit;color:var(--reading-accent);letter-spacing:0}
body:has(.reveal-hero, .portfolio-page) .section h3{font-size:clamp(1.3rem,2vw,1.85rem);font-weight:550;line-height:1.4;max-width:36ch;margin-block:0 1.1rem}
body:has(.reveal-hero, .portfolio-page) .section h4{font-size:clamp(1.1rem,1.6vw,1.4rem);font-weight:550;line-height:1.45;margin-block:1rem 1.5rem}
body:has(.reveal-hero, .portfolio-page) .section-head{display:block;border-color:var(--reading-line);padding-top:1.5rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
body:has(.reveal-hero, .portfolio-page) .section-kicker{font:500 .72rem/1.8 var(--font-text);letter-spacing:.12em;word-spacing:.12em;margin-bottom:1.1rem;color:var(--reading-muted)}
body:has(.reveal-hero, .portfolio-page) .section-note{max-width:60ch;font-size:1rem;line-height:1.8;letter-spacing:0}
body:has(.reveal-hero, .portfolio-page) .section :is(p,li,dd){word-spacing:.025em}
body:has(.reveal-hero, .portfolio-page) .project :is(.scene-index,.scene-gate,figcaption,.scene-steps span){color:var(--reading-muted)}
body:has(.reveal-hero, .portfolio-page) .project .scene-steps li{color:var(--reading-ink);border-color:var(--reading-line);font-size:.95rem;line-height:1.65}
body:has(.reveal-hero, .portfolio-page) .project{border-radius:16px;box-shadow:none}
body:has(.reveal-hero, .portfolio-page) .project-copy{padding:clamp(1.4rem,3vw,2.8rem)}
body:has(.reveal-hero, .portfolio-page) .section :is(.programme-name,.cred-name){letter-spacing:0;line-height:1.6}
body:has(.reveal-hero, .portfolio-page) .section :is(.chip,.next-badge){background:var(--reading-bg);border-color:var(--reading-line);color:var(--reading-accent)}
body:has(.reveal-hero, .portfolio-page) #credentials .two-col>div{border-color:var(--reading-line)}
body:has(.reveal-hero, .portfolio-page) .section :is(.programmes,.programmes li,.now-list li){border-color:var(--reading-line)}
/* Language shaping stays intact: animate each whole word, never individual glyphs. */
.paint-copy h1{padding-bottom:76px}.name-stroke{bottom:67px}
.paint-copy h1 .name-variants{left:12px;bottom:0;display:flex;flex-direction:column;gap:8px;max-width:100%;font:400 clamp(18px,2vw,27px)/1.6 var(--font-text);letter-spacing:normal;word-spacing:normal;transform:translateY(7px);transition:opacity .65s ease,transform .65s ease;overflow:visible}
.paint-copy h1 .name-variants.is-visible{opacity:1;transform:translateY(0)}
.name-variants bdi{display:block;white-space:normal;overflow-wrap:anywhere}.paint-copy h1 .name-variants small{font:500 10px/1.5 var(--font-text);letter-spacing:.1em;color:var(--reading-muted)}
.name-variants[lang=en] bdi{font-size:.75em}
.mascot-invite{display:block;font:500 11px/1.5 Caveat,cursive;color:#493a3b;transform:rotate(-8deg);animation:invite-wave 3.6s ease-in-out infinite}
.cyber-mascot .mascot-wave{animation:mascot-wave 3.4s ease-in-out infinite;animation-play-state:running}.mascot-about .mascot-wave{animation-delay:-1.1s}.mascot-contact .mascot-wave{animation-delay:-2.2s}.mascot-about .mascot-body{fill:#f5d3c8}.cyber-mascot svg{transition:transform .3s}.cyber-mascot:hover svg,.cyber-mascot:focus-visible svg{transform:translateY(-5px) rotate(-4deg)}
@keyframes invite-wave{0%,70%,100%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}90%{transform:rotate(-12deg)}}
/* Replace the earlier blanket no-motion rule with deliberate local entrances. */
body:has(.reveal-hero, .portfolio-page) .section.reveal{opacity:1;translate:none}
body:has(.reveal-hero, .portfolio-page) .scroll-reveal{opacity:0;translate:0 26px;transition:opacity .85s ease var(--reveal-delay,0ms),translate .85s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}
body:has(.reveal-hero, .portfolio-page) .scroll-reveal.has-arrived,body:has(.reveal-hero, .portfolio-page) .scroll-reveal:focus-within{opacity:1;translate:none}
@media(max-width:760px){.paint-copy h1{padding-bottom:80px}.name-stroke{bottom:72px}.paint-copy h1 .name-variants{font-size:20px;gap:4px}.mascot-invite{font-size:10px}.cyber-floaters{top:77px}.paint-copy{bottom:110px}.paint-stage{min-height:810px}body:has(.reveal-hero, .portfolio-page) .section h2{font-size:clamp(1.9rem,7.5vw,2.6rem);line-height:1.3}body:has(.reveal-hero, .portfolio-page) .section h3{font-size:1.35rem}}
@media(prefers-reduced-motion:reduce){body:has(.reveal-hero, .portfolio-page) .scroll-reveal{opacity:1;translate:none;transition:none}.mascot-invite,.cyber-mascot .mascot-wave{animation:none}}
:root[data-motion=reduce] body .scroll-reveal{opacity:1;translate:none;transition:none}:root[data-motion=reduce] .mascot-invite,:root[data-motion=reduce] .cyber-mascot .mascot-wave{animation:none}
@media print{body:has(.reveal-hero, .portfolio-page) .scroll-reveal{opacity:1;translate:none}.mascot-invite{display:none}}
.mascot-invite{width:max-content;margin-inline:auto;padding:2px 7px;border-radius:12px;background:#fff9f2ed}
@media(max-width:760px){.cyber-floaters{left:auto;right:4%;gap:5px}.cyber-mascot{width:69px}}
/* Three chapters, one visual language. */
.paint-copy h1 .name-variants{flex-direction:row;align-items:baseline;gap:14px;flex-wrap:wrap;transform:rotate(7deg);transform-origin:left center}
.paint-copy h1 .name-variants.is-visible{transform:rotate(7deg)}
.paint-copy h1 .name-variants small{font-size:11px;letter-spacing:.035em;white-space:nowrap}
.paint-stage.is-revealed .paint-canvas{transition:none}.paint-cursor{display:none!important}
.inner-header{position:sticky;top:0;z-index:25;background:var(--reading-bg);color:var(--reading-ink);border-color:var(--reading-line)}
.inner-header .nav{display:flex;justify-content:space-between;gap:24px;padding-block:18px}.inner-header .brand{color:var(--reading-ink);font:500 25px Caveat,cursive}
.inner-header nav{display:flex;gap:22px}.inner-header nav a{font-size:14px;text-decoration:none;color:var(--reading-ink)}
.page-intro{padding-top:55px}.page-intro h1{font:500 clamp(3rem,6vw,5rem)/1.2 var(--font-text);letter-spacing:0;color:var(--reading-ink)}
.path-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}.path-cards>a{display:block;padding:36px;border:1px solid var(--reading-line);border-radius:18px;background:var(--reading-card);text-decoration:none;color:var(--reading-ink);transition:transform .3s}.path-cards>a:hover{transform:translateY(-6px)}.path-cards>a>span{font-size:50px;color:var(--reading-accent)}.path-cards p{color:var(--reading-muted);line-height:1.8}.path-cards b{color:var(--reading-accent)}
.case-switcher{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}.case-switcher[hidden]{display:none}.case-switcher button{padding:12px 16px;border:1px solid var(--reading-line);border-radius:12px;background:var(--reading-card);color:var(--reading-ink);font:500 13px/1.5 var(--font-text);cursor:pointer}.case-switcher button[aria-pressed=true]{background:var(--reading-accent);color:var(--reading-bg)}.case-switcher button:focus-visible{outline:2px solid var(--reading-accent);outline-offset:4px}.case-status{font:12px var(--font-mono);color:var(--reading-muted);margin-bottom:25px}
.project[hidden]{display:none!important}.process-map{width:100%;height:auto;margin:20px 0 30px;fill:var(--reading-card);stroke:var(--reading-accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.process-map .signal-line{stroke-dasharray:5 7;opacity:.5}.process-map .signal-packet{fill:var(--reading-accent);stroke:none;animation:packet-travel 2.6s ease-in-out infinite}.project:not(.in-viewport) .signal-packet{animation-play-state:paused}
@keyframes packet-travel{0%{transform:translateX(0);opacity:0}15%,80%{opacity:1}100%{transform:translateX(195px);opacity:0}}
.programme-disclosure{border:1px solid var(--reading-line);border-radius:16px;padding:20px 24px;margin-top:26px}.programme-disclosure summary{cursor:pointer;display:flex;justify-content:space-between;gap:20px;font-weight:500}.programme-disclosure[open] summary{margin-bottom:24px}
.page-next{padding-block:35px 75px}.page-next a{color:var(--reading-accent);font-size:20px;text-underline-offset:6px}
body:has(.portfolio-page) #main>.section{padding-top:45px}.project.in-viewport{border-color:var(--reading-accent)!important;box-shadow:0 0 24px color-mix(in srgb,var(--reading-accent) 8%,transparent)!important}
@media(max-width:760px){.inner-header .nav{flex-wrap:wrap;gap:14px}.inner-header nav{gap:16px}.inner-themes{width:100%}.path-cards{grid-template-columns:1fr}.path-cards>a{padding:26px}.case-switcher{display:grid;grid-template-columns:1fr 1fr}.case-switcher button{text-align:left;font-size:12px}.process-map{max-height:140px}.page-intro{padding-top:35px}.paint-copy h1 .name-variants{gap:10px}.page-next a{font-size:17px}}
@media(prefers-reduced-motion:reduce){.process-map .signal-packet{animation:none}}
:root[data-motion=reduce] .process-map .signal-packet{animation:none}
body:has(.portfolio-page) .project-when::before{display:none}.case-number{color:var(--reading-accent)}
/* Recognition comes forward as a sequence; document order stays unchanged. */
[data-recognition]{perspective:900px}
.recognition-skip{font:500 12px/1.5 var(--font-text);padding:7px 12px;margin:0 0 18px;border:1px solid var(--reading-line);border-radius:20px;background:var(--reading-card);color:var(--reading-accent);cursor:pointer}
.recognition-skip[hidden]{display:none}
.automation-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none;padding:0;margin:0 0 30px}
.automation-flow li{position:relative;padding:28px;border:1px solid var(--reading-line);border-radius:18px;background:var(--reading-card)}
.automation-flow li>span{display:block;margin-bottom:22px;font:500 30px/1 var(--font-mono);color:var(--reading-accent)}
.automation-flow li:not(:last-child)::after{content:'→';position:absolute;z-index:1;right:-20px;top:37px;color:var(--reading-accent);font-size:24px}
body:has(.portfolio-page) .automation-flow h3{font-size:1.25rem}.automation-flow p{color:var(--reading-muted);line-height:1.75;font-size:.95rem}.automation-case-link{color:var(--reading-accent);text-underline-offset:6px;font-weight:500}
@media(max-width:760px){.automation-flow{grid-template-columns:1fr}.automation-flow li:not(:last-child)::after{content:'↓';right:30px;top:auto;bottom:-23px}}
@media print{[data-recognition] .cred-list li{opacity:1!important;transform:none!important}.recognition-skip{display:none!important}}
/* The bubble brush: the white frame in front, the work beneath. */
:root{--reading-bg:#f7f6f2;--reading-card:#fffefa;--reading-ink:#29272a;--reading-muted:#625d60;--reading-line:#d4cfd0;--reading-accent:#9d3e32}
body{background:var(--reading-bg);color:var(--reading-ink);--ink:var(--reading-ink);--ink-2:var(--reading-muted);--ink-3:var(--reading-muted);--paper:var(--reading-bg);--paper-2:var(--reading-card);--accent-ink:var(--reading-accent);--focus:var(--reading-accent)}
.paint-front{visibility:visible}
.bubble-cursor{position:absolute;z-index:7;pointer-events:none;display:none;width:120px;height:120px;border:1.5px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #493a3b70;transform:translate(-50%,-50%)}
.bubble-cursor i{position:absolute;border:1.5px solid #fff;border-radius:50%;width:32px;height:32px;right:-8px;top:4px;box-shadow:0 0 0 1px #493a3b70}.bubble-cursor i:nth-child(2){width:20px;height:20px;left:8px;top:-16px}.bubble-cursor i:nth-child(3){width:40px;height:40px;right:3px;top:auto;bottom:-10px}.is-brushing .bubble-cursor{display:block}.paint-stage.is-brushing{cursor:crosshair}
.cyber-mascot>span{background:#fffaf0ed;color:#24392f}
.paint-copy,.paint-bottom,.motion-toggle,.cyber-floaters{touch-action:manipulation}
.paint-controls button{min-height:44px}.hero-tones button{min-height:28px}
.case-index{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}.case-index a{padding:12px 16px;border:1px solid var(--reading-line);border-radius:12px;background:var(--reading-card);color:var(--reading-ink);font-size:13px;text-decoration:none}
body:has(.portfolio-page) .project,body:has(.portfolio-page) .project:nth-child(even){display:block}.project h2{font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.3}.project-result-label{color:var(--reading-accent)}
.site-footer{background:var(--reading-bg);color:var(--reading-muted);border-color:var(--reading-line)}.site-footer .footer{display:grid;grid-template-columns:1fr 2fr 1fr;gap:2rem}.site-footer p{font-size:.8rem;margin:0}.site-footer p:last-child{text-align:right}
.inner-header nav a[aria-current=page]{text-decoration:underline;text-underline-offset:6px}
@media(max-width:760px){.paint-bottom{align-items:flex-start}.paint-hint{font-size:10px;max-width:45%;line-height:1.6}.paint-controls{flex-direction:column;gap:6px}.paint-controls button{padding:8px 10px;font-size:10px}.paint-copy{bottom:150px}.hero-tones{left:4%;top:14px}.hero-tones button{padding:6px 9px;min-height:32px}.site-footer .footer{grid-template-columns:1fr;gap:1rem}.site-footer p:last-child{text-align:left}.inner-header .nav{gap:12px}.inner-header nav{flex-wrap:wrap;gap:12px}.inner-header nav a{padding:8px 0}.case-index{display:grid;grid-template-columns:1fr 1fr}.case-index a{font-size:12px}.paint-copy h1{font-size:clamp(58px,13vw,94px)}}
@media(prefers-reduced-motion:reduce){.bubble-cursor{display:none!important}}
:root[data-motion=reduce] .bubble-cursor{display:none!important}
/* contrast: --reading-ink on --reading-bg (text) */
/* contrast: --reading-muted on --reading-bg (text) */
/* contrast: --reading-accent on --reading-bg (text) */
/* Reading fixes retain the restored layout and its original typography. */
#about .professional-portrait figcaption>span{display:block;font:10px/1.6 var(--font-mono);letter-spacing:.08em;margin-bottom:10px;color:var(--reading-muted)}
#about .professional-portrait figcaption>strong{display:block;margin-bottom:12px}#about .professional-portrait figcaption>p{margin:0}
#credentials .two-col>div{padding:clamp(20px,3vw,36px);border-radius:18px}
#credentials h3:not(:first-child){margin-top:32px}.paint-stage .paint-canvas{pointer-events:none}
@media print{.bubble-cursor,.paint-bottom,.hero-tones{display:none!important}}
/* Two portraits, one reason each: the white frame is the person; the red reveal is the work, with living signals. */
:root{--dur-fade:calc(var(--motion)*10s);--dur-cross:calc(var(--motion)*800ms);--dur-signal:calc(var(--motion)*900ms)}
.paint-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px}.paint-guide{display:grid;gap:8px;justify-items:start}.paint-controls{justify-content:flex-start}
.paint-stage.is-revealed .paint-canvas{opacity:0}
@media(max-width:760px){.paint-stage{min-height:850px}.paint-copy{bottom:165px}.paint-why{display:none}.paint-bottom{bottom:14px;grid-template-columns:1fr;gap:8px;align-items:start}.paint-guide{gap:6px}.paint-hint{max-width:none;font-size:9px;padding:6px 10px}.paint-controls{flex-direction:row;flex-wrap:wrap;gap:6px}.paint-controls button{padding:8px 10px;font-size:9px;min-height:36px}.paint-claim{text-align:left;max-width:none;font-size:14px;line-height:1.35;padding:8px 12px}.work-signals{inset:auto 3% 46% 3%;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.work-signals .cyber-token{position:static;max-width:none;padding:7px 10px;gap:7px;animation:none}.work-signals .cyber-token b{font-size:10px}.work-signals .cyber-token small{font-size:8px}.work-signals .cyber-token svg{width:18px;height:18px}}
@media print{.work-signals,.paint-why{display:none}[data-fade-in],[data-fade-in] .cred-verify{opacity:1!important}}
/* The portrait wash follows the site-wide White, Dark, or Red theme. */
.paint-stage{--wash:#f7f6f0;--wash-ink:#243131;--wash-muted:#4d5856;--wash-name:#c54b33;--wash-pill:#fff9f2e6;--wash-pill-ink:#33413d;background:var(--wash);transition:background-color var(--dur-cross) ease}
:root[data-tone=dark] .paint-stage{--wash:#494347;--wash-ink:#f6efe9;--wash-muted:#d9ccc5;--wash-name:#ee7a5d;--wash-pill:#2a2325e6;--wash-pill-ink:#f6efe9}
:root[data-tone=red] .paint-stage{--wash:#a45443;--wash-ink:#fff3ea;--wash-muted:#f4d2c6;--wash-name:#ffb49d;--wash-pill:#6d251de6;--wash-pill-ink:#fff3ea}
:root[data-tone=red] .paint-stage.is-revealed{--wash:#ad5945}
.paint-copy h1 span,.paint-copy h1 .name-decode{color:var(--wash-name)}.paint-intro,.paint-copy h1 .name-variants{color:var(--wash-ink)}.paint-copy h1 .name-variants small,.paint-why{color:var(--wash-muted)}
.name-stroke{stroke:var(--wash-name)}
.paint-hint,.paint-claim{background:var(--wash-pill);color:var(--wash-pill-ink)}.paint-controls button{background:var(--wash-pill);color:var(--wash-pill-ink);border-color:color-mix(in srgb,var(--wash-pill-ink) 35%,transparent)}
.paint-links a{background:var(--wash-pill);color:var(--wash-pill-ink);border-color:color-mix(in srgb,var(--wash-pill-ink) 45%,transparent)}.paint-links a:first-child{background:var(--wash-ink);color:var(--wash);border-color:var(--wash-ink)}
:root[data-tone=dark] .paint-stage .paint-links a:first-child,:root[data-tone=red] .paint-stage .paint-links a:first-child{background:#fff3ea;color:#2a1a1c;border-color:#fff3ea}
:root:is([data-tone=dark],[data-tone=red]) .paint-stage .paint-intro,:root:is([data-tone=dark],[data-tone=red]) .paint-stage .paint-why,:root:is([data-tone=dark],[data-tone=red]) .paint-stage .paint-copy h1 .name-variants{text-shadow:0 1px 12px #0006}
/* A translucent masonry surface; the portrait remains clear beneath it. */
.paint-stage{--scene-height:max(700px,100svh);height:auto;min-height:var(--scene-height);max-height:none;padding-bottom:90px}
.paint-back,.paint-front,.stone-wall{height:var(--scene-height)}
.stone-wall{position:absolute;inset:0;width:100%;z-index:2;pointer-events:none;opacity:0}
.wall-ready .stone-wall{opacity:.55}.wall-ready .paint-front{visibility:visible}
.paint-stage.is-revealed .paint-front{opacity:0;transition:none}.is-revealed .stone-wall{opacity:1}
.paint-wash{background:linear-gradient(90deg,var(--wash),color-mix(in srgb,var(--wash) 90%,transparent) 12%,transparent 40%)}
.paint-copy{top:calc(var(--scene-height)*.44);bottom:auto;transform:translateY(-50%);width:42%}.paint-copy h1{margin-bottom:18px}
.paint-bottom{position:absolute;z-index:6;display:block;bottom:22px}.paint-guide{display:block}.paint-controls{gap:10px}.paint-controls button{font-size:10px}.paint-controls button[hidden]{display:none}
.keystone{position:absolute;z-index:6;right:3%;top:calc(var(--scene-height)*.43);width:clamp(155px,15vw,218px);aspect-ratio:1.85;border:0;padding:0;background:none;cursor:pointer;touch-action:none;transform:translate(var(--kx,0px),var(--ky,0px));transition:transform var(--dur-cross),opacity var(--dur-cross)}
.keystone-face{position:relative;display:grid;place-items:center;height:100%;border:1px solid #75635366;border-radius:3px;background:#fff8ed18;box-shadow:inset 1px 1px 0 #fff8,inset -2px -3px 0 #5b4e3925,2px 4px 8px #34281e16}
.keystone-grip{display:grid;gap:8px;font:500 12px/1.4 var(--font-text);color:#332a25;text-align:center;padding:9px 13px;border-radius:4px;background:#fffaf0cf}.keystone-grip small{font:500 9px var(--font-mono);letter-spacing:.12em;text-transform:uppercase}.keystone-grip b{font-weight:500}
.keystone:hover .keystone-face{box-shadow:inset 0 0 0 2px #c54b3366,0 0 24px #c54b3322}.keystone:focus-visible{outline:3px solid var(--wash-name);outline-offset:6px}
.is-pulling .keystone{cursor:grabbing;transition:none}.is-revealed .keystone{transform:translate(calc(var(--kx,0px) + 90px),calc(var(--ky,0px) + 220px)) rotate(32deg);opacity:0;pointer-events:none}
.paint-stage .cyber-floaters{opacity:1;visibility:visible;transition:opacity var(--dur-3),visibility var(--dur-3)}.paint-stage.is-revealed .cyber-floaters{opacity:0;visibility:hidden}
.paint-stage:not(.is-revealed) .cyber-mascot,.paint-stage:not(.is-revealed) .mascot-wave{animation-play-state:running}
.character-library{position:absolute;overflow:hidden}
.reveal-links{position:relative;z-index:5;inset:auto;display:none;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;margin:0 4%;padding-top:calc(var(--scene-height) + 20px);pointer-events:none}
.is-revealed .reveal-links,:root:not(.js) .reveal-links{display:grid}
.reveal-box{--enter-delay:calc(var(--motion)*900ms);min-width:0;text-decoration:none;text-align:center;opacity:0;visibility:hidden;pointer-events:none;animation:character-arrive var(--dur-cross) cubic-bezier(.2,1.2,.5,1) var(--enter-delay) both}
.is-revealed .reveal-box,:root:not(.js) .reveal-box{opacity:1;visibility:visible;pointer-events:auto}
.box-governance{--enter-delay:calc(var(--motion)*1150ms)}.box-awards{--enter-delay:calc(var(--motion)*1400ms)}.box-credentials{--enter-delay:calc(var(--motion)*1650ms)}.box-future{--enter-delay:calc(var(--motion)*1900ms)}
.character{position:relative;display:block;width:170px;height:150px;max-width:100%;margin:0 auto 12px;filter:drop-shadow(0 6px 7px #372f2322)}
@keyframes character-arrive{from{opacity:0;transform:translateY(45px) scale(.88)}to{opacity:1;transform:none}}
:root:not(.js) .keystone{display:none}:root:not(.js) .reveal-box{animation:none}
@media(min-width:761px) and (max-width:1100px){.reveal-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}.box-body{min-height:145px}.paint-copy h1{font-size:72px}}
@media(max-width:760px){.paint-stage{--scene-height:max(740px,100svh);min-height:var(--scene-height);padding-bottom:90px}.paint-back,.paint-front,.stone-wall{height:var(--scene-height);object-position:50% center}.paint-copy{top:calc(var(--scene-height) - 335px);left:6%;width:88%;transform:none}.paint-copy h1{font-size:clamp(58px,13vw,90px);padding-bottom:65px}.paint-copy h1 .name-variants{font-size:18px}.paint-wash{background:linear-gradient(0deg,var(--wash) 0%,var(--wash) calc(100% - 495px),transparent calc(100% - 305px))}.keystone{top:246px;right:4%;width:145px}.keystone-grip{font-size:11px;gap:4px;padding:6px 10px}.keystone-grip small{font-size:8px}.paint-controls{flex-direction:row}.reveal-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;margin:0 5%;padding-top:var(--scene-height)}.character{height:125px;width:145px}.box-badge{width:66px;height:66px;top:19px}.box-future .box-badge{width:92px;height:92px;top:2px}.box-body{min-height:145px;padding:12px}.box-body b{font-size:13px}.box-body small{font-size:11px}.box-kicker{font-size:8px;min-height:32px;margin-bottom:7px;display:grid;align-items:center}.box-future{grid-column:1/-1;width:100%;max-width:245px;justify-self:center}.box-future .box-body{min-height:0}.hero-tones{z-index:6}}
@media(prefers-reduced-motion:reduce){.reveal-box,.character-person,.character-wave,.box-badge{animation:none!important}.reveal-box{opacity:1;transform:none}}
:root[data-motion=reduce] .reveal-box,:root[data-motion=reduce] .character-person,:root[data-motion=reduce] .character-wave,:root[data-motion=reduce] .box-badge{animation:none!important}
@media print{.stone-wall,.keystone,.character-library,.character{display:none}.reveal-links{display:grid;grid-template-columns:repeat(3,1fr)}.reveal-box{opacity:1;visibility:visible;animation:none}.paint-front{visibility:visible!important}}

/* A local visual packet burst accompanies the fictional attack trigger. */
.attack-pulse{position:absolute;z-index:6;pointer-events:none;right:3%;top:calc(var(--scene-height)*.43);width:clamp(155px,15vw,218px);aspect-ratio:1.85;opacity:0}
.attack-pulse svg{width:100%;height:100%;fill:none;stroke:#b7432b;stroke-width:2}.attack-pulse i{position:absolute;right:-50px;top:20%;width:28px;height:3px;background:#ce6344;border-radius:4px}.attack-pulse i:nth-child(2){top:40%;right:-80px}.attack-pulse i:nth-child(3){top:60%;right:-40px}.attack-pulse i:nth-child(4){top:80%;right:-70px}.attack-pulse i:nth-child(5){top:50%;right:-110px}
.is-revealed .attack-pulse{animation:packet-impact var(--dur-signal) ease-out both}.is-revealed .attack-pulse i{animation:packet-hit var(--dur-cross) ease-out both}
@keyframes packet-impact{0%{opacity:0;scale:.95}15%,45%{opacity:1}100%{opacity:0;scale:1.15}}
@keyframes packet-hit{from{translate:40px 0;opacity:1}to{translate:-160px 0;opacity:0}}
@media(max-width:760px){.attack-pulse{top:246px;right:4%;width:145px}}
@media(prefers-reduced-motion:reduce){.attack-pulse{display:none}}
/* Controls stay in document flow after reveal, including when buttons wrap. */
.paint-stage.is-revealed{padding-bottom:24px}.is-revealed .paint-bottom{position:relative;inset:auto;margin:32px 5% 0}

/* Softer coloured washes blend continuously into the portrait. */
:root:is([data-tone=dark],[data-tone=red]) .paint-stage .paint-wash{background:linear-gradient(90deg,color-mix(in srgb,var(--wash) 92%,transparent) 0%,color-mix(in srgb,var(--wash) 78%,transparent) 12%,color-mix(in srgb,var(--wash) 48%,transparent) 27%,color-mix(in srgb,var(--wash) 18%,transparent) 42%,transparent 62%)}
:root[data-tone=dark] .paint-stage{--wash-name:#ffcfb9}:root[data-tone=red] .paint-stage{--wash-name:#ffe0cb}
@media(max-width:760px){:root:is([data-tone=dark],[data-tone=red]) .paint-stage .paint-wash{background:linear-gradient(0deg,var(--wash) 0%,var(--wash) calc(100% - 570px),color-mix(in srgb,var(--wash) 82%,transparent) calc(100% - 480px),color-mix(in srgb,var(--wash) 42%,transparent) calc(100% - 390px),transparent calc(100% - 260px))}}

/* Full-viewport portrait, with a single clear wall-breaking invitation. */
.keystone-face{background:#fff9f278;border-color:#75635355;box-shadow:inset 1px 1px 0 #fff8,inset -1px -2px 0 #5b4e3925}
.keystone-grip{background:none;padding:12px;gap:8px}.keystone-grip b{font-size:15px;font-weight:600}.keystone-grip small{font:400 11px/1.4 var(--font-text);letter-spacing:0;text-transform:none}
@media(max-width:760px){.paint-stage[data-paint-stage] .paint-wash{background:linear-gradient(180deg,transparent calc(var(--scene-height)*.28),color-mix(in srgb,var(--wash) 22%,transparent) calc(var(--scene-height)*.45),color-mix(in srgb,var(--wash) 88%,transparent) calc(var(--scene-height)*.72),var(--wash) var(--scene-height))}.keystone,.attack-pulse{top:calc(var(--scene-height)*.48);width:164px;right:4%}.keystone-grip b{font-size:13px}.keystone-grip small{font-size:10px}.reveal-links{padding-top:calc(var(--scene-height) + 35px)}}
/* Interactive characters inhabit the portrait instead of a separate card gallery. */
.paint-stage.is-revealed{height:var(--scene-height);padding-bottom:0}

.reveal-links{position:absolute;inset:auto 4% 86px;z-index:5;padding:0;margin:0;display:none;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:24px}
.is-revealed .reveal-links{display:grid}.reveal-box{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;--activity-time:calc(var(--motion)*5s)}
.character{width:clamp(120px,14vw,200px);height:clamp(135px,15vw,205px);max-width:100%;margin:0;position:relative;filter:none;isolation:isolate}
.character-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 7px #2b172842);transform-origin:50% 80%;pointer-events:none}
.character::after{content:'';position:absolute;z-index:-1;bottom:0;left:20%;width:60%;height:9%;background:radial-gradient(ellipse,#33212542,transparent 70%);transform:scaleY(.5)}
.character-label{position:relative;max-width:100%;padding:7px 11px;border-radius:20px;background:var(--wash-pill);color:var(--wash-pill-ink);font:500 12px/1.4 var(--font-text);text-align:center}
.future-caption{display:none}.box-future .future-caption{display:block;font:500 9px/1.3 var(--font-text);color:var(--wash-pill-ink);background:var(--wash-pill);border-radius:10px;padding:3px 7px}
.box-future{position:relative}.box-future .future-caption{position:absolute;top:calc(100% + 3px)}
.box-credentials .character-art{inset:20% 18%;width:64%;height:64%;border-radius:50%}.box-future .character-art{inset:4%;width:92%;height:92%;filter:drop-shadow(0 7px 6px #40272544)}
.activity-orbit,.activity-hologram,.activity-spark,.activity-trail{display:none}
.is-revealed .paint-bottom{position:absolute;inset:auto 5% 22px;margin:0}
@media(min-width:761px) and (max-width:1100px){.reveal-links{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.character-label{font-size:10px;padding:6px 8px}}
:root:not(.js) .reveal-links{position:relative;inset:auto;padding-top:var(--scene-height);margin:20px 4%;display:grid}:root:not(.js) .reveal-box{animation:none}
@media(prefers-reduced-motion:reduce){.character-art,.activity-orbit,.activity-hologram,.activity-spark,.activity-trail{animation:none!important}.activity-trail{display:none}}
:root[data-motion=reduce] :is(.character-art,.activity-orbit,.activity-hologram,.activity-spark,.activity-trail){animation:none!important}

.reveal-box:focus-visible{outline:2px solid var(--wash-name);outline-offset:5px;border-radius:14px}




/* Site-wide themes: all reading surfaces share the same palette. */
:root[data-tone=dark]{--reading-bg:#211e22;--reading-card:#302a30;--reading-ink:#faf1e9;--reading-muted:#cfbfc5;--reading-line:#76636d;--reading-accent:#ffb59f}
:root[data-tone=red]{--reading-bg:#782f2b;--reading-card:#8b3b33;--reading-ink:#fff5eb;--reading-muted:#f5d2c8;--reading-line:#c48274;--reading-accent:#ffe0ad}
:root{--paper:var(--reading-bg);--paper-2:var(--reading-card);--paper-3:var(--reading-card);--ink:var(--reading-ink);--ink-2:var(--reading-muted);--ink-3:var(--reading-muted);--rule:var(--reading-line);--rule-2:var(--reading-line);--accent-ink:var(--reading-accent);--accent-wash:var(--reading-card);--focus:var(--reading-accent)}
html{background:var(--reading-bg)}
body{--paper-3:var(--reading-card);--rule:var(--reading-line);--rule-2:var(--reading-line)}
.hero-tones{background:var(--reading-card);border-color:var(--reading-line)}
.hero-tones button{color:var(--reading-ink);min-height:36px}
.hero-tones button[aria-pressed=true]{background:var(--reading-ink);color:var(--reading-bg)}
.hero-tones button:focus-visible{outline-color:var(--reading-accent)}
.inner-themes{position:static;flex-shrink:0;width:max-content}
:root:not(.js) .hero-tones{display:none}
/* The trigger occupies two missing stones. The red portrait is the actual layer beneath. */
.wall-ready .stone-wall{opacity:1}
.wall-ready .paint-front{visibility:hidden}
.is-collapsing .paint-front{opacity:0}
.is-collapsing .keystone{opacity:0;pointer-events:none}
.paint-stage.is-collapsing .cyber-floaters{opacity:0;visibility:hidden}
.is-collapsing .attack-pulse{animation:packet-impact var(--dur-signal) ease-out both}
.is-collapsing .attack-pulse i{animation:packet-hit var(--dur-cross) ease-out both}
.keystone{left:var(--hole-x,70%);top:var(--hole-y,43%);right:auto;width:var(--hole-w,26%);height:var(--hole-h,85px);aspect-ratio:auto;transform:none;touch-action:pan-y}
.keystone-face,.keystone:hover .keystone-face{display:flex;justify-content:center;gap:8px;border:0;border-radius:0;background:none;box-shadow:none;padding:6px}
.keystone-grip{padding:0;gap:3px;color:#fff7e9;text-shadow:0 1px 4px #3c1414,0 0 12px #3c1414}
.keystone-grip b{font-size:clamp(11px,1.2vw,17px)}
.keystone-grip small{font-size:10px}
.attack-agent{width:48px;height:58px;flex-shrink:0;overflow:visible;filter:drop-shadow(0 2px 3px #34191688);animation:agent-hover calc(var(--motion)*3s) ease-in-out infinite}
.agent-hood{fill:#292530;stroke:#ffcfb9;stroke-width:1.5}.agent-visor{fill:#100e18}.agent-eyes,.agent-signal{fill:none;stroke:#9ef3cf;stroke-width:2;stroke-linecap:round}.agent-laptop{fill:#443441;stroke:#ffcfb9;stroke-width:1.5}
.keystone:hover .agent-signal{stroke:#fff}.keystone:focus-visible{outline:3px solid #fff1d5;outline-offset:-4px}
.is-revealed .keystone{transform:none;opacity:0;pointer-events:none}
.attack-pulse{left:var(--hole-x);top:var(--hole-y);right:auto;width:var(--hole-w);height:var(--hole-h);aspect-ratio:auto}
.attack-pulse svg{stroke:#fff1d5}.attack-pulse i{background:#a8f5d5;box-shadow:0 0 8px #a8f5d5}
.is-revealed .attack-pulse{animation-duration:calc(var(--motion)*900ms)}
@keyframes agent-hover{0%,100%{translate:0 1px}50%{translate:0 -3px}}
@media(max-width:760px){.inner-themes{width:max-content}.inner-header .nav{column-gap:18px}.keystone-face{gap:4px}.attack-agent{width:32px;height:43px}.keystone-grip b{font-size:11px}.keystone-grip small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.attack-agent{animation:none}}
@media print{.hero-tones{display:none}.wall-ready .paint-front{visibility:visible}}

/* Keep the opening clear of the name's colour wash as well as the masonry. */
.wall-ready:not(.is-collapsing):not(.is-revealed) .paint-wash{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,var(--hole-x) var(--hole-y),var(--hole-x) calc(var(--hole-y) + var(--hole-h)),calc(var(--hole-x) + var(--hole-w)) calc(var(--hole-y) + var(--hole-h)),calc(var(--hole-x) + var(--hole-w)) var(--hole-y),var(--hole-x) var(--hole-y),0 0)}

/* Shared portrait layout: the name, trigger slot and image crop stay put on reveal. */
.paint-stage,.paint-stage.is-revealed{--scene-height:max(820px,100svh);height:var(--scene-height);min-height:var(--scene-height);padding-bottom:0}
.paint-stage .paint-copy{top:calc(var(--scene-height)*.2);left:6%;width:44%;transform:none;bottom:auto}
.paint-stage .paint-copy h1{font-size:clamp(64px,7.8vw,112px);line-height:1.3;padding-bottom:38px;margin-bottom:20px}
.paint-stage .name-stroke{bottom:32px}
.paint-stage .paint-copy h1 .name-variants{font-size:16px}
.paint-copy .keystone{position:relative;display:block;inset:auto;width:218px;height:64px;margin:0 0 18px;pointer-events:auto;transform:none}
.paint-copy .keystone:disabled{pointer-events:none}
.paint-copy .keystone-face{padding:8px;gap:8px}
.paint-copy .attack-agent{width:30px;height:38px;animation:none}
.paint-copy .keystone-grip b{font-size:13px}
.paint-copy .keystone-grip small{font-size:10px}
.paint-stage .reveal-links{inset:auto 5% 100px;align-items:start;gap:20px}
.paint-stage .reveal-box{gap:10px;--enter-delay:0ms;animation:character-arrive var(--dur-cross) ease-out both}
.paint-stage .character{width:108px;height:108px;max-width:100%;margin:0;translate:none;filter:none}
.paint-stage .character-art{inset:0;width:100%;height:100%;max-width:none;animation:none;transform:none;filter:none;object-fit:contain}
.paint-stage .box-governance .character-art{top:14%}
.paint-stage .box-credentials .character-art{inset:23% 12% auto;width:76%;height:76%}
.paint-stage .box-future .character-art{inset:-15% -25% auto;width:150%;height:150%}
.paint-stage .character::after{display:none}
.paint-stage .character-label{min-height:32px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:11px}
.paint-stage .box-future .future-caption{top:calc(100% + 5px);white-space:nowrap;font-size:8px}
.paint-stage .cyber-mascot{width:68px;animation:none}
.paint-stage .mascot-wave,.paint-stage .mascot-invite{animation:none}
@media(max-width:760px){
 .paint-stage,.paint-stage.is-revealed{--scene-height:max(940px,100svh)}
 .paint-stage .paint-front,.paint-stage .paint-back{object-position:60% center}
 .paint-stage .paint-copy{top:205px;left:6%;width:88%}
 .paint-stage .paint-copy h1{width:fit-content;font-size:clamp(48px,13vw,72px);padding:4px 12px 38px;margin-bottom:18px;transform:none;background:var(--wash-pill);border-radius:12px}
 .paint-stage .paint-copy h1 .name-variants{font-size:14px}
 .paint-stage .paint-links{gap:8px}
 .paint-stage .paint-links a{font-size:11px;padding:10px 15px}
 .paint-copy .keystone{width:196px;height:60px;margin-bottom:16px}
 .paint-stage .reveal-links{inset:auto 5% 105px;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 8px}
 .paint-stage .reveal-box{grid-column:span 2;gap:7px}
 .paint-stage .box-credentials{grid-column:2/span 2}
 .paint-stage .box-future{grid-column:4/span 2;width:auto;max-width:none}
 .paint-stage .character{width:80px;height:80px}
 .paint-stage .character-label{font-size:9px;min-height:30px;padding:5px 7px}
 .paint-stage .cyber-mascot{width:58px}
 .paint-stage .paint-bottom{bottom:18px}
}

/* Replayable, finite recognition entrances. Assets keep their original pixels. */
:root{--dur-entrance:calc(var(--motion)*2200ms);--dur-title:calc(var(--motion)*1000ms)}
.viewport-enter,.paint-stage .reveal-box.viewport-enter{opacity:.12;translate:none;animation:none;transition:none}
.viewport-enter.has-entered,.paint-stage .reveal-box.viewport-enter.has-entered{opacity:1;translate:none;transition:opacity var(--dur-title) ease-out var(--entrance-delay,0ms),translate var(--dur-title) var(--ease-out) var(--entrance-delay,0ms)}
.entrance-card.has-entered,.paint-stage .reveal-box.entrance-card.has-entered{transition-duration:var(--dur-entrance)}
.entrance-card.has-entered .cred-badge,.paint-stage .entrance-card.has-entered .character{animation:emblem-rise var(--dur-entrance) var(--ease-out) var(--entrance-delay,0ms) backwards}
.entrance-card.entrance-instant .cred-badge,.paint-stage .entrance-card.entrance-instant .character{animation:none}
@keyframes emblem-rise{from{transform:translateY(12px)}to{transform:none}}
.viewport-enter.entrance-instant,.viewport-enter:focus-within,.paint-stage .reveal-box.viewport-enter.entrance-instant,.paint-stage .reveal-box.viewport-enter:focus-within{opacity:1;translate:none;transition:none}
.decode-slot{position:relative;display:inline-block;max-width:100%;vertical-align:bottom}
.decode-source{opacity:1}
.decode-glyphs{position:absolute;inset:0;overflow:hidden;pointer-events:none;visibility:hidden}
.is-decoding>.decode-source{opacity:0}
.is-decoding>.decode-glyphs{visibility:visible}
@media(prefers-reduced-motion:reduce){.viewport-enter,.paint-stage .reveal-box.viewport-enter{opacity:1;translate:none;transition:none}.is-decoding>.decode-source{opacity:1}.decode-glyphs{display:none}}
:root[data-motion=reduce] .viewport-enter,:root[data-motion=reduce] .paint-stage .reveal-box.viewport-enter{opacity:1;translate:none;transition:none}
:root[data-motion=reduce] .is-decoding>.decode-source{opacity:1}
:root[data-motion=reduce] .decode-glyphs{display:none}
@media print{.viewport-enter,.paint-stage .reveal-box.viewport-enter{opacity:1!important;translate:none!important;transition:none!important}.is-decoding>.decode-source{opacity:1}.decode-glyphs{display:none}}